v2.0.8

CHANGELOG.md

@@ -0,0 +1,62 @@
+### [@coreui/react](https://coreui.io/) changelog
+
+##### `v2.0.8`
+- refactor(SidebarMinimizer): extract `togglePs` method
+- refactor(SidebarMinimizer): for use `togglePs` method
+- fix(SidebarMinimizer): add `componentDidMount` with `togglePs`
+- refactor(AsideToggler): extract `toggle` method
+- fix(AsideToggler): add missing `defaultOpen` prop
+- fix(Aside): deprecate `hidden` prop in v2 as conflicting with HTML5 `hidden` attribute
+- fix(Aside): `displayBreakpoint` behaviour
+- update `@coreui/coreui` to `^2.0.14`
+- update `reactstrap` to `^6.5.0`
+- update `enzyme` to `3.7.0`
+- update `enzyme-adapter-react-16` to `1.6.0`
+
+##### `v2.0.7`
+- fix(SidebarNav): dirty fix for rtl ps scrollingX issue
+
+##### `v2.0.6`
+- update `@coreui/coreui` to `^2.0.12`
+- update `@coreui/icons` to `0.3.0`
+- update `react-perfect-scrollbar` to `^1.2.2`
+- update `reactstrap` to `^6.4.0`
+- update `babel-eslint` to `^10.0.1`
+- update `enzyme` to `^3.6.0`
+- update `enzyme-adapter-react-16` to `^1.5.0`
+- update `eslint` to `^5.6.1`
+- update `eslint-plugin-import` to `^2.14.0`
+- update `eslint-plugin-react` to `^7.11.1`
+- update `nwb` to `^0.23.0`
+- update `react` to `^16.5.2`
+- update `react-dom` to `^16.5.2`
+- update `sinon` to `^5.1.1`
+
+##### `v2.0.5`
+- feat: hide onclick outside mobile sidebar
+- refactor: toggle-classes force
+- refactor: Shared/classes.js *Breakpoints
+- refactor: element-closest IE polyfill added
+- chore: dependencies update
+
+##### `v2.0.4`
+- refactor(Breadcrumb): fix for dynamic url like `/path/:id`
+- chore: update `prop-types` to `^15.6.2
+
+##### `v2.0.3`
+- fix: rollback to @coreui/icons v0.2.0
+
+##### `v2.0.2`
+- fix: remove AppLayout export as not production ready
+- chore: dependencies update
+- fix(Switch): not updating on props change - thanks @IceOnFire
+
+##### `v2.0.1`
+- chore: dependencies update
+
+##### `v2.0.0`
+- chore: dependencies update
+- refactor(demo): `@coreui/icons`
+
+##### `v2.0.0-rc.1`
+-fix: minimized sidebar scrollbar issue

demo/src/containers/DefaultLayout/DefaultLayout.js

@@ -84,7 +84,7 @@ class DefaultLayout extends Component {
               </Switch>
             </Container>
           </main>
-          <AppAside fixed hidden display="lg">
+          <AppAside fixed>
             Aside
           </AppAside>
         </div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "description": "CoreUI React Bootstrap 4 components",
   "license": "MIT",
   "author": {
@@ -43,16 +43,16 @@
     "react-onclickout": "^2.0.8",
     "react-perfect-scrollbar": "^1.2.2",
     "react-router-dom": "^4.3.1",
-    "reactstrap": "^6.4.0"
+    "reactstrap": "^6.5.0"
   },
   "peerDependencies": {
     "@coreui/coreui": "^2.0.14",
     "react": "16.x"
   },
   "devDependencies": {
     "babel-eslint": "^10.0.1",
-    "enzyme": "^3.6.0",
-    "enzyme-adapter-react-16": "^1.5.0",
+    "enzyme": "^3.7.0",
+    "enzyme-adapter-react-16": "^1.6.0",
     "eslint": "^5.6.1",
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-react": "^7.11.1",

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`

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');
 

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`

src/SidebarMinimizer.js

@@ -20,14 +20,27 @@ class AppSidebarMinimizer extends Component {
 
     this.handleClick = this.handleClick.bind(this);
   }
+
+  componentDidMount() {
+    const isMinimized = document.body.classList.contains('sidebar-minimized');
+    this.togglePs(!isMinimized)
+  }
+
   sidebarMinimize() {
-    document.body.classList.toggle('sidebar-minimized');
+    const isMinimized = document.body.classList.toggle('sidebar-minimized');
+    this.togglePs(!isMinimized)
+  }
+
+  togglePs(toggle) {
     const sidebar = document.querySelector('.sidebar-nav')
     if (sidebar) {
-      const toggleOn = sidebar.classList.toggle('ps');
-      sidebar.classList.toggle('scrollbar-container', toggleOn);
-      sidebar.classList.toggle('ps--active-y', toggleOn);
+      if (toggle) {
+        sidebar.classList.add('ps', 'ps-container', 'ps--active-y')
+      } else {
+        sidebar.classList.remove('ps', 'ps-container', 'ps--active-y')
+      }
     }
+
   }
 
   brandMinimize() {

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}/>);