@storybook/addon-ondevice-controls
Version:
Display storybook controls on your device.
38 lines (37 loc) • 1.69 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useArgs = void 0;
const react_1 = require("react");
const core_events_1 = require("storybook/internal/core-events");
const useArgs = (storyId, storyStore) => {
const story = storyStore.fromId(storyId);
if (!story) {
throw new Error(`Unknown story: ${storyId}`);
}
const { args: initialArgs } = story;
const [args, setArgs] = (0, react_1.useState)(initialArgs);
(0, react_1.useEffect)(() => {
// Sync the args up with the initial args of the story, since the story ID
// must have changed for this effect to run.
setArgs(initialArgs);
const cb = (changed) => {
if (changed.storyId === storyId) {
setArgs(changed.args);
}
};
storyStore._channel.on(core_events_1.STORY_ARGS_UPDATED, cb);
return () => storyStore._channel.off(core_events_1.STORY_ARGS_UPDATED, cb);
// Exclude `initialArgs` from the dependencies, as these are not relevant
// until `storyId` changes.
// eslint-disable-next-line react-compiler/react-compiler
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [storyId]);
const updateArgs = (0, react_1.useCallback)((newArgs) => {
storyStore._channel.emit(core_events_1.UPDATE_STORY_ARGS, { storyId, updatedArgs: newArgs });
}, [storyId, storyStore]);
const resetArgs = (0, react_1.useCallback)((argNames) => {
storyStore._channel.emit(core_events_1.RESET_STORY_ARGS, { storyId, argNames });
}, [storyId, storyStore]);
return [args, updateArgs, resetArgs];
};
exports.useArgs = useArgs;