Merge pull request #104 from coreui/dev-v2.5.6-fix

v2.5.6

Author: xidedix

CHANGELOG.md

@@ -1,5 +1,12 @@
 ### [@coreui/react](https://coreui.io/) changelog
 
+##### `v2.5.6`
+- fix(SidebarNav): navigate to route on AppSideBarNav parent menu click - thanx @regimani #98 
+
+###### dependencies update
+- update `react` to `^16.13.0`
+- update `react-dom` to `^16.13.0`
+
 ##### `v2.5.5`
 - fix(SidebarNav): perfect scrollbar issue on sidebar minimized / rtl
 - chore: dependencies update and config refactor

nwb.config.js

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "2.5.5",
+  "version": "2.5.6",
   "description": "CoreUI React Bootstrap 4 components",
   "license": "MIT",
   "author": {
@@ -44,20 +44,21 @@
   "peerDependencies": {
     "@coreui/coreui": "^2.1.16",
     "react": "^16.12.0",
+    "react-dom": "^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",
+    "babel-eslint": "^10.1.0",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "eslint": "^5.16.0",
     "eslint-plugin-import": "^2.20.1",
     "eslint-plugin-react": "^7.18.3",
     "nwb": "^0.23.0",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
+    "react": "^16.13.0",
+    "react-dom": "^16.13.0",
     "react-router-dom": "^5.1.2",
     "reactstrap": "^8.4.1",
     "sinon": "^5.1.1"

src/SidebarNav.md

@@ -120,6 +120,29 @@ __React Router NavLink props to pass in `attributes` object:__
   ]
 }
 ```
+To override default behavior of `nav-dropdown toggle` and navigate to `url` use custom `onClick` method:
+```json5
+{
+  name: 'Base',
+  url: '/base',
+  icon: 'icon-puzzle',
+  attributes: {onClick: (e, item)=>{ console.log(e, item) }}, // (v2.5.6 up) optional
+  children: []
+}
+``` 
+For active route consistency, you can set redirect on partial routes in `src/routes.js`: 
+```js
+import { Redirect } from 'react-router-dom';
+...
+const routes = [
+  ...
+  { path: '/base', exact: true, name: 'Base', component: () => <Redirect to={'/base/cards'}/> },
+  { path: '/base/cards', name: 'Cards', component: Cards },
+  { path: '/base/forms', name: 'Forms', component: Forms },
+  ...
+]
+```
+
 - divider:
 ```json5
 {

src/SidebarNav2.js

@@ -49,8 +49,12 @@ class AppSidebarNav2 extends Component {
 
   _scrollBarRef = null;
 
-  handleClick(e) {
-    e.preventDefault();
+  handleClick(e, item) {
+    if (item.attributes && typeof item.attributes.onClick  === 'function' && !this.isActiveRoute(item.url, this.props)) {
+      item.attributes.onClick(e, item)
+    } else {
+      e.preventDefault();
+    }
     e.currentTarget.parentElement.classList.toggle('open');
   }
 
@@ -71,7 +75,7 @@ class AppSidebarNav2 extends Component {
   }
 
   getAttribs(attributes) {
-    return JSON.parse(JSON.stringify(attributes || {}));
+    return {...attributes};
   }
 
   // nav list
@@ -132,14 +136,21 @@ class AppSidebarNav2 extends Component {
     delete attributes.class;
     delete attributes.className;
     const itemAttr = this.getAttribs(item.itemAttr);
-    const liClasses = classNames(this.activeRoute(item.url, this.props), itemAttr.class, itemAttr.className)
+    const liClasses = classNames('nav-item', 'nav-dropdown', itemAttr.class, itemAttr.className);
     delete itemAttr.class;
     delete itemAttr.className;
+    const NavLink = this.props.router.NavLink || RsNavLink;
+
     return (
-      <li key={key} className={liClasses} {...itemAttr}>
-        <a className={classes} href="#" onClick={this.handleClick} {...attributes}><i className={classIcon}/>
+      <li key={key} className={classNames(liClasses, {'open': this.isActiveRoute(item.url, this.props)})} {...itemAttr}>
+        <NavLink activeClassName='open'
+                 className={classes}
+                 to={item.url || ''}
+                 {...attributes}
+                 onClick={(e) => this.handleClick(e, item)}>
+          <i className={classIcon}/>
           {item.name}{this.navBadge(item.badge)}
-        </a>
+        </NavLink>
         <ul className="nav-dropdown-items">
           {this.navList(item.children)}
         </ul>