Spaces:
Sleeping
Sleeping
| import { useState, useEffect, useRef } from 'react'; | |
| export const usePanelResize = (initialWidth = 40) => { | |
| const [leftPanelWidth, setLeftPanelWidth] = useState(initialWidth); | |
| const [isDragging, setIsDragging] = useState(false); | |
| const containerRef = useRef(null); | |
| const handleMouseDown = (e) => { | |
| setIsDragging(true); | |
| e.preventDefault(); | |
| }; | |
| const handleMouseMove = (e) => { | |
| if (!isDragging || !containerRef.current) return; | |
| const containerRect = containerRef.current.getBoundingClientRect(); | |
| const newLeftWidth = ((e.clientX - containerRect.left) / containerRect.width) * 100; | |
| if (newLeftWidth >= 20 && newLeftWidth <= 80) { | |
| setLeftPanelWidth(newLeftWidth); | |
| } | |
| }; | |
| const handleMouseUp = () => { | |
| setIsDragging(false); | |
| }; | |
| useEffect(() => { | |
| if (isDragging) { | |
| document.addEventListener('mousemove', handleMouseMove); | |
| document.addEventListener('mouseup', handleMouseUp); | |
| return () => { | |
| document.removeEventListener('mousemove', handleMouseMove); | |
| document.removeEventListener('mouseup', handleMouseUp); | |
| }; | |
| } | |
| }, [isDragging]); | |
| return { | |
| leftPanelWidth, | |
| isDragging, | |
| containerRef, | |
| handleMouseDown | |
| }; | |
| }; |