@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.
431 lines (430 loc) • 14 kB
JavaScript
import { jsx as r, jsxs as F, Fragment as z } from "react/jsx-runtime";
import { useState as k, useEffect as X, useRef as Z } from "react";
import { Container as b, Dropdown as v, Segment as M, Label as P, Radio as H, Input as te, Icon as re, Divider as ne, Checkbox as le } from "semantic-ui-react";
import J from "../data/CategoriesConsumer.js";
import ae from "../data/CategoriesProvider.js";
import { connect as Y } from "react-redux";
import { setFilter as ie, setInitialFilters as oe } from "../reducers/data.js";
import { injectIntl as se } from "react-intl";
import { SettingProvider as ce, SettingsConsumer as ue } from "@devgateway/wp-react-lib";
const K = "multi-select", O = "single-select", de = "NO_DATA", fe = "DEFAULT_VALUE_INPUT", he = "LOWEST_VALUE", me = "HIGHEST_VALUE", S = (t) => t instanceof Boolean ? t : t == "true", pe = (t, i) => t ? t.sort((l, c) => l.position - c.position).map((l) => {
const c = i && l.labels && l.labels[i.toUpperCase()] ? l.labels[i.toUpperCase()] : l.value;
return {
key: l.id,
value: l.id,
text: c,
icon: l.value.toLocaleLowerCase(),
position: l.position ? l.position : l.value
};
}) : [], ge = (t) => decodeURIComponent(t), Q = (t) => {
if (!t || t == "")
return null;
try {
return JSON.parse(ge(t));
} catch (i) {
throw new Error("error parsing value:" + i);
}
}, j = (t, i) => {
const { app: l, group: c, param: o } = i;
return {
current: t.getIn(["data", "filters", l, c, o])
};
}, W = {
onInit: oe,
onChange: ie
}, q = (t) => {
const { isRange: i, options: l, alphabeticalSort: c, ascOrder: o } = t;
let d = [];
S(c) ? d = l.sort(function(u, n) {
const m = u.text ? u.text.toLowerCase() : "", s = n.text ? n.text.toLowerCase() : "";
return S(o) ? m < s ? -1 : m > s ? 1 : 0 : m < s ? 1 : m > s ? -1 : 0;
}) : d = l.sort(function(u, n) {
return S(o) ? u.position - n.position : n.position - u.position;
});
const f = { ...t, options: d };
return i ? /* @__PURE__ */ r(xe, { ...f }) : /* @__PURE__ */ r(Ce, { ...f });
}, Ce = Y(
j,
W
)((t) => {
const {
allLabel: i,
noneLabel: l,
placeholder: c,
options: o,
app: d,
group: f,
param: u,
current: n,
onChange: m,
onInit: s,
useSingleColumn: w,
enableTextSearch: x,
filterType: E,
defaultValues: _,
showNoDataOption: N,
defaultValueCriteria: h,
allNoneSameBehaviour: g,
closeOnSelect: T,
hiddenFilters: L,
autoApply: A
} = t, [V, $] = k(""), U = (e) => {
let a = [];
E != O && !T && n && n.indexOf(e) > -1 ? a = n.filter((p) => p !== e) : E != O && n && !T ? a = [...n, e] : a = [e], m({ app: d, group: f, param: u, value: a, autoApply: A }), T && I.current && I.current.close();
}, R = (e) => {
const a = o.filter((p) => x && C && C.trim().length > 0 && p.text ? p.text.toLowerCase().includes(C.toLowerCase()) : !0);
m({
app: d,
group: f,
param: u,
value: a.map((p) => p.value),
autoApply: A
}), T && I.current && I.current.close();
}, B = () => {
const e = o.filter((a) => x && C && C.trim().length > 0 && a.text ? a.text.toLowerCase().includes(C.toLowerCase()) : !0);
m({
app: d,
group: f,
param: u,
value: g ? e.map((a) => a.value) : [],
autoApply: A
}), T && I.current && I.current.close();
}, G = (e) => {
y(e);
const a = o.filter((p) => x && e && e.trim().length > 0 && p.text ? p.text.toLowerCase().includes(e.toLowerCase()) : !0);
m({
app: d,
group: f,
param: u,
value: a.map((p) => p.value),
autoApply: A
});
};
X(() => {
if (!n) {
const e = o.map((a) => a.value);
if (E == K || E == "")
s({ app: d, group: f, param: u, value: e });
else if (d == "csv") {
let a = [];
h === fe ? a = _ ? _.split(",") : [] : h == he ? a = e.length > 0 ? [e[0]] : [] : h == me && (a = e.length > 0 ? [e[e.length - 1]] : []), s({ app: d, group: f, param: u, value: a });
} else
s({ app: d, group: f, param: u, value: [e[0]] });
}
}, []);
const D = () => {
if (E == O) {
const e = n && n[0] ? o.filter((a) => a.value == n[0])[0] : null;
return `${c} ${e ? e.text : ""}`;
} else
return `${c} (${n ? n.filter((e) => e == Number.MIN_SAFE_INTEGER ? !1 : L && L.length > 0 ? L.indexOf(e) == -1 : !0).length : 0}/${o.filter((e) => L && L.length > 0 ? L.indexOf(e.id) == -1 : !0).length}) `;
}, I = Z(null), [C, y] = k("");
return (
// @ts-ignore
/* @__PURE__ */ r(
v,
{
ref: I,
fluid: !0,
text: D(),
scrolling: !1,
button: !0,
icon: "angle down",
multiple: !0,
search: !0,
floating: !1,
className: `${n && n.length > 0 ? "applied " : ""}`,
children: /* @__PURE__ */ F(v.Menu, { children: [
E != O && /* @__PURE__ */ F(z, { children: [
/* @__PURE__ */ r(M, { children: /* @__PURE__ */ F(v.Item, { children: [
/* @__PURE__ */ r(P, { basic: !0, onClick: R, children: i }),
" ",
"|",
" ",
/* @__PURE__ */ r(P, { basic: !0, onClick: B, children: l })
] }) }),
x && /* @__PURE__ */ F(z, { children: [
/* @__PURE__ */ r(b, { children: /* @__PURE__ */ r(v.Item, { children: /* @__PURE__ */ r("div", { className: "ui action input", children: /* @__PURE__ */ F(te, { placeholder: "Search...", children: [
/* @__PURE__ */ r(
"input",
{
className: "filter-search",
value: C,
onChange: (e) => {
G(e.target.value);
}
}
),
/* @__PURE__ */ r(
re,
{
name: "remove",
link: !0,
className: "clear-icon ignore",
onClick: (e) => {
G("");
}
}
)
] }) }) }) }),
/* @__PURE__ */ r(ne, {})
] })
] }),
/* @__PURE__ */ r("br", {}),
/* @__PURE__ */ r(b, { className: w ? "dropdown-single-column" : "", children: o.filter((e) => x && C && C.trim().length > 0 && e.text ? e.text.toLowerCase().includes(C.toLowerCase()) : !0).map(({ value: e, text: a }, p) => /* @__PURE__ */ F(
v.Item,
{
className: w ? "dropdown-item-single-column" : "",
children: [
E == O && /* @__PURE__ */ r(
H,
{
checked: !!(n && n.indexOf(e) > -1),
onChange: (ee) => U(e),
label: a
}
),
E == K && /* @__PURE__ */ r(
le,
{
checked: !!(n && n.indexOf(e) > -1 && !(o.length == n.length && g)),
onChange: (ee) => U(e),
label: a
}
)
]
},
p
)) })
] })
}
)
);
}), xe = Y(
j,
W
)(
({
placeholder: t,
startLabel: i,
endLabel: l,
options: c,
onChange: o,
app: d,
group: f,
param: u,
current: n,
autoApply: m
}) => {
const [s, w] = k(c[0].position), [x, E] = k(c[c.length - 1].position);
X(() => {
const N = c.filter(
(h) => (h.position > s || h.position === s) && (h.position < x || h.position === x)
).map((h) => h.value);
o({ app: d, group: f, param: u, value: N, autoApply: m });
}, [s, x]);
const _ = Z(null);
return /* @__PURE__ */ r(
v,
{
ref: _,
fluid: !0,
text: `${t} (${n ? n.filter((N) => N != Number.MIN_SAFE_INTEGER).length : 0}/${c.length})`,
scrolling: !1,
button: !0,
multiple: !0,
search: !0,
floating: !1,
icon: "angle down",
className: `${n && n.length > 0 ? "applied " : ""} range`,
children: /* @__PURE__ */ F(v.Menu, { children: [
/* @__PURE__ */ r(M, { children: /* @__PURE__ */ F(v.Item, { children: [
" ",
/* @__PURE__ */ r(P, { basic: !0, children: i })
] }) }),
/* @__PURE__ */ r(b, { children: c.map(({ value: N, text: h, position: g }) => /* @__PURE__ */ r(v.Item, { children: /* @__PURE__ */ r(
H,
{
disabled: g > x,
checked: s === g,
onChange: (T) => w(g),
label: h
}
) })) }),
/* @__PURE__ */ r(M, { children: /* @__PURE__ */ F(v.Item, { children: [
" ",
/* @__PURE__ */ r(P, { basic: !0, children: l })
] }) }),
/* @__PURE__ */ r(b, { children: c.map(({ value: N, text: h, position: g }) => /* @__PURE__ */ r(v.Item, { children: /* @__PURE__ */ r(
H,
{
disabled: g < s,
checked: x === g,
onChange: (T) => E(g),
label: h
}
) })) })
] })
}
);
}
), Ee = (t) => {
const { data: i, type: l, showNoDataOption: c } = t, o = i.filter((s) => s.type === l)[0], d = o ? o.items.filter((s) => !c && s.code == de ? !1 : t.hiddenFilters && t.hiddenFilters.length > 0 ? t.hiddenFilters.indexOf(s.id) == -1 : !0) : [], f = d ? pe(d, t.locale) : [], u = i.find((s) => s.type = "FilterDefinition"), n = u ? u.items.find((s) => s.fieldType == l) : null, m = n ? n.value : "Filter";
return /* @__PURE__ */ r(b, { fluid: !0, className: "filter", children: /* @__PURE__ */ r(
q,
{
...t,
options: f,
placeholder: t.placeholder ? t.placeholder : m
}
) });
}, Ie = Y(
j,
W
)((t) => {
let i = 0;
const l = [
{
key: "Yes",
value: !0,
text: "Yes",
position: i++
},
{
key: "No",
value: !1,
text: "No",
position: i++
}
];
return /* @__PURE__ */ r(b, { fluid: !0, className: "filter", children: /* @__PURE__ */ r(q, { options: l, ...t }) });
}), ve = (t) => {
const { csvValue: i } = t;
let l = 0;
const c = i.split(",").map((o) => ({
key: o,
value: o,
text: o,
icon: o.toLocaleLowerCase(),
position: l++
}));
return /* @__PURE__ */ r(b, { fluid: !0, className: "filter", children: /* @__PURE__ */ r(q, { options: c, ...t, children: " " }) });
}, Se = (t) => /* @__PURE__ */ r(ce, { locale: t.intl.locale, changeUUID: t.unique, children: /* @__PURE__ */ r(ue, { children: /* @__PURE__ */ r(Fe, { ...t }) }) }), Fe = ({
"data-group": t,
"data-app": i,
"data-dvz-proxy-dataset-id": l,
"data-param": c,
"data-icon": o,
"data-type": d,
"data-place-holder": f,
"data-is-range": u = "false",
"data-all-label": n,
"data-none-label": m,
"data-start-label": s,
"data-end-label": w,
"data-csv-value": x,
"data-filters": E = "[]",
"data-use-single-column": _ = "false",
"data-enable-text-search": N = "false",
"data-filter-type": h,
"data-default-values": g,
"data-show-no-data-option": T = "true",
"data-default-value-criteria": L = "DEFAULT_VALUE_INPUT",
"data-hidden-filters": A = "[]",
"data-all-none-same-behaviour": V = "false",
"data-close-on-select": $ = "false",
"data-alphabetical-sort": U = "true",
"data-asc-order": R = "true",
"data-auto-apply": B = "true",
settings: G,
intl: D
}) => {
const I = {}, C = E ? Q(E) : {};
C && C.forEach && C.forEach((a) => {
a.value != null && a.value.filter((p) => p != null && p.toString().trim() != "").length > 0 && (I[a.param] = a.value);
}), l && (I.dvzProxyDatasetId = l);
const y = A ? Q(A) : [];
let e;
return h == null || h == "" ? e = u === "true" ? "range" : "multi-select" : e = h, i === "csv" ? /* @__PURE__ */ r(
ve,
{
allLabel: n,
noneLabel: m,
isRange: u === "true",
csvValue: x,
app: i,
group: t,
icon: o,
placeholder: f,
startLabel: s,
endLabel: w,
param: c,
useSingleColumn: _ === "true",
enableTextSearch: N === "true",
filterType: e,
defaultValues: g,
defaultValueCriteria: L,
allNoneSameBehaviour: V === "true",
closeOnSelect: $ === "true",
locale: D.locale
}
) : i ? /* @__PURE__ */ r(
ae,
{
params: I,
app: i,
hiddenFilters: y || [],
children: /* @__PURE__ */ r(J, { children: /* @__PURE__ */ F(b, { fluid: !0, children: [
d === "Boolean" && /* @__PURE__ */ r(
Ie,
{
startLabel: s,
endLabel: w,
allLabel: n,
noneLabel: m,
isRange: S(u),
app: i,
group: t,
icon: o,
placeholder: f,
param: c,
filterType: e,
defaultValues: g,
locale: D.locale
}
),
d !== "Boolean" && /* @__PURE__ */ r(J, { type: d, children: /* @__PURE__ */ r(
Ee,
{
startLabel: s,
endLabel: w,
allLabel: n,
noneLabel: m,
isRange: S(u),
app: i,
group: t,
icon: o,
placeholder: f,
param: c,
alphabeticalSort: U,
ascOrder: R,
useSingleColumn: S(_),
enableTextSearch: S(N),
showNoDataOption: S(T),
filterType: e,
defaultValues: g,
defaultValueCriteria: L,
hiddenFilters: y || [],
allNoneSameBehaviour: V == "true",
autoApply: S(B),
closeOnSelect: S($),
locale: D.locale
}
) })
] }) })
}
) : null;
}, Ue = se(Se);
export {
Ue as default
};