diff --git a/src/hooks/useResizeEvents.jsx b/src/hooks/useResizeEvents.jsx index 53c2163..66a9707 100644 --- a/src/hooks/useResizeEvents.jsx +++ b/src/hooks/useResizeEvents.jsx @@ -7,6 +7,31 @@ const useResizeEvents = ( onResize, onResizeEnd ) => { + const onMouseMove = useCallback( + (event) => { + onResize({ event, target: resizeHandleRef.current, column }); + }, + [column, onResize, resizeHandleRef] + ); + + const onMouseUp = useCallback( + (event) => { + onResizeEnd({ event, target: resizeHandleRef.current, column }); + window.removeEventListener("mousemove", onMouseMove); + window.removeEventListener("mouseup", onMouseUp); + }, + [column, onMouseMove, onResizeEnd, resizeHandleRef] + ); + + const onMouseDown = useCallback( + (event) => { + onResizeStart({ event, target: resizeHandleRef.current, column }); + window.addEventListener("mousemove", onMouseMove); + window.addEventListener("mouseup", onMouseUp); + }, + [column, onMouseMove, onMouseUp, onResizeStart, resizeHandleRef] + ); + useEffect(() => { const resizeEl = resizeHandleRef.current; if (resizeEl) resizeEl.addEventListener("mousedown", onMouseDown); @@ -27,31 +52,6 @@ const useResizeEvents = ( onMouseMove, onMouseUp, ]); - - const onMouseDown = useCallback( - (event) => { - onResizeStart({ event, target: resizeHandleRef.current, column }); - window.addEventListener("mousemove", onMouseMove); - window.addEventListener("mouseup", onMouseUp); - }, - [column, onMouseMove, onMouseUp, onResizeStart, resizeHandleRef] - ); - - const onMouseMove = useCallback( - (event) => { - onResize({ event, target: resizeHandleRef.current, column }); - }, - [column, onResize, resizeHandleRef] - ); - - const onMouseUp = useCallback( - (event) => { - onResizeEnd({ event, target: resizeHandleRef.current, column }); - window.removeEventListener("mousemove", onMouseMove); - window.removeEventListener("mouseup", onMouseUp); - }, - [column, onMouseMove, onResizeEnd, resizeHandleRef] - ); }; export default useResizeEvents;