key and value for select knob match key/value of options

fixes #799
add selectV2 for backwards compatibility

addons/knobs/src/components/types/Select.js

@@ -18,24 +18,32 @@ const styles = {
 };
 
 class SelectType extends React.Component {
-  _makeOpt(key, val) {
+  _makeOpt(key, value, displayValue) {
     const opts = {
       key,
       value: key,
     };
 
+    let display = value;
+
+    if (displayValue) {
+      opts.value = value;
+      display = key;
+    }
+
     return (
       <option {...opts}>
-        {val}
+        {display}
       </option>
     );
   }
-  _options(values) {
+
+  _options({ options, displayValue }) {
     let data = [];
-    if (Array.isArray(values)) {
-      data = values.map(val => this._makeOpt(val, val));
+    if (Array.isArray(options)) {
+      data = options.map(val => this._makeOpt(val, val, displayValue));
     } else {
-      data = Object.keys(values).map(key => this._makeOpt(key, values[key]));
+      data = Object.keys(options).map(key => this._makeOpt(key, options[key], displayValue));
     }
 
     return data;
@@ -53,7 +61,7 @@ class SelectType extends React.Component {
         value={knob.value}
         onChange={e => onChange(e.target.value)}
       >
-        {this._options(knob.options)}
+        {this._options(knob)}
       </select>
     );
   }
@@ -68,6 +76,8 @@ SelectType.propTypes = {
   knob: PropTypes.shape({
     name: PropTypes.string,
     value: PropTypes.string,
+    options: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
+    displayValue: PropTypes.bool,
   }),
   onChange: PropTypes.func,
 };

addons/knobs/src/index.js

@@ -49,6 +49,10 @@ export function select(name, options, value) {
   return manager.knob(name, { type: 'select', options, value });
 }
 
+export function selectV2(name, options, value) {
+  return manager.knob(name, { type: 'select', displayValue: true, options, value });
+}
+
 export function array(name, value, separator = ',') {
   return manager.knob(name, { type: 'array', value, separator });
 }