import { Args } from '@storybook/addons' ; import { useState , useEffect , useCallback } from 'react' ; import Events , { FORCE_RE_RENDER } from '@storybook/core-events' ; import useDebouncedCallback from './useDebounceCallback' ; export const useArgs = ( storyId , storyStore ) : [ Args , ( args : Args ) => void , ( argNames ? : string [ ] ) => void ] => { const debouncedReRender = useDebouncedCallback ( ( ) => storyStore . _channel . emit ( FORCE_RE_RENDER ) , 100 ) ; useEffect ( ( ) => { return ( ) => { debouncedReRender . cancel ( ) ; } ; } , [ debouncedReRender ] ) ; const story = storyStore . fromId ( storyId ) ; if ( ! story ) { throw new Error ( `Unknown story: ${ storyId }` ) ; } const { args : initialArgs } = story ; const [ args , setArgs ] = useState ( initialArgs ) ; useEffect ( ( ) => { const cb = ( changed ) => { if ( changed . storyId === storyId ) { setArgs ( changed . args ) ; } } ; storyStore . _channel . on ( Events . STORY_ARGS_UPDATED , cb ) ; return ( ) => storyStore . _channel . off ( Events . STORY_ARGS_UPDATED , cb ) ; } , [ storyId , storyStore . _channel ] ) ; const updateArgs = useCallback ( ( newArgs ) => { storyStore . updateStoryArgs ( storyId , newArgs ) ; debouncedReRender ( ) ; } , [ debouncedReRender , storyId , storyStore ] ) ; const resetArgs = useCallback ( ( argNames ? ) => { storyStore . resetStoryArgs ( storyId , argNames ) ; storyStore . _channel . emit ( FORCE_RE_RENDER ) ; } , [ storyId , storyStore ] ) ; return [ args , updateArgs , resetArgs ] ; } ;