From 07a03589ad997e43d7de3abe94635365d7760001 Mon Sep 17 00:00:00 2001
From: Mike Turley <mturley@redhat.com>
Date: Mon, 27 Nov 2017 17:10:17 -0500
Subject: [PATCH] SQUASH ME: Vertical Nav Progress

---
 src/VerticalNavigation/VerticalNavigation.js | 261 ++++++++++++++++++-
 1 file changed, 249 insertions(+), 12 deletions(-)

diff --git a/src/VerticalNavigation/VerticalNavigation.js b/src/VerticalNavigation/VerticalNavigation.js
index b71769ba2c1..e85f6a69b8c 100644
--- a/src/VerticalNavigation/VerticalNavigation.js
+++ b/src/VerticalNavigation/VerticalNavigation.js
@@ -1,17 +1,23 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import cx from 'classnames'
+import ListGroup from '../ListGroup/ListGroup'
 
 //
-// HEY MIKE, LOOK RIGHT HERE!
-// YEAH YOU! QUIT BEING LAZY, HERE ARE YOUR TASKS!
+// HEY MIKE, LOOK RIGHT HERE! YEAH YOU! QUIT BEING LAZY, HERE ARE YOUR TASKS!
 //
-// TODO markup from https://github.com/patternfly/patternfly-ng/blob/master/src/app/navigation/vertical-navigation.component.html
+// TODO markup from
+// https://github.com/patternfly/patternfly-ng/blob/master/src/app/navigation/ve
+// r tical-navigation.component.html
 // TODO write stories for it so you can view it
 // TODO look at different view states and the props necessary
 // TODO look into other behaviors
-// TODO behaviors from https://github.com/patternfly/patternfly-ng/blob/master/src/app/navigation/vertical-navigation.component.ts
+// TODO behaviors from
+// https://github.com/patternfly/patternfly-ng/blob/master/src/app/navigation/ve
+// r tical-navigation.component.ts
 // TODO write tests
-// TODO compare with http://www.patternfly.org/pattern-library/navigation/vertical-navigation/
+// TODO compare with
+// http://www.patternfly.org/pattern-library/navigation/vertical-navigation/
 //
 
 /**
@@ -20,19 +26,250 @@ import PropTypes from 'prop-types'
 export default class VerticalNavigation extends React.Component {
   constructor() {
     super()
-    this.state = {}
+    this.state = {
+      hideTopBanner: false,
+      navCollapsed: false
+    }
+    this.handleNavBarToggleClick = this
+      .handleNavBarToggleClick
+      .bind(this)
+  }
+
+  handleNavBarToggleClick() {
+    const { hideTopBanner } = this.state
+    this.setState({
+      hideTopBanner: !hideTopBanner
+    })
+  }
+
+  handlePrimaryClick(item) {
+    // TODO
+  }
+
+  handlePrimaryHover(item) {
+    // TODO
+  }
+
+  handlePrimaryBlur(item) {
+    // TODO
+  }
+
+  handleSecondaryClick(item) {
+    // TODO
+  }
+
+  handleSecondaryHover(item) {
+    // TODO
+  }
+
+  handleSecondaryBlur(item) {
+    // TODO
+  }
+
+  handleTertiaryClick(item) {
+    // TODO
+  }
+
+  handleTertiaryHover(item) {
+    // TODO
+  }
+
+  handleTertiaryBlur(item) {
+    // TODO
+  }
+
+  renderBadges(badges) {
+    const { showBadges } = this.props
+    return showBadges && badges && (
+      <div className="badge-container-pf">
+        {badges.map(badge => (
+          <div
+            /* TODO key? */
+            className={cx('badge', badge.badgeClass)}
+            tooltip={badge.tooltip} /* TODO is this ng-specific? */
+            container="body" /* TODO is this ng-specific? */
+            placement="right" /* TODO is this ng-specific? */
+          >
+            {badge.count && badge.iconStyleClass && (
+              <span className={badge.iconStyleClass} />
+            )}
+            {badge.count && <span>{badge.count}</span>}
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  renderItem(item, depth) {
+    // TODO LEFT OFF HERE-- reducing code duplication!!!
+    const { showMobileSecondary, showMobileTertiary } = this.props
+    return (
+      <ListGroupItem
+        /* TODO key? */
+        listItem={true}
+        className={cx({
+          [`${depth}-nav-item-pf`]: item.children && item.children.length > 0,
+          'active': item.trackActiveState,
+          'is-hover': item.trackHoverState,
+          'mobile-nav-item-pf': item.mobileItem && (depth === 'secondary' ? showMobileSecondary : true),
+          [`mobile-${depth}-item-pf`]: item.mobileItem && (depth === 'secondary' ? showMobileTertiary : false)
+        })}
+        onMouseEnter={() => { this.handlePrimaryHover(item) }}
+        onMouseLeave={() => { this.handlePrimaryBlur(item) }}
+      >
+        <a onClick={this.handlePrimaryClick(item)}>
+          {item.iconStyleClass && (
+            <span className={cx(item.iconStyleClass, { hidden: hiddenIcons })}
+              tooltip={item.title} /* TODO is this ng-specific? */
+              container="body" /* TODO is this ng-specific? */
+              placement="bottom" /* TODO is this ng-specific? */
+              isDisabled={!navCollapsed}
+              containerClass="nav-pf-vertical-tooltip" /* TODO is this ng-specific? */
+            />
+          ) /* TODO [ngClass]="{hidden: hiddenIcons}" */}
+          <span className="list-group-item-value">{item.title}</span>
+          {this.renderBadges(item.badges)}
+        </a>
+        {item.children && item.children.length > 0 && (
+          <div className="nav-pf-secondary-nav">
+            <div className="nav-item-pf-header">
+              <a
+                className={cx('secondary-collapse-toggle-pf', { collapsed: item.secondaryCollapsed })}
+                onClick={() => { this.collapseSecondaryNav(item) }}
+              />
+              <span>{item.title}</span>
+            </div>
+            <ListGroup>
+              {item.children.map(secondaryItem => (
+                <ListGroupItem
+                  /* TODO key? */
+                  className={{
+                    'tertiary-nav-item-pf': secondaryItem.children && secondaryItem.children.length > 0,
+                    'active': secondaryItem.trackActiveState,
+                    'is-hover': secondaryItem.trackHoverState,
+                    'mobile-nav-item-pf': secondaryItem.mobileItem
+                  }}
+                  onMouseEnter={() => { this.handleSecondaryHover(secondaryItem) }}
+                  onMouseLeave={() => { this.handleSecondaryBlur(secondaryItem) }}
+                >
+                  <a
+                    onClick={() => { this.handleSecondaryClick(item, secondaryItem) }}
+                  >
+                    <span className="list-group-item-value">{secondaryItem.title}</span>
+                    {this.renderBadges(secondaryItem.badges)}
+                  </a>
+                  {/* TODO tertiary has nothing here */}
+                  {secondaryItem.children && secondaryItem.children.length > 0 && (
+                    <div className="nav-pf-tertiary-nav">
+                      <div className="nav-item-pf-header">
+                        <a
+                          className={cx('tertiary-collapse-toggle-pf', {
+                            collapsed: secondaryItem.tertiaryCollapsed
+                          })}
+                          onClick={() => { this.collapseTertiaryNav(secondaryItem) }}
+                        />
+                        <span>{secondaryItem.title}</span>
+                      </div>
+                      <ListGroup>
+                        {/* TODO TERTIARY */}
+                      </ListGroup>
+                    </div>
+                  )}
+                </ListGroupItem>
+              ))}
+            </ListGroup>
+          </div>
+        )}
+      </ListGroupItem>
+    )
   }
 
   render() {
-    const { children } = this.props
+    const {
+      children,
+      hidden,
+      persistentSecondary,
+      pinnableMenus,
+      hiddenIcons,
+      showBadges,
+      showMobileNav,
+      showMobileSecondary,
+      showMobileTertiary,
+      forceHidden
+    } = this.props
+    const {
+      hideTopBanner,
+      navCollapsed,
+      inMobileState,
+      navCollapsed,
+      activeSecondary,
+      hoverSecondaryNav,
+      hoverTertiaryNav,
+      collapsedSecondaryNav,
+      collapsedTertiaryNav
+    } = this.state
 
-    if (children) {
-      return <div>{children}</div>
-    } else {
-      return <div>Nothing to see here?</div> // TODO fix me?
-    }
+    const topBanner = (
+      <div>
+        <div className="navbar-header">
+          <button
+            type="button"
+            className="navbar-toggle"
+            onClick={this.handleNavBarToggleClick}>
+            <span className="sr-only">Toggle navigation</span>
+            {/* TODO i18n? */}
+            <span className="icon-bar" />
+            <span className="icon-bar" />
+            <span className="icon-bar" />
+          </button>
+          <span className="navbar-brand">
+            <img className="navbar-brand-icon" /> {/* TODO <img class="navbar-brand-icon" *ngIf="brandSrc" [src]="brandSrc" alt="{{brandAlt}}"/> */}
+            <span className="navbar-brand-txt"></span>
+            {/* TODO <span class="navbar-brand-txt" *ngIf="!brandSrc">{{brandAlt}}</span> */}
+          </span>
+        </div>
+        <nav class="collapse navbar-collapse">
+          {/* TODO this was an <ng-content> */}
+        </nav>
+      </div>
+    )
+
+    const navItems = ['T', 'O', 'D', 'O'] // TODO should these come from children or props?
+    // TODO move all the ListGroupItem markup into the VerticalNavigationItem component
+
+    const navbar = (
+      <nav
+        className={cx('navbar navbar-pf-vertical pfng-vertical-container', hideTopBanner && 'pfng-vertical-hide-nav')}>
+        {!hideTopBanner && topBanner}
+        <div
+          className={cx('nav-pf-vertical', {
+            'nav-pf-vertical-collapsible-menus': pinnableMenus,
+            'hidden-icons-pf': hiddenIcons,
+            'nav-pf-vertical-with-badges': showBadges,
+            'secondary-visible-pf': activeSecondary,
+            'show-mobile-secondary': showMobileSecondary,
+            'show-mobile-tertiary': showMobileTertiary,
+            'hover-secondary-nav-pf': hoverSecondaryNav,
+            'hover-tertiary-nav-pf': hoverTertiaryNav,
+            'collapsed-secondary-nav-pf': collapsedSecondaryNav,
+            'collapsed-tertiary-nav-pf': collapsedTertiaryNav,
+            'hidden': inMobileState,
+            'collapsed': navCollapsed,
+            'force-hide-secondary-nav-pf': forceHidden,
+            'show-mobile-nav': showMobileNav
+          })}
+        >
+          <ListGroup>
+            {navItems.map((item) => { this.renderItem(item, 'secondary') })}
+          </ListGroup>
+        </div>
+      </nav>
+    )
+
+    return <div>{navbar}</div>
   }
 }
+
 VerticalNavigation.propTypes = {
   /** Child node rendered as expanded content of the TODO??? */
   children: PropTypes.node