UNPKG

@payfit/unity-components

Version:

51 lines (50 loc) 1.34 kB
import { useEffect as e, useRef as t, useState as n } from "react"; //#region src/hooks/use-resizable.ts function r({ isDisabled: r = !1, minWidth: i, minHeight: a } = {}) { let o = t(null), [s, c] = n({ isResizing: !1, startX: 0, startY: 0, startWidth: 0, startHeight: 0 }); return e(() => { if (!s.isResizing) return; let e = (e) => { if (!o.current) return; let t = o.current.querySelector("textarea"); if (!t) return; let n = e.clientX - s.startX, r = e.clientY - s.startY, c = Math.max(s.startWidth + n, i ?? 0), l = Math.max(s.startHeight + r, a ?? 0); o.current.style.width = `${c}px`, t.style.height = `${l}px`; }, t = () => { c((e) => ({ ...e, isResizing: !1 })); }; return document.addEventListener("mousemove", e), document.addEventListener("mouseup", t), () => { document.removeEventListener("mousemove", e), document.removeEventListener("mouseup", t); }; }, [ s, i, a ]), { containerRef: o, handleResizeStart: (e) => { if (r) return; e.preventDefault(); let t = o.current?.querySelector("textarea"); !o.current || !t || c({ isResizing: !0, startX: e.clientX, startY: e.clientY, startWidth: o.current.offsetWidth, startHeight: t.offsetHeight }); }, isResizing: s.isResizing }; } //#endregion export { r as useResizable };