https://services1.otf.ca/scripts/react/components/form/DropDown.js

1import { j as t } from "../../jsx-runtime.js";
2import { r as i, R as x } from "../../vendor.js";
3import { Button as w } from "./Button.js";
4import u from "../page/Icon.js";
5const m = globalThis, E = function({ children: n, objProps: e }) {
6  const l = i.useRef(null);
7  return i.useEffect(() => {
8    e.value && (l.current.value = e.value);
9  }, [e.value]), /* @__PURE__ */ t.jsx("select", { ref: l, id: e.id, name: e.id, className: e.className || "", onChange: (c) => {
10    e.onChange && e.onChange(c);
11  }, defaultValue: e.value || "", children: n });
12}, L = function({ children: n, objProps: e }) {
13  return /* @__PURE__ */ t.jsx("option", { id: e.id || "", className: e.className || "", value: e.value, children: n });
14}, g = i.createContext({ name: "", onChange: () => {
15}, value: [] }), S = function({ children: n, objProps: e }) {
16  const l = e.value, c = e.onChange, s = x.Children.toArray(n).map((a) => a.props.objProps.id), [r, o] = i.useState(!1), d = () => {
17    o(!1);
18  }, v = (a) => {
19    a.stopPropagation(), o((h) => !h);
20  }, k = (a) => {
21    c(a.target.checked ? s : []);
22  }, C = (a) => {
23    c(a.target.checked ? [...l, a.target.id] : l.filter((h) => h !== a.target.id));
24  }, N = (a) => {
25    e.onSubmit && a && a.key == "Enter" && (a.preventDefault(), d(), e.onSubmit());
26  };
27  return i.useEffect(() => (document.addEventListener("click", d), () => {
28    document.removeEventListener("click", d);
29  }

29), []), /* @__PURE__ */ t.jsx("ul", { className: "search_dropdown", children: /* @__PURE__ */ t.jsxs("li", { tabIndex: 0, onClick: v, onBlur: d, children: [
30    /* @__PURE__ */ t.jsxs("span", { children: [
31      e.text,
32      /* @__PURE__ */ t.jsx(u, { className: "fas fa-chevron-down" }),
33      /* @__PURE__ */ t.jsx("span", { children: l.length == s.length || l.length == 0 ? m.getSysText(l.length == s.length ? "All" : "None") : l.length })
34    ] }),
35    /* @__PURE__ */ t.jsxs("ul", { className: "nolist", style: { display: r ? "block" : "", right: 0 }, children: [
36      /* @__PURE__ */ t.jsxs("li", { children: [
37        /* @__PURE__ */ t.jsx("input", { type: "checkbox", id: `${e.id}_all`, name: e.name, onChange: k, onKeyUp: N, value: e.allValue, checked: s.length == l.length }),
38        /* @__PURE__ */ t.jsx("label", { htmlFor: `${e.id}_all`, children: m.getSysText("All") })
39      ] }),
40      /* @__PURE__ */ t.jsx(g.Provider, { value: { name: e.name, onChange: C, value: l }, children: n })
41    ] })
42  ] }) });
43};
44S.Item = function({ objProps: n }) {
45  const { name: e, onChange: l, value: c } = x.useContext(g);
46  return /* @__PURE__ */ t.jsxs("li", { children: [
47    /* @__PURE__ */ t.jsx("input", { type: "checkbox", id: n.id, name: e, onChange: l, value: n.value, checked: c.includes(n.id) }),
48    /* @__PURE__ */ t.jsx("label", { htmlFor: n.id, dangerouslySetInnerHTML: { __html: n.text } })
49  ] });
50};
51const f = function({ children: n, objProps: e }) {
52  const [l, c] = i.useState(!1), s = () => {
53    c(!1);
54  }, r = (o) => {
55    o.stopPropagation(), c((d) => !d);
56  };
57  return i.useEffect(() => (document.addEventListener("click", s), () => {
58    document.removeEventListener("click", s);
59  }

59), []), /* @__PURE__ */ t.jsxs("div", { className: "menugroup " + (e.className || ""), style: { display: "inline-block" }, children: [
60    /* @__PURE__ */ t.jsxs(w, { className: "dropdown-toggle", onClick: r, onBlur: s, objProps: { id: e.id, text: e.text }, children: [
61      /* @__PURE__ */ t.jsx(u, { className: `quarterrightmargin ${e.icon}` }),
62      /* @__PURE__ */ t.jsx("span", { className: "dropdown-selected", dangerouslySetInnerHTML: { __html: e.text } }),
63      /* @__PURE__ */ t.jsx(u, { className: "fas fa-chevron-down" })
64    ] }),
65    /* @__PURE__ */ t.jsx("ul", { id: e.panelID, className: "dropdown-menu", style: { display: l ? "block" : "" }, children: n })
66  ] });
67};
68f.Header = function({ objProps: n }) {
69  return /* @__PURE__ */ t.jsxs("li", { className: "dropdown-title", "data-value": n.value || "", children: [
70    /* @__PURE__ */ t.jsx("a", { id: n.id, dangerouslySetInnerHTML: { __html: n.text } }),
71    n.action ? /* @__PURE__ */ t.jsx("a", { className: "dropdown-menu_config", onClick: n.action.onClick, children: /* @__PURE__ */ t.jsx(u, { className: n.action.icon }) }) : null
72  ] });
73};
74f.Item = function({ objProps: n }) {
75  const e = (l) => {
76    n.onSelect && n.onSelect(l);
77  };
78  return /* @__PURE__ */ t.jsxs("li", { "data-value": n.value, className: n.isHighlightSelected && "dropdown-menu-selected" || "", children: [
79    /* @__PURE__ */ t.jsxs("a", { id: n.id, className: "dropdown-menu-option", onClick: e, children: [

80      /* @__PURE__ */ t.jsx("span", { dangerouslySetInnerHTML: { __html: n.text } }),
81      n.isSelected && !n.isHighlightSelected && /* @__PURE__ */ t.jsx(u, { className: "fas fa-check" })
82    ] }),
83    n.action ? /* @__PURE__ */ t.jsx("a", { className: "dropdown-menu_config", onClick: n.action.onClick, children: /* @__PURE__ */ t.jsx(u, { className: n.action.icon }) }) : null
84  ] });
85};
86export {
87  S as CheckBoxDropDown,
88  L as MenuItem,
89  f as ObjectDropDown,
90  E as default
91};