33 lines
1.1 KiB
TypeScript
33 lines
1.1 KiB
TypeScript
 
|
// A vertical drag handle for adjusting the width of the panel to its left.
|
||
|
|
export function Resizer({ onDelta }: { onDelta: (deltaX: number) => void }) {
|
||
|
|
const onMouseDown = (e: React.MouseEvent) => {
|
||
|
|
e.preventDefault();
|
||
|
|
let lastX = e.clientX;
|
||
|
|
const onMove = (ev: MouseEvent) => {
|
||
|
|
onDelta(ev.clientX - lastX);
|
||
|
|
lastX = ev.clientX;
|
||
|
|
};
|
||
|
|
const onUp = () => {
|
||
|
|
document.removeEventListener("mousemove", onMove);
|
||
|
|
document.removeEventListener("mouseup", onUp);
|
||
|
|
document.body.style.userSelect = "";
|
||
|
|
document.body.style.cursor = "";
|
||
|
|
};
|
||
|
|
document.addEventListener("mousemove", onMove);
|
||
|
|
document.addEventListener("mouseup", onUp);
|
||
|
|
document.body.style.userSelect = "none";
|
||
|
|
document.body.style.cursor = "col-resize";
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
onMouseDown={onMouseDown}
|
||
|
|
className="group relative z-20 -mx-0.5 w-1 shrink-0 cursor-col-resize"
|
||
|
|
role="separator"
|
||
|
|
aria-orientation="vertical"
|
||
|
|
>
|
||
|
|
<div className="absolute inset-y-0 left-1/2 w-px -translate-x-1/2 bg-transparent group-hover:bg-app-accent" />
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|