1 | import "core-js/modules/es.function.name.js";
|
2 | import addons from '@storybook/addons';
|
3 | import { useEffect } from '@storybook/client-api';
|
4 | import { STORY_CHANGED, FORCE_RE_RENDER } from '@storybook/core-events';
|
5 | import debounce from 'lodash/debounce';
|
6 | import KnobManager from './KnobManager';
|
7 | import { CHANGE, CLICK, RESET, SET } from './shared';
|
8 | export var manager = new KnobManager();
|
9 | var knobStore = manager.knobStore;
|
10 | var COMPONENT_FORCE_RENDER_DEBOUNCE_DELAY_MS = 325;
|
11 |
|
12 | function forceReRender() {
|
13 | addons.getChannel().emit(FORCE_RE_RENDER);
|
14 | }
|
15 |
|
16 | function setPaneKnobs() {
|
17 | var timestamp = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : +new Date();
|
18 | var channel = addons.getChannel();
|
19 | channel.emit(SET, {
|
20 | knobs: knobStore.getAll(),
|
21 | timestamp: timestamp
|
22 | });
|
23 | }
|
24 |
|
25 | var resetAndForceUpdate = function resetAndForceUpdate() {
|
26 | knobStore.markAllUnused();
|
27 | forceReRender();
|
28 | };
|
29 |
|
30 |
|
31 | var debouncedResetAndForceUpdate = debounce(resetAndForceUpdate, COMPONENT_FORCE_RENDER_DEBOUNCE_DELAY_MS);
|
32 |
|
33 | function knobChanged(change) {
|
34 | var name = change.name;
|
35 | var value = change.value;
|
36 |
|
37 | var knobOptions = knobStore.get(name);
|
38 | knobOptions.value = value;
|
39 |
|
40 | if (!manager.options.disableForceUpdate && !knobOptions.disableForceUpdate) {
|
41 | if (!manager.options.disableDebounce && !knobOptions.disableDebounce) {
|
42 | debouncedResetAndForceUpdate();
|
43 | } else {
|
44 | resetAndForceUpdate();
|
45 | }
|
46 | }
|
47 | }
|
48 |
|
49 | function knobClicked(clicked) {
|
50 | var knobOptions = knobStore.get(clicked.name);
|
51 |
|
52 | if (knobOptions.callback && knobOptions.callback() !== false) {
|
53 | forceReRender();
|
54 | }
|
55 | }
|
56 |
|
57 | function resetKnobs() {
|
58 | knobStore.reset();
|
59 | setPaneKnobs(false);
|
60 | }
|
61 |
|
62 | function resetKnobsAndForceReRender() {
|
63 | knobStore.reset();
|
64 | forceReRender();
|
65 | setPaneKnobs(false);
|
66 | }
|
67 |
|
68 | function disconnectCallbacks() {
|
69 | var channel = addons.getChannel();
|
70 | channel.removeListener(CHANGE, knobChanged);
|
71 | channel.removeListener(CLICK, knobClicked);
|
72 | channel.removeListener(STORY_CHANGED, resetKnobs);
|
73 | channel.removeListener(RESET, resetKnobsAndForceReRender);
|
74 | knobStore.unsubscribe(setPaneKnobs);
|
75 | }
|
76 |
|
77 | function connectCallbacks() {
|
78 | var channel = addons.getChannel();
|
79 | channel.on(CHANGE, knobChanged);
|
80 | channel.on(CLICK, knobClicked);
|
81 | channel.on(STORY_CHANGED, resetKnobs);
|
82 | channel.on(RESET, resetKnobsAndForceReRender);
|
83 | knobStore.subscribe(setPaneKnobs);
|
84 | return disconnectCallbacks;
|
85 | }
|
86 |
|
87 | export function registerKnobs() {
|
88 | useEffect(connectCallbacks, []);
|
89 | } |
\ | No newline at end of file |