Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | "use client";
import { useCallback, useRef, useState } from "react";
export function usePanelResize(defaultWidth= 480, minWidth = 300, maxWidth = 800) {
const [width, setWidth] = useState(() =>
typeof window !== "undefined" ? Math.min(maxWidth, Math.max(minWidth, window.innerWidth * 0.25)) : defaultWidth
);
const isDragging = useRef(false);
const startX = useRef(0);
const startWidth = useRef(0);
const handleMouseDown = useCallback((e: React.MouseEvent) => {
isDragging.current = true;
startX.current = e.clientX;
startWidth.current = width;
document.body.style.cursor = "col-resize";
document.body.style.userSelect = "none";
function handleMouseMove(e: MouseEvent) {
if (!isDragging.current) return;
const delta = startX.current - e.clientX;
const next = Math.min(maxWidth, Math.max(minWidth, startWidth.current + delta));
setWidth(next);
}
function handleMouseUp() {
isDragging.current = false;
document.body.style.cursor = "";
document.body.style.userSelect = "";
document.removeEventListener("mousemove", handleMouseMove);
document.removeEventListener("mouseup", handleMouseUp);
}
document.addEventListener("mousemove", handleMouseMove);
document.addEventListener("mouseup", handleMouseUp);
}, [width, minWidth, maxWidth]);
return { width, handleMouseDown };
}
|