@uva-glass/component-library
Version:
React components UvA
134 lines (133 loc) • 5.96 kB
JavaScript
import { jsxs as y, jsx as e } from "react/jsx-runtime";
import { useState as _, useRef as b, useEffect as R } from "react";
import { c as w } from "../../../../../clsx-OuTLNxxd.js";
import { o as P } from "../../../../../LexicalComposerContext.prod-DLlRM5wP.js";
import { Icon as $ } from "../../../../Icon/Icon.js";
import { useTranslation as H } from "../../../hooks/useTranslation.js";
import '../../../../../assets/TableCellContextMenu.css';const n = {
"context-menu__wrapper": "_context-menu__wrapper_xbeks_1",
"context-menu__button": "_context-menu__button_xbeks_10",
"context-menu": "_context-menu_xbeks_1",
"context-menu--open": "_context-menu--open_xbeks_38",
"context-menu__item": "_context-menu__item_xbeks_43",
"context-menu__item-divider": "_context-menu__item-divider_xbeks_57",
"context-menu__wrapper--hidden": "_context-menu__wrapper--hidden_xbeks_61"
}, O = 25, N = 10, f = 4, A = 25, M = (a) => {
const r = a.cloneNode(!0);
r.style.height = "auto", r.style.left = "-3000px", document.body.appendChild(r);
const d = r.getBoundingClientRect().height;
return document.body.removeChild(r), d;
}, W = ({ position: a, parentScrollPosition: r, onAction: d }) => {
const t = H(), [k, x] = _(!1), [T, p] = _(!1), [s, E] = _({ xPos: 0, yPos: 0, height: 0 }), [m, B] = _(0), C = b(0), c = b(null), i = b(null), o = b(null), [I] = P(), u = (l) => {
d(l), x(!1);
}, g = () => {
const l = c.current ? c.current.getBoundingClientRect().width : 0;
i.current && c.current && o.current && (s.xPos < l && i.current ? (i.current.style.left = `${l - s.xPos + N}px`, o.current.style.right = `${l - s.xPos + f + N}px`) : (i.current.style.left = "0px", o.current.style.right = `${f}px`), m || B(M(c.current)), m > document.documentElement.clientHeight - s.yPos ? (i.current.style.top = `-${m + s.height}px`, o.current.style.top = `${m + f}px`, o.current.style.transform = "rotate(180deg)") : (i.current.style.top = "0px", o.current.style.top = `-${A}px`, o.current.style.transform = "none"));
}, v = () => (g(), `translate(${((s == null ? void 0 : s.xPos) ?? 0) - (c.current ? c.current.getBoundingClientRect().width : 0)}px, ${s.yPos - (r - C.current)}px)`);
return R(() => {
E(a), a && (C.current = r), x(!1), p(!1);
}, [a]), R(() => {
if (o.current) {
const l = o.current.getBoundingClientRect(), h = I.getRootElement();
if (!h) return;
l.top - h.getBoundingClientRect().top <= 0 || l.top - h.getBoundingClientRect().bottom + O >= 0 ? p(!0) : p(!1), g();
}
}, [r]), /* @__PURE__ */ y(
"div",
{
className: w(n["context-menu__wrapper"], [T && n["context-menu__wrapper--hidden"]]),
style: {
transform: `${v()}`
},
ref: i,
children: [
/* @__PURE__ */ e(
"button",
{
type: "button",
onClick: () => x((l) => !l),
className: n["context-menu__button"],
ref: o,
children: /* @__PURE__ */ e($, { name: "CheveronDown", size: 16 })
}
),
/* @__PURE__ */ y("ul", { ref: c, className: w(n["context-menu"], k && n["context-menu--open"]), children: [
/* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
"button",
{
type: "button",
onClick: () => u("insertRowAbove"),
className: n["context-menu__item"],
"aria-label": t.aria.labels.tableInsertRowAbove,
children: t.table.insertRowAbove
}
) }),
/* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
"button",
{
type: "button",
onClick: () => u("insertRowBelow"),
className: n["context-menu__item"],
"aria-label": t.aria.labels.tableInsertRowBelow,
children: t.table.insertRowBelow
}
) }),
/* @__PURE__ */ e("li", { className: n["context-menu__item-divider"], children: /* @__PURE__ */ e(
"button",
{
type: "button",
onClick: () => u("deleteRow"),
className: n["context-menu__item"],
"aria-label": t.aria.labels.tableDeleteRow,
children: t.table.deleteRow
}
) }),
/* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
"button",
{
type: "button",
onClick: () => u("insertColumnLeft"),
className: n["context-menu__item"],
"aria-label": t.aria.labels.tableInsertColumnLeft,
children: t.table.insertColumnLeft
}
) }),
/* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
"button",
{
type: "button",
onClick: () => u("insertColumnRight"),
className: n["context-menu__item"],
"aria-label": t.aria.labels.tableInsertColumnRight,
children: t.table.insertColumnRight
}
) }),
/* @__PURE__ */ e("li", { className: n["context-menu__item-divider"], children: /* @__PURE__ */ e(
"button",
{
type: "button",
onClick: () => u("deleteColumn"),
className: n["context-menu__item"],
"aria-label": t.aria.labels.tableDeleteColumn,
children: t.table.deleteColumn
}
) }),
/* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
"button",
{
type: "button",
onClick: () => u("deleteTable"),
className: n["context-menu__item"],
"aria-label": t.aria.labels.tableDeleteTable,
children: t.table.deleteTable
}
) })
] })
]
}
);
};
export {
W as TableCellContextMenu
};
//# sourceMappingURL=TableCellContextMenu.js.map