import React , { FC , useState } from 'react' ; import * as d3 from 'd3' ; import { zoomTransform } from 'd3' ; import { TreeViewContextProps } from './types' ; type TreeViewContextValue = { state : TreeViewContextProps ; updateState : ( newState : Partial < TreeViewContextProps > ) => void ; } ; const treeContextValue = { state : { } , updateState : ( ) => { } } ; export const TreeViewContext = React . createContext < TreeViewContextValue > ( treeContextValue ) ; export const TreeViewContainer = ( { children } ) => { const [ state , setState ] = useState < TreeViewContextProps > ( { } ) ; const updateState = ( newState ) => { setState ( { ... state , ... newState } ) ; } ; const zoomHandler = ( step ) => { if ( ! state . ref || ! state . zoom ) { return ; } d3 . select ( state . ref ) . transition ( ) . call ( state . zoom . scaleTo , function ( this , datum , index , groups ) { const defaultExtent = state . zoom ! . extent ( ) ; const k0 = zoomTransform ( this ) . k ; const extent = defaultExtent . apply ( this , [ datum , index , groups ] ) ; const width = extent [ 1 ] [ 0 ] ; const k1 = step > 1 ? step - 1 : - step ; return ( width * k0 + width * k1 ) / width ; } ) ; } ; return ( < TreeViewContext . Provider value = { { state : { ... state , zoomHandler } , updateState } } > { children } < /TreeViewContext.Provider>); } ;