import React , { useEffect , useLayoutEffect , useRef , useState } from 'react' ; import Xarrow , { useXarrow , xarrowPropsType , Xwrapper } from 'react-xarrows' ; import Draggable from 'react-draggable' ; import { Meta , Story } from '@storybook/react' ; import { useSpring , animated } from 'react-spring' ; import { DraggableBox } from '../components/DraggableBox' ; const canvasStyle = { width : '100%' , height : '50vh' , background : 'white' , display : 'flex' , color : 'black' , } as const ; const SimpleTemplate = ( ) => { const box = { id : 'box1' , initialOffset : { x : 20 , y : 20 } } ; const box2 = { id : 'box2' , initialOffset : { x : 320 , y : 120 } } ; const box3 = { id : 'box3' , initialOffset : { x : 50 , y : 150 } } ; const box4 = { id : 'box4' , initialOffset : { x : 320 , y : 220 } } ; return ( < div style = { canvasStyle } id = "canvas" > < Xwrapper > < DraggableBox { ... box } / > < DraggableBox { ... box2 } / > < Xarrow start = { 'box1' } end = { 'box2' } / > < Xarrow start = { 'box1' } end = { 'box2' } endAnchor = { 'top' } / > < Xarrow start = { 'box1' } end = { 'box2' } startAnchor = { 'bottom' } / > < /Xwrapper> < Xwrapper > < DraggableBox { ... box3 } / > < DraggableBox { ... box4 } / > < Xarrow start = { 'box3' } end = { 'box4' } / > < /Xwrapper> < /div>); } ; const SimpleTemplateStory = ( args ) => < SimpleTemplate />; export const V2 = SimpleTemplateStory . bind ( { } ) ; const ScrolledDiv = ( { children , style } ) => { const updateXarrow = useXarrow ( ) ; return ( < div style = { { height : '150%' , width : 300 , overflow : 'auto' , position : 'relative' , ... style } } onScroll = { updateXarrow } > { children } < /div>); } ; const ScrollTemplate = ( ) => { const box = { id : 'box1' , initialOffset : { x : 20 , y : 20 } } ; const box2 = { id : 'box2' , initialOffset : { x : 320 , y : 120 } } ; return ( < div style = { { ... canvasStyle , background : '#e0ffd2' } } id = "canvas" > < Xwrapper > < ScrolledDiv style = { { background : '#d2f6ff' } } > < DraggableBox { ... box } / > < /ScrolledDiv> < ScrolledDiv style = { { background : '#f8d2ff' } } > < DraggableBox { ... box2 } / > < /ScrolledDiv> < Xarrow start = { 'box1' } end = { 'box2' } / > < /Xwrapper> < /div>); } ; export const V2Scroll = ScrollTemplate . bind ( { } ) ; const MyComponentDefaultProps = { prop1 : 0 } ; type MyComponentPropsType = typeof MyComponentDefaultProps ; const parseVal1 = ( val ) : number => val * 2 ; const useParseProps = ( props ) => { const [ parsedVals , setParsedVals ] = useState ( { parsedProp1 : parseVal1 ( MyComponentDefaultProps . prop1 ) } ) ; useLayoutEffect ( ( ) => { parsedVals . parsedProp1 = parseVal1 ( props . prop1 ) ; setParsedVals ( { ... parsedVals } ) ; } , [ props . prop1 ] ) ; return parsedVals ; } ; const MyComponent = ( props ) => { const parsedProps = useParseProps ( props ) ; console . log ( 'look it me' , parsedProps . parsedProp1 ) ; const { myVar } = useSpring ( { from : { myVar : 0 } , to : { myVar : parsedProps . parsedProp1 } , loop : true , config : { duration : 3000 } , } ) ; return ( < div > current val : < animated . div > { myVar } < /animated.div> < /div>); } ; export const ReactSpring = ( ) => { const [ val , setVal ] = useState ( 10 ) ; return ( < div > app val : { val } < br /> < button onClick = { ( ) => setVal ( val + 1 ) } > + < /button> < button onClick = { ( ) => setVal ( val - 1 ) } > - < /button> < MyComponent prop1 = { val } / > < /div>); } ; const TwoBoxesTemplate = ( ) => { const boxRef1 = useRef ( null ) ; const boxRef2 = useRef ( null ) ; return ( < div style = { { display : 'flex' , justifyContent : 'space-evenly' , width : '100%' } } > < Xwrapper > < DraggableBox reference = { boxRef1 } id = { 'elem1' } / > < DraggableBox reference = { boxRef2 } id = { 'elem2' } / > < Xarrow start = { boxRef1 } end = { boxRef2 } / > < /Xwrapper> < /div>); } ; export function StrictVsNotStrict ( ) { return ( < div > < h1 > Strict < /h1> < React . StrictMode > < TwoBoxesTemplate /> < /React.StrictMode> < h1 > Not Strict < /h1> < TwoBoxesTemplate / > < /div>); } export default { title : 'XarrowV2' , component : Xarrow , } as Meta ;