Custom label and value keys for Dropdown (#1273)

* Custom value and label for dropdown

* removing unknown props

* Show selected label

* typo

components/dropdown/Dropdown.d.ts

@@ -30,6 +30,10 @@ export interface DropdownTheme {
    * Used for the the label element.
    */
   label?: string;
+  /**
+   * Used for setting the label from source
+   */
+  labelKey?: string;
   /**
    * Used when dropdown has required attribute.
    */
@@ -54,6 +58,10 @@ export interface DropdownTheme {
    * Used for the list of values.
    */
   values?: string;
+  /**
+   * Used for setting the value from source
+   */
+  valueKey: string;
 }
 
 export interface DropdownProps extends ReactToolbox.Props {

components/dropdown/Dropdown.js

@@ -16,6 +16,7 @@ const factory = (Input) => {
       disabled: PropTypes.bool,
       error: PropTypes.string,
       label: PropTypes.string,
+      labelKey: PropTypes.string,
       name: PropTypes.string,
       onBlur: PropTypes.func,
       onChange: PropTypes.func,
@@ -46,6 +47,7 @@ const factory = (Input) => {
         PropTypes.string,
         PropTypes.number,
       ]),
+      valueKey: PropTypes.string,
     };
 
     static defaultProps = {
@@ -53,7 +55,9 @@ const factory = (Input) => {
       className: '',
       allowBlank: true,
       disabled: false,
+      labelKey: 'label',
       required: false,
+      valueKey: 'value',
     };
 
     state = {
@@ -86,7 +90,7 @@ const factory = (Input) => {
 
     getSelectedItem = () => {
       for (const item of this.props.source) {
-        if (item.value === this.props.value) return item;
+        if (item[this.props.valueKey] === this.props.value) return item;
       }
       return !this.props.allowBlank
         ? this.props.source[0]
@@ -167,26 +171,26 @@ const factory = (Input) => {
     }
 
     renderValue = (item, idx) => {
-      const { theme } = this.props;
+      const { labelKey, theme, valueKey } = this.props;
       const className = classnames({
-        [theme.selected]: item.value === this.props.value,
+        [theme.selected]: item[valueKey] === this.props.value,
         [theme.disabled]: item.disabled,
       });
       return (
         <li
           key={idx}
           className={className}
-          onClick={!item.disabled && this.handleSelect.bind(this, item.value)}
+          onClick={!item.disabled && this.handleSelect.bind(this, item[valueKey])}
         >
-          {this.props.template ? this.props.template(item) : item.label}
+          {this.props.template ? this.props.template(item) : item[labelKey]}
         </li>
       );
     };
 
     render() {
       const {
-        allowBlank, auto, required, onChange, onFocus, onBlur, // eslint-disable-line no-unused-vars
-        source, template, theme, ...others
+        allowBlank, auto, labelKey, required, onChange, onFocus, onBlur, // eslint-disable-line no-unused-vars
+        source, template, theme, valueKey, ...others
       } = this.props;
       const selected = this.getSelectedItem();
       const className = classnames(theme.dropdown, {
@@ -214,7 +218,7 @@ const factory = (Input) => {
             type={template && selected ? 'hidden' : null}
             theme={theme}
             themeNamespace="input"
-            value={selected && selected.label ? selected.label : ''}
+            value={selected && selected[labelKey] ? selected[labelKey] : ''}
           />
           {template && selected ? this.renderTemplateValue(selected) : null}
           <ul className={theme.values}>