LeftNav support nested children (w/o menuItems)

mui · Oct 23, 2015 · 010de94 · 010de94
1 parent b63a94f
commit 010de94
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 20 deletions.
diff --git a/docs/src/app/components/pages/components/left-nav.jsx b/docs/src/app/components/pages/components/left-nav.jsx
@@ -11,7 +11,7 @@ export default class LeftNavPage extends React.Component {
     super();
     this._showLeftNavClick = this._showLeftNavClick.bind(this);
     this._toggleDockedLeftNavClick = this._toggleDockedLeftNavClick.bind(this);
-
+    this._showLeftNavChildrenClick = this._showLeftNavChildrenClick.bind(this);
     this.state = {
       isDocked: false,
     };
@@ -28,6 +28,12 @@ export default class LeftNavPage extends React.Component {
       { type: MenuItem.Types.LINK, payload: 'https://www.google.com', text: 'Disabled Link', disabled: true },
     ];
 
+    let menuComponents = [
+      <div><a href="/get-started">Get Started</a></div>,
+      <div><a href="/customization">Customization</a></div>,
+      <MenuItem text="Menu Item" index={2} />,
+    ];
+
     let componentInfo = [
       {
         name: 'Props',
@@ -56,7 +62,7 @@ export default class LeftNavPage extends React.Component {
           {
             name: 'menuItems',
             type: 'array',
-            header: 'required',
+            header: 'optional',
             desc: 'JSON data representing all menu items to render.',
           },
           {
@@ -143,10 +149,18 @@ export default class LeftNavPage extends React.Component {
         componentInfo={componentInfo}>
         <CodeExample code={Code}>
           <div>
-            <RaisedButton label="Toggle Docked Left Nav" onTouchTap={this._toggleDockedLeftNavClick} /><br/><br/>
-            <RaisedButton label="Show Hideable Left Nav" onTouchTap={this._showLeftNavClick} />
+            <div>
+              <RaisedButton label="Toggle Docked Left Nav" onTouchTap={this._toggleDockedLeftNavClick} /><br/><br/>
+              <RaisedButton label="Show Hideable Left Nav" onTouchTap={this._showLeftNavClick} /><br/><br/>
+              <RaisedButton label="Show Hideable Children Left Nav" onTouchTap={this._showLeftNavChildrenClick} /><br/><br/>
+            </div>
+
             <LeftNav ref="dockedLeftNav" docked={this.state.isDocked} menuItems={menuItems} />
             <LeftNav ref="leftNav" docked={false} menuItems={menuItems} />
+            <LeftNav ref="leftNavChildren" docked={false}>
+              <MenuItem index={0}>Menu Item</MenuItem>
+              <MenuItem index={1}><a href="/link">Link</a></MenuItem>
+            </LeftNav>
           </div>
         </CodeExample>
       </ComponentDoc>
@@ -156,7 +170,9 @@ export default class LeftNavPage extends React.Component {
   _showLeftNavClick() {
     this.refs.leftNav.toggle();
   }
-
+  _showLeftNavChildrenClick() {
+    this.refs.leftNavChildren.toggle();
+  }
   _toggleDockedLeftNavClick() {
     this.refs.dockedLeftNav.toggle();
     this.setState({

diff --git a/docs/src/app/components/raw-code/left-nav-code.txt b/docs/src/app/components/raw-code/left-nav-code.txt
@@ -28,3 +28,9 @@ this.refs.leftNav.toggle();
 
 //Hideable Left Nav
 <LeftNav ref="leftNav" docked={false} menuItems={menuItems} />
+
+//Hideable Left Nav with Nested Children
+<LeftNav ref="leftNavChildren" docked={false}>
+  <MenuItem index={0}>Menu Item</MenuItem>
+  <MenuItem index={1}><a href="/link">Link</a></MenuItem>
+</LeftNav>
diff --git a/src/left-nav.jsx b/src/left-nav.jsx
@@ -42,7 +42,7 @@ const LeftNav = React.createClass({
     disableSwipeToOpen: React.PropTypes.bool,
     docked: React.PropTypes.bool,
     header: React.PropTypes.element,
-    menuItems: React.PropTypes.array.isRequired,
+    menuItems: React.PropTypes.array,
     onChange: React.PropTypes.func,
     onNavOpen: React.PropTypes.func,
     onNavClose: React.PropTypes.func,
@@ -181,7 +181,25 @@ const LeftNav = React.createClass({
           onTouchTap={this._onOverlayTouchTap} />
       );
     }
-
+    let children;
+    if (this.props.menuItems === undefined) {
+      children = this.props.children;
+    }
+    else {
+       children = <Menu
+              ref="menuItems"
+              style={this.mergeStyles(styles.menu)}
+              zDepth={0}
+              menuItems={this.props.menuItems}
+              menuItemStyle={this.mergeStyles(styles.menuItem)}
+              menuItemStyleLink={this.mergeStyles(styles.menuItemLink)}
+              menuItemStyleSubheader={this.mergeStyles(styles.menuItemSubheader)}
+              menuItemClassName={this.props.menuItemClassName}
+              menuItemClassNameSubheader={this.props.menuItemClassNameSubheader}
+              menuItemClassNameLink={this.props.menuItemClassNameLink}
+              selectedIndex={selectedIndex}
+              onItemTap={this._onMenuItemClick} />
+    }
     return (
       <div className={this.props.className}>
         {overlay}
@@ -195,19 +213,8 @@ const LeftNav = React.createClass({
             this.props.openRight && styles.rootWhenOpenRight,
             this.props.style)}>
             {this.props.header}
-            <Menu
-              ref="menuItems"
-              style={this.mergeStyles(styles.menu)}
-              zDepth={0}
-              menuItems={this.props.menuItems}
-              menuItemStyle={this.mergeStyles(styles.menuItem)}
-              menuItemStyleLink={this.mergeStyles(styles.menuItemLink)}
-              menuItemStyleSubheader={this.mergeStyles(styles.menuItemSubheader)}
-              menuItemClassName={this.props.menuItemClassName}
-              menuItemClassNameSubheader={this.props.menuItemClassNameSubheader}
-              menuItemClassNameLink={this.props.menuItemClassNameLink}
-              selectedIndex={selectedIndex}
-              onItemTap={this._onMenuItemClick} />
+
+            {children}
         </Paper>
       </div>
     );