Merge pull request #4522 from storybooks/knobs/fix-select-richvalues

FIX knobs select to actually support rich values

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

@@ -22,7 +22,7 @@ describe('Select', () => {
 
       const green = wrapper.find('option').first();
       expect(green.text()).toEqual('Green');
-      expect(green.prop('value')).toEqual('#00ff00');
+      expect(green.prop('value')).toEqual('Green');
     });
   });
 });

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

@@ -1,32 +1,32 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 
 import { Select } from '@storybook/components';
 
-class SelectType extends Component {
-  renderOptionList({ options }) {
-    if (Array.isArray(options)) {
-      return options.map(val => this.renderOption(val, val));
-    }
-    return Object.keys(options).map(key => this.renderOption(key, options[key]));
-  }
+const SelectType = ({ knob, onChange }) => {
+  const { options } = knob;
+  const entries = Array.isArray(options)
+    ? options.reduce((acc, k) => Object.assign(acc, { k }), {})
+    : options;
 
-  renderOption(key, value) {
-    const opts = { key, value };
+  const selectedKey = Object.keys(entries).find(k => entries[k] === knob.value);
 
-    return <option {...opts}>{key}</option>;
-  }
-
-  render() {
-    const { knob, onChange } = this.props;
-
-    return (
-      <Select value={knob.value} onChange={e => onChange(e.target.value)} size="flex">
-        {this.renderOptionList(knob)}
-      </Select>
-    );
-  }
-}
+  return (
+    <Select
+      value={selectedKey}
+      onChange={e => {
+        onChange(entries[e.target.value]);
+      }}
+      size="flex"
+    >
+      {Object.entries(entries).map(([key]) => (
+        <option key={key} value={key}>
+          {key}
+        </option>
+      ))}
+    </Select>
+  );
+};
 
 SelectType.defaultProps = {
   knob: {},

examples/official-storybook/stories/__snapshots__/addon-knobs.stories.storyshot

@@ -14,7 +14,7 @@ exports[`Storyshots Addons|Knobs.withKnobs accepts story parameters 1`] = `
 
 exports[`Storyshots Addons|Knobs.withKnobs complex select 1`] = `
 <pre>
-  string
+  the type of string = string
 </pre>
 `;
 
@@ -24,7 +24,7 @@ exports[`Storyshots Addons|Knobs.withKnobs dynamic knobs 1`] = `
     I must be here
   </div>
   <div>
-    I can disapear
+    I can disappear
   </div>
 </div>
 `;

examples/official-storybook/stories/addon-knobs.stories.js

@@ -185,8 +185,8 @@ storiesOf('Addons|Knobs.withKnobs', module)
     const showOptional = select('Show optional', ['yes', 'no'], 'yes');
     return (
       <div>
-        <div>{text('compulsary', 'I must be here')}</div>
-        {showOptional === 'yes' ? <div>{text('optional', 'I can disapear')}</div> : null}
+        <div>{text('compulsory', 'I must be here')}</div>
+        {showOptional === 'yes' ? <div>{text('optional', 'I can disappear')}</div> : null}
       </div>
     );
   })
@@ -202,7 +202,11 @@ storiesOf('Addons|Knobs.withKnobs', module)
       'string'
     );
     const value = m.toString();
-    return <pre>{value}</pre>;
+    return (
+      <pre>
+        the type of {value} = {typeof m}
+      </pre>
+    );
   })
   .add('triggers actions via button', () => {
     button('Toggle item list state', () => {