From 3dd58e8f0890e8ac2e57fef02d66fceb66e92693 Mon Sep 17 00:00:00 2001 From: xidedix Date: Thu, 27 Feb 2020 00:02:27 +0100 Subject: [PATCH 1/2] fix(SidebarNav): navigate to route on SidebarNav parent menu click - closes #98 --- src/SidebarNav.md | 23 +++++++++++++++++++++++ src/SidebarNav2.js | 25 ++++++++++++++++++------- 2 files changed, 41 insertions(+), 7 deletions(-) diff --git a/src/SidebarNav.md b/src/SidebarNav.md index d9b81f39..630f9d84 100644 --- a/src/SidebarNav.md +++ b/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: () => }, + { path: '/base/cards', name: 'Cards', component: Cards }, + { path: '/base/forms', name: 'Forms', component: Forms }, + ... +] +``` + - divider: ```json5 { diff --git a/src/SidebarNav2.js b/src/SidebarNav2.js index 9ae699e4..208ec644 100644 --- a/src/SidebarNav2.js +++ b/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 ( -
  • - +
  • + this.handleClick(e, item)}> + {item.name}{this.navBadge(item.badge)} - +
      {this.navList(item.children)}
    From 16af3ebea9249e5900dc2f2b7945276928b11a5f Mon Sep 17 00:00:00 2001 From: xidedix Date: Thu, 27 Feb 2020 00:03:39 +0100 Subject: [PATCH 2/2] Ship: v2.5.6 --- CHANGELOG.md | 7 +++++++ nwb.config.js | 3 ++- package.json | 9 +++++---- 3 files changed, 14 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 54cb3f44..12a59f61 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/nwb.config.js b/nwb.config.js index daf1fac2..37bf40ce 100644 --- a/nwb.config.js +++ b/nwb.config.js @@ -6,7 +6,8 @@ module.exports = { global: 'CoreUIReact', externals: { react: 'React', - 'react-router': 'ReactRouter' + 'react-router': 'ReactRouter', + 'react-router-dom': 'ReactRouterDom' } } } diff --git a/package.json b/package.json index 06e160ca..1cc17388 100644 --- a/package.json +++ b/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"