Merge pull request mui#1982 from tyfoo/feature/LeftNav-Children

[LeftNav] Support nested children (w/o menuItems)
tyfoo · Oct 26, 2015 · f2f84df · f2f84df
2 parents 1169058 + 85256fe
commit f2f84df
Show file tree

Hide file tree

Showing 3 changed files with 44 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,
     };
@@ -56,7 +56,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 +143,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 +164,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,27 @@ 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 +215,7 @@ 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>
     );