import * as React from "react" ; import { DragResizeEdge , IDragResizeEdgeProps , createAfterEdgeCallback , createBeforeEdgeCallback , } from "./ResizeEdge" ; export interface IResizableContainerProps { /**
     * Specifies if the BEFORE edge of the component is draggable
     */ isBeforeEdgeDraggable ? : boolean ; /**
     * Specify if the AFTER edge of the component is draggable
     */ isAfterEdgeDraggable ? : boolean ; /**
     * The initial width of the container
     */ initialWidth : number ; /**
     * minimum width of the container
     */ minWidth ? : number ; /**
     * Standard react component className
     */ className ? : string ; /**
     * The child `renderProp` you would like to wrap
     */ children ? : ( width : number ) => JSX . Element ; /**
     * `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 ; } param props export function ResizableContainer ( props ) { const { isBeforeEdgeDraggable = false , isAfterEdgeDraggable = false , children , initialWidth , minWidth = 0 , onDrag , onDragEnd , className , setContainerStyle , } = props ; const [ width , setWidth ] = React . useState ( initialWidth ) ; const [ currentWidth , setCurrentWidth ] = React . useState ( initialWidth ) ; 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 beforeEdgeProps = { onDrag : createBeforeEdgeCallback ( currentWidth , onDragCallback ) , onDragEnd : createBeforeEdgeCallback ( currentWidth , onDragEndCallback ) , } ; const afterEdgeProps = { onDrag : createAfterEdgeCallback ( currentWidth , onDragCallback ) , onDragEnd : createAfterEdgeCallback ( currentWidth , onDragEndCallback ) , } ; const containerStyle = setContainerStyle ? setContainerStyle ( width ) : { width : `${ width }px` } ; return ( < > { isBeforeEdgeDraggable ? < DragResizeEdge { ... beforeEdgeProps } / > : null } < div className = { className } style = { containerStyle } > { children && children ( width ) } < /div> { isAfterEdgeDraggable ? < DragResizeEdge { ... afterEdgeProps } / > : null } < />); }