v2.5.0

CHANGELOG.md

@@ -1,5 +1,49 @@
 ### [@coreui/react](https://coreui.io/) changelog
 
+##### `v2.5.0`
+- BREAKING CHANGE release for use with `react-router-dom v5`
+  - feat(Breadcrumb2): mandatory prop `router` :boom: see: [Breadcrumb](./src/Breadcrumb.md)
+  - feat(SidebarNav2): mandatory prop `router` :boom: see: [SidebarNav](./src/SidebarNav.md)
+- refactor: demo update
+- refactor(SidebarNav): rename `options` prop for PerfectScrollbar 
+
+###### dependencies update
+- update `react-router-dom` to `^5.0.0` -> moved to `peerDependencies`
+
+__BREAKING CHANGES:__ :boom:
+- removed `react-router-dom` from `dependencies`
+- deprecate 'Breadcrumb' in favour of `Breadcrumb2`
+- deprecate 'SidebarNav' in favour of `SidebarNav2`
+
+usage in `DefaultLayout.js`:
+```jsx
+import * as router from 'react-router-dom';
+import { 
+AppBreadcrumb2 as AppBreadcrumb
+AppSidebarNav2 as AppSidebarNav
+} from '@coreui/react';
+// routes config
+import routes from '../../routes.js';
+```
+
+```html
+...
+<div className="app-body">
+  <AppSidebar fixed display="lg">
+    <AppSidebarNav navConfig={navigation} {...this.props} router={router}/>
+    <AppSidebarMinimizer />
+  </AppSidebar>
+  <main className="main">
+    <AppBreadcrumb appRoutes={routes} router={router}></AppBreadcrumb>
+    ...
+  </main>
+  ...
+</div>
+...
+```
+
+---
+
 ##### `v2.1.7`
 - maintenance release for use with:
   - react-router `v4.3.x`

demo/src/containers/DefaultLayout/DefaultLayout.js

@@ -1,11 +1,12 @@
 import React, { Component } from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
+import * as router from 'react-router-dom';
 import { Container, Nav, NavItem, NavLink, Badge, DropdownToggle, DropdownMenu } from 'reactstrap';
 
 import {
   AppAside,
   AppAsideToggler,
-  AppBreadcrumb,
+  AppBreadcrumb2 as AppBreadcrumb,
   AppFooter,
   AppHeader,
   AppHeaderDropdown,
@@ -15,7 +16,7 @@ import {
   AppSidebarForm,
   AppSidebarHeader,
   AppSidebarMinimizer,
-  AppSidebarNav,
+  AppSidebarNav2 as AppSidebarNav,
   AppSidebarToggler,
 } from '../../../../src';
 // sidebar nav config
@@ -64,13 +65,14 @@ class DefaultLayout extends Component {
           <AppSidebar fixed display="lg">
             <AppSidebarHeader />
             <AppSidebarForm />
-            <AppSidebarNav navConfig={navigation} {...this.props} />
+            {/*<AppSidebarNav navConfig={navigation} {...this.props} />*/}
+            <AppSidebarNav navConfig={navigation} {...this.props} router={router}/>
             <AppSidebarFooter />
             <AppSidebarMinimizer />
           </AppSidebar>
           <main className="main">
-            <AppBreadcrumb appRoutes={routes}>
-            </AppBreadcrumb>
+            {/*<AppBreadcrumb appRoutes={routes}/>*/}
+            <AppBreadcrumb appRoutes={routes} router={router}/>
             <Container fluid>
               <Switch>
                 {routes.map((route, idx) => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "2.1.7",
+  "version": "2.5.0",
   "description": "CoreUI React Bootstrap 4 components",
   "license": "MIT",
   "author": {
@@ -41,12 +41,12 @@
     "prop-types": "^15.7.2",
     "react-onclickout": "^2.0.8",
     "react-perfect-scrollbar": "^1.5.2",
-    "react-router-dom": "~4.3.1",
     "reactstrap": "^7.1.0"
   },
   "peerDependencies": {
     "@coreui/coreui": "^2.1.9",
-    "react": "^16.8.6"
+    "react": "^16.8.6",
+    "react-router-dom": "^5.0.0"
   },
   "devDependencies": {
     "babel-eslint": "^10.0.1",
@@ -58,6 +58,7 @@
     "nwb": "^0.23.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-router-dom": "^5.0.0",
     "sinon": "^5.1.1",
     "webpack-dev-server": "~3.3.1"
   },

src/Breadcrumb.md

@@ -1,3 +1,14 @@
 ### CoreUI `Breadcrumb` component
 
+usage in `DefaultLayout`:
+```jsx
+import * as router from 'react-router-dom';
+import { AppBreadcrumb2 as AppBreadcrumb } from '@coreui/react';
+// routes config
+import routes from '../../routes.js';
+```
+
+```html
+<AppBreadcrumb appRoutes={routes} router={router}></AppBreadcrumb>
+```
 _todo_

src/Breadcrumb2.js

@@ -0,0 +1,108 @@
+import React, { Component } from 'react';
+import { Breadcrumb, BreadcrumbItem } from 'reactstrap';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+let routes;
+let router;
+
+const getPaths = (pathname) => {
+  const paths = ['/'];
+
+  if (pathname === '/') return paths;
+
+  pathname.split('/').reduce((prev, curr) => {
+    const currPath = `${prev}/${curr}`;
+    paths.push(currPath);
+    return currPath;
+  });
+  return paths;
+};
+
+const findRouteName2 = (url) => {
+  const matchPath = router.matchPath;
+  const aroute = routes.find(route => matchPath(url, {path: route.path, exact: route.exact}));
+  return (aroute && aroute.name) ? aroute.name : null
+};
+
+const BreadcrumbsItem2 = ({ match }) => {
+  const routeName = findRouteName2(match.url);
+  const Link = router.Link;
+  if (routeName) {
+    return (
+      match.isExact ?
+        <BreadcrumbItem active>{routeName}</BreadcrumbItem>
+       :
+        <BreadcrumbItem>
+          <Link to={match.url || ''}>
+            {routeName}
+          </Link>
+        </BreadcrumbItem>
+    );
+  }
+  return null;
+};
+
+BreadcrumbsItem2.propTypes = {
+  match: PropTypes.shape({
+    url: PropTypes.string
+  })
+};
+
+const Breadcrumbs2 = (args) => {
+  const Route = router.Route;
+  const paths = getPaths(args.location.pathname);
+  const items = paths.map((path, i) => <Route key={i.toString()} path={path} component={BreadcrumbsItem2} />);
+  return (
+    <Breadcrumb>
+      {items}
+    </Breadcrumb>
+  );
+};
+
+const propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  appRoutes: PropTypes.any,
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  router: PropTypes.any
+};
+
+const defaultProps = {
+  tag: 'div',
+  className: '',
+  appRoutes: [{ path: '/', exact: true, name: 'Home', component: null }]
+};
+
+class AppBreadcrumb2 extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = { routes: props.appRoutes };
+    routes = this.state.routes;
+    router = props.router;
+  }
+
+  render() {
+    const { className, tag: Tag, ...attributes } = this.props;
+
+    delete attributes.children
+    delete attributes.appRoutes
+    delete attributes.router
+
+    const classes = classNames(className);
+
+    const Route = router.Route;
+
+    return (
+      <Tag className={classes}>
+        <Route path="/:path" component={Breadcrumbs2} {...attributes} />
+      </Tag>
+    );
+  }
+}
+
+AppBreadcrumb2.propTypes = propTypes;
+AppBreadcrumb2.defaultProps = defaultProps;
+
+export default AppBreadcrumb2;

src/SidebarNav.js

@@ -185,7 +185,7 @@ class AppSidebarNav extends Component {
 
     // sidebar-nav root
     return (
-      <PerfectScrollbar className={navClasses} {...attributes} option={{ suppressScrollX: !isRtl }} >
+      <PerfectScrollbar className={navClasses} {...attributes} options={{ suppressScrollX: !isRtl }} >
         <Nav>
           {children || this.navList(navConfig.items)}
         </Nav>

src/SidebarNav.md

@@ -1,34 +1,47 @@
 ### CoreUI `SidebarNav` subcomponent
+usage in `DefaultLayout`:
+```jsx
+import * as router from 'react-router-dom';
+import { AppSidebarNav2 as AppSidebarNav } from '@coreui/react';
+// sidebar nav config
+import navigation from '../../_nav';
+```
 
+```html
+<AppSidebarNav navConfig={navigation} {...this.props} router={ router }/>
+```
+props:
 
-prop | default
---- | ---
-children | `this.navList(navConfig.items)`
-className | `sidebar-nav`
-navConfig | `{ items: [ { name url icon badge } ] }`
-isOpen | `false`
-tag | `nav`
+prop | default | notes
+--- | --- | ---
+children | `this.navList(navConfig.items)` |
+className | `sidebar-nav` |
+navConfig | `{ items: [ { name url icon badge } ] }` |
+isOpen | `false` |
+tag | `nav` |
+router | inject `react-router-dom@5` object | _mandatory for @coreui/react ^2.5.0_  
 
-#### `navConfig` structure
+---
+#### `navConfig` shape
 
 - title:
-````js
+```json5
 {
   title: true,
   name: 'Theme',
-  class: ''              // optional class names space delimited list for title item ex: "text-center"
+  class: '',              // optional class names space delimited list for title item ex: "text-center"
   wrapper: {             // optional wrapper object
     element: '',         // optional* valid HTML5 element tag ( *required when passing attributes)
     attributes: {}       // optional valid JS object with JS API naming ex: { className: "my-class", style: { fontFamily: "Verdana" }, id: "my-id"}
   },
 },
-````
+```
 - item:
-````js
+```json5
 {
   name: 'Dashboard',
   url: '/dashboard',
-  icon: `icon-speedometer',
+  icon: 'icon-speedometer',
   class: '',                    // optional
   variant: 'success',           // optional
   badge: {
@@ -38,9 +51,9 @@ tag | `nav`
   },
   attributes: { target: '_blank', rel: "noreferrer noopener", disabled: false, hidden: false }, // (v2.1.0 up) optional valid JS object with JS API naming
 },
-````
+```
 - item with `children` array - works like `nav-dropdown-toggle` with `nav-dropdown-items`
-````js
+```json5
 {
   name: 'Icons',
   url: '/icons',
@@ -57,16 +70,16 @@ tag | `nav`
     },
   ]
 }
-````
+```
 - divider:
-````js
+```json5
 {
   divider: true
 },
-````
+```
 
 - order of precedence:
-````
+```
 title > divider > children > item
-````
+```