Merge pull request #92 from coreui/dev-v2.5.4

v2.5.4

CHANGELOG.md

@@ -1,5 +1,8 @@
 ### [@coreui/react](https://coreui.io/) changelog
 
+##### `v2.5.4`
+- fix(SidebarNav): allow location object as navConfig item url parameter
+
 ##### `v2.5.3`
 - fix(SidebarNav): add missing `itemAttr` to item/item with children (optional)
 - chore: update demo styles `@coreui/coreui` to `v2.1.12`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "2.5.3",
+  "version": "2.5.4",
   "description": "CoreUI React Bootstrap 4 components",
   "license": "MIT",
   "author": {

src/SidebarNav.md

@@ -36,6 +36,7 @@ router | inject `react-router-dom@5` object | _mandatory for @coreui/react ^2.5.
   },
 },
 ```
+
 - item:
 ```json5
 {
@@ -53,6 +54,50 @@ router | inject `react-router-dom@5` object | _mandatory for @coreui/react ^2.5.
   itemAttr: { id: 'item-1'},    // item html attributes - optional
 },
 ```
+
+__React Router Link `url`__
+
+`url: string` - a string representation of the Link location, created by concatenating the location’s pathname, search, and hash properties.  
+`url: object` - (^2.5.4 up) an object that can have any of the following properties.
+- `pathname`: a string representing the path to link to.
+- `search`: a string representation of query parameters.
+- `hash`: a hash to put in the URL, e.g. #a-hash.
+- `state`: state to persist to the location. 
+
+`url: function` - (^2.5.4 up) a function to which current location is passed as an argument and which should return location representation as a string or as an object
+
+__React Router Link props to pass in `attributes` object:__  
+`replace: bool` - when true, clicking the link will replace the current entry in the history stack instead of adding a new one.  
+`innerRef: function` - allows access to the underlying `ref` of the component    
+`innerRef: RefObject` - get the underlying `ref` of the component with `React.createRef()`
+
+`others` - you can also pass props you’d like to be on the <a> such as a `title`, `id`, etc.
+
+__React Router NavLink props to pass in `attributes` object:__  
+`activeStyle: object` - the styles to apply to the element when it is active.  
+`exact: bool` - when true, the active class/style will only be applied if the location is matched exactly.  
+`strict: bool` - when true, the trailing slash on a location’s pathname will be taken into consideration when determining if the location matches the current URL.
+
+```json5
+{
+  name: 'Dashboard',
+  url: { 
+    pathname: '/dashboard', 
+    search: '?name=search&period=today', 
+    state: { fromDashboard: true }
+  },
+  icon: 'icon-speedometer',
+  attributes: { 
+    replace: true, 
+    activeStyle: { textTransform: 'uppercase' }, 
+    id: 'link-1', 
+    title: 'Dashboard', 
+  }
+}
+```
+
+---
+
 - item with `children` array - works like `nav-dropdown-toggle` with `nav-dropdown-items`
 ```json5
 {

src/SidebarNav2.js

@@ -13,7 +13,8 @@ const propTypes = {
   isOpen: PropTypes.bool,
   staticContext: PropTypes.any,
   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  router: PropTypes.any
+  router: PropTypes.any,
+  props: PropTypes.any
 };
 
 const defaultProps = {
@@ -79,7 +80,7 @@ class AppSidebarNav2 extends Component {
 
   // nav list section title
   navTitle(title, key) {
-    const classes = classNames('nav-title', title.class);
+    const classes = classNames('nav-title', title.class, title.className);
     return <li key={key} className={classes}>{this.navWrapper(title)} </li>;
   }
 
@@ -90,7 +91,7 @@ class AppSidebarNav2 extends Component {
 
   // nav list divider
   navDivider(divider, key) {
-    const classes = classNames('divider', divider.class);
+    const classes = classNames('divider', divider.class, divider.className);
     return <li key={key} className={classes} />;
   }
 
@@ -115,11 +116,13 @@ class AppSidebarNav2 extends Component {
   navDropdown(item, key) {
     const classIcon = classNames('nav-icon', item.icon);
     const attributes = this.getAttribs(item.attributes);
-    const classes = classNames('nav-link', 'nav-dropdown-toggle', item.class, attributes.class);
+    const classes = classNames('nav-link', 'nav-dropdown-toggle', item.class, attributes.class, attributes.className);
     delete attributes.class;
+    delete attributes.className;
     const itemAttr = this.getAttribs(item.itemAttr);
-    const liClasses = classNames(this.activeRoute(item.url, this.props), itemAttr.class)
+    const liClasses = classNames(this.activeRoute(item.url, this.props), itemAttr.class, itemAttr.className)
     delete itemAttr.class;
+    delete itemAttr.className;
     return (
       <li key={key} className={liClasses} {...itemAttr}>
         <a className={classes} href="#" onClick={this.handleClick} {...attributes}><i className={classIcon}/>
@@ -149,11 +152,13 @@ class AppSidebarNav2 extends Component {
     const itemIcon = <i className={classes.icon} />
     const itemBadge = this.navBadge(item.badge)
     const attributes = this.getAttribs(item.attributes)
-    classes.link = classNames(classes.link, attributes.class)
+    classes.link = classNames(classes.link, attributes.class, attributes.className)
     delete attributes.class;
+    delete attributes.className;
     const itemAttr = this.getAttribs(item.itemAttr)
-    classes.item = classNames(classes.item, itemAttr.class)
+    classes.item = classNames(classes.item, itemAttr.class, itemAttr.className)
     delete itemAttr.class;
+    delete itemAttr.className;
     const NavLink = this.props.router.NavLink || RsNavLink
     return (
       <NavItem key={key} className={classes.item} {...itemAttr}>
@@ -162,7 +167,7 @@ class AppSidebarNav2 extends Component {
               {itemIcon}{item.name}{itemBadge}
             </RsNavLink>
          :
-          this.isExternal(url) || NavLink === RsNavLink ?
+          this.isExternal(url, this.props) || NavLink === RsNavLink ?
             <RsNavLink href={url} className={classes.link} active {...attributes}>
               {itemIcon}{item.name}{itemBadge}
             </RsNavLink> :
@@ -177,17 +182,22 @@ class AppSidebarNav2 extends Component {
   // badge addon to NavItem
   navBadge(badge) {
     if (badge) {
-      const classes = classNames(badge.class);
+      const classes = classNames(badge.class, badge.className);
       return (
         <Badge className={classes} color={badge.variant}>{badge.text}</Badge>
       );
     }
     return null;
   }
 
-  isExternal(url) {
-    const link = url ? url.substring(0, 4) : '';
-    return link === 'http';
+  isExternal(url, props) {
+    const linkType = typeof url;
+    const link =
+        linkType === 'string' ? url :
+          linkType === 'object' && url.pathname ? url.pathname :
+            linkType === 'function' && typeof url(props.location) === 'string'  ? url(props.location) :
+              linkType === 'function' && typeof url(props.location) === 'object' ? url(props.location).pathname : '' ;
+    return link.substring(0, 4) === 'http';
   }
 
   render() {