import * as React from "react" ; export interface IDragResizeEdgeProps { onDrag ? : ( pixelsTowardNextElementDragged : number ) => void ; onDragEnd ? : ( pixelsTowardNextElementDragged : number ) => void ; } /**
 * DragResizeEdge is used for resizing component immediately BEFORE or AFTER
 */ export function DragResizeEdge ( props ) { const _start = React . useRef ( 0 ) ; const { onDrag , onDragEnd } = props ; const _onMouseDown = ( event ) => { _start . current = event . clientX ; window . addEventListener ( "mousemove" , _onMouseMove , true ) ; window . addEventListener ( "mouseup" , _onMouseUp , true ) ; } ; const _onMouseUp = ( event ) => { window . removeEventListener ( "mousemove" , _onMouseMove , true ) ; window . removeEventListener ( "mouseup" , _onMouseUp , true ) ; _reportNewWidth ( _start . current , event . clientX , onDragEnd ) ; } ; const _onMouseMove = ( event ) => { event . stopPropagation ( ) ; event . preventDefault ( ) ; _reportNewWidth ( _start . current , event . clientX , onDrag ) ; } ; const _reportNewWidth = ( start , end , reportFunc ? ) => { const pixelsTowardNextElementDragged = end - start ; if ( pixelsTowardNextElementDragged && reportFunc ) { reportFunc ( pixelsTowardNextElementDragged ) ; } } ; return ( < div style = { { border : "0.5px solid black" , width : "2px" , margin : "10px 0" , cursor : "ew-resize" , } } onMouseDown = { _onMouseDown } > < div style = { { zIndex : 286 , position : "relative" , width : "2px" , cursor : "ew-resize" , height : "100%" , } } > < /div> < /div>); } param currentWidth param callback export function createBeforeEdgeCallback ( currentWidth , callback ) { return ( pixelsTowardNextElementDragged ) => callback ( currentWidth - pixelsTowardNextElementDragged ) ; } param currentWidth param callback export function createAfterEdgeCallback ( currentWidth , callback ) { return ( pixelsTowardNextElementDragged ) => callback ( currentWidth + pixelsTowardNextElementDragged ) ; }