@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.
205 lines (204 loc) • 7.52 kB
JavaScript
import { jsx as l, jsxs as h, Fragment as D } from "react/jsx-runtime";
import { useState as Q, useRef as A, useEffect as _, useMemo as W } from "react";
import { Dropdown as v, Segment as X, Label as K, Container as G, Icon as Z, Divider as ee, Radio as te, Checkbox as ne } from "semantic-ui-react";
const F = "multi-select", p = "single-select", N = Number.MIN_SAFE_INTEGER, E = (m) => m == null ? null : String(m), se = (m) => {
const {
allLabel: U,
noneLabel: j,
placeholder: S,
options: n,
// group,
current: L,
onChange: i,
useSingleColumn: k,
enableTextSearch: C,
filterType: c,
// defaultValues,
// showNoDataOption,
// defaultValueCriteria,
allNoneSameBehaviour: R,
hiddenFilters: g,
// autoApply,
// taxonomy,
// type,
value: o,
closeOnSelect: I = !0,
noneFunction: V
} = m, u = c === F, x = Array.isArray(o) ? o : L || [], d = (Array.isArray(x) ? x.some((e) => e === N) : !1) ? x.filter((e) => e !== N) : x, [a, B] = Q(""), M = (e, t) => {
if (c === F) {
const r = E(t), s = Array.isArray(d) ? [...d] : [];
let T = s.some((w) => E(w) === r) ? s.filter((w) => E(w) !== r) : [...s, t];
return !R && T.length === 0 && (T = [N]), i && i(e, T);
}
if (c === p)
return i && i(e, t);
I && f.current && f.current.close();
}, Y = () => {
const e = (n || []).filter((t) => {
var r;
return C && a && a.trim().length > 0 && t.text ? (r = t.text) == null ? void 0 : r.toString().toLowerCase().includes(a.toLowerCase()) : !0;
}).map((t) => t.value);
u && i && i({}, e), !u && I && f.current && f.current.close();
}, q = (e) => {
if (V) {
V(e);
return;
} else {
if (!n) return [];
const t = n.filter((r) => {
var s;
return C && a && a.trim().length > 0 && r.text ? (s = r.text) == null ? void 0 : s.toString().toLowerCase().includes(a == null ? void 0 : a.toString().toLowerCase()) : !0;
});
if (u && i) {
const r = R ? t.map((s) => s.value) : [N];
i({}, r);
}
!u && I && f.current && f.current.close();
}
}, O = (e) => {
B(e);
}, y = A(!1);
_(() => {
if (!(!u || y.current) && n && n.length > 0)
if (!(Array.isArray(d) ? d.length > 0 : !!d) && i) {
y.current = !0;
const t = n.map((r) => r.value);
i({}, t);
} else
y.current = !0;
}, [u, n]), _(() => {
if (u && n && n.length > 0 && i) {
const e = n.map((t) => t.value);
i({}, e);
}
}, [u]);
const z = W(() => {
if (c == p) {
const e = o ? n == null ? void 0 : n.filter((t) => t.value == o)[0] : null;
return e ? `${S ? S + " " : ""}${e.text}` : "";
} else {
const e = d ? d.filter((r) => r == Number.MIN_SAFE_INTEGER ? !1 : g && g.length > 0 ? g.indexOf(r) == -1 : !0).length : 0, t = (n == null ? void 0 : n.filter((r) => g && g.length > 0 ? g.indexOf(r.id) == -1 : !0).length) || 0;
return `${S} (${e}/${t})`;
}
}, [n, d, c]), f = A(null), $ = z, b = typeof $ == "string" ? $ : "", H = b && b.length > 0 ? b : S || "", P = A(void 0);
_(() => {
c === p && P.current === void 0 && o !== void 0 && (P.current = o);
}, [c, o]);
const J = c === p ? o != null && o !== P.current : L && L.length > 0;
return (
// @ts-ignore
/* @__PURE__ */ l(
v,
{
...m,
ref: f,
fluid: !0,
text: H,
scrolling: !1,
button: !0,
icon: "angle down",
multiple: u,
search: !0,
floating: !1,
value: o,
closeOnChange: I,
...u ? { renderLabel: () => null } : {},
className: `multiple ${J ? "applied " : ""}`,
children: /* @__PURE__ */ h(v.Menu, { children: [
c != p && /* @__PURE__ */ h(D, { children: [
/* @__PURE__ */ l(X, { children: /* @__PURE__ */ h(v.Item, { children: [
/* @__PURE__ */ l(K, { basic: !0, onClick: Y, children: U }),
" ",
"|",
" ",
/* @__PURE__ */ l(K, { basic: !0, onClick: q, children: j })
] }) }),
C && /* @__PURE__ */ h(D, { children: [
/* @__PURE__ */ l(G, { children: /* @__PURE__ */ l(v.Item, { children: /* @__PURE__ */ l("div", { className: "ui action input", children: /* @__PURE__ */ h("div", { className: "ui input", children: [
/* @__PURE__ */ l(
"input",
{
className: "filter-search",
value: a,
placeholder: "Search...",
onChange: (e) => {
e && e.nativeEvent && e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation(), O(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(
Z,
{
name: "remove",
link: !0,
className: "clear-icon ignore",
onClick: (e) => {
O("");
}
}
)
] }) }) }) }),
/* @__PURE__ */ l(ee, {})
] })
] }),
/* @__PURE__ */ l("br", {}),
/* @__PURE__ */ l(G, { className: k ? "dropdown-single-column" : "", children: n == null ? void 0 : n.filter((e) => {
var t;
return C && a && a.trim().length > 0 && e.text ? (t = e.text) == null ? void 0 : t.toString().toLowerCase().includes(a.toLowerCase()) : !0;
}).map(({ value: e, text: t }, r) => /* @__PURE__ */ h(
v.Item,
{
className: k ? "dropdown-item-single-column" : "",
children: [
c === p && /* @__PURE__ */ l(
te,
{
checked: o == e,
onChange: (s) => {
M(s, e);
},
label: t
}
),
c === F && /* @__PURE__ */ l(
ne,
{
checked: d && d.some(
(s) => E(s) === E(e)
),
onChange: () => M(null, e),
label: t
}
)
]
},
r
)) })
] })
}
)
);
};
export {
se as default
};