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