From c0b31693a38c3619cc3b3d842f97557671c4f451 Mon Sep 17 00:00:00 2001 From: Vesa Luusua Date: Thu, 6 Apr 2017 14:18:05 +0300 Subject: [PATCH] Removed universality of Page level class toggle. (Might be added later.) --- .../ModalInMobile/ModalInMobile.example.js | 23 +++++------ src/components/ModalInMobile/ModalInMobile.js | 3 +- src/components/PageLayout/PageLayout.js | 28 +------------ src/containers/ListingPage/ListingPage.js | 15 +++++++ .../__snapshots__/ListingPage.test.js.snap | 7 ++-- .../__snapshots__/contextHelpers.test.js.snap | 39 ------------------- src/util/contextHelpers.test.js | 17 -------- 7 files changed, 31 insertions(+), 101 deletions(-) diff --git a/src/components/ModalInMobile/ModalInMobile.example.js b/src/components/ModalInMobile/ModalInMobile.example.js index e43f680f..7306b8f7 100644 --- a/src/components/ModalInMobile/ModalInMobile.example.js +++ b/src/components/ModalInMobile/ModalInMobile.example.js @@ -1,9 +1,14 @@ /* eslint-disable no-console, import/prefer-default-export */ -import React, { Component, PropTypes } from 'react'; +import React, { Component } from 'react'; import { Button } from '../../components'; import ModalInMobile from './ModalInMobile'; import css from './ModalInMobile.example.css'; +const togglePageClassNames = (className, addClass = true) => { + // We are just checking the value for now + console.log('Toggling ModalInMobile - currently:', className, addClass); +} + class ModalInMobileWrapper extends Component { constructor(props) { super(props); @@ -11,15 +16,6 @@ class ModalInMobileWrapper extends Component { this.handleOpen = this.handleOpen.bind(this); } - getChildContext() { - return { - togglePageClassNames: (className, addClass = true) => { - // We are just checking the value for now - console.log('Toggling ModalInMobile - currently:', className, addClass); - }, - }; - } - handleOpen() { this.setState({ isOpen: true }); } @@ -28,7 +24,10 @@ class ModalInMobileWrapper extends Component { return (
Wrapper text before ModalInMobile - + Some content inside ModalInMobile component @@ -37,8 +36,6 @@ class ModalInMobileWrapper extends Component { } } -ModalInMobileWrapper.childContextTypes = { togglePageClassNames: PropTypes.func.isRequired }; - export const Empty = { component: ModalInMobileWrapper, props: { diff --git a/src/components/ModalInMobile/ModalInMobile.js b/src/components/ModalInMobile/ModalInMobile.js index a5066d46..4a3cbba2 100644 --- a/src/components/ModalInMobile/ModalInMobile.js +++ b/src/components/ModalInMobile/ModalInMobile.js @@ -15,7 +15,6 @@ import React, { Component, PropTypes } from 'react'; import classNames from 'classnames'; import { intlShape, injectIntl } from 'react-intl'; import { Button } from '../../components'; -import { withTogglePageClassNames } from '../../util/contextHelpers'; import css from './ModalInMobile.css'; export class ModalInMobileComponent extends Component { @@ -139,4 +138,4 @@ ModalInMobileComponent.propTypes = { togglePageClassNames: func.isRequired, }; -export default withTogglePageClassNames(injectIntl(ModalInMobileComponent)); +export default injectIntl(ModalInMobileComponent); diff --git a/src/components/PageLayout/PageLayout.js b/src/components/PageLayout/PageLayout.js index 96e3b0bc..d80563eb 100644 --- a/src/components/PageLayout/PageLayout.js +++ b/src/components/PageLayout/PageLayout.js @@ -3,7 +3,6 @@ import { connect } from 'react-redux'; import Helmet from 'react-helmet'; import { withRouter } from 'react-router-dom'; import { FormattedMessage } from 'react-intl'; -import { union, without } from 'lodash'; import classNames from 'classnames'; import { Topbar } from '../../containers'; @@ -15,18 +14,6 @@ const scrollToTop = () => { }; class PageLayout extends Component { - constructor(props) { - super(props); - this.state = { - pageClassNames: '', - }; - this.togglePageClassNames = this.togglePageClassNames.bind(this); - } - - getChildContext() { - return { togglePageClassNames: this.togglePageClassNames }; - } - componentDidMount() { this.historyUnlisten = this.props.history.listen(() => scrollToTop()); } @@ -37,17 +24,6 @@ class PageLayout extends Component { } } - togglePageClassNames(className, addClass = true) { - this.setState(prevState => { - const prevPageClassNames = prevState.pageClassNames.split(' '); - const pageClassNames = addClass - ? union(prevPageClassNames, [className]).join(' ') - : without(prevPageClassNames, className).join(' '); - - return { pageClassNames }; - }); - } - render() { const { className, title, children, authInfoError, logoutError } = this.props; @@ -63,7 +39,7 @@ class PageLayout extends Component { /* eslint-enable no-console */ return ( -
+
{title} @@ -88,8 +64,6 @@ class PageLayout extends Component { const { any, string, instanceOf, func, shape } = PropTypes; -PageLayout.childContextTypes = { togglePageClassNames: func.isRequired }; - PageLayout.defaultProps = { className: '', children: null, authInfoError: null, logoutError: null }; PageLayout.propTypes = { diff --git a/src/containers/ListingPage/ListingPage.js b/src/containers/ListingPage/ListingPage.js index 3c746cdd..0d4ad533 100644 --- a/src/containers/ListingPage/ListingPage.js +++ b/src/containers/ListingPage/ListingPage.js @@ -1,6 +1,7 @@ import React, { Component, PropTypes } from 'react'; import { intlShape, injectIntl } from 'react-intl'; import { connect } from 'react-redux'; +import { union, without } from 'lodash'; import config from '../../config'; import { types } from '../../util/sdkLoader'; import { convertMoneyToNumber } from '../../util/currency'; @@ -36,7 +37,20 @@ export class ListingPageComponent extends Component { const tab = props.tab; this.state = { isBookingModalOpenOnMobile: tab && tab === 'book', + pageClassNames: '', }; + this.togglePageClassNames = this.togglePageClassNames.bind(this); + } + + togglePageClassNames(className, addClass = true) { + this.setState(prevState => { + const prevPageClassNames = prevState.pageClassNames.split(' '); + const pageClassNames = addClass + ? union(prevPageClassNames, [className]).join(' ') + : without(prevPageClassNames, className).join(' '); + + return { pageClassNames }; + }); } render() { @@ -100,6 +114,7 @@ export class ListingPageComponent extends Component { onClose={() => this.setState({ isBookingModalOpenOnMobile: false })} showAsModalMaxWidth={MODAL_BREAKPOINT} title={bookBtnMessage} + togglePageClassNames={this.togglePageClassNames} > ModalInMobile content diff --git a/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap b/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap index e91613fe..86fd23dc 100644 --- a/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap +++ b/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap @@ -17,15 +17,16 @@ exports[`ListingPage matches snapshot 1`] = ` "__html": "listing1 description", } } /> - + title="ListingPage.ctaButtonMessage" + togglePageClassNames={[Function]}> ModalInMobile content - +
`; - -exports[`util/contextHelpers.js withTogglePageClassNames should inject the provided function 1`] = ` -
-
-
- - - -
- -
-
-
- function -
-
-
-`; diff --git a/src/util/contextHelpers.test.js b/src/util/contextHelpers.test.js index 30058282..4ccdaff0 100644 --- a/src/util/contextHelpers.test.js +++ b/src/util/contextHelpers.test.js @@ -29,21 +29,4 @@ describe('util/contextHelpers.js', () => { expect(deepTree).toMatchSnapshot(); }); }); - - describe('withTogglePageClassNames', () => { - it('should inject the provided function', () => { - const CompComp = props =>
{typeof props.togglePageClassNames}
; - CompComp.propTypes = { togglePageClassNames: func.isRequired }; - const Comp = withTogglePageClassNames(CompComp); - - const deepTree = renderDeep( - - - - - - ); - expect(deepTree).toMatchSnapshot(); - }); - }); });