@devgateway/dvz-ui-react
Version:
A modular, embeddable React component library for data visualization and UI, built with TypeScript. Provides reusable components for charts, maps, dashboards, and more, with built-in support for internationalization and Redux integration.
191 lines (190 loc) • 7.04 kB
JavaScript
import { jsx as l, jsxs as m, Fragment as F } from "react/jsx-runtime";
import { useState as U, useRef as L, useEffect as P } from "react";
import { Dropdown as h, Segment as Y, Label as R, Container as O, Icon as q, Divider as z, Radio as H, Checkbox as J } from "semantic-ui-react";
const T = "multi-select", g = "single-select", Z = (b) => {
const {
allLabel: D,
noneLabel: M,
placeholder: w,
options: r,
// group,
current: C,
onChange: i,
useSingleColumn: y,
enableTextSearch: p,
filterType: o,
// defaultValues,
// showNoDataOption,
// defaultValueCriteria,
allNoneSameBehaviour: N,
hiddenFilters: f,
// autoApply,
// taxonomy,
// type,
value: a,
closeOnSelect: v = !0
} = b, u = o === T, s = Array.isArray(a) ? a : C || [], [c, V] = U(""), A = (e, t) => {
if (o === T) {
let n = Array.isArray(s) ? [...s] : [];
return n.indexOf(t) > -1 ? n = n.filter((I) => I !== t) : n = [...n, t], i && i(e, n);
}
if (o === g)
return i && i(e, t);
v && d.current && d.current.close();
}, $ = () => {
const e = (r || []).filter((t) => {
var n;
return p && c && c.trim().length > 0 && t.text ? (n = t.text) == null ? void 0 : n.toString().toLowerCase().includes(c.toLowerCase()) : !0;
}).map((t) => t.value);
u && i && i({}, e), !u && v && d.current && d.current.close();
}, K = () => {
let e = [];
N && (e = (r || []).filter((t) => {
var n;
return p && c && c.trim().length > 0 && t.text ? (n = t.text) == null ? void 0 : n.toString().toLowerCase().includes(c.toLowerCase()) : !0;
}).map((t) => t.value)), u && i && i({}, e), !u && v && d.current && d.current.close();
}, _ = (e) => {
V(e);
}, E = L(!1);
P(() => {
if (!(!u || E.current) && r && r.length > 0)
if (!(Array.isArray(s) ? s.length > 0 : !!s) && i) {
E.current = !0;
const t = r.map((n) => n.value);
i({}, t);
} else
E.current = !0;
}, [u, r]), P(() => {
if (u && r && r.length > 0 && i) {
const e = r.map((t) => t.value);
i({}, e);
}
}, []);
const j = () => {
if (o == g) {
const e = a ? r == null ? void 0 : r.filter((t) => t.value == a)[0] : null;
return e ? e.text : "";
} else {
const e = s ? s.filter((n) => n == Number.MIN_SAFE_INTEGER ? !1 : f && f.length > 0 ? f.indexOf(n) == -1 : !0).length : 0, t = (r == null ? void 0 : r.filter((n) => f && f.length > 0 ? f.indexOf(n.id) == -1 : !0).length) || 0;
return `${w} (${e}/${t})`;
}
}, d = L(null), k = j(), x = typeof k == "string" ? k : "", B = x && x.length > 0 ? x : w || "", S = L(void 0);
P(() => {
o === g && S.current === void 0 && a !== void 0 && (S.current = a);
}, [o, a]);
const G = o === g ? a != null && a !== S.current : C && C.length > 0;
return (
// @ts-ignore
/* @__PURE__ */ l(
h,
{
...b,
ref: d,
fluid: !0,
text: B,
scrolling: !1,
button: !0,
icon: "angle down",
multiple: u,
search: !0,
floating: !1,
value: a,
closeOnChange: v,
...u ? { renderLabel: () => null } : {},
className: `multiple ${G ? "applied " : ""}`,
children: /* @__PURE__ */ m(h.Menu, { children: [
o != g && /* @__PURE__ */ m(F, { children: [
/* @__PURE__ */ l(Y, { children: /* @__PURE__ */ m(h.Item, { children: [
/* @__PURE__ */ l(R, { basic: !0, onClick: $, children: D }),
" ",
"|",
" ",
/* @__PURE__ */ l(R, { basic: !0, onClick: K, children: M })
] }) }),
p && /* @__PURE__ */ m(F, { children: [
/* @__PURE__ */ l(O, { children: /* @__PURE__ */ l(h.Item, { children: /* @__PURE__ */ l("div", { className: "ui action input", children: /* @__PURE__ */ m("div", { className: "ui input", children: [
/* @__PURE__ */ l(
"input",
{
className: "filter-search",
value: c,
placeholder: "Search...",
onChange: (e) => {
e && e.nativeEvent && e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation(), _(e.target.value);
},
onKeyDown: (e) => {
e && e.nativeEvent && e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation();
},
onKeyUp: (e) => {
e && e.nativeEvent && e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation();
},
onKeyPress: (e) => {
e && e.nativeEvent && e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation();
},
onMouseDown: (e) => {
e.stopPropagation();
},
onClick: (e) => {
e.stopPropagation();
},
onFocus: (e) => {
e.stopPropagation();
},
type: "text",
autoComplete: "off"
}
),
/* @__PURE__ */ l(
q,
{
name: "remove",
link: !0,
className: "clear-icon ignore",
onClick: (e) => {
_("");
}
}
)
] }) }) }) }),
/* @__PURE__ */ l(z, {})
] })
] }),
/* @__PURE__ */ l("br", {}),
/* @__PURE__ */ l(O, { className: y ? "dropdown-single-column" : "", children: r == null ? void 0 : r.filter((e) => {
var t;
return p && c && c.trim().length > 0 && e.text ? (t = e.text) == null ? void 0 : t.toString().toLowerCase().includes(c.toLowerCase()) : !0;
}).map(({ value: e, text: t }, n) => /* @__PURE__ */ m(
h.Item,
{
className: y ? "dropdown-item-single-column" : "",
children: [
o === g && /* @__PURE__ */ l(
H,
{
checked: a === e,
onChange: (I) => {
A(I, e);
},
label: t
}
),
o === T && /* @__PURE__ */ l(
J,
{
checked: !!(s && s.indexOf(e) > -1 && !(r.length == s.length && N)),
onChange: () => A(null, e),
label: t
}
)
]
},
n
)) })
] })
}
)
);
};
export {
Z as default
};