GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-07 06:01:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

Listen to CHANGE_STORY_STATE and change it in the store

Browse Source
This commit is contained in:
Tom Coleman 2020-02-11 20:56:13 +11:00
parent 8b08dc2080
commit a784aa1b9b
3 changed files with 19 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
lib/client-api/src/story_store.test.ts
View File

@ -1,6 +1,6 @@
import createChannel from '@storybook/channel-postmessage'; import createChannel from '@storybook/channel-postmessage';
import { toId } from '@storybook/csf'; import { toId } from '@storybook/csf';
import addons from '@storybook/addons'; import addons, { mockChannel } from '@storybook/addons';
import Events from '@storybook/core-events'; import Events from '@storybook/core-events';
import StoryStore from './story_store'; import StoryStore from './story_store';
@ -96,7 +96,7 @@ describe('preview.story_store', () => {
it('synchronously emits STORY_STATE_CHANGED if different', () => { it('synchronously emits STORY_STATE_CHANGED if different', () => {
const onStateChanged = jest.fn(); const onStateChanged = jest.fn();
const testChannel = createChannel({ page: 'preview' }); const testChannel = mockChannel();
testChannel.on(Events.STORY_STATE_CHANGED, onStateChanged); testChannel.on(Events.STORY_STATE_CHANGED, onStateChanged);
const store = new StoryStore({ channel: testChannel }); const store = new StoryStore({ channel: testChannel });
@ -108,6 +108,16 @@ describe('preview.story_store', () => {
store.setStoryState('a--1', { baz: 'bing' }); store.setStoryState('a--1', { baz: 'bing' });
expect(onStateChanged).toHaveBeenCalledWith('a--1', { foo: 'bar', baz: 'bing' }); expect(onStateChanged).toHaveBeenCalledWith('a--1', { foo: 'bar', baz: 'bing' });
}); });
it('should update if the CHANGE_STORY_STATE event is received', () => {
const testChannel = mockChannel();
const store = new StoryStore({ channel: testChannel });
addStoryToStore(store, 'a', '1', () => 0);
testChannel.emit(Events.CHANGE_STORY_STATE, 'a--1', { foo: 'bar' });
expect(store.getRawStory('a', '1').state).toEqual({ foo: 'bar' });
});
}); });
describe('storySort', () => { describe('storySort', () => {

6
lib/client-api/src/story_store.ts
View File

@ -84,12 +84,16 @@ export default class StoryStore extends EventEmitter {
this._stories = {}; this._stories = {};
this._revision = 0; this._revision = 0;
this._selection = {} as any; this._selection = {} as any;
this._channel = params.channel;
this._error = undefined; this._error = undefined;
if (params.channel) this.setChannel(params.channel);
} }
setChannel = (channel: Channel) => { setChannel = (channel: Channel) => {
this._channel = channel; this._channel = channel;
channel.on(Events.CHANGE_STORY_STATE, (id: string, newState: StoryState) =>
this.setStoryState(id, newState)
);
}; };
addGlobalMetadata({ parameters, decorators }: StoryMetadata) { addGlobalMetadata({ parameters, decorators }: StoryMetadata) {

2
lib/core-events/src/index.ts
View File

@ -10,6 +10,7 @@ enum events {
STORY_ADDED = 'storyAdded', STORY_ADDED = 'storyAdded',
STORY_CHANGED = 'storyChanged', STORY_CHANGED = 'storyChanged',
STORY_UNCHANGED = 'storyUnchanged', STORY_UNCHANGED = 'storyUnchanged',
CHANGE_STORY_STATE = 'changeStoryState',
STORY_STATE_CHANGED = 'storyStateChanged', STORY_STATE_CHANGED = 'storyStateChanged',
FORCE_RE_RENDER = 'forceReRender', FORCE_RE_RENDER = 'forceReRender',
REGISTER_SUBSCRIPTION = 'registerSubscription', REGISTER_SUBSCRIPTION = 'registerSubscription',
@ -45,6 +46,7 @@ export const {
REGISTER_SUBSCRIPTION, REGISTER_SUBSCRIPTION,
STORY_INIT, STORY_INIT,
STORY_ADDED, STORY_ADDED,
CHANGE_STORY_STATE,
STORY_STATE_CHANGED, STORY_STATE_CHANGED,
STORY_RENDER, STORY_RENDER,
STORY_RENDERED, STORY_RENDERED,