Fixed a bug where background color and cursor style are incorrect whe…

…n expanding/collapsing navigation items
trendmicro-frontend · Dec 22, 2017 · 5d10ee2 · 5d10ee2
1 parent a5fccdf
commit 5d10ee2
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 23 deletions.
diff --git a/examples/Styled/StyledSideNav.jsx b/examples/Styled/StyledSideNav.jsx
@@ -75,8 +75,8 @@ const StyledNav = styled(Nav)`
         }
     }
 
-    && > [class*="sidenav-navitem--"][class*="selected"],
-    && > [class*="sidenav-navitem--"][class*="selected"]:hover {
+    && > [class*="sidenav-navitem--"][class*="highlighted--"],
+    && > [class*="sidenav-navitem--"][class*="highlighted--"]:hover {
         > a {
             [class*="sidenav-nav-icon--"],
             [class*="sidenav-nav-text--"] {

diff --git a/src/Nav.jsx b/src/Nav.jsx
@@ -10,6 +10,8 @@ const noop = () => {};
 
 class Nav extends PureComponent {
     static propTypes = {
+        componentType: PropTypes.any,
+
         // A custom element for this component.
         componentClass: PropTypes.oneOfType([
             PropTypes.string,

diff --git a/src/NavItem.jsx b/src/NavItem.jsx
@@ -13,6 +13,8 @@ const noop = () => {};
 
 class NavItem extends PureComponent {
     static propTypes = {
+        componentType: PropTypes.any,
+
         // A custom element for this component.
         componentClass: PropTypes.oneOfType([
             PropTypes.string,
@@ -68,7 +70,9 @@ class NavItem extends PureComponent {
     isNavText = match(NavText);
 
     handleSelect = (event) => {
-        const { href, disabled, onSelect, eventKey } = this.props;
+        const {
+            href, disabled, onSelect, eventKey
+        } = this.props;
 
         if (!href || disabled) {
             event.preventDefault();
@@ -111,14 +115,13 @@ class NavItem extends PureComponent {
         const navText = this.findNavText(children);
 
         if (subnav) {
-            const highlighted = active ||
-                (!!selected && selected === this.props.eventKey);
+            const isNavItemSelected = active || (!!selected && selected === this.props.eventKey);
 
             return (
                 <Component
                     role="presentation"
                     className={cx(className, styles.sidenavSubnavitem, {
-                        [styles.selected]: highlighted,
+                        [styles.selected]: isNavItemSelected,
                         [styles.disabled]: disabled
                     })}
                     style={style}
@@ -171,16 +174,19 @@ class NavItem extends PureComponent {
                 return true;
             });
 
-        const highlighted = active || expanded ||
-            (activeNavItems.length > 0) ||
-            (!!selected && selected === this.props.eventKey);
+        const isNavItemSelected = active || (!!selected && selected === this.props.eventKey) || (activeNavItems.length > 0);
+        const isNavItemHighlighted = expanded || isNavItemSelected;
+        const isNavItemExpandable = (navItems.length > 0);
+        const isNavItemExpanded = isNavItemExpandable && expanded;
 
         return (
             <Component
                 role="presentation"
                 className={cx(className, styles.sidenavNavitem, {
-                    [styles.selected]: highlighted,
-                    [styles.expanded]: expanded,
+                    [styles.selected]: isNavItemSelected,
+                    [styles.highlighted]: isNavItemHighlighted,
+                    [styles.expandable]: isNavItemExpandable,
+                    [styles.expanded]: isNavItemExpanded,
                     [styles.disabled]: disabled
                 })}
                 style={style}
@@ -214,7 +220,7 @@ class NavItem extends PureComponent {
                         <Component
                             role="heading"
                             className={cx(className, styles.sidenavSubnavitem, {
-                                [styles.selected]: active,
+                                [styles.highlighted]: active,
                                 [styles.disabled]: disabled
                             })}
                             style={style}

diff --git a/src/SideNav.jsx b/src/SideNav.jsx
@@ -14,6 +14,8 @@ import match from './match-component';
 
 class SideNav extends PureComponent {
     static propTypes = {
+        componentType: PropTypes.any,
+
         // A custom element for this component.
         componentClass: PropTypes.oneOfType([
             PropTypes.string,
@@ -65,7 +67,8 @@ class SideNav extends PureComponent {
         };
 
         if (typeof child.ref === 'string') {
-            warning(false,
+            warning(
+                false,
                 'String refs are not supported on `<SideNav.Toggle>` component. ' +
                 'To apply a ref to the component use the callback signature:\n\n ' +
                 'https://facebook.github.io/react/docs/more-about-refs.html#the-ref-callback-attribute'
@@ -89,7 +92,8 @@ class SideNav extends PureComponent {
         };
 
         if (typeof child.ref === 'string') {
-            warning(false,
+            warning(
+                false,
                 'String refs are not supported on `<SideNav.Nav>` component. ' +
                 'To apply a ref to the component use the callback signature:\n\n ' +
                 'https://facebook.github.io/react/docs/more-about-refs.html#the-ref-callback-attribute'

diff --git a/src/Toggle.jsx b/src/Toggle.jsx
@@ -5,6 +5,8 @@ import styles from './index.styl';
 
 class Toggle extends PureComponent {
     static propTypes = {
+        componentType: PropTypes.any,
+
         // A custom element for this component.
         componentClass: PropTypes.oneOfType([
             PropTypes.string,

diff --git a/src/sidenav-expanded.styl b/src/sidenav-expanded.styl
@@ -8,7 +8,7 @@
     }
 
     .sidenav-nav > .sidenav-navitem {
-        &.selected > a {
+        &.expandable > a {
             cursor: pointer;
         }
     }

diff --git a/src/sidenav-navitem.styl b/src/sidenav-navitem.styl
@@ -2,7 +2,7 @@
     clear: both;
     position: relative;
 
-    &.selected > a {
+    &.highlighted > a {
         cursor: default;
     }
 
@@ -11,27 +11,33 @@
         opacity: .15;
     }
 
-    &.selected > a::after,
-    &:hover.selected > a::after {
+    &.highlighted > a::after,
+    &:hover.highlighted > a::after {
         background: #000;
         opacity: .2;
     }
 
-    &.selected.expanded > a::after,
-    &:hover.selected.expanded > a::after {
+    &.highlighted.expanded > a::after,
+    &:hover.highlighted.expanded > a::after {
         background: #000;
         opacity: .25;
     }
 
+    &.highlighted.selected.expanded > a::after,
+    &:hover.highlighted.selected.expanded > a::after {
+        background: #000;
+        opacity: .2;
+    }
+
     &:hover > a .sidenav-nav-icon,
-    &.selected > a .sidenav-nav-icon {
+    &.highlighted > a .sidenav-nav-icon {
         opacity: 1;
     }
 
     &:hover > a .sidenav-nav-icon,
     &:hover > a .sidenav-nav-text,
-    &.selected > a .sidenav-nav-icon,
-    &.selected > a .sidenav-nav-text {
+    &.highlighted > a .sidenav-nav-icon,
+    &.highlighted > a .sidenav-nav-text {
         color: #fff;
     }