/
Rics
/
JobReady
Обзор
Документация
Войти
/
Rics
/
JobReady
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
Front/src/shared/components/ResizablePanel/ResizablePanel.tsx
44 строки
1 KB
Rics
add app
16 сен 2025, 16:56
16 сен 2025, 16:56
75981cd
Код
Авторство
О чём код?
import {useEffect, useRef, useState} from "react"; import styles from "./styles.module.scss"; export const ResizablePanel = ({ left, right }: { left: React.ReactNode; right: React.ReactNode }) => { const [leftWidth, setLeftWidth] = useState(50); const isResizing = useRef(false); useEffect(() => { const handleMouseMove = (e: MouseEvent) => { if (!isResizing.current) return; const newLeftWidth = (e.clientX / window.innerWidth) * 100; if (newLeftWidth > 20 && newLeftWidth < 80) { setLeftWidth(newLeftWidth); } }; const stopResizing = () => { isResizing.current = false; }; window.addEventListener("mousemove", handleMouseMove); window.addEventListener("mouseup", stopResizing); return () => { window.removeEventListener("mousemove", handleMouseMove); window.removeEventListener("mouseup", stopResizing); }; }, []); return ( <div className={styles.container}> <div className={styles.left} style={{ width: `${leftWidth}%` }}> {left} </div> <div className={styles.divider} onMouseDown={() => (isResizing.current = true)} /> <div className={styles.right} style={{ width: `${100 - leftWidth}%` }}> {right} </div> </div> ); };