113 lines
3.2 KiB
TypeScript
113 lines
3.2 KiB
TypeScript
"use client"
|
|
|
|
import type React from "react"
|
|
|
|
import { type ReactNode, useRef, useEffect, useState } from "react"
|
|
|
|
interface ResizablePanelProps {
|
|
children: ReactNode
|
|
direction: "horizontal" | "vertical"
|
|
initialSize: number
|
|
minSize: number
|
|
maxSize: number
|
|
onResize?: (size: number) => void
|
|
className?: string
|
|
handlePosition?: "start" | "end"
|
|
}
|
|
|
|
export function ResizablePanel({
|
|
children,
|
|
direction,
|
|
initialSize,
|
|
minSize,
|
|
maxSize,
|
|
onResize,
|
|
className = "",
|
|
handlePosition = "end",
|
|
}: ResizablePanelProps) {
|
|
const [size, setSize] = useState(initialSize)
|
|
const [isResizing, setIsResizing] = useState(false)
|
|
const panelRef = useRef<HTMLDivElement>(null)
|
|
|
|
useEffect(() => {
|
|
const handleMouseMove = (e: MouseEvent) => {
|
|
if (!isResizing || !panelRef.current) return
|
|
|
|
e.preventDefault()
|
|
|
|
const rect = panelRef.current.getBoundingClientRect()
|
|
let newSize: number
|
|
|
|
if (direction === "horizontal") {
|
|
if (handlePosition === "start") {
|
|
newSize = rect.right - e.clientX
|
|
} else {
|
|
newSize = e.clientX - rect.left
|
|
}
|
|
} else {
|
|
if (handlePosition === "start") {
|
|
newSize = rect.bottom - e.clientY
|
|
} else {
|
|
newSize = rect.bottom - e.clientY
|
|
}
|
|
}
|
|
|
|
newSize = Math.max(minSize, Math.min(maxSize, newSize))
|
|
setSize(newSize)
|
|
onResize?.(newSize)
|
|
}
|
|
|
|
const handleMouseUp = () => {
|
|
setIsResizing(false)
|
|
document.body.style.userSelect = ""
|
|
document.body.style.cursor = ""
|
|
}
|
|
|
|
if (isResizing) {
|
|
document.body.style.userSelect = "none"
|
|
document.body.style.cursor = direction === "horizontal" ? "col-resize" : "row-resize"
|
|
document.addEventListener("mousemove", handleMouseMove)
|
|
document.addEventListener("mouseup", handleMouseUp)
|
|
}
|
|
|
|
return () => {
|
|
document.removeEventListener("mousemove", handleMouseMove)
|
|
document.removeEventListener("mouseup", handleMouseUp)
|
|
}
|
|
}, [isResizing, direction, minSize, maxSize, onResize, handlePosition])
|
|
|
|
// Update size when initialSize changes (for panel visibility changes)
|
|
useEffect(() => {
|
|
setSize(initialSize)
|
|
}, [initialSize])
|
|
|
|
const style = direction === "horizontal" ? { width: `${size}px` } : { height: `${size}px` }
|
|
|
|
const getHandleClasses = () => {
|
|
const baseClasses = "absolute bg-border hover:bg-primary/50 transition-colors z-10"
|
|
const cursorClass = direction === "horizontal" ? "cursor-col-resize" : "cursor-row-resize"
|
|
|
|
if (direction === "horizontal") {
|
|
return handlePosition === "start"
|
|
? `${baseClasses} ${cursorClass} top-0 left-0 w-1 h-full`
|
|
: `${baseClasses} ${cursorClass} top-0 right-0 w-1 h-full`
|
|
} else {
|
|
return handlePosition === "start"
|
|
? `${baseClasses} ${cursorClass} top-0 left-0 w-full h-1`
|
|
: `${baseClasses} ${cursorClass} bottom-0 left-0 w-full h-1`
|
|
}
|
|
}
|
|
|
|
const handleMouseDown = (e: React.MouseEvent) => {
|
|
e.preventDefault()
|
|
setIsResizing(true)
|
|
}
|
|
|
|
return (
|
|
<div ref={panelRef} className={`relative ${className}`} style={style}>
|
|
{children}
|
|
<div className={getHandleClasses()} onMouseDown={handleMouseDown} />
|
|
</div>
|
|
)
|
|
}
|