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

modified debounce logic to use lodash rather than custom timeout code

Browse Source
This commit is contained in:
codebyalex 2019-03-07 00:37:57 -05:00
parent c15e07a646
commit 8aa71c5382
2 changed files with 17 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
addons/knobs/package.json
View File

@ -31,6 +31,7 @@
"escape-html": "^1.0.3",
"fast-deep-equal": "^2.0.1",
"global": "^4.3.2",
"lodash.debounce": "^4.0.8",
"prop-types": "^15.6.2",
"qs": "^6.5.2",
"react-color": "^2.17.0",

31
addons/knobs/src/registerKnobs.js
View File

@ -1,13 +1,13 @@
import addons from '@storybook/addons';
import { STORY_CHANGED, FORCE_RE_RENDER, REGISTER_SUBSCRIPTION } from '@storybook/core-events';
import debounce from 'lodash.debounce';
import KnobManager from './KnobManager';
import { CHANGE, CLICK, RESET, SET } from './shared';
export const manager = new KnobManager();
const { knobStore } = manager;
const KNOB_CHANGED_DEBOUNCE_DELAY_MS = 155; // approximate average time between keypresses
let timeoutId = null;
const KNOB_CHANGED_DEBOUNCE_DELAY_MS = 150;
function forceReRender() {
addons.getChannel().emit(FORCE_RE_RENDER);
@ -18,20 +18,21 @@ function setPaneKnobs(timestamp = +new Date()) {
channel.emit(SET, { knobs: knobStore.getAll(), timestamp });
}
// Increased performance by reducing the number of times a component is rendered during knob changes
const debouncedOnKnobChanged = debounce(change => {
const { name, value } = change;
// Update the related knob and it's value.
const knobOptions = knobStore.get(name);
knobOptions.value = value;
knobStore.markAllUnused();
forceReRender();
}, KNOB_CHANGED_DEBOUNCE_DELAY_MS);
function knobChanged(change) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
// debouncing occurs here to increase performance
const { name, value } = change;
// Update the related knob and it's value.
const knobOptions = knobStore.get(name);
knobOptions.value = value;
knobStore.markAllUnused();
forceReRender();
}, KNOB_CHANGED_DEBOUNCE_DELAY_MS); // amount of time used to ensure that the user has time to type before re-rendering
debouncedOnKnobChanged(change);
}
function knobClicked(clicked) {