@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.
206 lines (205 loc) • 6.38 kB
JavaScript
import { jsxs as m, jsx as t } from "react/jsx-runtime";
import { useState as A, useEffect as T } from "react";
import { CategoriesProvider as $, CategoriesContext as H, PostProvider as J, PostConsumer as U, getYearRange as q } from "@devgateway/wp-react-lib";
import { Container as R, Dropdown as b, Icon as k, Pagination as z } from "semantic-ui-react";
import G from "./Post.js";
import { getStartDateAndEndDateFromYear as K } from "./utils.js";
import { toBoolean as x, toNumber as B } from "../../utils/data.js";
const L = (C) => {
const { posts: a, meta: n, showPaginationOptions: f, currentPage: c, setCurrentPage: w, countryCategory: P, height: r } = C, u = B(P), F = Array.isArray(a) ? a.filter((o) => o.categories.includes(u)) : [], d = Array.isArray(a) ? a.filter((o) => !o.categories.includes(u)) : [], s = [...F, ...d], h = n && n["x-wp-totalpages"] ? n["x-wp-totalpages"] : 1;
return /* @__PURE__ */ m("div", { children: [
/* @__PURE__ */ t("div", { className: "posts-grid", children: s == null ? void 0 : s.map((o) => /* @__PURE__ */ t(G, { post: o }, o.id)) }),
f && /* @__PURE__ */ m("div", { className: "pagination-section", children: [
/* @__PURE__ */ m("div", { className: "pagination-info", children: [
"Page ",
/* @__PURE__ */ t("span", { className: "current-page", children: c }),
" of ",
h
] }),
/* @__PURE__ */ t(
z,
{
activePage: c,
totalPages: h,
onPageChange: (o, { activePage: l }) => w(l),
prevItem: { content: /* @__PURE__ */ t(k, { name: "angle left" }), icon: !0 },
nextItem: { content: /* @__PURE__ */ t(k, { name: "angle right" }), icon: !0 },
firstItem: null,
lastItem: null
}
)
] })
] });
}, M = (C) => {
const {
categories: a,
selectedCategory: n,
setSelectedCategory: f,
selectedYear: c,
setSelectedYear: w,
onResetFilters: P,
showCategoryFilter: r,
categoryPlaceholder: u,
showDateFilter: F,
categoriesToBeShown: d,
setCurrentPage: s,
showCountryFilter: h,
countryPlaceholder: o,
countryCategory: l,
selectedCountry: v,
setSelectedCountry: Y
} = C, [D, I] = A([]);
T(() => {
const e = async () => {
const V = (await q()).data.map((N) => ({
key: N,
value: N,
text: `Year ${N}`
}));
I(V);
};
return e(), () => {
e();
};
}, []);
const S = a && d ? a.filter((e) => d.includes(e.id)) : [], O = a && l ? a.filter((e) => e.parent === parseInt(l)) : [];
return /* @__PURE__ */ t("div", { className: "filters-section", children: /* @__PURE__ */ m("div", { className: "filter-controls", children: [
h && /* @__PURE__ */ t(
b,
{
options: O.map((e) => ({
key: e.id,
value: e.id,
text: e.name
})),
placeholder: o,
value: v,
onChange: (e, { value: i }) => {
Y(i), s(1);
}
}
),
F && /* @__PURE__ */ t(
b,
{
options: D,
placeholder: "Select Year",
value: c || "",
onChange: (e, { value: i }) => {
w(i), s(1);
},
multiple: !1,
searchable: !0,
showAllNone: !1,
closeOnSelect: !0
}
),
r && /* @__PURE__ */ t(
b,
{
options: S ? S.map((e) => ({
key: e.id,
value: e.id,
text: e.name
})) : [],
placeholder: u || "All Countries",
value: n,
onChange: (e, { value: i }) => {
f(i), s(1);
},
multiple: !1,
searchable: !1,
showAllNone: !1,
closeOnSelect: !0,
className: "category-filter"
}
),
/* @__PURE__ */ m(
R,
{
className: `data-filters-reset ignore ${n || c || v ? "" : "disabled"}`,
onClick: P,
children: [
/* @__PURE__ */ t("span", { children: "Reset Filters" }),
/* @__PURE__ */ t("span", { children: /* @__PURE__ */ t(k, { name: "undo alternate", className: "custom-undo-icon" }) })
]
}
)
] }) });
}, ae = (C) => {
const {
"data-height": a,
"data-show-pagination": n,
"data-show-posts-per-page": f,
"data-show-filters": c,
"data-show-date-filter": w,
"data-show-category-filter": P,
"data-categories": r,
"data-category-placeholder": u,
"data-show-country-filter": F,
"data-country-category": d,
"data-country-placeholder": s
} = C, [h, o] = A(null), [l, v] = A(null), [Y, D] = A(null), [I, S] = A(1), O = B(a), e = x(n), i = B(f), j = x(c), V = x(w), N = x(P), W = x(F), E = () => {
o(null), v(null), D(null);
}, g = l ? K(l) : null;
let p = [];
try {
if (r)
if (Array.isArray(r))
p = r;
else if (typeof r == "string") {
const y = decodeURIComponent(r);
y && y !== "undefined" && (p = JSON.parse(y));
} else
p = r;
} catch {
p = [];
}
return /* @__PURE__ */ m(R, { fluid: !0, style: { height: "100%", minHeight: O + "px" }, children: [
j && /* @__PURE__ */ t($, { children: /* @__PURE__ */ t(H.Consumer, { children: ({ categories: y }) => /* @__PURE__ */ t(
M,
{
showCategoryFilter: N,
categoryPlaceholder: u,
showDateFilter: V,
categories: y || [],
categoriesToBeShown: p,
selectedCategory: h,
setSelectedCategory: o,
selectedYear: l,
setSelectedYear: v,
onResetFilters: E,
setCurrentPage: S,
showCountryFilter: W,
countryPlaceholder: s,
countryCategory: d,
selectedCountry: Y,
setSelectedCountry: D
}
) }) }),
/* @__PURE__ */ t(
J,
{
perPage: i || 10,
store: "posts-with-filters",
categories: Y || h || p.join(","),
after: (g == null ? void 0 : g.startDate) || null,
before: (g == null ? void 0 : g.endDate) || null,
page: I,
children: /* @__PURE__ */ t(U, { children: /* @__PURE__ */ t(
L,
{
showPaginationOptions: e,
currentPage: I,
setCurrentPage: S,
countryCategory: d,
height: O
}
) })
}
)
] });
};
export {
ae as default
};