Skip to content
This repository has been archived by the owner on Nov 10, 2017. It is now read-only.

Commit

Permalink
Make render function of WrapStory pure
Browse files Browse the repository at this point in the history
The render function of a React component has to be pure. But WrapStory render function called storyFn. Which could be not pure. Because it could take data from anywhere and also may render other components. Like the case in #60

This fixes #60
  • Loading branch information
Aruna Herath committed Oct 13, 2016
1 parent fd28957 commit 5fc87d0
Show file tree
Hide file tree
Showing 2 changed files with 12 additions and 10 deletions.
6 changes: 4 additions & 2 deletions src/KnobManager.js
Original file line number Diff line number Diff line change
Expand Up @@ -43,9 +43,11 @@ export default class KnobManager {
if (!knobStore) {
knobStore = this.knobStoreMap[key] = new KnobStore();
}
this.knobStore = knobStore;

const props = { context, storyFn, channel, knobStore };
this.knobStore = knobStore;
knobStore.markAllUnused();
const initialContent = storyFn(context);
const props = { context, storyFn, channel, knobStore, initialContent };
return (<WrapStory {...props} />);
}

Expand Down
16 changes: 8 additions & 8 deletions src/components/WrapStory.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export default class WrapStory extends React.Component {
this.resetKnobs = this.resetKnobs.bind(this);
this.setPaneKnobs = this.setPaneKnobs.bind(this);
this._knobsAreReset = false;
this.state = {};
this.state = { storyContent: this.props.initialContent };
}

componentDidMount() {
Expand Down Expand Up @@ -35,24 +35,23 @@ export default class WrapStory extends React.Component {

knobChanged(change) {
const { name, value } = change;
const { knobStore } = this.props;
const { knobStore, storyFn, context } = this.props;
// Update the related knob and it's value.
const knobOptions = knobStore.get(name);
knobOptions.value = value;
this.forceUpdate();
knobStore.markAllUnused();
this.setState({ storyContent: storyFn(context) });
}

resetKnobs() {
const { knobStore } = this.props;
const { knobStore, storyFn, context } = this.props;
knobStore.reset();
this.forceUpdate();
this.setState({ storyContent: storyFn(context) });
this.setPaneKnobs();
}

render() {
const { storyFn, context, knobStore } = this.props;
knobStore.markAllUnused();
return storyFn(context);
return this.state.storyContent;
}
}

Expand All @@ -61,4 +60,5 @@ WrapStory.propTypes = {
storyFn: React.PropTypes.func,
channel: React.PropTypes.object,
knobStore: React.PropTypes.object,
initialContent: React.PropTypes.object,
};

0 comments on commit 5fc87d0

Please sign in to comment.