Merge pull request #18335 from Ang-YC/throttle-color-controls

fix: throttle color controls and make `updateArgs` and `resetArgs` stable
storybookjs · Jul 1, 2022 · f749dd3 · f749dd3
2 parents 3b8b8c3 + 1ac9097
commit f749dd3
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 7 deletions.
diff --git a/lib/api/src/index.tsx b/lib/api/src/index.tsx
@@ -447,13 +447,14 @@ export function useArgs(): [Args, (newArgs: Args) => void, (argNames?: string[])
 
   const data = getCurrentStoryData();
   const args = isStory(data) ? data.args : {};
+  const { id, refId } = data;
   const updateArgs = useCallback(
-    (newArgs: Args) => updateStoryArgs(data as Story, newArgs),
-    [data, updateStoryArgs]
+    (newArgs: Args) => updateStoryArgs({ id, refId }, newArgs),
+    [id, refId, updateStoryArgs]
   );
   const resetArgs = useCallback(
-    (argNames?: string[]) => resetStoryArgs(data as Story, argNames),
-    [data, resetStoryArgs]
+    (argNames?: string[]) => resetStoryArgs({ id, refId }, argNames),
+    [id, refId, resetStoryArgs]
   );
 
   return [args, updateArgs, resetArgs];

diff --git a/lib/api/src/lib/stories.ts b/lib/api/src/lib/stories.ts
@@ -131,6 +131,11 @@ export interface StoryIndex {
   stories: Record<StoryId, StoryIndexStory>;
 }
 
+export interface StoryKey {
+  id: StoryId;
+  refId?: string;
+}
+
 export type SetStoriesPayload =
   | {
       v: 2;

diff --git a/lib/api/src/modules/stories.ts b/lib/api/src/modules/stories.ts
@@ -36,6 +36,7 @@ import type {
   StoriesRaw,
   SetStoriesPayload,
   StoryIndex,
+  StoryKey,
 } from '../lib/stories';
 
 import { Args, ModuleFn } from '../index';
@@ -78,8 +79,8 @@ export interface SubAPI {
     parameterName?: ParameterName
   ) => Story['parameters'] | any;
   getCurrentParameter<S>(parameterName?: ParameterName): S;
-  updateStoryArgs(story: Story, newArgs: Args): void;
-  resetStoryArgs: (story: Story, argNames?: string[]) => void;
+  updateStoryArgs(story: Story | StoryKey, newArgs: Args): void;
+  resetStoryArgs: (story: Story | StoryKey, argNames?: string[]) => void;
   findLeafStoryId(StoriesHash: StoriesHash, storyId: StoryId): StoryId;
   findSiblingStoryId(
     storyId: StoryId,

diff --git a/lib/components/src/controls/Color.tsx b/lib/components/src/controls/Color.tsx
@@ -307,9 +307,10 @@ export const ColorControl: FC<ColorControlProps> = ({
   presetColors,
   startOpen,
 }) => {
+  const throttledOnChange = useCallback(throttle(onChange, 200), [onChange]);
   const { value, realValue, updateValue, color, colorSpace, cycleColorSpace } = useColorInput(
     initialValue,
-    throttle(onChange, 200)
+    throttledOnChange
   );
   const { presets, addPreset } = usePresets(presetColors, color, colorSpace);
   const Picker = ColorPicker[colorSpace];