import { Meta , Story } from "@storybook/react" ; import React from "react" ; import { Decorator } from "../utils/Decorator" ; import { Backlink } from "./Backlink" ; import { useBacklink } from "./context" ; const Wrapper = ( { children } ) => { const anchor = useBacklink ( ) ; const [ initialized , setInitialized ] = React . useState ( false ) ; const timer = React . useRef < number > ( ) ; React . useEffect ( ( ) => { timer . current = setInterval ( ( ) => { if ( ! initialized && anchor . current ) { setInitialized ( true ) ; clearInterval ( timer . current ) ; } } , 50 ) as any ; return ( ) => clearInterval ( timer . current ) ; } , [ ] ) ; return ( < div > < div ref = { anchor } / > { initialized && children } < /div>); } ; export const Default = ( ) => ( < Backlink onClick = { ( ) => undefined } > Back < /Backlink>); export const Loading = ( ) => ( < Backlink disabled onClick = { ( ) => undefined } > { undefined } < /Backlink>); export default { title : "Backlink" , decorators : [ ( Story ) => ( < Wrapper > < Story /> < /Wrapper>), Decorator , ] } as Meta ;