fix(Aside): deprecate hidden prop, tune displayBreakpoint behaviour

Author: xidedix

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,20 +46,17 @@ 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() {
     const { className, children, tag: Tag, ...attributes } = this.props;
 
     delete attributes.display
     delete attributes.fixed
-    delete attributes.hidden
     delete attributes.offCanvas
     delete attributes.isOpen
 

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`

tests/Aside.test.js

@@ -12,20 +12,15 @@ configure({ adapter: new Adapter() });
 
 describe('AppAside', () => {
   it('renders aside with class="aside-menu"', () => {
-    expect(render(<AppAside fixed hidden offCanvas display="lg">aside</AppAside>))
+    expect(render(<AppAside fixed offCanvas display="lg">aside</AppAside>))
     .toContain('<aside class="aside-menu">aside</aside>')
   });
   it('calls componentDidMount', () => {
     spy(AppAside.prototype, 'componentDidMount');
 
-    const wrapper = mount(<AppAside fixed hidden display="lg" />);
+    const wrapper = mount(<AppAside fixed />);
     expect(AppAside.prototype.componentDidMount.calledOnce).toEqual(true);
   });
-  it('should call isHidden()', () => {
-    const isHidden = spy(AppAside.prototype, 'isHidden');
-    shallow(<AppAside />);
-    expect(isHidden.called).toBe(true);
-  });
   it('should call isOffCanvas()', () => {
     const isOffCanvas = spy(AppAside.prototype, 'isOffCanvas');
     shallow(<AppAside offCanvas={false}/>);