import * as React from "react" ; import { DragResizeEdge , IDragResizeEdgeProps , createAfterEdgeCallback , } from "./ResizeEdge" ; export interface IResizableSplitContainerProps { /**
     * initial container width
     */ containerWidth ? : number ; /**
     * initial container height
     */ containerHeight ? : number ; /**
     * minimum width of the container
     */ minWidth ? : number ; /**
     * Standard react component className
     */ className ? : string ; /**
     * `setContainerStyle` allows you to set the style of the ResizableContainer based on the current width
     */ setContainerStyle ? : ( width : number ) => React . CSSProperties ; /**
     * Callback when either edge of the container is being dragged
     */ onDrag ? : ( width : number ) => void ; /**
     * Callback when either edge was dragged. This is a good place to save the latest width
     */ onDragEnd ? : ( width : number ) => void ; /**
     * embedded content on left
     */ leftContent ? : ( width : number ) => JSX . Element | null ; /**
     * embedded content on right
     */ rightContent ? : ( width : number ) => JSX . Element | null ; } export function ResizableSplitContainer ( props ) { const { leftContent , rightContent , containerWidth = 600 , containerHeight = 400 , minWidth = 0 , onDrag , onDragEnd , className , setContainerStyle , } = props ; const [ width , setWidth ] = React . useState ( containerWidth / 2 ) ; const [ currentWidth , setCurrentWidth ] = React . useState ( containerWidth / 2 ) ; const onDragCallback = ( newWidth ) => { newWidth = Math . max ( newWidth , minWidth ) ; if ( width !== newWidth ) { setWidth ( newWidth ) ; } if ( onDrag ) { onDrag ( newWidth ) ; } } ; const onDragEndCallback = ( newWidth ) => { newWidth = Math . max ( newWidth , minWidth ) ; if ( currentWidth !== newWidth ) { setCurrentWidth ( newWidth ) ; } if ( onDragEnd ) { onDragEnd ( newWidth ) ; } } ; const splitterEdgeProps = { onDrag : createAfterEdgeCallback ( currentWidth , onDragCallback ) , onDragEnd : createAfterEdgeCallback ( currentWidth , onDragEndCallback ) , } ; const leftWidth = width ; const rightWidth = containerWidth - width ; const leftContainerStyle = setContainerStyle ? setContainerStyle ( leftWidth ) : { width : `${ leftWidth }px` } ; const rightContainerStyle = setContainerStyle ? setContainerStyle ( rightWidth ) : { width : `${ rightWidth }px` } ; const leftRenderer = leftContent ? leftContent : rightContent ; const leftChild = leftRenderer && ( < div className = { className } style = { leftContainerStyle } > { leftRenderer ( leftWidth ) } < /div>); const rightRenderer = leftContent ? rightContent : null ; const rightChild = rightRenderer && ( < div className = { className } style = { rightContainerStyle } > { rightRenderer ( rightWidth ) } < /div>); return ( < div style = { { width : containerWidth , height : containerHeight , display : "flex" , } } > { leftChild } { < DragResizeEdge { ... splitterEdgeProps } / > } { rightChild } < /div>); }