Added spread functionality to menuitems with toggle buttons to fix tw…

…o issues: mui#284 & mui#291
mmrtnz · Jan 30, 2015 · 7bd8557 · 7bd8557
1 parent 0f718c9
commit 7bd8557
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 9 deletions.
diff --git a/docs/src/app/components/pages/components/menus.jsx b/docs/src/app/components/pages/components/menus.jsx
@@ -23,8 +23,8 @@ var React = require('react'),
 
   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}
+    { payload: '2', text: 'Text Opt-Out', toggle: true, defaultToggled: true},
+    { payload: '3', text: 'Voice Opt-Out', toggle: true, toggled: true}
   ],
 
   nestedMenuItems = [
@@ -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
@@ -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>
           );

diff --git a/src/less/components/menu-item.less b/src/less/components/menu-item.less
@@ -52,6 +52,7 @@
   .mui-toggle {
     margin-top: ((@menu-item-height - @radio-button-size) / 2);
     float: right;
+    width: 42px;
   }
 
   &.mui-is-selected {

diff --git a/src/less/components/menu.less b/src/less/components/menu.less
@@ -24,7 +24,6 @@
   }
 
   .mui-paper-container {
-    background-color: @menu-container-background-color;
     padding-top: @desktop-gutter-mini;
     padding-bottom: @desktop-gutter-mini;
   }