@servicetitan/assist-ui
Version:
ServiceTitan Assist UI Components
54 lines • 2.14 kB
JavaScript
import { useCallback, useEffect, useState } from 'react';
export const useDraggable = ({ initialX = window.innerWidth - 390, initialY = 64, minVisible = 50, width = 390, } = {}) => {
const [position, setPosition] = useState({ x: initialX, y: initialY });
const [isDragging, setIsDragging] = useState(false);
const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
const resetPosition = useCallback(() => {
setPosition({ x: initialX, y: initialY });
}, [initialX, initialY]);
const handleMouseDown = useCallback((e) => {
setIsDragging(true);
setDragOffset({
x: e.clientX - position.x,
y: e.clientY - position.y,
});
}, [position]);
const handleMouseMove = useCallback((e) => {
if (!isDragging) {
return;
}
const newX = e.clientX - dragOffset.x;
const newY = e.clientY - dragOffset.y;
const maxX = window.innerWidth - minVisible;
const minX = -width + minVisible;
const maxY = window.innerHeight - minVisible;
setPosition({
x: Math.min(Math.max(newX, minX), maxX),
y: Math.min(Math.max(newY, minVisible), maxY),
});
}, [isDragging, dragOffset, minVisible, width]);
const handleMouseUp = useCallback(() => {
setIsDragging(false);
}, []);
useEffect(() => {
if (isDragging) {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseup', handleMouseUp);
}
return () => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseup', handleMouseUp);
};
}, [isDragging, handleMouseMove, handleMouseUp]);
return {
position,
isDragging,
handleMouseDown,
resetPosition,
};
};
//# sourceMappingURL=use-draggable.js.map