Skip to content

Commit

Permalink
SQUASH ME: Vertical Nav Progress
Browse files Browse the repository at this point in the history
  • Loading branch information
@mturley
mturley committed Dec 1, 2017
1 parent b55eb77 commit 07a0358
Showing 1 changed file with 249 additions and 12 deletions.
261 changes: 249 additions & 12 deletions src/VerticalNavigation/VerticalNavigation.js
View file
Original file line number Diff line number Diff line change
@@ -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/
//

/**
Expand All @@ -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
Expand Down

0 comments on commit 07a0358

Please sign in to comment.