refactor(AsideToggler): extract toggle method, add missing defaultOpen prop

xidedix · xidedix · commit aca561b3aa17 · 2018-10-05T16:48:29.000+02:00
diff --git a/src/AsideToggler.js b/src/AsideToggler.js
@@ -1,19 +1,21 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { asideMenuCssClasses } from './Shared/index';
+import { asideMenuCssClasses, validBreakpoints, checkBreakpoint } from './Shared/index';
 import toggleClasses from './Shared/toggle-classes';
 
 const propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
+  defaultOpen: PropTypes.bool,
   display: PropTypes.any,
   mobile: PropTypes.bool,
   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   type: PropTypes.string
 };
 
 const defaultProps = {
+  defaultOpen: false,
   display: 'lg',
   mobile: false,
   tag: 'button',
@@ -28,27 +30,30 @@ class AppAsideToggler extends Component {
     this.state = {};
   }
 
-  asideToggle(e) {
-    e.preventDefault();
+  componentDidMount() {
+    this.toggle(this.props.defaultOpen)
+  }
 
-    if (this.props.mobile) {
-      document.body.classList.toggle('aside-menu-show');
-    } else {
-      const display = this.props.display;
-      const cssTemplate = `aside-menu-${display}-show`;
-      let [cssClass] = asideMenuCssClasses[0];
-      if (display && asideMenuCssClasses.indexOf(cssTemplate) > -1) {
-        cssClass = cssTemplate;
-      }
-      toggleClasses(cssClass, asideMenuCssClasses);
+  toggle (force) {
+    const [display, mobile] = [this.props.display, this.props.mobile];
+    let cssClass = asideMenuCssClasses[0];
+    if (!mobile && display && checkBreakpoint(display, validBreakpoints)) {
+      cssClass = `aside-menu-${display}-show`
     }
+    toggleClasses(cssClass, asideMenuCssClasses, force)
+  }
+
+  asideToggle(e) {
+    e.preventDefault();
+    this.toggle()
   }
 
   render() {
     const { className, children, type, tag: Tag, ...attributes } = this.props;
 
-    delete attributes.display
-    delete attributes.mobile
+    delete attributes.defaultOpen;
+    delete attributes.display;
+    delete attributes.mobile;
 
     const classes = classNames(className, 'navbar-toggler');
 
diff --git a/src/AsideToggler.md b/src/AsideToggler.md
@@ -5,6 +5,7 @@ prop | default
 --- | ---
 children  | `<span className="navbar-toggler-icon" />`
 className | `navbar-toggler`
+defaultOpen| `false`
 display   | `lg`
 mobile    | `false`
 tag       | `button`
