83 lines
2.3 KiB
TypeScript
83 lines
2.3 KiB
TypeScript
import { splitProps, type JSX } from "solid-js"
|
|
|
|
export interface ResizeHandleProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "onResize"> {
|
|
direction: "horizontal" | "vertical"
|
|
edge?: "start" | "end"
|
|
size: number
|
|
min: number
|
|
max: number
|
|
onResize: (size: number) => void
|
|
onCollapse?: () => void
|
|
collapseThreshold?: number
|
|
}
|
|
|
|
export function ResizeHandle(props: ResizeHandleProps) {
|
|
const [local, rest] = splitProps(props, [
|
|
"direction",
|
|
"edge",
|
|
"size",
|
|
"min",
|
|
"max",
|
|
"onResize",
|
|
"onCollapse",
|
|
"collapseThreshold",
|
|
"class",
|
|
"classList",
|
|
])
|
|
|
|
const handleMouseDown = (e: MouseEvent) => {
|
|
e.preventDefault()
|
|
const edge = local.edge ?? (local.direction === "vertical" ? "start" : "end")
|
|
const start = local.direction === "horizontal" ? e.clientX : e.clientY
|
|
const startSize = local.size
|
|
let current = startSize
|
|
|
|
document.body.style.userSelect = "none"
|
|
document.body.style.overflow = "hidden"
|
|
|
|
const onMouseMove = (moveEvent: MouseEvent) => {
|
|
const pos = local.direction === "horizontal" ? moveEvent.clientX : moveEvent.clientY
|
|
const delta =
|
|
local.direction === "vertical"
|
|
? edge === "end"
|
|
? pos - start
|
|
: start - pos
|
|
: edge === "start"
|
|
? start - pos
|
|
: pos - start
|
|
current = startSize + delta
|
|
const clamped = Math.min(local.max, Math.max(local.min, current))
|
|
local.onResize(clamped)
|
|
}
|
|
|
|
const onMouseUp = () => {
|
|
document.body.style.userSelect = ""
|
|
document.body.style.overflow = ""
|
|
document.removeEventListener("mousemove", onMouseMove)
|
|
document.removeEventListener("mouseup", onMouseUp)
|
|
|
|
const threshold = local.collapseThreshold ?? 0
|
|
if (local.onCollapse && threshold > 0 && current < threshold) {
|
|
local.onCollapse()
|
|
}
|
|
}
|
|
|
|
document.addEventListener("mousemove", onMouseMove)
|
|
document.addEventListener("mouseup", onMouseUp)
|
|
}
|
|
|
|
return (
|
|
<div
|
|
{...rest}
|
|
data-component="resize-handle"
|
|
data-direction={local.direction}
|
|
data-edge={local.edge ?? (local.direction === "vertical" ? "start" : "end")}
|
|
classList={{
|
|
...(local.classList ?? {}),
|
|
[local.class ?? ""]: !!local.class,
|
|
}}
|
|
onMouseDown={handleMouseDown}
|
|
/>
|
|
)
|
|
}
|