GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-03-18 05:02:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

Number knob: apply default min/max/step values only in range mode

Browse Source
This commit is contained in:
hypnos 2017-12-06 01:54:02 +03:00
parent eedd25798f
commit 756d7f6c54
2 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
addons/knobs/src/index.js
View File

@ -19,14 +19,18 @@ export function boolean(name, value) {
}
export function number(name, value, options = {}) {
const defaults = {
range: false,
const rangeDefaults = {
min: 0,
max: 10,
step: 1,
};
const mergedOptions = { ...defaults, ...options };
const mergedOptions = options.range
? {
...rangeDefaults,
...options,
}
: options;
const finalOptions = {
...mergedOptions,

2
examples/cra-kitchen-sink/src/stories/addon-knobs.stories.js
View File

@ -57,6 +57,7 @@ storiesOf('Addon Knobs.withKnobs', module)
};
const fruit = select('Fruit', fruits, 'apple');
const dollars = number('Dollars', 12.5, { min: 0, max: 100, step: 0.01 });
const years = number('Years in NY', 9);
const backgroundColor = color('background', '#ffff00');
const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
@ -79,6 +80,7 @@ storiesOf('Addon Knobs.withKnobs', module)
<div style={style}>
<p>{intro}</p>
<p>My birthday is: {new Date(birthday).toLocaleDateString('en-US', dateOptions)}</p>
<p>I live in NY for {years} years.</p>
<p>My wallet contains: ${dollars.toFixed(2)}</p>
<p>In my backpack, I have:</p>
<ul>{items.map(item => <li key={item}>{item}</li>)}</ul>