39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
import { useCallback, useEffect, useRef, useState } from 'react'
|
|
|
|
export const useSidebarResize = (initialWidth: number = 250) => {
|
|
const [sidebarWidth, setSidebarWidth] = useState(initialWidth)
|
|
const [isResizing, setIsResizing] = useState(false)
|
|
const sidebarLeft = useRef(0)
|
|
|
|
const startResizing = useCallback((e: React.MouseEvent) => {
|
|
e.preventDefault()
|
|
const sidebar = (e.target as HTMLElement).closest('.sidebar-container') as HTMLElement
|
|
if (sidebar) {
|
|
const rect = sidebar.getBoundingClientRect()
|
|
sidebarLeft.current = rect.left
|
|
setIsResizing(true)
|
|
}
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (!isResizing) return
|
|
|
|
const stopResizing = () => setIsResizing(false)
|
|
const resize = (e: MouseEvent) => {
|
|
const newWidth = e.clientX - sidebarLeft.current
|
|
if (newWidth > 150 && newWidth < 600) {
|
|
setSidebarWidth(newWidth)
|
|
}
|
|
}
|
|
|
|
window.addEventListener('mousemove', resize)
|
|
window.addEventListener('mouseup', stopResizing)
|
|
return () => {
|
|
window.removeEventListener('mousemove', resize)
|
|
window.removeEventListener('mouseup', stopResizing)
|
|
}
|
|
}, [isResizing])
|
|
|
|
return { sidebarWidth, startResizing, isResizing }
|
|
}
|