Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FIX knobs select to actually support rich values #4522

Merged
merged 2 commits into from
Oct 23, 2018
Merged

FIX knobs select to actually support rich values #4522

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3f6f699
FIX knobs select to actually support rich values
ndelangen Oct 23, 2018
c98a11a
FIX tests && FIX snapshots
ndelangen Oct 23, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion addons/knobs/src/components/__tests__/Select.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});
});
});
50 changes: 25 additions & 25 deletions addons/knobs/src/components/types/Select.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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]));
}

renderOption(key, value) {
const opts = { key, 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>
);
}
}
const SelectType = ({ knob, onChange }) => {
const { options } = knob;
const entries = Array.isArray(options)
? options.reduce((acc, k) => Object.assign(acc, { k }), {})
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it should be {[k]: k} instead of {k}

: options;

const selectedKey = Object.keys(entries).find(k => entries[k] === knob.value);

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: {},
Expand Down
4 changes: 2 additions & 2 deletions examples/official-storybook/stories/__snapshots__/addon-knobs.stories.storyshot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
`;

Expand All @@ -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>
`;
Expand Down
10 changes: 7 additions & 3 deletions examples/official-storybook/stories/addon-knobs.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
})
Expand All @@ -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', () => {
Expand Down