Experiment/Nav component: hide nav group header if all the links unde…

…r it are hidden (#5095) * Experiment/Nav component: hide group header if the links under it are hidden * change log
microsoft · Jun 5, 2018 · 872a3ef · 872a3ef
1 parent 0ee4b7e
commit 872a3ef
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 82 deletions.
diff --git a/common/changes/@uifabric/experiments/HideAdminConsoleGroup_2018-06-05-00-26.json b/common/changes/@uifabric/experiments/HideAdminConsoleGroup_2018-06-05-00-26.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/experiments",
+      "comment": "Experiment/Nav component: hide nav group header if the links under it are hidden",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/experiments",
+  "email": "sikrishn@microsoft.com"
+}
diff --git a/packages/experiments/src/components/Nav/Nav.tsx b/packages/experiments/src/components/Nav/Nav.tsx
@@ -38,9 +38,9 @@ class NavComponent extends NavBase {
 
     return (
       <nav role="navigation">
-        {this.props.groups.map((group: ICustomNavLinkGroup, groupIndex: number) => {
+        { this.props.groups.map((group: ICustomNavLinkGroup, groupIndex: number) => {
           return this._renderGroup(group, groupIndex);
-        })}
+        }) }
       </nav>
     );
   }
@@ -108,21 +108,21 @@ class NavComponent extends NavBase {
 
     return (
       <NavLink
-        id={link.key}
-        content={linkText}
-        href={link.url}
-        target={link.target}
-        onClick={onClickHandler}
-        dataHint={dataHint}
-        dataValue={link.key}
-        ariaLabel={linkText}
-        {...ariaProps}
+        id={ link.key }
+        content={ linkText }
+        href={ link.url }
+        target={ link.target }
+        onClick={ onClickHandler }
+        dataHint={ dataHint }
+        dataValue={ link.key }
+        ariaLabel={ linkText }
+        { ...ariaProps }
         role="menu"
-        rootClassName={classNames.navItemRoot}
-        leftIconName={leftIconName}
-        rightIconName={rightIconName}
-        textClassName={classNames.navItemNameColumn}
-        iconClassName={classNames.navItemIconColumn}
+        rootClassName={ classNames.navItemRoot }
+        leftIconName={ leftIconName }
+        rightIconName={ rightIconName }
+        textClassName={ classNames.navItemNameColumn }
+        iconClassName={ classNames.navItemIconColumn }
       />
     );
   }
@@ -142,16 +142,16 @@ class NavComponent extends NavBase {
     link.disableAutoExpand = false;
 
     return (
-      <li role="listitem" key={link.key || linkIndex} title={linkText}>
-        {this._renderCompositeLink(link, linkIndex, nestingLevel)}
+      <li role="listitem" key={ link.key || linkIndex } title={ linkText }>
+        { this._renderCompositeLink(link, linkIndex, nestingLevel) }
         {// show child links
-        // 1. only for the first level and
-        // 2. if the link is expanded
-        nestingLevel == 0 && link.isExpanded ? (
-          <div className={AnimationClassNames.slideDownIn20}>
-            {this._renderLinks(link.links as INavLink[], ++nestingLevel)}
-          </div>
-        ) : null}
+          // 1. only for the first level and
+          // 2. if the link is expanded
+          nestingLevel == 0 && link.isExpanded ? (
+            <div className={ AnimationClassNames.slideDownIn20 }>
+              { this._renderLinks(link.links as INavLink[], ++nestingLevel) }
+            </div>
+          ) : null }
       </li>
     );
   }
@@ -165,7 +165,7 @@ class NavComponent extends NavBase {
 
     return (
       <ul role="list">
-        {links.map((link: INavLink, linkIndex: number) => {
+        { links.map((link: INavLink, linkIndex: number) => {
           if (enableCustomization && link.isHidden && !showMore) {
             // atleast one link is hidden
             this._hasAtleastOneHiddenLink = true;
@@ -178,7 +178,7 @@ class NavComponent extends NavBase {
           } else {
             return this._renderLink(link, linkIndex, nestingLevel);
           }
-        })}
+        }) }
       </ul>
     );
   }
@@ -197,16 +197,23 @@ class NavComponent extends NavBase {
 
     const classNames = getClassNames(styles!, {});
 
+    let isGroupHeaderVisible = false;
+
+    // first group header is hidden by default, display group header for other groups only if there are visible links
+    if (groupIndex > 0) {
+      isGroupHeaderVisible = this.hasAtleastOneVisibleLink(group.links);
+    }
+
     return (
-      <div key={groupIndex}>
-        {groupIndex > 0 ? (
-          <div className={classNames.navGroupSeparatorRoot}>
-            <div className={classNames.navGroupSeparatorHrLine}>
-              {group.name ? <span className={classNames.navGroupSeparatorGroupName}>{group.name}</span> : null}
+      <div key={ groupIndex }>
+        { isGroupHeaderVisible ? (
+          <div className={ classNames.navGroupSeparatorRoot }>
+            <div className={ classNames.navGroupSeparatorHrLine }>
+              { group.name ? <span className={ classNames.navGroupSeparatorGroupName }>{ group.name }</span> : null }
             </div>
           </div>
-        ) : null}
-        {this._renderLinks(group.links, 0 /* nestingLevel */)}
+        ) : null }
+        { this._renderLinks(group.links, 0 /* nestingLevel */) }
       </div>
     );
   }

diff --git a/packages/experiments/src/components/Nav/NavBase.tsx b/packages/experiments/src/components/Nav/NavBase.tsx
@@ -65,4 +65,14 @@ export class NavBase extends React.Component<INavProps, INavState> implements IN
 
     return link.name;
   }
+
+  protected hasAtleastOneVisibleLink(links: INavLink[]): boolean {
+    if (!links || links.length === 0) {
+      return false;
+    }
+
+    return links.some((link: INavLink): boolean => {
+      return !link.isHidden;
+    });
+  }
 }
diff --git a/packages/experiments/src/components/Nav/SlimNav.tsx b/packages/experiments/src/components/Nav/SlimNav.tsx
@@ -44,9 +44,9 @@ class SlimNavComponent extends NavBase {
 
     return (
       <nav role="navigation">
-        {this.props.groups.map((group: ICustomNavLinkGroup, groupIndex: number) => {
+        { this.props.groups.map((group: ICustomNavLinkGroup, groupIndex: number) => {
           return this._renderGroup(group, groupIndex);
-        })}
+        }) }
       </nav>
     );
   }
@@ -162,19 +162,19 @@ class SlimNavComponent extends NavBase {
 
     return (
       <NavLink
-        id={link.key}
-        content={linkText}
-        href={link.url}
-        target={link.target}
-        dataHint={dataHint}
-        dataValue={link.key}
-        ariaLabel={linkText}
+        id={ link.key }
+        content={ linkText }
+        href={ link.url }
+        target={ link.target }
+        dataHint={ dataHint }
+        dataValue={ link.key }
+        ariaLabel={ linkText }
         role="menu"
-        onClick={this._onLinkClicked.bind(this, link)}
-        rootClassName={classNames.navFloatingItemRoot}
-        rightIconName={rightIconName}
-        textClassName={classNames.navItemNameColumn}
-        iconClassName={classNames.navItemIconColumn}
+        onClick={ this._onLinkClicked.bind(this, link) }
+        rootClassName={ classNames.navFloatingItemRoot }
+        rightIconName={ rightIconName }
+        textClassName={ classNames.navItemNameColumn }
+        iconClassName={ classNames.navItemIconColumn }
       />
     );
   }
@@ -187,11 +187,11 @@ class SlimNavComponent extends NavBase {
     const linkText = this.getLinkText(link, this.props.showMore);
 
     return (
-      <li role="listitem" key={link.key || linkIndex} title={linkText}>
-        {this._renderCompositeLink(link, linkIndex, nestingLevel)}
+      <li role="listitem" key={ link.key || linkIndex } title={ linkText }>
+        { this._renderCompositeLink(link, linkIndex, nestingLevel) }
         {// show child links
-        // 1. only for the first level
-        nestingLevel == 0 ? <div>{this._renderFloatingLinks(link.links as INavLink[], ++nestingLevel)}</div> : null}
+          // 1. only for the first level
+          nestingLevel == 0 ? <div>{ this._renderFloatingLinks(link.links as INavLink[], ++nestingLevel) }</div> : null }
       </li>
     );
   }
@@ -203,9 +203,9 @@ class SlimNavComponent extends NavBase {
 
     return (
       <ul role="list">
-        {links.map((link: INavLink, linkIndex: number) => {
+        { links.map((link: INavLink, linkIndex: number) => {
           return this._renderFloatingLink(link, linkIndex, nestingLevel);
-        })}
+        }) }
       </ul>
     );
   }
@@ -220,8 +220,8 @@ class SlimNavComponent extends NavBase {
     const classNames = getClassNames(styles!, { hasChildren, scrollTop: link.scrollTop });
 
     return (
-      <div className={classNames.navFloatingRoot} data-floating-nav>
-        {this._renderFloatingLinks([link], 0 /* nestingLevel */)}
+      <div className={ classNames.navFloatingRoot } data-floating-nav>
+        { this._renderFloatingLinks([link], 0 /* nestingLevel */) }
       </div>
     );
   }
@@ -242,27 +242,27 @@ class SlimNavComponent extends NavBase {
     return (
       <li
         role="listitem"
-        key={link.key || linkIndex}
-        onMouseEnter={this._onLinkMouseEnterOrLeave.bind(this, link)}
-        onMouseLeave={this._onLinkMouseEnterOrLeave.bind(this, link)}
-        onKeyDown={this._onKeyDown.bind(this, link)}
-        title={linkText}
-        className={classNames.navSlimItemRoot}
+        key={ link.key || linkIndex }
+        onMouseEnter={ this._onLinkMouseEnterOrLeave.bind(this, link) }
+        onMouseLeave={ this._onLinkMouseEnterOrLeave.bind(this, link) }
+        onKeyDown={ this._onKeyDown.bind(this, link) }
+        title={ linkText }
+        className={ classNames.navSlimItemRoot }
       >
         <NavLink
-          id={link.key}
-          href={link.url}
-          target={link.target}
-          dataHint={dataHint}
-          dataValue={link.key}
-          ariaLabel={linkText}
+          id={ link.key }
+          href={ link.url }
+          target={ link.target }
+          dataHint={ dataHint }
+          dataValue={ link.key }
+          ariaLabel={ linkText }
           role="menu"
-          onClick={onClickHandler}
-          rootClassName={classNames.navItemRoot}
-          leftIconName={link.icon}
-          iconClassName={classNames.navItemIconColumn}
+          onClick={ onClickHandler }
+          rootClassName={ classNames.navItemRoot }
+          leftIconName={ link.icon }
+          iconClassName={ classNames.navItemIconColumn }
         />
-        {this._renderFloatingNav(link, linkIndex)}
+        { this._renderFloatingNav(link, linkIndex) }
       </li>
     );
   }
@@ -276,7 +276,7 @@ class SlimNavComponent extends NavBase {
 
     return (
       <ul role="list">
-        {links.map((link: INavLink, linkIndex: number) => {
+        { links.map((link: INavLink, linkIndex: number) => {
           if (enableCustomization && link.isHidden && !showMore) {
             // atleast one link is hidden
             this._hasAtleastOneHiddenLink = true;
@@ -289,7 +289,7 @@ class SlimNavComponent extends NavBase {
           } else {
             return this._renderLink(link, linkIndex, nestingLevel);
           }
-        })}
+        }) }
       </ul>
     );
   }
@@ -308,15 +308,23 @@ class SlimNavComponent extends NavBase {
 
     const classNames = getClassNames(styles!, {});
 
+
+    let isGroupHeaderVisible = false;
+
+    // first group header is hidden by default, display group header for other groups only if there are visible links
+    if (groupIndex > 0) {
+      isGroupHeaderVisible = this.hasAtleastOneVisibleLink(group.links);
+    }
+
     return (
-      <div key={groupIndex}>
+      <div key={ groupIndex }>
         {// do not render group header for the first group
-        groupIndex > 0 ? (
-          <div className={classNames.navGroupSeparatorRoot}>
-            <div className={classNames.navGroupSeparatorHrLine} />
-          </div>
-        ) : null}
-        {this._renderLinks(group.links, 0 /* nestingLevel */)}
+          isGroupHeaderVisible ? (
+            <div className={ classNames.navGroupSeparatorRoot }>
+              <div className={ classNames.navGroupSeparatorHrLine } />
+            </div>
+          ) : null }
+        { this._renderLinks(group.links, 0 /* nestingLevel */) }
       </div>
     );
   }