@wix/design-system
Version:
@wix/design-system
94 lines • 3.63 kB
JavaScript
import React, { useState, useRef, useEffect } from 'react';
import classNames from 'classnames';
import throttle from 'lodash/throttle';
import { classes } from './TableResizeHandle.st.css.js';
const TableResizeHandle = ({ onResize, onResizeStart, onResizeEnd, columnId, currentWidth, dataHook, disabled = false, skin = 'standard', }) => {
const [isDragging, setIsDragging] = useState(false);
const [dragStartX, setDragStartX] = useState(0);
const [dragStartWidth, setDragStartWidth] = useState(0);
const throttledOnResize = useRef(null);
useEffect(() => {
throttledOnResize.current = throttle((columnId, desiredNewWidth) => {
onResize(columnId, desiredNewWidth);
}, 20);
return () => {
throttledOnResize.current?.cancel();
};
}, [onResize]);
useEffect(() => {
if (isDragging) {
document.body.style.cursor = 'col-resize';
document.body.style.userSelect = 'none';
}
else {
document.body.style.cursor = '';
document.body.style.userSelect = '';
}
return () => {
document.body.style.cursor = '';
document.body.style.userSelect = '';
};
}, [isDragging]);
useEffect(() => {
const handleMouseMove = (e) => {
if (!isDragging)
return;
// Calculate how far the mouse has moved from the initial drag position
const mouseDeltaX = e.clientX - dragStartX;
// Calculate the desired new width based on original width + mouse movement
const desiredNewWidth = dragStartWidth + mouseDeltaX;
throttledOnResize.current(columnId, desiredNewWidth);
};
const handleMouseUp = (e) => {
if (isDragging) {
setIsDragging(false);
// Flush any pending throttled calls to ensure final state is accurate
throttledOnResize.current.flush();
if (onResizeEnd) {
onResizeEnd(columnId, e);
}
}
};
if (isDragging) {
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseup', handleMouseUp);
}
return () => {
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseup', handleMouseUp);
// Cancel any pending throttled calls on cleanup
throttledOnResize.current?.cancel();
};
}, [
isDragging,
dragStartX,
dragStartWidth,
columnId,
onResizeEnd,
]);
const handleMouseDown = (e) => {
if (disabled)
return;
e.preventDefault();
e.stopPropagation();
setDragStartX(e.clientX);
setDragStartWidth(currentWidth);
setIsDragging(true);
if (onResizeStart) {
onResizeStart(columnId, e.nativeEvent);
}
};
const blockClickEvents = (e) => {
e.preventDefault();
e.stopPropagation();
};
return (React.createElement("div", { className: classNames({
[classes.dragging]: isDragging,
[classes.disabled]: disabled,
[classes.resizeHandle]: !disabled,
[classes.skinStandard]: !skin || skin === 'standard',
[classes.skinNeutral]: skin === 'neutral',
}), onMouseDown: handleMouseDown, onClick: blockClickEvents, "data-hook": dataHook }));
};
export default TableResizeHandle;
//# sourceMappingURL=TableResizeHandle.js.map