children elements for left nav mui#27

skv-headless · Mar 3, 2015 · 28415f1 · 28415f1
1 parent d30b10a
commit 28415f1
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 78 deletions.
diff --git a/docs/src/app/components/app-left-nav.jsx b/docs/src/app/components/app-left-nav.jsx
@@ -26,14 +26,13 @@ var AppLeftNav = React.createClass({
     var header = <div className="logo" onClick={this._onHeaderClick}>material ui</div>;
 
     return (
-      <mui.LeftNav 
-        ref="leftNav"
-        docked={false}
-        isInitiallyOpen={false}
-        header={header}
-        menuItems={menuItems}
-        selectedIndex={this._getSelectedIndex()}
-        onChange={this._onLeftNavChange} />
+      <mui.LeftNav ref="leftNav" docked={false}>
+        {header}
+        <mui.Menu
+          menuItems={menuItems}
+          zDepth={0}
+          onItemClick={this._onLeftNavChange} />
+      </mui.LeftNav>
     );
   },
 
@@ -52,6 +51,7 @@ var AppLeftNav = React.createClass({
 
   _onLeftNavChange: function(e, key, payload) {
     this.transitionTo(payload.route);
+    this.refs.leftNav.close();
   },
 
   _onHeaderClick: function() {

diff --git a/docs/src/app/components/pages/components/left-nav.jsx b/docs/src/app/components/pages/components/left-nav.jsx
@@ -2,6 +2,7 @@ var React = require('react');
 var mui = require('mui');
 var MenuItem = mui.MenuItem;
 var LeftNav = mui.LeftNav;
+var Menu = mui.Menu;
 var RaisedButton = mui.RaisedButton;
 var ComponentDoc = require('../../component-doc.jsx');
 
@@ -36,40 +37,25 @@ var LeftNavPage = React.createClass({
       '  },\n' +
       '];\n\n' +
       '//Docked Left Nav\n' +
-      '<LeftNav menuItems={menuItems} />\n\n' +
+      '<LeftNav docked={this.state.isDocked}>'+ '\n' +
+      '    <Menu menuItems={menuItems} zDepth={0} />'+ '\n' +
+      '</LeftNav>' + '\n\n' +
+
       '//Hideable Left Nav\n' +
-      '<LeftNav docked={false} menuItems={menuItems} />\n\n';
+      '<LeftNav docked={false}>'+ '\n' +
+      '    <Menu menuItems={menuItems} zDepth={0} />'+ '\n' +
+      '</LeftNav>';
 
     var componentInfo = [
       {
         name: 'Props',
         infoArray: [
-          {
-            name: 'menuItems',
-            type: 'array',
-            header: 'required',
-            desc: 'JSON data representing all menu items to render.'
-          },
           {
             name: 'docked',
             type: 'bool',
             header: 'default: true',
             desc: 'Indicates that the left nav should be docked. In this state, the ' +
               'overlay won\'t show and clicking on a menu item will not close the left nav.'
-          },
-          {
-            name: 'header',
-            type: 'element',
-            header: 'optional',
-            desc: 'A react component that will be displayed above all the menu items. ' +
-              'Usually, this is used for a logo or a profile image.'
-          },
-          {
-            name: 'selectedIndex',
-            type: 'number',
-            header: 'optional',
-            desc: 'Indicates the particular item in the menuItems array that is ' +
-              'currently selected.'
           }
         ]
       },
@@ -87,17 +73,6 @@ var LeftNavPage = React.createClass({
             desc: 'Toggles between the open and closed states.'
           }
         ]
-      },
-      {
-        name: 'Events',
-        infoArray: [
-          {
-            name: 'onChange',
-            header: 'function(e, selectedIndex, menuItem)',
-            desc: 'Fired when a menu item is clicked that is not the one currently ' +
-              'selected.'
-          }
-        ]
       }
     ];
 
@@ -110,8 +85,14 @@ var LeftNavPage = React.createClass({
         <div className="left-nav-example">
           <RaisedButton label="Toggle Docked Left Nav" onTouchTap={this._toggleDockedLeftNavClick} /><br/><br/>
           <RaisedButton label="Show Hideable Left Nav" onTouchTap={this._showLeftNavClick} />
-          <LeftNav ref="dockedLeftNav" docked={this.state.isDocked} menuItems={menuItems} />
-          <LeftNav ref="leftNav" docked={false} menuItems={menuItems} />
+
+          <LeftNav ref="dockedLeftNav" docked={this.state.isDocked}>
+            <Menu menuItems={menuItems} zDepth={0} />
+          </LeftNav>
+
+          <LeftNav ref="leftNav" docked={false}>
+            <Menu menuItems={menuItems} zDepth={0} />
+          </LeftNav>
         </div>
 
       </ComponentDoc>
@@ -132,4 +113,4 @@ var LeftNavPage = React.createClass({
 
 });
 
-module.exports = LeftNavPage;
+module.exports = LeftNavPage;
diff --git a/src/js/left-nav.jsx b/src/js/left-nav.jsx
@@ -3,19 +3,14 @@ var React = require('react'),
   Classable = require('./mixins/classable'),
   WindowListenable = require('./mixins/window-listenable'),
   Overlay = require('./overlay'),
-  Paper = require('./paper'),
-  Menu = require('./menu');
+  Paper = require('./paper');
 
 var LeftNav = React.createClass({
 
   mixins: [Classable, WindowListenable],
 
   propTypes: {
-    docked: React.PropTypes.bool,
-    header: React.PropTypes.element,
-    onChange: React.PropTypes.func,
-    menuItems: React.PropTypes.array.isRequired,
-    selectedIndex: React.PropTypes.number
+    docked: React.PropTypes.bool
   },
 
   windowListeners: {
@@ -59,35 +54,21 @@ var LeftNav = React.createClass({
     if (!this.props.docked) overlay = <Overlay show={this.state.open} onTouchTap={this._onOverlayTouchTap} />;
 
     return (
-      <div className={classes}>
-
-        {overlay}
-        <Paper
-          ref="clickAwayableElement"
-          className="mui-left-nav-menu"
-          zDepth={2}
-          rounded={false}>
-
-          {this.props.header}
-          <Menu 
-            ref="menuItems"
-            zDepth={0}
-            menuItems={this.props.menuItems}
-            selectedIndex={selectedIndex}
-            onItemClick={this._onMenuItemClick} />
-
-        </Paper>
-      </div>
+      React.createElement("div", {className: classes},
+
+        overlay,
+        React.createElement(Paper, {
+            ref: "clickAwayableElement",
+            className: "mui-left-nav-menu",
+            zDepth: 2,
+            rounded: false},
+
+          this.props.children
+        )
+      )
     );
   },
 
-  _onMenuItemClick: function(e, key, payload) {
-    if (!this.props.docked) this.close();
-    if (this.props.onChange && this.props.selectedIndex !== key) {
-      this.props.onChange(e, key, payload);
-    }
-  },
-
   _onOverlayTouchTap: function() {
     this.close();
   },
@@ -102,4 +83,4 @@ var LeftNav = React.createClass({
 
 });
 
-module.exports = LeftNav;
+module.exports = LeftNav;