@dndbuilder.com/react
Version:
Drag and drop builder for React
40 lines (39 loc) • 1.68 kB
JavaScript
import { jsxs as M, jsx as u } from "react/jsx-runtime";
import { Tooltip as c } from "../../../components/shared/tooltip.js";
import { useFrame as R } from "../../../hooks/use-frame.js";
import { useRef as S, useState as v, useEffect as W } from "react";
const j = ({ containerRef: m, onChange: o }) => {
const { window: i, document: t } = R(), l = S(null), [x, E] = v(null), [z, a] = v(!1);
return W(() => {
if (!m.current || !l.current || !i || !t)
return;
const n = m.current, f = n.parentElement, p = l.current, b = i.getComputedStyle(n), y = i.getComputedStyle(f);
let e = parseInt(b.width, 10), s = (e / f.offsetWidth * 100).toFixed(2);
const I = parseInt(y.width, 10);
let d = 0;
const w = (r) => {
const L = r.clientX - d;
d = r.clientX, e = e + L, e < 0 && (e = 0), s = (e / I * 100).toFixed(2), n.style.width = `${s}%`, E(Number(s)), a(!0);
}, g = () => {
n.removeAttribute("style"), o == null || o(Number(s)), a(!1), t.removeEventListener("mousemove", w);
}, h = (r) => {
d = r.clientX, t.addEventListener("mousemove", w), t.addEventListener("mouseup", g);
};
return p.addEventListener("mousedown", h), () => {
p.removeEventListener("mousedown", h);
};
}, []), /* @__PURE__ */ M(c, { open: z, children: [
/* @__PURE__ */ u(c.Trigger, { asChild: !0, children: /* @__PURE__ */ u(
"div",
{
ref: l,
className: "absolute -right-1 top-0 z-10 h-full w-2 cursor-col-resize bg-transparent"
}
) }),
/* @__PURE__ */ u(c.Content, { side: "left", children: `${x}%` })
] });
};
export {
j as default
};
//# sourceMappingURL=container-resizer.js.map