diff --git a/addons/knobs/src/KnobManager.js b/addons/knobs/src/KnobManager.js index 2ec08c6de14b..73ae03687e07 100644 --- a/addons/knobs/src/KnobManager.js +++ b/addons/knobs/src/KnobManager.js @@ -1,33 +1,14 @@ /* eslint no-underscore-dangle: 0 */ -// import window from 'global'; -// import React from 'react'; import deepEqual from 'deep-equal'; -// import WrapStory from './components/WrapStory'; import KnobStore from './KnobStore'; // This is used by _mayCallChannel to determine how long to wait to before triggering a panel update const PANEL_UPDATE_INTERVAL = 400; export default class KnobManager { - constructor() { - this.knobStore = null; - this.knobStoreMap = { - length: 0, - }; - } - - initStore(channel) { + constructor(channel) { this.channel = channel; - const key = this.knobStoreMap.length + 1; - this.knobStoreMap.length = this.knobStoreMap.length + 1; - let knobStore = this.knobStoreMap[key]; - - if (!knobStore) { - knobStore = this.knobStoreMap[key] = new KnobStore(); // eslint-disable-line - } - - this.knobStore = knobStore; - knobStore.markAllUnused(); + this.knobStore = new KnobStore(); } knob(name, options) { diff --git a/addons/knobs/src/components/Panel.js b/addons/knobs/src/components/Panel.js index c9e894752819..f980644b646c 100644 --- a/addons/knobs/src/components/Panel.js +++ b/addons/knobs/src/components/Panel.js @@ -60,6 +60,7 @@ export default class Panel extends React.Component { this.stopListeningOnStory = this.props.api.onStory(() => { this.setState({ knobs: [] }); + this.props.channel.emit('addon:knobs:reset'); }); } diff --git a/addons/knobs/src/index.js b/addons/knobs/src/index.js index eebec91913a9..a0a1448474a0 100644 --- a/addons/knobs/src/index.js +++ b/addons/knobs/src/index.js @@ -5,7 +5,8 @@ import KnobManager from './KnobManager'; import { vueHandler } from './vue'; import { reactHandler } from './react'; -const manager = new KnobManager(); +const channel = addons.getChannel(); +const manager = new KnobManager(channel); export function knob(name, options) { return manager.knob(name, options); @@ -60,14 +61,11 @@ export function date(name, value = new Date()) { } function oldKnobs(storyFn, context) { - const channel = addons.getChannel(); - manager.initStore(channel); return reactHandler(channel, manager.knobStore)(storyFn)(context); } function oldKnobsWithOptions(options = {}) { return (...args) => { - const channel = addons.getChannel(); channel.emit('addon:knobs:setOptions', options); return oldKnobs(...args); @@ -93,9 +91,6 @@ Object.defineProperty(exports, 'withKnobsOptions', { }); export function addonKnobs(options) { - const channel = addons.getChannel(); - manager.initStore(channel); - if (options) channel.emit('addon:knobs:setOptions', options); switch (window.STORYBOOK_ENV) { diff --git a/examples/cra-kitchen-sink/src/stories/index.js b/examples/cra-kitchen-sink/src/stories/index.js index 3a5dbb5498ce..1fc7b007f687 100644 --- a/examples/cra-kitchen-sink/src/stories/index.js +++ b/examples/cra-kitchen-sink/src/stories/index.js @@ -130,8 +130,8 @@ storiesOf('addonNotes', module) storiesOf('Addon Knobs deprecated Decorator', module) .addDecorator(withKnobs) // test deprecated .add('with dynamic variables deprecated', () => { - const name = text('Name', 'Arunoda Susiripala'); - const age = number('Age', 89); + const name = text('Name', 'Story Teller'); + const age = number('Age', 120); const content = `I am ${name} and I'm ${age} years old.`; return
{content}
; diff --git a/examples/vue/src/stories/index.js b/examples/vue/src/stories/index.js index 899d759cd909..6cfedaf4bfea 100644 --- a/examples/vue/src/stories/index.js +++ b/examples/vue/src/stories/index.js @@ -119,4 +119,13 @@ storiesOf('Addon Knobs', module) return { template: `
${content}
` }; - })); \ No newline at end of file + })) + .add('With some different name', addonKnobs()(() => { + const name = text('Name', 'Story Teller'); + const age = number('Age', 120); + + const content = `I am a ${name} and I'm ${age} years old.`; + return { + template: `
${content}
` + }; + }));; \ No newline at end of file