From 1b90415b716045ce6b975bcaca7c4f8fd82944f6 Mon Sep 17 00:00:00 2001 From: xidedix Date: Fri, 5 Oct 2018 16:42:45 +0200 Subject: [PATCH 1/6] fix(Aside): deprecate `hidden` prop, tune `displayBreakpoint` behaviour --- src/Aside.js | 20 +++++--------------- src/Aside.md | 6 +++--- tests/Aside.test.js | 9 ++------- 3 files changed, 10 insertions(+), 25 deletions(-) diff --git a/src/Aside.js b/src/Aside.js index 669ae98b..aba1295e 100644 --- a/src/Aside.js +++ b/src/Aside.js @@ -1,14 +1,14 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import { asideMenuCssClasses } from './Shared'; +import { asideMenuCssClasses, checkBreakpoint, validBreakpoints } from './Shared'; +import toggleClasses from './Shared/toggle-classes'; const propTypes = { children: PropTypes.node, className: PropTypes.string, display: PropTypes.string, fixed: PropTypes.bool, - hidden: PropTypes.bool, isOpen: PropTypes.bool, offCanvas: PropTypes.bool, tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]) @@ -18,7 +18,6 @@ const defaultProps = { tag: 'aside', display: '', fixed: false, - hidden: false, isOpen: false, offCanvas: true }; @@ -28,22 +27,16 @@ class AppAside extends Component { super(props); this.isFixed = this.isFixed.bind(this); - this.isHidden = this.isHidden.bind(this); this.isOffCanvas = this.isOffCanvas.bind(this); this.displayBreakpoint = this.displayBreakpoint.bind(this); } componentDidMount() { this.isFixed(this.props.fixed); - this.isHidden(this.props.hidden); this.isOffCanvas(this.props.offCanvas); this.displayBreakpoint(this.props.display); } - isHidden(hidden) { - if (hidden) { document.body.classList.add('aside-menu-hidden'); } - } - isFixed(fixed) { if (fixed) { document.body.classList.add('aside-menu-fixed'); } } @@ -53,12 +46,10 @@ class AppAside extends Component { } displayBreakpoint(display) { - const cssTemplate = `aside-menu-${display}-show`; - let [cssClass] = asideMenuCssClasses[0]; - if (display && asideMenuCssClasses.indexOf(cssTemplate) > -1) { - cssClass = cssTemplate; + if (display && checkBreakpoint(display, validBreakpoints)) { + const cssClass = `aside-menu-${display}-show` + toggleClasses(cssClass, asideMenuCssClasses, true) } - document.body.classList.add(cssClass); } render() { @@ -66,7 +57,6 @@ class AppAside extends Component { delete attributes.display delete attributes.fixed - delete attributes.hidden delete attributes.offCanvas delete attributes.isOpen diff --git a/src/Aside.md b/src/Aside.md index d8a78d1d..7f8fa2a4 100644 --- a/src/Aside.md +++ b/src/Aside.md @@ -2,11 +2,11 @@ | prop | default | | ------- | --------- -| children | +| children | | className | `aside-menu` -| display | `sm, md, lg, xl, ""` +| display | `sm, md, lg, xl, ""` | fixed | `false` -| hidden | `false` +| hidden | `false` *deprecated* in v2 as conflicting with HTML5 `hidden` attribute | isOpen | `false` | offCanvas | `true` | tag | `aside` diff --git a/tests/Aside.test.js b/tests/Aside.test.js index 15e32696..b7f3d226 100644 --- a/tests/Aside.test.js +++ b/tests/Aside.test.js @@ -12,20 +12,15 @@ configure({ adapter: new Adapter() }); describe('AppAside', () => { it('renders aside with class="aside-menu"', () => { - expect(render()) + expect(render(aside)) .toContain('') }); it('calls componentDidMount', () => { spy(AppAside.prototype, 'componentDidMount'); - const wrapper = mount(