@uva-glass/component-library
Version:
React components UvA
170 lines (169 loc) • 7.21 kB
JavaScript
import { jsxs as u, jsx as i } from "react/jsx-runtime";
import { useRef as y, useState as G, useEffect as O, createRef as S } from "react";
import { c as E } from "../../clsx-OuTLNxxd.js";
import { Icon as q } from "../Icon/Icon.js";
import { Button as I } from "../Buttons/Button.js";
import "../Buttons/LinkButton.js";
import "@react-aria/button";
import { Checkbox as w } from "../Checkbox/Checkbox.js";
import { Label as A } from "../Label/Label.js";
import "@react-aria/dialog";
import "@react-aria/focus";
import "@react-aria/overlays";
import "../OverlayCloseButton/OverlayCloseButton.js";
import { FormField as C } from "../FormField/FormField.js";
import "../GridRow/GridRow.js";
import "../IconButton/IconButton.js";
import "../Input/Input.js";
import "../InputField/InputField.js";
import "react-router";
import "../../TablePlugin-MjKuocl4.js";
import "../RteEditor/Providers/LanguageProvider.js";
import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
import "../RteEditor/hooks/components/Flyout.js";
import "../../index-B3c5pcHk.js";
import "../SelectListbox/SelectListbox.js";
import "../SelectListbox/SelectProvider.js";
import "../Sortable/components/SortableItem.js";
import "../../SortableProvider-Ck_XnBVq.js";
import { useResponsive as L } from "../hooks/useResponsive.js";
import '../../assets/CheckboxTree.css';const s = {
"checkbox-tree__header": "_checkbox-tree__header_3w3rj_1",
"checkbox-tree__branch": "_checkbox-tree__branch_3w3rj_8",
"checkbox-tree__branch--icon": "_checkbox-tree__branch--icon_3w3rj_21",
"checkbox-tree__branch--icon--expanded": "_checkbox-tree__branch--icon--expanded_3w3rj_27",
"checkbox-tree__branch--formfield": "_checkbox-tree__branch--formfield_3w3rj_32",
"checkbox-tree__leaves": "_checkbox-tree__leaves_3w3rj_39",
"checkbox-tree__leaves--expanded": "_checkbox-tree__leaves--expanded_3w3rj_48",
"checkbox-tree__leaf": "_checkbox-tree__leaf_3w3rj_52"
}, le = ({
title: f,
checkboxTree: B,
selectedValues: d,
noLabelFrontWeight: p = !1,
onChange: b
}) => {
const n = y({}), [m, x] = G([]), { lessThan: h } = L(), F = (r, e) => {
if (r.length !== e.length) return !1;
const t = (o) => o.reduce((l, j) => (l[j] = (l[j] || 0) + 1, l), {}), c = t(r), a = t(e);
return !Object.keys(c).some((o) => c[o] !== a[o]);
}, k = (r) => (n.current[r] || (n.current[r] = S()), n.current[r]), v = () => {
const r = [];
Object.entries(n.current).forEach(([e]) => {
const t = n.current[e].current;
t && t.name.indexOf("Group") === -1 && t.checked && r.push(t.value);
}), x(r), b && b(r);
}, _ = (r) => {
if (r === "") return;
const e = [];
Object.entries(n.current).forEach(([a]) => {
const o = n.current[a].current;
o && (o == null ? void 0 : o.getAttribute("data-groupname")) === r && e.push(o.checked);
});
const t = e.every(Boolean), c = e.some(Boolean);
n.current[r].current && (n.current[r].current.checked = t, n.current[r].current.indeterminate = !t && t !== c, n.current[r].current.checked = t && t === c);
}, g = (r, e) => {
var c, a;
const t = e == null ? void 0 : e.querySelector("[data-ul]");
r.childNodes[0].classList.toggle(s["checkbox-tree__branch--icon--expanded"]), (a = e == null ? void 0 : e.closest("[data-li]")) == null || a.setAttribute(
"aria-expanded",
((c = e == null ? void 0 : e.closest("[data-li]")) == null ? void 0 : c.getAttribute("aria-expanded")) === "false" ? "true" : "false"
), t && t.classList.toggle(s["checkbox-tree__leaves--expanded"]);
}, R = (r) => {
const e = r.target;
if (!(e.type !== "checkbox" && e.type !== "button")) {
if (h.md && e.name.indexOf("Group") !== -1 && e.parentNode && e.parentNode.parentNode.getAttribute("aria-expanded") === "false") {
r.preventDefault(), g(e.parentNode, e.parentNode.parentNode);
return;
}
if (e.name.indexOf("Group") !== -1) {
const t = e.name;
Object.entries(n.current).forEach(([c]) => {
if (c.indexOf(`${t}_`) !== -1) {
const a = n.current[c].current, o = n.current[t].current;
if (!a || !o) return;
a.checked = !!o.checked;
}
}), _(t), v();
return;
}
_(e.getAttribute("data-groupname") || ""), v();
}
}, $ = (r) => {
const e = r.target, t = e.closest("[data-li]");
g(e, t);
};
return O(() => {
d && !F(d, m) && Object.entries(n.current).forEach(([r]) => {
const e = n.current[r].current;
e && (d != null && d.includes(e.value) ? e.checked = !0 : e.checked = !1, e.name.indexOf("Group") !== -1 && x(d || []));
});
}, [d]), O(() => {
Object.entries(n.current).forEach(([r]) => {
const e = n.current[r].current;
e && e.name.indexOf("Group") !== -1 && _(e.name);
});
}, [m]), /* @__PURE__ */ u("div", { children: [
f && /* @__PURE__ */ i("span", { className: s["checkbox-tree__header"], children: f }),
/* @__PURE__ */ i("div", { onClick: R, "data-ul": !0, role: "tree", tabIndex: 0, children: B.map(({ itemName: r, children: e }, t) => /* @__PURE__ */ u(
"div",
{
className: s["checkbox-tree__branch"],
"data-li": !0,
"aria-expanded": h.md ? "false" : "true",
children: [
/* @__PURE__ */ u(C, { inline: !0, className: s["checkbox-tree__branch--formfield"], children: [
/* @__PURE__ */ i(I, { variant: "blank", onClick: $, children: /* @__PURE__ */ i(
q,
{
name: "CheveronRight",
size: 16,
className: E(s["checkbox-tree__branch--icon"], {
[s["checkbox-tree__branch--icon--expanded"]]: !h.md
})
}
) }),
/* @__PURE__ */ i(
w,
{
id: r,
name: `Group${t}`,
disabled: e.every((c) => c.disabled),
ref: k(`Group${t}`)
}
),
/* @__PURE__ */ i(A, { htmlFor: r, noFontWeight: p, children: r })
] }),
/* @__PURE__ */ i(
"div",
{
className: E(s["checkbox-tree__leaves"], {
[s["checkbox-tree__leaves--expanded"]]: !h.md
}),
"data-ul": !0,
children: e.map(({ itemName: c, itemValue: a, disabled: o }) => /* @__PURE__ */ i("div", { className: s["checkbox-tree__leaf"], "data-li": !0, children: /* @__PURE__ */ u(C, { inline: !0, className: s["checkbox-tree__branch--formfield"], children: [
/* @__PURE__ */ i(
w,
{
id: c,
name: c,
value: a,
disabled: o,
"data-groupname": `Group${t}`,
ref: k(`Group${t}_${c}`)
}
),
/* @__PURE__ */ i(A, { htmlFor: c, noFontWeight: p, children: c })
] }) }, c))
}
)
]
},
r
)) })
] });
};
export {
le as CheckboxTree
};
//# sourceMappingURL=CheckboxTree.js.map