New prop for DropDownMenu: displayMemberOnLabel

docs/src/app/components/pages/components/drop-down-menu.jsx

@@ -35,6 +35,13 @@ export default class DropDownMenuPage extends React.Component {
             desc: 'DropDownMenu will use payload as default value, with this ' +
               'property you can choose another name.',
           },
+          {
+            name: 'labelMember',
+            type: 'string',
+            header: 'default: text',
+            desc: 'DropDownMenu will use text as default value, with this ' +
+              'property you can choose another name.',
+          },
           {
             name: 'autoWidth',
             type: 'bool',
@@ -113,6 +120,13 @@ export default class DropDownMenuPage extends React.Component {
       },
     ];
 
+    let menuItemsWithLabel = [
+      { payload: '1', text: 'Morning', period: '5 am - 12 pm' },
+      { payload: '2', text: 'Afternoon', period: '12 pm - 5 pm' },
+      { payload: '3', text: 'Evening', period: '5 pm to 9 pm' },
+      { payload: '4', text: 'Night', period: '9 pm to 4 am' },
+    ];
+
     return (
       <ComponentDoc
         name="Drop Down Menu"
@@ -128,7 +142,12 @@ export default class DropDownMenuPage extends React.Component {
         </Paper>
 
         <CodeExample code={Code}>
-          <DropDownMenu menuItems={menuItems} />
+          <DropDownMenu menuItems={menuItems} /><br/>
+          <DropDownMenu
+            menuItems={menuItemsWithLabel}
+            labelMember="period"
+          />
+
         </CodeExample>
       </ComponentDoc>
     );

docs/src/app/components/pages/components/select-fields.jsx

@@ -52,6 +52,13 @@ const SelectFieldsPage = React.createClass({
             desc: 'SelectField will use text as default value, with this ' +
               'property you can choose another name.',
           },
+          {
+            name: 'labelMember',
+            type: 'string',
+            header: 'default: text',
+            desc: 'DropDownMenu will use text as default value, with this ' +
+            'property you can choose another name.',
+          },
           {
             name: 'errorStyle',
             type: 'object',
@@ -189,7 +196,12 @@ const SelectFieldsPage = React.createClass({
       {id:4, name:'Weekends'},
       {id:5, name:'Weekly'},
     ];
-
+    let menuItemsWithLabel = [
+      { payload: '1', text: 'Morning', period: '5 am - 12 pm' },
+      { payload: '2', text: 'Afternoon', period: '12 pm - 5 pm' },
+      { payload: '3', text: 'Evening', period: '5 pm to 9 pm' },
+      { payload: '4', text: 'Night', period: '9 pm to 4 am' },
+    ];
 
     let styles = this.getStyles();
 
@@ -217,6 +229,9 @@ const SelectFieldsPage = React.createClass({
               onChange={this._handleSelectValueChange.bind(null, 'selectValue')}
               hintText="Hint Text"
               menuItems={menuItems} /><br/>
+            <SelectField
+              menuItems={menuItemsWithLabel}
+              labelMember="period" /><br/>
             <SelectField
               valueLink={this.linkState('selectValueLinkValue')}
               floatingLabelText="Float Label Text"

docs/src/app/components/raw-code/drop-down-menu-code.txt

@@ -6,3 +6,11 @@ let menuItems = [
    { payload: '5', text: 'Weekly' },
 ];
 <DropDownMenu menuItems={menuItems} />
+
+let menuItemsWithLabel = [
+  { payload: '1', text: 'Morning', period: '5 am - 12 pm' },
+  { payload: '2', text: 'Afternoon', period: '12 pm - 5 pm' },
+  { payload: '3', text: 'Evening', period: '5 pm to 9 pm' },
+  { payload: '4', text: 'Night', period: '9 pm to 4 am' },
+];
+<DropDownMenu menuItems={menuItemsWithLabel} labelMember="period" />

docs/src/app/components/raw-code/select-fields-code.txt

@@ -4,6 +4,9 @@
   onChange={this._handleSelectValueChange.bind(null, 'selectValue')}
   hintText="Hint Text"
   menuItems={menuItems} /><br/>
+<SelectField
+  menuItems={menuItemsWithLabel}
+  labelMember="period" /><br/>
 <SelectField
   valueLink={this.linkState('selectValueLinkValue')}
   floatingLabelText="Float Label Text"

src/drop-down-menu.jsx

@@ -49,6 +49,7 @@ const DropDownMenu = React.createClass({
     openImmediately: React.PropTypes.bool,
     style: React.PropTypes.object,
     value: React.PropTypes.object,
+    labelMember: React.PropTypes.string,
   },
 
   getDefaultProps() {
@@ -58,6 +59,7 @@ const DropDownMenu = React.createClass({
       valueMember: 'payload',
       displayMember: 'text',
       openImmediately: false,
+      labelMember: 'text',
     };
   },
 
@@ -186,6 +188,7 @@ const DropDownMenu = React.createClass({
       iconStyle,
       underlineStyle,
       menuItemStyle,
+      labelMember,
       ...other,
     } = this.props;
 
@@ -210,7 +213,7 @@ const DropDownMenu = React.createClass({
 
     let selectedItem = this.props.menuItems[selectedIndex];
     if (selectedItem) {
-      displayValue = selectedItem[displayMember];
+      displayValue = selectedItem[labelMember];
     }
 
     let menuItems = this.props.menuItems.map((item) => {

src/select-field.jsx

@@ -51,6 +51,7 @@ const SelectField = React.createClass({
     menuItemStyle: React.PropTypes.object,
     selectedIndex: React.PropTypes.number,
     style: React.PropTypes.object,
+    labelMember: React.PropTypes.string,
   },
 
   //for passing default theme context to children
@@ -73,6 +74,7 @@ const SelectField = React.createClass({
   getDefaultProps() {
     return {
       fullWidth: false,
+      labelMember: 'text',
     };
   },
 
@@ -142,6 +144,7 @@ const SelectField = React.createClass({
       errorText,
       onFocus,
       onBlur,
+      labelMember,
       ...other,
     } = this.props;
 
@@ -164,6 +167,7 @@ const SelectField = React.createClass({
       iconStyle: this.mergeAndPrefix(styles.icon, iconStyle),
       underlineStyle: this.mergeAndPrefix(styles.underline, underlineStyle),
       autoWidth: false,
+      labelMember: labelMember,
     };
 
     return (