Merge pull request #101 from coreui/dev-v2.5.5-fix

v2.5.5 fix

.gitignore

@@ -1,6 +1,7 @@
 # See https://help.github.com/ignore-files/ for more about ignoring files.
 
 # dependencies
+node_modules
 /node_modules
 package-lock.json
 

CHANGELOG.md

@@ -1,5 +1,9 @@
 ### [@coreui/react](https://coreui.io/) changelog
 
+##### `v2.5.5`
+- fix(SidebarNav): perfect scrollbar issue on sidebar minimized / rtl
+- chore: dependencies update and config refactor
+
 ##### `v2.5.4`
 - fix(SidebarNav): allow location object as navConfig item url parameter
 

css/scrollbar.css

@@ -0,0 +1,18 @@
+/* rtl fix */
+.ps__rtl .ps__rail-y {
+    left: 0px !important;
+    right: unset;
+}
+*[dir="rtl"] .ps__rail-y {
+    left: 0px !important;
+    right: unset;
+}
+
+.ps__rtl .ps__thumb-y {
+    left: 2px;
+    right: unset;
+}
+*[dir="rtl"] .ps__thumb-y {
+  left: 2px;
+  right: unset;
+}

nwb.config.js

@@ -5,7 +5,8 @@ module.exports = {
     umd: {
       global: 'CoreUIReact',
       externals: {
-        react: 'React'
+        react: 'React',
+        'react-router': 'ReactRouter'
       }
     }
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "2.5.4",
+  "version": "2.5.5",
   "description": "CoreUI React Bootstrap 4 components",
   "license": "MIT",
   "author": {
@@ -35,32 +35,32 @@
     "lint": "eslint src"
   },
   "dependencies": {
-    "@coreui/icons": "0.3.0",
     "classnames": "^2.2.6",
-    "core-js": "^2.6.9",
+    "core-js": "^2.6.11",
     "prop-types": "^15.7.2",
     "react-onclickout": "^2.0.8",
-    "react-perfect-scrollbar": "^1.5.3",
-    "reactstrap": "^8.0.1"
+    "react-perfect-scrollbar": "~1.5.8"
   },
   "peerDependencies": {
-    "@coreui/coreui": "^2.1.12",
-    "react": "^16.10.1",
-    "react-router-dom": "^5.1.2"
+    "@coreui/coreui": "^2.1.16",
+    "react": "^16.12.0",
+    "react-router-dom": "^5.1.2",
+    "mutationobserver-shim": "^0.3.3"
   },
   "devDependencies": {
+    "@coreui/icons": "~0.3.0",
     "babel-eslint": "^10.0.3",
-    "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.14.0",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
     "eslint": "^5.16.0",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-react": "^7.15.1",
+    "eslint-plugin-import": "^2.20.1",
+    "eslint-plugin-react": "^7.18.3",
     "nwb": "^0.23.0",
-    "react": "^16.10.1",
-    "react-dom": "^16.10.1",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
     "react-router-dom": "^5.1.2",
-    "sinon": "^5.1.1",
-    "webpack-dev-server": "^3.8.1"
+    "reactstrap": "^8.4.1",
+    "sinon": "^5.1.1"
   },
   "repository": {
     "type": "git",

src/Shared/layout/layout.js

@@ -10,24 +10,58 @@ class LayoutHelper {
   }
 
   static sidebarMinimize(force) {
-    // return this.elClassList.toggle('sidebar-minimized', force);
     return this.toggleClass('sidebar-minimized', force);
   }
 
   static brandMinimize(force) {
-    // this.elClassList.toggle('brand-minimized', force);
     this.toggleClass('brand-minimized', force);
   }
 
-  //  sidebar perfect scrollbar
+  //  sidebar perfect scrollbar ugly hack
   static sidebarPSToggle(toggle) {
+
+    if (this.isOnMobile()) {
+      toggle = true
+    } else {
+      const isSidebarMinimized = document.body.classList.contains('sidebar-minimized') || false
+      toggle = !isSidebarMinimized
+    }
+
+    const ps = { y: { rail: {}, thumb: {} } };
+    const isRtl = getComputedStyle(document.documentElement).direction === 'rtl'
     const sidebar = document.querySelector('.sidebar-nav');
+    ps.y.rail.on = document.querySelector('.sidebar-nav .ps__rail-y');
+    ps.y.rail.off = document.querySelector('.sidebar-nav .ps__rail-y-off');
+    ps.y.thumb.on = document.querySelector('.sidebar-nav .ps__thumb-y');
+    ps.y.thumb.off = document.querySelector('.sidebar-nav .ps__thumb-y-off');
     if (sidebar) {
       if (toggle) {
         sidebar.classList.add('ps');
         sidebar.classList.add('ps-container');
         sidebar.classList.add('ps--active-y');
+        if (ps.y.rail.off) {
+          ps.y.rail.off.classList.add('ps__rail-y');
+          ps.y.rail.off.removeAttribute('style');
+          ps.y.rail.off.style.left = isRtl ? '0px' : 'unset';
+          ps.y.rail.off.style.right = isRtl ? 'unset' : '0px';
+          ps.y.rail.off.classList.remove('ps__rail-y-off');
+        }
+        if (ps.y.thumb.off) {
+          ps.y.thumb.off.removeAttribute('style');
+          ps.y.thumb.off.classList.add('ps__thumb-y');
+          ps.y.thumb.off.classList.remove('ps__thumb-y-off');
+        }
       } else {
+        if (ps.y.rail.on) {
+          ps.y.rail.on.classList.add('ps__rail-y-off');
+          ps.y.rail.on.removeAttribute('style');
+          ps.y.rail.on.classList.remove('ps__rail-y');
+        }
+        if (ps.y.thumb.on) {
+          ps.y.thumb.on.classList.add('ps__thumb-y-off');
+          ps.y.thumb.on.removeAttribute('style');
+          ps.y.thumb.on.classList.remove('ps__thumb-y');
+        }
         sidebar.classList.remove('ps');
         sidebar.classList.remove('ps-container');
         sidebar.classList.remove('ps--active-y');
@@ -46,6 +80,23 @@ class LayoutHelper {
     }
     return this.elClassList.contains(className);
   }
+
+  static isOnMobile() {
+    let onMobile = false;
+    try {
+     const minimizerElement = document.querySelector('.sidebar-minimizer');
+     if (minimizerElement) {
+       onMobile = getComputedStyle(minimizerElement).getPropertyValue('display') === 'none';
+     } else {
+       const sidebarElement = document.querySelector('.sidebar .sidebar-nav');
+       sidebarElement && (onMobile = getComputedStyle(sidebarElement).getPropertyValue('overflow-y') === 'auto');
+     }
+    } catch (ignore) {
+      // eslint-disable-next-line
+      console.warn('CoreUI isOnMobile failed to getComputedStyle', ignore)
+    }
+    return onMobile
+  }
 }
 
 export default LayoutHelper;

src/SidebarNav2.js

@@ -4,6 +4,9 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import PerfectScrollbar from 'react-perfect-scrollbar';
 import 'react-perfect-scrollbar/dist/css/styles.css';
+import '../css/scrollbar.css';
+
+import LayoutHelper from './Shared/layout/layout'
 
 const propTypes = {
   children: PropTypes.node,
@@ -39,17 +42,26 @@ class AppSidebarNav2 extends Component {
     this.handleClick = this.handleClick.bind(this);
     this.activeRoute = this.activeRoute.bind(this);
     this.hideMobile = this.hideMobile.bind(this);
+
+    this.changes = null;
+    this.state = { sidebarMinimized: false }
   }
 
+  _scrollBarRef = null;
+
   handleClick(e) {
     e.preventDefault();
     e.currentTarget.parentElement.classList.toggle('open');
   }
 
-  activeRoute(routeName, props) {
+  isActiveRoute(routeName, props) {
     return props.location.pathname.indexOf(routeName) > -1
-      ? 'nav-item nav-dropdown open'
-      : 'nav-item nav-dropdown';
+  }
+
+  activeRoute(routeName, props) {
+    return this.isActiveRoute(routeName, props) ?
+      'nav-item nav-dropdown open' :
+      'nav-item nav-dropdown';
   }
 
   hideMobile() {
@@ -148,6 +160,7 @@ class AppSidebarNav2 extends Component {
 
   // nav link
   navLink(item, key, classes) {
+    const ref = React.createRef();
     const url = item.url || '';
     const itemIcon = <i className={classes.icon} />
     const itemBadge = this.navBadge(item.badge)
@@ -171,7 +184,7 @@ class AppSidebarNav2 extends Component {
             <RsNavLink href={url} className={classes.link} active {...attributes}>
               {itemIcon}{item.name}{itemBadge}
             </RsNavLink> :
-            <NavLink to={url} className={classes.link} activeClassName="active" onClick={this.hideMobile} {...attributes}>
+            <NavLink to={url} className={classes.link} activeClassName="active" onClick={() => this.hideMobile(ref)} ref={ref} {...attributes}>
               {itemIcon}{item.name}{itemBadge}
             </NavLink>
         }
@@ -200,6 +213,45 @@ class AppSidebarNav2 extends Component {
     return link.substring(0, 4) === 'http';
   }
 
+  observeDomMutations() {
+    if (window.MutationObserver) {
+
+      // eslint-disable-next-line
+      this.changes = new MutationObserver((mutations) => {
+
+        const isSidebarMinimized = document.body.classList.contains('sidebar-minimized') || false
+        this.setState({ sidebarMinimized: isSidebarMinimized })
+
+        LayoutHelper.sidebarPSToggle(!isSidebarMinimized)
+
+      });
+      const element = document.body;
+      this.changes.observe(element, {
+        attributes: true,
+        attributeFilter: ['class']
+      });
+    }
+    window.addEventListener('resize', this.onResize);
+  }
+
+  onResize() {
+    LayoutHelper.sidebarPSToggle(true)
+  }
+
+  componentDidMount() {
+    this.observeDomMutations()
+  }
+
+  componentWillUnmount() {
+    try {
+      this.changes.disconnect()
+      window.removeEventListener('resize', this.onResize);
+    } catch (ignore) {
+      // eslint-disable-next-line
+      console.warn('CoreUI SidebarNav failed to disconnect from MutationObserver', ignore)
+    }
+  }
+
   render() {
     const { className, children, navConfig, ...attributes } = this.props;
 
@@ -208,18 +260,17 @@ class AppSidebarNav2 extends Component {
     delete attributes.Tag
     delete attributes.router
 
-    const navClasses = classNames(className, 'sidebar-nav');
+    const navClasses = classNames(className, 'sidebar-nav')
 
-    // ToDo: find better rtl fix
-    const isRtl = getComputedStyle(document.documentElement).direction === 'rtl'
+    const options = Object.assign({}, { suppressScrollX: true, suppressScrollY: this.state.sidebarMinimized })
 
     // sidebar-nav root
     return (
-      <PerfectScrollbar className={navClasses} {...attributes} options={{ suppressScrollX: !isRtl }} >
-        <Nav>
-          {children || this.navList(navConfig.items)}
-        </Nav>
-      </PerfectScrollbar>
+        <PerfectScrollbar className={navClasses} {...attributes} options={options} ref = {(ref) => { this._scrollBarRef = ref; }} >
+          <Nav>
+            {children || this.navList(navConfig.items)}
+          </Nav>
+        </PerfectScrollbar>
     );
   }
 }