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 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 | 30x 30x 30x 30x 30x 20x 20x 20x 20x 20x 20x 20x 30x 30x 1x | import React, { useCallback, useRef, useEffect } from "react";
import { clsx } from "clsx";
import { PANEL_DIMENSIONS } from "../../constants";
import type { PanelPosition } from "../../types";
import styles from "./PanelResizer.module.scss";
export interface PanelResizerProps {
/** Current panel width */
width: number;
/** Width change handler */
onWidthChange: (width: number) => void;
/** Panel position */
position?: PanelPosition;
/** Minimum width */
minWidth?: number;
/** Maximum width */
maxWidth?: number;
/** Custom class name */
className?: string;
}
/**
* Drag handle for resizing the panel width
*/
export function PanelResizer({
width,
onWidthChange,
position = "right",
minWidth = PANEL_DIMENSIONS.minWidth,
maxWidth = PANEL_DIMENSIONS.maxWidth,
className,
}: PanelResizerProps) {
const isDraggingRef = useRef(false);
const startXRef = useRef(0);
const startWidthRef = useRef(0);
const handleMouseDown = useCallback(
(e: React.MouseEvent) => {
e.preventDefault();
isDraggingRef.current = true;
startXRef.current = e.clientX;
startWidthRef.current = width;
document.body.style.cursor = "col-resize";
document.body.style.userSelect = "none";
},
[width]
);
useEffect(() => {
const handleMouseMove = (e: MouseEvent) => {
if (!isDraggingRef.current) return;
const deltaX = e.clientX - startXRef.current;
// For right panel, dragging left increases width
// For left panel, dragging right increases width
const newWidth =
position === "right"
? startWidthRef.current - deltaX
: startWidthRef.current + deltaX;
const clampedWidth = Math.max(minWidth, Math.min(maxWidth, newWidth));
onWidthChange(clampedWidth);
};
const handleMouseUp = () => {
if (isDraggingRef.current) {
isDraggingRef.current = false;
document.body.style.cursor = "";
document.body.style.userSelect = "";
}
};
document.addEventListener("mousemove", handleMouseMove);
document.addEventListener("mouseup", handleMouseUp);
return () => {
document.removeEventListener("mousemove", handleMouseMove);
document.removeEventListener("mouseup", handleMouseUp);
};
}, [position, minWidth, maxWidth, onWidthChange]);
const positionClass = position === "right" ? styles.positionRight : styles.positionLeft;
return (
<div
className={clsx(styles.resizer, positionClass, className)}
onMouseDown={handleMouseDown}
role="separator"
aria-orientation="vertical"
aria-valuemin={minWidth}
aria-valuemax={maxWidth}
aria-valuenow={width}
tabIndex={0}
>
{/* Visual indicator on hover */}
<div className={styles.indicator} />
</div>
);
}
PanelResizer.displayName = "PanelResizer";
|