arbitrary array support

mui · Jun 15, 2015 · 3ad3ae9 · 3ad3ae9
1 parent 61c66c8
commit 3ad3ae9
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 6 deletions.
diff --git a/docs/src/app/components/pages/components/text-fields.jsx b/docs/src/app/components/pages/components/text-fields.jsx
@@ -19,8 +19,8 @@ var TextFieldsPage = React.createClass({
       propValue: 'Prop Value',
       floatingPropValue: 'Prop Value',
       valueLinkValue: 'Value Link',
-      selectValue: null,
-      selectValueLinkValue: '4',
+      selectValue: undefined,
+      selectValueLinkValue: 4,
       floatingValueLinkValue: 'Value Link'
     };
   },
@@ -87,7 +87,9 @@ var TextFieldsPage = React.createClass({
       '<SelectField\n'+
         'valueLink={this.linkState("selectValueLinkValue")}\n'+
         'floatingLabelText="Select Field"\n'+
-        'menuItems={menuItems} />\n'+
+        'valueMember="id"\n'+
+        'displayMember="name"\n'+
+        'menuItems={arbitraryArrayMenuItems} />\n'+
 
       '//Floating Hint Text Labels\n' +
       '<TextField\n' +
@@ -257,6 +259,14 @@ var TextFieldsPage = React.createClass({
       { payload: '4', text: 'Weekends' },
       { payload: '5', text: 'Weekly' },
     ];
+    var arbitraryArrayMenuItems = [
+     {id:1, name:'Never'},
+     {id:2, name:'Every Night'},
+     {id:3, name:'Weeknights'},
+     {id:4, name:'Weekends'},
+     {id:5, name:'Weekly'}
+    ];
+
     return (
       <ComponentDoc
         name="Text Field"
@@ -314,7 +324,9 @@ var TextFieldsPage = React.createClass({
             <SelectField
               valueLink={this.linkState('selectValueLinkValue')}
               floatingLabelText="Select Field"
-              menuItems={menuItems} />
+              valueMember="id"
+              displayMember="name"
+              menuItems={arbitraryArrayMenuItems} />
           </div>
           <div style={styles.group}>
             <TextField

diff --git a/src/drop-down-menu.jsx b/src/drop-down-menu.jsx
@@ -44,7 +44,7 @@ var DropDownMenu = React.createClass({
     return {
       open: false,
       isHovered: false,
-      selectedIndex: (this.props.value || this.props.valueLink) ? undefined :(this.props.selectedIndex || 0),
+      selectedIndex: (this.props.hasOwnProperty('value') || this.props.hasOwnProperty('valueLink')) ? null :(this.props.selectedIndex || 0),
     };
   },
 
@@ -142,6 +142,7 @@ var DropDownMenu = React.createClass({
   },
 
   render: function() {
+    var _this = this;
     var styles = this.getStyles();
     var selectedIndex = this.state.selectedIndex;
     var displayValue = "";
@@ -164,6 +165,12 @@ var DropDownMenu = React.createClass({
     if (selectedItem)
       displayValue = selectedItem[this.props.displayMember];
 
+    var menuItems = this.props.menuItems.map(function(item){
+      item.text = item[_this.props.displayMember];
+      item.payload = item[_this.props.valueMember];
+      return item;
+    });
+
     return (
       <div
         ref="root"
@@ -191,7 +198,7 @@ var DropDownMenu = React.createClass({
             ref="menuItems"
             autoWidth={this.props.autoWidth}
             selectedIndex={selectedIndex}
-            menuItems={this.props.menuItems}
+            menuItems={menuItems}
             menuItemStyle={this.mergeAndPrefix(styles.menuItem, this.props.menuItemStyle)}
             hideable={true}
             visible={this.state.open}