@uva-glass/component-library
Version:
React components UvA
306 lines (305 loc) • 11.7 kB
JavaScript
import { jsxs as m, jsx as t, Fragment as Z } from "react/jsx-runtime";
import { o as ee } from "./LexicalComposerContext.prod-DLlRM5wP.js";
import { c as $ } from "./clsx-OuTLNxxd.js";
import { L as te, T as re } from "./LexicalTable.prod-CYafu_j9.js";
import { ao as oe, E as le, a as U, c as z, ae as ne } from "./Lexical.prod-CniF7zEE.js";
import { forwardRef as A, useState as C, useRef as T, useId as D, useImperativeHandle as B, useEffect as L } from "react";
import { Button as E } from "./components/Buttons/Button.js";
import "./components/Buttons/LinkButton.js";
import "@react-aria/button";
import "./components/Checkbox/Checkbox.js";
import { Label as R } from "./components/Label/Label.js";
import "@react-aria/dialog";
import "@react-aria/focus";
import "@react-aria/overlays";
import "./components/OverlayCloseButton/OverlayCloseButton.js";
import { FormField as P } from "./components/FormField/FormField.js";
import "./components/GridRow/GridRow.js";
import "./components/IconButton/IconButton.js";
import "./components/Input/Input.js";
import { InputField as M } from "./components/InputField/InputField.js";
import "react-router";
import { s as g, M as ie } from "./MultiSelectItem-D9PxdX43.js";
import "./components/RteEditor/Providers/LanguageProvider.js";
import { e as ae, v as se } from "./helpers-ChM6xtQG.js";
import { Icon as K } from "./components/Icon/Icon.js";
import { FeedbackBox as V } from "./components/FeedbackBox/FeedbackBox.js";
import { useTranslation as H } from "./components/RteEditor/hooks/useTranslation.js";
import "./components/RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
import "./components/RteEditor/hooks/components/Flyout.js";
import { deleteTable as ce, deleteColumn as me, insertColumn as ue, deleteRow as de, insertRow as fe, createTable as pe } from "./components/RteEditor/Plugins/TablePlugin/helpers.js";
import { useFlyout as be } from "./components/RteEditor/hooks/useFlyout.js";
import { s as I } from "./RteEditor.module-oFMKEW6f.js";
import "./index-B3c5pcHk.js";
import "./components/SelectListbox/SelectListbox.js";
import "./components/SelectListbox/SelectProvider.js";
import "./components/Sortable/components/SortableItem.js";
import "./SortableProvider-Ck_XnBVq.js";
import { setScrollableContainers as _e, removeScrollableContainers as he } from "./components/RteEditor/helpers.js";
import './assets/TablePlugin.css';function ke({ label: b, clearTrigger: d, onClear: a }) {
return /* @__PURE__ */ m("header", { className: g["multi-select__header"], children: [
/* @__PURE__ */ t(R, { htmlFor: "multi-select-list", children: b }),
d && /* @__PURE__ */ t(E, { variant: "blank", onClick: a, children: d })
] });
}
const j = ({ scrollable: b = !0, noBorder: d, header: a, children: l }) => /* @__PURE__ */ m(Z, { children: [
a,
/* @__PURE__ */ t(
"div",
{
className: $(g["multi-select"], {
[g["multi-select--no-border"]]: d
}),
children: /* @__PURE__ */ t(
"ul",
{
className: $(g["multi-select__list"], {
[g["multi-select__list--scrollable"]]: b
}),
id: "multi-select-list",
children: l
}
)
}
)
] });
j.MultiSelectHeader = ke;
j.MultiSelectItem = ie;
const ve = "_linkform_x5q7m_1", we = "_linkform__footer_x5q7m_12", N = {
linkform: ve,
"linkform__input-field": "_linkform__input-field_x5q7m_5",
linkform__footer: we,
"linkform__input-url-wrapper": "_linkform__input-url-wrapper_x5q7m_19",
"linkform__open-url-button": "_linkform__open-url-button_x5q7m_31"
}, ct = A(
({ onCloseHandler: b, onSaveHandler: d, isLink: a = { active: !1, url: "", linktext: "" } }, l) => {
const n = H(), [f, u] = C(a.url || ""), [s, _] = C(a.linktext || ""), [w, h] = C(!1), [F, k] = C(null), [v, p] = C(null), o = T(null), y = `link_${D()}`, e = `text_${D()}`, r = () => {
window.open(ae(f), "_blank");
}, x = (i) => {
u(i.target.value);
}, c = (i) => {
_(i.target.value);
}, S = (i) => se(i) === !1 || i.trim() === "" ? (k(n.errortext.urlNotValid), !1) : (k(null), !0), W = (i) => i.trim() === "" ? (p(n.errortext.linkTextNotValid), !1) : (p(null), !0), Y = () => {
!S(f) || w && !W(s) || (d(f, s), O());
}, G = () => {
b(), O();
}, O = () => {
u(""), h(!1), k(null), p(null);
}, J = (i, X) => {
u(i), !X && !i && h(!0);
}, Q = () => {
o.current && o.current.focus();
};
return B(l, () => ({
clearForm: O,
focusFirstField: Q,
setDefaults: J
})), /* @__PURE__ */ m("div", { className: N.linkform, children: [
/* @__PURE__ */ m(P, { className: N["linkform__input-field"], children: [
/* @__PURE__ */ t(R, { htmlFor: y, children: n.links.linkLabel }),
/* @__PURE__ */ m("div", { className: N["linkform__input-url-wrapper"], children: [
/* @__PURE__ */ t(
M,
{
id: y,
placeholder: n.links.linkPlaceholder,
value: f,
onChange: (i) => x(i),
onFocus: () => k(null),
ref: o,
"aria-label": n.aria.labels.linkField
}
),
f && /* @__PURE__ */ t("button", { type: "button", onClick: r, className: N["linkform__open-url-button"], children: /* @__PURE__ */ t(K, { name: "ArrowTopRightOnSquare", size: 20 }) })
] }),
F && /* @__PURE__ */ t(V, { level: "error", feedback: F })
] }),
w && /* @__PURE__ */ m(P, { className: N["linkform__input-field"], children: [
/* @__PURE__ */ t(R, { htmlFor: e, children: n.links.linkText }),
/* @__PURE__ */ t(
M,
{
id: e,
value: s,
onChange: (i) => c(i),
onFocus: () => p(null),
"aria-label": n.aria.labels.linkTextfield
}
),
v && /* @__PURE__ */ t(V, { level: "error", feedback: v })
] }),
/* @__PURE__ */ m("div", { className: N.linkform__footer, children: [
/* @__PURE__ */ t(E, { variant: "secondary", onClick: G, "aria-label": n.common.cancel, type: "button", children: n.common.cancel }),
/* @__PURE__ */ t(E, { variant: "primary", onClick: Y, "aria-label": n.aria.labels.linkOkButton, type: "button", children: n.links.addLink })
] })
] });
}
), Fe = "_tableform_t5fpq_1", Ce = "_tableform__footer_t5fpq_12", q = {
tableform: Fe,
"tableform__input-field": "_tableform__input-field_t5fpq_5",
tableform__footer: Ce
}, ye = A(({ onCloseHandler: b, onSaveHandler: d }, a) => {
const l = H(), [n, f] = C(), [u, s] = C(), _ = T(null), w = `row_${D()}`, h = `column_${D()}`, F = (o, y) => {
const e = o.target.value;
y === "row" ? f(parseInt(e)) : s(parseInt(e));
}, k = () => {
n !== void 0 && u !== void 0 && (d(n, u), p());
}, v = () => {
b(), p();
}, p = () => {
f(void 0), s(void 0);
};
return B(a, () => ({
clearForm: p,
focusFirstField: () => {
var o;
return (o = _.current) == null ? void 0 : o.focus();
}
})), L(() => {
const o = () => {
v();
};
return _e(o), window.addEventListener("scroll", o), window.addEventListener("resize", o), () => {
window.removeEventListener("scroll", o), window.removeEventListener("resize", o), he(o);
};
}, []), /* @__PURE__ */ m("div", { className: q.tableform, children: [
/* @__PURE__ */ m(P, { className: q["tableform__input-field"], children: [
/* @__PURE__ */ t(R, { htmlFor: w, children: l.table.nrofRows }),
/* @__PURE__ */ t(
M,
{
id: w,
placeholder: l.table.nrofRowsPlaceholder,
value: n || "",
onChange: (o) => F(o, "row"),
"aria-label": l.aria.labels.tableRowfield,
ref: _
}
)
] }),
/* @__PURE__ */ m(P, { className: q["tableform__input-field"], children: [
/* @__PURE__ */ t(R, { htmlFor: h, children: l.table.nrofColumns }),
/* @__PURE__ */ t(
M,
{
id: h,
placeholder: l.table.nrofColumnsPlaceholder,
value: u || "",
onChange: (o) => F(o, "column"),
"aria-label": l.aria.labels.tableColumnfield
}
)
] }),
/* @__PURE__ */ m("div", { className: q.tableform__footer, children: [
/* @__PURE__ */ t(E, { variant: "secondary", onClick: v, "aria-label": l.common.cancel, children: l.common.cancel }),
/* @__PURE__ */ t(
E,
{
variant: "primary",
onClick: k,
disabled: !n || !u,
"aria-label": l.aria.labels.tableOkButton,
children: l.common.add
}
)
] })
] });
}), xe = 200, mt = A(({ isActive: b }, d) => {
const a = H(), [l] = ee(), { flyout: n, showFlyout: f, hideFlyout: u, isVisible: s } = be(), _ = T(void 0), w = T(null), h = T(!1), F = T(s), k = () => {
var r;
const e = (r = w.current) == null ? void 0 : r.getBoundingClientRect();
!h.current && e && f({ position: { top: e.bottom, left: e.left }, ...y });
}, v = () => {
u();
}, p = (e, r) => {
l.update(() => {
const x = U(), c = pe(e, r);
z(x) ? x.insertNodes([c]) : ne().append(c);
const S = c.getFirstDescendant();
S && S.select();
}), v();
}, o = (e) => {
l.update(() => {
const r = U();
if (z(r)) {
const x = r.anchor.getNode(), c = te(x);
if (re(c))
switch (e) {
case "insertRowAbove":
case "insertRowBelow":
fe(c, e);
break;
case "deleteRow":
de(c);
break;
case "insertColumnLeft":
case "insertColumnRight":
ue(c, e);
break;
case "deleteColumn":
me(c);
break;
case "deleteTable":
ce(c);
break;
}
}
});
}, y = {
children: /* @__PURE__ */ t(
ye,
{
onCloseHandler: v,
onSaveHandler: (e, r) => p(e, r),
ref: _
}
)
};
return L(() => {
var e, r;
s ? (h.current = !0, (r = _.current) == null || r.focusFirstField()) : ((e = _.current) == null || e.clearForm(), setTimeout(() => h.current = !1, xe));
}, [_, s]), L(() => {
const e = l.registerCommand(
oe,
(r) => r.ctrlKey && r.shiftKey && r.code === "Digit9" ? (r.preventDefault(), k(), !0) : !1,
le
);
return () => {
e();
};
}, [l]), L(() => {
F.current = s;
}, [s]), L(() => {
const e = (r) => {
r.key === "Escape" && F.current && (r.preventDefault(), r.stopPropagation(), v());
};
return document.addEventListener("keydown", e, { capture: !0 }), () => {
document.removeEventListener("keydown", e);
};
}, []), B(d, () => ({
mutateTable: o
})), /* @__PURE__ */ t("div", { className: I["editor__toolbar-button-group"], children: /* @__PURE__ */ m("div", { className: I["editor__toolbar-button-flyoutwrapper"], children: [
/* @__PURE__ */ t(
"button",
{
onClick: k,
title: a.table.tableTooltip,
className: $(I["editor__toolbar-button"], b && I["editor__toolbar-button--active"]),
"aria-label": a.aria.labels.table,
"aria-keyshortcuts": a.aria.keyshortcuts.table,
ref: w,
type: "button",
children: /* @__PURE__ */ t(K, { name: "Table", size: 24 })
}
),
n
] }) });
});
export {
ct as A,
j as M,
mt as T,
ke as a,
ye as b
};
//# sourceMappingURL=TablePlugin-MjKuocl4.js.map