@dndbuilder.com/react
Version:
Drag and drop builder for React
77 lines (76 loc) • 2.95 kB
JavaScript
import { jsx as b } from "react/jsx-runtime";
import { useFrame as I } from "../../../hooks/use-frame.js";
import { Position as r } from "../../../types/style.js";
import { classNames as v } from "../../../../../../utils.js";
import { useRef as z, useState as y, useEffect as P } from "react";
const f = {
top: "paddingTop",
bottom: "paddingBottom",
left: "paddingLeft",
right: "paddingRight"
}, R = {
top: "top-0 left-0 h-[8px] w-full cursor-row-resize min-h-[8px]",
bottom: "bottom-0 left-0 h-[8px] w-full cursor-row-resize min-h-[8px]",
left: "left-0 top-0 h-full w-[8px] cursor-col-resize min-w-[8px]",
right: "right-0 top-0 h-full w-[8px] cursor-col-resize min-w-[8px]"
}, S = ({ containerRef: p, position: e, onChange: u }) => {
const { window: m, document: o } = I(), a = z(null), [O, i] = y(null), [g, x] = y(!1);
return P(() => {
if (!p.current || !a.current || !m || !o)
return;
const d = p.current, l = a.current, E = m.getComputedStyle(d);
let t = parseInt(E[f[e]], 10);
i(t);
let n = 0;
const T = (s) => {
if (e === r.TOP || e === r.BOTTOM) {
const c = s.clientY - n;
n = s.clientY, t = t + c;
}
if (e === r.LEFT || e === r.RIGHT) {
const c = s.clientX - n;
n = s.clientX, t = e === r.LEFT ? t + c : t - c;
}
t < 0 && (t = 0), i(Number(t)), d.style[f[e]] = `${t}px`, (e === r.TOP || e === r.BOTTOM) && (l.style.height = `${t}px`), (e === r.LEFT || e === r.RIGHT) && (l.style.width = `${t}px`), x(!0);
}, L = () => {
d.removeAttribute("style"), u == null || u(Number(t), e), x(!1), o.removeEventListener("mousemove", T);
}, w = (s) => {
(e === r.TOP || e === r.BOTTOM) && (n = s.clientY), (e === r.LEFT || e === r.RIGHT) && (n = s.clientX), o.addEventListener("mousemove", T), o.addEventListener("mouseup", L);
};
l.addEventListener("mousedown", w);
const h = new ResizeObserver((s) => {
const c = s[0].target, M = m.getComputedStyle(c);
t = parseInt(M[f[e]], 10), i(t), (e === r.TOP || e === r.BOTTOM) && (l.style.height = `${t}px`), (e === r.LEFT || e === r.RIGHT) && (l.style.width = `${t}px`);
});
return h.observe(d), () => {
l.removeEventListener("mousedown", w), h.disconnect();
};
}, []), /* @__PURE__ */ b(
"div",
{
ref: a,
className: v(
"group/spacer absolute flex items-center justify-center overflow-visible hover:bg-gray-50",
R[e],
g && "bg-gray-50"
),
children: /* @__PURE__ */ b(
"div",
{
className: v(
"z-50 hidden rounded-sm bg-gray-900 p-1 text-xs leading-none text-white group-hover/spacer:inline-block",
g && "inline-block"
),
style: {
userSelect: "none"
},
children: `${O}px`
}
)
}
);
};
export {
S as default
};
//# sourceMappingURL=container-spacer.js.map