Merge pull request #77 from coreui/fix-sidebar-nav-droprown-item-attr

v2.5.1
coreui · May 24, 2019 · 7542c9b · 7542c9b
2 parents 0446a16 + 3d4a2b8
commit 7542c9b
Show file tree

Hide file tree

Showing 8 changed files with 78 additions and 53 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -40,7 +40,7 @@
       "createClass": "createReactClass", // Regex for Component Factory to use,
       // default to "createReactClass"
       "pragma": "React",  // Pragma to use, default to "React"
-      "version": "16.5", // React version, default to the latest React stable release
+      "version": "16.8", // React version, default to the latest React stable release
       "flowVersion": "0.81" // Flow version
     },
     "propWrapperFunctions": [ "forbidExtraProps" ] // The names of any functions used to wrap the

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,16 @@
 ### [@coreui/react](https://coreui.io/) changelog
 
+##### `v2.5.1`
+
+- fix(SidebarNav): add missing `class` and `attributes` to navDropdown item 
+- fix(HeaderDropdown): add missing Dropdown.propTypes
+- refactor(demo): AppHeaderDropdown remove style right auto
+
+###### dependencies update
+- update `core-js` to `^2.6.8`
+- update `enzyme-adapter-react-16` to `^1.13.1`
+- update `webpack-dev-server` to `^3.4.1`
+
 ##### `v2.5.0`
 - BREAKING CHANGE release for use with `react-router-dom v5`
   - feat(Breadcrumb2): mandatory prop `router` :boom: see: [Breadcrumb](./src/Breadcrumb.md)

diff --git a/demo/src/containers/DefaultLayout/DefaultLayout.js b/demo/src/containers/DefaultLayout/DefaultLayout.js
@@ -16,6 +16,7 @@ import {
   AppSidebarForm,
   AppSidebarHeader,
   AppSidebarMinimizer,
+  // AppSidebarNav as AppSidebarNav,
   AppSidebarNav2 as AppSidebarNav,
   AppSidebarToggler,
 } from '../../../../src';
@@ -53,7 +54,7 @@ class DefaultLayout extends Component {
               <DropdownToggle nav>
                 <img src={avatar} className="img-avatar" alt="[email protected]" />
               </DropdownToggle>
-              <DropdownMenu right style={{ right: 'auto', height: '400px' }}>
+              <DropdownMenu right style={{ height: '400px' }}>
                 AppHeaderDropdown
               </DropdownMenu>
             </AppHeaderDropdown>
@@ -91,7 +92,7 @@ class DefaultLayout extends Component {
           </AppAside>
         </div>
         <AppFooter>
-          <span><a href="https://coreui.io">CoreUI</a> &copy; 2018 creativeLabs</span>
+          <span><a href="https://coreui.io">CoreUI</a> &copy; 2019 creativeLabs</span>
           <span className="ml-auto">Powered by <a href="https://coreui.io/react">CoreUI for React</a></span>
         </AppFooter>
       </div>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "2.5.0",
+  "version": "2.5.1",
   "description": "CoreUI React Bootstrap 4 components",
   "license": "MIT",
   "author": {
@@ -37,7 +37,7 @@
   "dependencies": {
     "@coreui/icons": "0.3.0",
     "classnames": "^2.2.6",
-    "core-js": "^2.6.5",
+    "core-js": "^2.6.8",
     "prop-types": "^15.7.2",
     "react-onclickout": "^2.0.8",
     "react-perfect-scrollbar": "^1.5.2",
@@ -51,7 +51,7 @@
   "devDependencies": {
     "babel-eslint": "^10.0.1",
     "enzyme": "^3.9.0",
-    "enzyme-adapter-react-16": "^1.13.0",
+    "enzyme-adapter-react-16": "^1.13.1",
     "eslint": "^5.16.0",
     "eslint-plugin-import": "^2.17.2",
     "eslint-plugin-react": "^7.13.0",
@@ -60,7 +60,7 @@
     "react-dom": "^16.8.6",
     "react-router-dom": "^5.0.0",
     "sinon": "^5.1.1",
-    "webpack-dev-server": "~3.3.1"
+    "webpack-dev-server": "^3.4.1"
   },
   "repository": {
     "type": "git",

diff --git a/src/HeaderDropdown.js b/src/HeaderDropdown.js
@@ -4,7 +4,8 @@ import PropTypes from 'prop-types';
 
 const propTypes = {
   children: PropTypes.node,
-  direction: PropTypes.string
+  direction: PropTypes.string,
+  ...Dropdown.propTypes
 };
 
 const defaultProps = {

diff --git a/src/SidebarNav.js b/src/SidebarNav.js
@@ -109,9 +109,14 @@ class AppSidebarNav extends Component {
   // nav dropdown
   navDropdown(item, key) {
     const classIcon = classNames('nav-icon', item.icon);
+    const attributes = JSON.parse(JSON.stringify(item.attributes || {}));
+    const classes = classNames('nav-link', 'nav-dropdown-toggle', item.class, attributes.class);
+    delete attributes.class;
     return (
       <li key={key} className={this.activeRoute(item.url, this.props)}>
-        <a className="nav-link nav-dropdown-toggle" href="#" onClick={this.handleClick}><i className={classIcon} />{item.name}{this.navBadge(item.badge)}</a>
+        <a className={classes} href="#" onClick={this.handleClick} {...attributes}><i className={classIcon}/>
+          {item.name}{this.navBadge(item.badge)}
+        </a>
         <ul className="nav-dropdown-items">
           {this.navList(item.children)}
         </ul>
@@ -132,14 +137,14 @@ class AppSidebarNav extends Component {
 
   // nav link
   navLink(item, key, classes) {
-    const url = item.url ? item.url : '';
+    const url = item.url || '';
     const itemIcon = <i className={classes.icon} />
     const itemBadge = this.navBadge(item.badge)
     const attributes = item.attributes || {}
     return (
       <NavItem key={key} className={classes.item}>
         { attributes.disabled ?
-            <RsNavLink href={""} className={classes.link} {...attributes}>
+            <RsNavLink href={''} className={classes.link} {...attributes}>
               {itemIcon}{item.name}{itemBadge}
             </RsNavLink>
          :
@@ -181,7 +186,7 @@ class AppSidebarNav extends Component {
     const navClasses = classNames(className, 'sidebar-nav');
 
     // ToDo: find better rtl fix
-    const isRtl = getComputedStyle(document.querySelector('html')).direction === 'rtl'
+    const isRtl = getComputedStyle(document.documentElement).direction === 'rtl'
 
     // sidebar-nav root
     return (

diff --git a/src/SidebarNav.md b/src/SidebarNav.md
@@ -58,6 +58,8 @@ router | inject `react-router-dom@5` object | _mandatory for @coreui/react ^2.5.
   name: 'Icons',
   url: '/icons',
   icon: 'icon-star',
+  class: 'text-uppercase',             // (v2.5.1 up) optional
+  attributes: { class: 'bg-success' }, // (v2.5.1 up) optional valid JS object with JS API naming,
   children: [
     {
       name: 'Flags',     // item options apply

diff --git a/src/SidebarNav2.js b/src/SidebarNav2.js
@@ -47,8 +47,8 @@ class AppSidebarNav2 extends Component {
 
   activeRoute(routeName, props) {
     return props.location.pathname.indexOf(routeName) > -1
-        ? 'nav-item nav-dropdown open'
-        : 'nav-item nav-dropdown';
+      ? 'nav-item nav-dropdown open'
+      : 'nav-item nav-dropdown';
   }
 
   hideMobile() {
@@ -65,11 +65,11 @@ class AppSidebarNav2 extends Component {
   // nav type
   navType(item, idx) {
     return (
-        item.title ? this.navTitle(item, idx)
-            : item.divider ? this.navDivider(item, idx)
-            : item.label ? this.navLabel(item, idx)
-                : item.children ? this.navDropdown(item, idx)
-                    : this.navItem(item, idx)
+      item.title ? this.navTitle(item, idx)
+        : item.divider ? this.navDivider(item, idx)
+          : item.label ? this.navLabel(item, idx)
+            : item.children ? this.navDropdown(item, idx)
+              : this.navItem(item, idx)
     );
   }
 
@@ -96,27 +96,32 @@ class AppSidebarNav2 extends Component {
       item: classNames('hidden-cn', item.class),
       link: classNames('nav-label', item.class ? item.class : ''),
       icon: classNames(
-          'nav-icon',
-          !item.icon ? 'fa fa-circle' : item.icon,
-          item.label.variant ? `text-${item.label.variant}` : '',
-          item.label.class ? item.label.class : '',
+        'nav-icon',
+        !item.icon ? 'fa fa-circle' : item.icon,
+        item.label.variant ? `text-${item.label.variant}` : '',
+        item.label.class ? item.label.class : '',
       )
     };
     return (
-        this.navLink(item, key, classes)
+      this.navLink(item, key, classes)
     );
   }
 
   // nav dropdown
   navDropdown(item, key) {
     const classIcon = classNames('nav-icon', item.icon);
+    const attributes = JSON.parse(JSON.stringify(item.attributes || {}));
+    const classes = classNames('nav-link', 'nav-dropdown-toggle', item.class, attributes.class);
+    delete attributes.class;
     return (
-        <li key={key} className={this.activeRoute(item.url, this.props)}>
-          <a className="nav-link nav-dropdown-toggle" href="#" onClick={this.handleClick}><i className={classIcon} />{item.name}{this.navBadge(item.badge)}</a>
-          <ul className="nav-dropdown-items">
-            {this.navList(item.children)}
-          </ul>
-        </li>);
+      <li key={key} className={this.activeRoute(item.url, this.props)}>
+        <a className={classes} href="#" onClick={this.handleClick} {...attributes}><i className={classIcon}/>
+          {item.name}{this.navBadge(item.badge)}
+        </a>
+        <ul className="nav-dropdown-items">
+          {this.navList(item.children)}
+        </ul>
+      </li>);
   }
 
   // nav item with nav link
@@ -127,7 +132,7 @@ class AppSidebarNav2 extends Component {
       icon: classNames('nav-icon', item.icon)
     };
     return (
-        this.navLink(item, key, classes)
+      this.navLink(item, key, classes)
     );
   }
 
@@ -139,21 +144,21 @@ class AppSidebarNav2 extends Component {
     const attributes = item.attributes || {}
     const NavLink = this.props.router.NavLink || RsNavLink
     return (
-        <NavItem key={key} className={classes.item}>
-          { attributes.disabled ?
-              <RsNavLink href={""} className={classes.link} {...attributes}>
-                {itemIcon}{item.name}{itemBadge}
-              </RsNavLink>
-              :
-              this.isExternal(url) || NavLink === RsNavLink ?
-                  <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}>
-                    {itemIcon}{item.name}{itemBadge}
-                  </NavLink>
-          }
-        </NavItem>
+      <NavItem key={key} className={classes.item}>
+        { attributes.disabled ?
+            <RsNavLink href={''} className={classes.link} {...attributes}>
+              {itemIcon}{item.name}{itemBadge}
+            </RsNavLink>
+         :
+          this.isExternal(url) || NavLink === RsNavLink ?
+            <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}>
+              {itemIcon}{item.name}{itemBadge}
+            </NavLink>
+        }
+      </NavItem>
     );
   }
 
@@ -162,7 +167,7 @@ class AppSidebarNav2 extends Component {
     if (badge) {
       const classes = classNames(badge.class);
       return (
-          <Badge className={classes} color={badge.variant}>{badge.text}</Badge>
+        <Badge className={classes} color={badge.variant}>{badge.text}</Badge>
       );
     }
     return null;
@@ -184,15 +189,15 @@ class AppSidebarNav2 extends Component {
     const navClasses = classNames(className, 'sidebar-nav');
 
     // ToDo: find better rtl fix
-    const isRtl = getComputedStyle(document.querySelector('html')).direction === 'rtl'
+    const isRtl = getComputedStyle(document.documentElement).direction === 'rtl'
 
     // sidebar-nav root
     return (
-        <PerfectScrollbar className={navClasses} {...attributes} options={{ suppressScrollX: !isRtl }} >
-          <Nav>
-            {children || this.navList(navConfig.items)}
-          </Nav>
-        </PerfectScrollbar>
+      <PerfectScrollbar className={navClasses} {...attributes} options={{ suppressScrollX: !isRtl }} >
+        <Nav>
+          {children || this.navList(navConfig.items)}
+        </Nav>
+      </PerfectScrollbar>
     );
   }
 }