@gravity-ui/uikit
Version:
Gravity UI base styling and components
31 lines (30 loc) • 1.34 kB
JavaScript
import * as React from 'react';
export function useResizeHandlers({ onStart, onMove, onEnd, arrangement = 'horizontal', }) {
const startRef = React.useRef(0);
const handleMove = React.useCallback((evt) => {
const current = arrangement === 'horizontal' ? evt.clientX : evt.clientY;
onMove(startRef.current - current);
}, [arrangement, onMove]);
const handleUp = React.useCallback((evt) => {
window.removeEventListener('pointermove', handleMove);
onEnd(startRef.current - (arrangement === 'horizontal' ? evt.clientX : evt.clientY), evt);
}, [arrangement, handleMove, onEnd]);
const onPointerDown = React.useCallback((e) => {
e.preventDefault();
const axisPos = arrangement === 'horizontal' ? e.clientX : e.clientY;
startRef.current = axisPos;
onStart();
window.addEventListener('pointermove', handleMove);
window.addEventListener('pointerup', handleUp, { once: true });
}, [onStart, arrangement, handleMove, handleUp]);
React.useEffect(() => {
return () => {
window.removeEventListener('pointermove', handleMove);
window.removeEventListener('pointerup', handleUp);
};
}, [handleMove, handleUp]);
return {
onPointerDown,
};
}
//# sourceMappingURL=useResizeHandlers.js.map