diff --git a/addons/knobs/README.md b/addons/knobs/README.md index 2da303546409..6c4763414ac0 100644 --- a/addons/knobs/README.md +++ b/addons/knobs/README.md @@ -217,6 +217,28 @@ const value = select(label, options, defaultValue); > You can also provide options as an array like this: `['red', 'blue', 'yellow']` +### selectV2 + +Future replacement for `select`. The value from the select now uses the values from the `options` object. + +```js +import { selectV2 } from '@storybook/addon-knobs'; + +const label = 'Colors'; +const options = { + Red: 'red', + Blue: 'blue', + Yellow: 'yellow', + Rainbow: ['red', 'orange', 'etc'], + Black: null, +}; +const defaultValue = 'Red'; + +const value = select(label, options, defaultValue); +``` + +> You can also provide options as an array like this: `['red', 'blue', 'yellow']` + ### date Allow you to get date (and time) from the user. diff --git a/addons/knobs/src/components/types/Select.js b/addons/knobs/src/components/types/Select.js index a0a5366af625..0c82471dfe9d 100644 --- a/addons/knobs/src/components/types/Select.js +++ b/addons/knobs/src/components/types/Select.js @@ -18,20 +18,32 @@ const styles = { }; class SelectType extends React.Component { - _makeOpt(key, val) { + _makeOpt(key, value, displayValue) { const opts = { key, value: key, }; - return ; + let display = value; + + if (displayValue) { + opts.value = value; + display = key; + } + + return ( + + ); } - _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; @@ -49,7 +61,7 @@ class SelectType extends React.Component { value={knob.value} onChange={e => onChange(e.target.value)} > - {this._options(knob.options)} + {this._options(knob)} ); } @@ -64,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, }; diff --git a/addons/knobs/src/index.js b/addons/knobs/src/index.js index 2f4c16dcddca..04475c239436 100644 --- a/addons/knobs/src/index.js +++ b/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 }); }