diff --git a/src/components/PropEditor.js b/src/components/PropEditor.js index a8661ecfabc0..ee2e24fec411 100644 --- a/src/components/PropEditor.js +++ b/src/components/PropEditor.js @@ -46,12 +46,12 @@ const stylesheet = { }; export default class PropEditor extends React.Component { - constructor() { - super(); + constructor(props) { + super(props); this._handleChange = this.handleChange.bind(this); this._createKnob = this.createKnob.bind(this); this._shouldStoryUpdate = this.shouldStoryUpdate.bind(this); - this.state = { fields: {} }; + this.state = { fields: this.props.initialValues }; } handleChange(change) { @@ -71,35 +71,19 @@ export default class PropEditor extends React.Component { this.setState({ fields }); } - createKnob(name, initial, type) { + createKnob(name) { const field = this.state.fields[name]; + let { value } = field; - if (field) { - let { value } = field; - if (field.type === 'object') { - try { - value = eval(`(${value})`); // eslint-disable-line no-eval - } catch (e) { - return {}; - } + if (field.type === 'object') { + try { + value = eval(`(${value})`); // eslint-disable-line no-eval + } catch (e) { + return {}; } - - return value; } - let value = initial; - if (type === 'object') { - value = JSON.stringify(value, null, 4); - } - - this.state.fields[name] = { - name, - value, - type, - valid: true, - }; - - return initial; + return value; } shouldStoryUpdate() { @@ -162,6 +146,7 @@ export default class PropEditor extends React.Component { } PropEditor.propTypes = { + initialValues: React.PropTypes.object.isRequired, storyFn: React.PropTypes.func.isRequired, context: React.PropTypes.object.isRequired, }; diff --git a/src/index.js b/src/index.js index 1174c3cc7c51..27a7e9dd9052 100644 --- a/src/index.js +++ b/src/index.js @@ -2,7 +2,30 @@ import React from 'react'; import PropEditor from './components/PropEditor'; export function addWithKnobs(storyName, storyFn) { + const initialValues = {}; + + const recordInitialValues = (name, initial, type) => { + let value = initial; + if (type === 'object') { + value = JSON.stringify(value, null, 4); + } + + initialValues[name] = { + name, + value, + type, + valid: true, + }; + + return initial; + }; + + // Call storyFn once to get the initial values. Just ignore the result of + // this call. + const dummyContext = {}; // TODO: Find if this object needs some fields inside + storyFn(dummyContext, recordInitialValues); + this.add(storyName, (context) => ( - + )); }