Merge pull request #299 from mmrtnz/menu-item-spread-functionality

Toggle props can be passed into menu items. Fixes #291
mui · Feb 3, 2015 · 386e560 · 386e560
2 parents a5a02cb + 11068d7
commit 386e560
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 66 deletions.
diff --git a/docs/src/app/components/pages/components/menus.jsx b/docs/src/app/components/pages/components/menus.jsx
@@ -1,58 +1,58 @@
-var React = require('react'),
-  mui = require('mui'),
-  CodeExample = require('../../code-example/code-example.jsx'),
-
-  labelMenuItems = [
-    { payload: '1', text: 'ID', data: '1234567890', icon: 'home' },
-    { payload: '2', text: 'Type', data: 'Announcement', icon: 'home' },
-    { payload: '3', text: 'Caller ID', data: '(123) 456-7890', icon: 'home' }
-  ],
-
-  numberMenuItems = [
-    { payload: '1', text: 'All', number: '22'},
-    { payload: '3', text: 'Uncategorized', number: '6'},
-    { payload: '4', text: 'Trash', number: '11' }
-  ],
-
-  iconMenuItems = [
-    { payload: '1', text: 'Live Answer', icon: 'communication_phone', number: '10' },
-    { payload: '2', text: 'Voicemail', icon: 'communication_voicemail',  number: '5' },
-    { payload: '3', text: 'Starred', icon: 'action_stars', number: '3' },
-    { payload: '4', text: 'Shared', icon: 'action_thumb_up',  number: '12' }
-  ],
-
-  filterMenuItems = [
-    { payload: '1', text: 'Text Opt-In', toggle: true},
-    { payload: '2', text: 'Text Opt-Out', toggle: true},
-    { payload: '3', text: 'Voice Opt-Out', toggle: true}
-  ],
-
-  nestedMenuItems = [
-    { type: mui.MenuItem.Types.NESTED, text: 'Reports', items: [
-      { payload: '1', text: 'Nested Item 1' },
-      { type: mui.MenuItem.Types.NESTED, text: 'Nested Item 2', items: [
-        { payload: '1', text: 'Nested Item 3' },
-        { type: mui.MenuItem.Types.NESTED, text: 'Nested Item 4', items: [
-          { payload: '1', text: 'Nested Item 5' },
-          { payload: '3', text: 'Nested Item 6' }
-        ] },
-        { payload: '3', text: 'Nested Item 7' }
+var React = require('react');
+var mui = require('mui');
+var CodeExample = require('../../code-example/code-example.jsx');
+
+var labelMenuItems = [
+  { payload: '1', text: 'ID', data: '1234567890', icon: 'home' },
+  { payload: '2', text: 'Type', data: 'Announcement', icon: 'home' },
+  { payload: '3', text: 'Caller ID', data: '(123) 456-7890', icon: 'home' }
+];
+
+var numberMenuItems = [
+  { payload: '1', text: 'All', number: '22'},
+  { payload: '3', text: 'Uncategorized', number: '6'},
+  { payload: '4', text: 'Trash', number: '11' }
+];
+
+var iconMenuItems = [
+  { payload: '1', text: 'Live Answer', icon: 'communication_phone', number: '10' },
+  { payload: '2', text: 'Voicemail', icon: 'communication_voicemail',  number: '5' },
+  { payload: '3', text: 'Starred', icon: 'action_stars', number: '3' },
+  { payload: '4', text: 'Shared', icon: 'action_thumb_up',  number: '12' }
+];
+
+var filterMenuItems = [
+  { payload: '1', text: 'Text Opt-In', toggle: true},
+  { payload: '2', text: 'Text Opt-Out', toggle: true, defaultToggled: true},
+  { payload: '3', text: 'Voice Opt-Out', toggle: true, disabled: true}
+];
+
+var nestedMenuItems = [
+  { type: mui.MenuItem.Types.NESTED, text: 'Reports', items: [
+    { payload: '1', text: 'Nested Item 1' },
+    { type: mui.MenuItem.Types.NESTED, text: 'Nested Item 2', items: [
+      { payload: '1', text: 'Nested Item 3' },
+      { type: mui.MenuItem.Types.NESTED, text: 'Nested Item 4', items: [
+        { payload: '1', text: 'Nested Item 5' },
+        { payload: '3', text: 'Nested Item 6' }
       ] },
-      { payload: '3', text: 'Nested Item 9' },
-      { type: mui.MenuItem.Types.NESTED, text: 'Nested Item 2', items: [
-        { payload: '1', text: 'Nested Item 3' },
-        { type: mui.MenuItem.Types.NESTED, text: 'Nested Item 4', items: [
-          { payload: '1', text: 'Nested Item 5' },
-          { payload: '3', text: 'Nested Item 6' }
-        ] },
-        { payload: '3', text: 'Nested Item 7' }
+      { payload: '3', text: 'Nested Item 7' }
+    ] },
+    { payload: '3', text: 'Nested Item 9' },
+    { type: mui.MenuItem.Types.NESTED, text: 'Nested Item 2', items: [
+      { payload: '1', text: 'Nested Item 3' },
+      { type: mui.MenuItem.Types.NESTED, text: 'Nested Item 4', items: [
+        { payload: '1', text: 'Nested Item 5' },
+        { payload: '3', text: 'Nested Item 6' }
       ] },
-      { payload: '4', text: 'Nested Item 10' }
+      { payload: '3', text: 'Nested Item 7' }
     ] },
-    { payload: '1', text: 'Audio Library'},
-    { payload: '2', text: 'Settings'},
-    { payload: '3', text: 'Logout'}
-  ];
+    { payload: '4', text: 'Nested Item 10' }
+  ] },
+  { payload: '1', text: 'Audio Library'},
+  { payload: '2', text: 'Settings'},
+  { payload: '3', text: 'Logout'}
+];
 
 
 var MenusPage = React.createClass({
@@ -134,11 +134,12 @@ var MenusPage = React.createClass({
   },
 
   _getFilterMenuExample: function() {
-    var code = 
+    var code =
+      "// Include toggle properties as keys so that they are passed into the toggle component\n" +
       "filterMenuItems = [\n" +
       "   { payload: '1', text: 'Text Opt-In', toggle: true},\n" +
-      "   { payload: '2', text: 'Text Opt-Out', toggle: true},\n" +
-      "   { payload: '3', text: 'Voice Opt-Out', toggle: true}\n" +
+      "   { payload: '2', text: 'Text Opt-Out', toggle: true, defaultToggled: true},\n" +
+      "   { payload: '3', text: 'Voice Opt-Out', toggle: true, disabled: true}\n" +
       "];\n\n" +
       "<Menu menuItems={filterMenuItems} />";
 

diff --git a/src/js/menu-item.jsx b/src/js/menu-item.jsx
@@ -52,7 +52,18 @@ var MenuItem = React.createClass({
     if (this.props.iconRight) iconRight = <Icon className="mui-menu-item-icon-right" icon={this.props.iconRight} />;
     if (this.props.number !== undefined) number = <span className="mui-menu-item-number">{this.props.number}</span>;
     if (this.props.attribute !== undefined) attribute = <span className="mui-menu-item-attribute">{this.props.attribute}</span>;
-    if (this.props.toggle) toggle = <Toggle onToggle={this._handleToggle} />;
+
+    if (this.props.toggle) {
+      var {
+        toggle,
+        onClick,
+        onToggle,
+        children,
+        label,
+        ...other
+      } = this.props;
+      toggle = <Toggle {...other} onToggle={this._handleToggle}/>;
+    }
 
     return (
       <div

diff --git a/src/js/menu.jsx b/src/js/menu.jsx
@@ -1,11 +1,11 @@
-var React = require('react'),
-  CssEvent = require('./utils/css-event.js'),
-  Dom = require('./utils/dom.js'),
-  KeyLine = require('./utils/key-line.js'),
-  Classable = require('./mixins/classable.js'),
-  ClickAwayable = require('./mixins/click-awayable'),
-  Paper = require('./paper.jsx'),
-  MenuItem = require('./menu-item.jsx');
+var React = require('react');
+var CssEvent = require('./utils/css-event.js');
+var Dom = require('./utils/dom.js');
+var KeyLine = require('./utils/key-line.js');
+var Classable = require('./mixins/classable.js');
+var ClickAwayable = require('./mixins/click-awayable');
+var Paper = require('./paper.jsx');
+var MenuItem = require('./menu-item.jsx');
 
 /***********************
  * Nested Menu Component
@@ -151,6 +151,16 @@ var Menu = React.createClass({
       menuItem = this.props.menuItems[i];
       isSelected = i === this.props.selectedIndex;
 
+      var {
+        icon,
+        data,
+        attribute,
+        number,
+        toggle,
+        onClick,
+        ...other
+      } = menuItem;
+
       switch (menuItem.type) {
 
         case MenuItem.Types.LINK:
@@ -182,6 +192,7 @@ var Menu = React.createClass({
         default:
           itemComponent = (
             <MenuItem
+              {...other}
               selected={isSelected}
               key={i}
               index={i}
@@ -190,8 +201,7 @@ var Menu = React.createClass({
               attribute={menuItem.attribute}
               number={menuItem.number}
               toggle={menuItem.toggle}
-              onClick={this._onItemClick}
-              onToggle={this._onItemToggle}>
+              onClick={this._onItemClick}>
               {menuItem.text}
             </MenuItem>
           );