@devgateway/dvz-ui-react 1.0.6 → 1.1.0

package/dist/esm/embeddable/pagemodules/index.js

@@ -1,70 +1,69 @@
 import { jsxs as f, jsx as t } from "react/jsx-runtime";
-import { Menu as h, Image as x, Container as b } from "semantic-ui-react";
+import { Menu as g, Image as x, Container as b } from "semantic-ui-react";
 import { InView as M } from "react-intersection-observer";
 import T, { useEffect as N, useState as S, useCallback as I } from "react";
-import { PageProvider as w, PageConsumer as k, MediaProvider as P, MediaConsumer as p, PostContent as y } from "@devgateway/wp-react-lib";
+import { PageProvider as w, PageConsumer as k, MediaProvider as _, MediaConsumer as p, PostContent as y } from "@devgateway/wp-react-lib";
 import { injectIntl as H } from "react-intl";
 import { connect as L } from "react-redux";
 import { setPageModuleProps as $ } from "../reducers/data.js";
 import j from "./FloatingNavigator.js";
-const _ = function(e) {
-  return e ? e.toString().replace(/&#(\d+);/g, function(n, o) {
-    return String.fromCharCode(o);
+const P = function(e) {
+  return e ? e.toString().replace(/&#(\d+);/g, function(n, r) {
+    return String.fromCharCode(r);
   }) : "";
-}, E = ({ title: e, subtitle: n, icon: o, media: r }) => /* @__PURE__ */ f(h, { className: "header title", text: !0, children: [
-  /* @__PURE__ */ t(h.Item, { children: /* @__PURE__ */ t(
+}, E = ({ title: e, subtitle: n, icon: r, media: o }) => /* @__PURE__ */ f(g, { className: "header title", text: !0, children: [
+  /* @__PURE__ */ t(g.Item, { children: /* @__PURE__ */ t(
     x,
     {
-      src: r && r.guid ? r.guid.rendered : o,
-      alt: r && r.alt_text ? r.alt_text : ""
+      src: o && o.guid ? o.guid.rendered : r,
+      alt: o && o.alt_text ? o.alt_text : ""
     }
   ) }),
-  /* @__PURE__ */ t(h.Header, { children: /* @__PURE__ */ t("div", { children: /* @__PURE__ */ f("h2", { className: "page-module-title", children: [
+  /* @__PURE__ */ t(g.Header, { children: /* @__PURE__ */ t("div", { children: /* @__PURE__ */ f("h2", { className: "page-module-title", children: [
     e,
     /* @__PURE__ */ t("span", { style: { display: "block" }, className: "page-module-subtitle", children: n })
   ] }) }) })
 ] }), O = (e) => {
   var n;
   return /* @__PURE__ */ t("img", { src: (n = e.media) != null && n.guid ? e.media.guid.rendered : null, alt: "" });
-}, R = ({ page: e }) => {
-  var n;
+}, R = ({ page: e, locale: n }) => {
+  var r;
   return /* @__PURE__ */ f(b, { fluid: !0, className: `section ${e.slug}`, id: e.id, children: [
     /* @__PURE__ */ t("div", { id: `${e.slug}` }),
-    /* @__PURE__ */ t(P, { id: (n = e.meta_fields) != null && n.icon ? e.meta_fields.icon[0] : null, children: /* @__PURE__ */ t(p, { children: /* @__PURE__ */ t(E, { title: _(e.title.rendered), subtitle: _(e.meta_fields.subtitle) }) }) }),
+    /* @__PURE__ */ t(_, { id: (r = e.meta_fields) != null && r.icon ? e.meta_fields.icon[0] : null, children: /* @__PURE__ */ t(p, { children: /* @__PURE__ */ t(E, { title: P(e.title.rendered), subtitle: P(e.meta_fields.subtitle) }) }) }),
     e && /* @__PURE__ */ t(y, { as: b, fluid: !0, post: e })
   ] });
-}, q = ({ pages: e, locale: n, editing: o, navTitle: r, toTopLabel: d }) => {
-  const [c, l] = S([]), s = I((i, {
-    // @ts-ignore
+}, q = ({ pages: e, locale: n, editing: r, navTitle: o, toTopLabel: l }) => {
+  const [s, d] = S([]), c = I((i, {
     direction: a = "down",
-    onScreen: g
+    onScreen: h
   }) => {
-    l(g ? (u) => u.indexOf(i) === -1 ? [...u, i] : u : (u) => u.filter((C) => C !== i));
+    d(h ? (u) => u.indexOf(i) === -1 ? [...u, i] : u : (u) => u.filter((C) => C !== i));
   }, []), m = e ? e.sort((i, a) => i.menu_order - a.menu_order) : [], v = m.map((i) => {
     var a;
     return {
-      active: c.includes(i.id),
+      active: s.includes(i.id),
       id: i.id,
       label: i.meta_fields.label ? i.meta_fields.label : i.title.rendered,
-      iconComponent: /* @__PURE__ */ t(P, { id: (a = i.meta_fields) != null && a.icon ? i.meta_fields.icon[0] : null, children: /* @__PURE__ */ t(p, { children: /* @__PURE__ */ t(O, {}) }) })
+      iconComponent: /* @__PURE__ */ t(_, { id: (a = i.meta_fields) != null && a.icon ? i.meta_fields.icon[0] : null, children: /* @__PURE__ */ t(p, { children: /* @__PURE__ */ t(O, {}) }) })
     };
   });
   return /* @__PURE__ */ f(T.Fragment, { children: [
-    !o && /* @__PURE__ */ t(j, { navTitle: r, toTopLabel: d, sections: v }),
+    !r && /* @__PURE__ */ t(j, { navTitle: o, toTopLabel: l, sections: v }),
     /* @__PURE__ */ t("div", { className: "pages", children: m.map((i) => /* @__PURE__ */ t(
       M,
       {
         as: "div",
-        onChange: (a, g) => s(i.id, {
+        onChange: (a, h) => c(i.id, {
           onScreen: a,
-          direction: g.boundingClientRect.top < 0 ? "up" : "down"
+          direction: h.boundingClientRect.top < 0 ? "up" : "down"
         }),
         children: /* @__PURE__ */ t(
           R,
           {
             locale: n,
             page: i,
-            onVisibilityUpdate: s
+            onVisibilityUpdate: c
           }
         )
       },
@@ -74,50 +73,50 @@ const _ = function(e) {
 }, D = (e) => {
   const {
     navTitle: n,
-    toTopLabel: o,
-    editing: r,
-    parent: d,
-    unique: c,
-    locale: l,
-    onLoadPageModule: s
+    toTopLabel: r,
+    editing: o,
+    parent: l,
+    unique: s,
+    locale: d,
+    onLoadPageModule: c
   } = e;
   return N(() => {
-    s({ data: e });
+    c({ data: e });
   }, [e]), /* @__PURE__ */ t(b, { className: "viz dashboard green", fluid: !0, children: e.parent && /* @__PURE__ */ t(
     w,
     {
-      locale: l,
+      locale: d,
       parent: e.parent,
-      store: `modules_${d}_${c}`,
+      store: `modules_${l}_${s}`,
       perPage: 100,
       children: /* @__PURE__ */ t(k, { children: /* @__PURE__ */ t(
         q,
         {
-          toTopLabel: o,
+          toTopLabel: r,
           navTitle: n,
-          editing: r === "true",
-          locale: l
+          editing: o === "true",
+          locale: d
         }
       ) })
     }
   ) });
 }, V = (e, n) => {
   let {
-    "data-nav-label": o = "Sections",
-    "data-to-top-label": r = "TO THE TOP",
-    "data-preview-mode": d = "Desktop",
-    editing: c,
-    parent: l,
-    unique: s,
+    "data-nav-label": r = "Sections",
+    "data-to-top-label": o = "TO THE TOP",
+    "data-preview-mode": l = "Desktop",
+    editing: s,
+    parent: d,
+    unique: c,
     intl: { locale: m }
   } = n;
-  return d === "undefined" && (d = "Desktop"), {
-    navTitle: o,
-    toTopLabel: r,
-    previewMode: d,
-    editing: c,
-    parent: l,
-    unique: s,
+  return l === "undefined" && (l = "Desktop"), {
+    navTitle: r,
+    toTopLabel: o,
+    previewMode: l,
+    editing: s,
+    parent: d,
+    unique: c,
     locale: m
   };
 }, z = {

package/dist/esm/embeddable/parallax/index.js

@@ -1,11 +1,11 @@
-import { jsx as e } from "react/jsx-runtime";
-import i, { useState as u, useRef as y } from "react";
-import { Container as g } from "semantic-ui-react";
-import { PostProvider as x, PostConsumer as P } from "@devgateway/wp-react-lib";
-import { Parallax as k, ParallaxLayer as R } from "@react-spring/parallax";
+import { jsx as a } from "react/jsx-runtime";
+import i, { useState as g, useRef as y } from "react";
+import { Container as x } from "semantic-ui-react";
+import { PostProvider as P, PostConsumer as k } from "@devgateway/wp-react-lib";
+import { Parallax as R, ParallaxLayer as w } from "@react-spring/parallax";
 import C from "../connected-templates/PostContent.js";
 import { parse as S } from "../utils/parseUtils.js";
-const v = ({ posts: a, configuration: o }) => {
+const v = ({ posts: r, locale: n, configuration: o }) => {
   const s = (t) => t.sticky ? {
     sticky: {
       start: t.sticky ? t.stickyStart : t.offset,
@@ -15,38 +15,43 @@ const v = ({ posts: a, configuration: o }) => {
     offset: t.offset,
     speed: t.speed
   };
-  return /* @__PURE__ */ e(i.Fragment, { children: a && a.map((t, r) => /* @__PURE__ */ e(i.Fragment, { children: o && o[r] && /* @__PURE__ */ e(
-    R,
+  return /* @__PURE__ */ a(i.Fragment, { children: r && r.map((t, e) => /* @__PURE__ */ a(i.Fragment, { children: o && o[e] && /* @__PURE__ */ a(
+    w,
     {
-      ...s(o[r]),
-      children: /* @__PURE__ */ e(C, { as: g, fluid: !0, post: t })
+      ...s(o[e]),
+      children: /* @__PURE__ */ a(C, { as: x, fluid: !0, post: t })
     },
-    "parallax_" + r
+    "parallax_" + e
   ) })) });
-}, M = (a) => {
-  const [o, s] = u(Math.random() * 99998 + 1), {
+}, A = (r) => {
+  const [n, o] = g(Math.random() * 99998 + 1), {
+    "data-width": s,
     "data-height": t,
-    "data-type": r,
+    "data-type": e,
     "data-taxonomy": l,
-    "data-categories": n,
+    "data-categories": d,
+    "data-count": z,
+    "data-horizontal": F = !1,
     "data-scrolls": m,
     "data-configuration": p,
-    parent: d,
-    unique: c
-  } = a, h = S(p), f = y(null);
-  return /* @__PURE__ */ e("div", { style: { width: "100%", height: t + "px" }, className: "parallax-container", children: /* @__PURE__ */ e(k, { ref: f, pages: m, children: /* @__PURE__ */ e(
-    x,
+    parent: c,
+    editing: L,
+    component: _,
+    unique: h
+  } = r, f = S(p), u = y(null);
+  return /* @__PURE__ */ a("div", { style: { width: "100%", height: t + "px" }, className: "parallax-container", children: /* @__PURE__ */ a(R, { ref: u, pages: m, children: /* @__PURE__ */ a(
+    P,
     {
-      type: r,
+      type: e,
       taxonomy: l,
-      categories: n,
-      store: "parallax" + d + "_" + c,
+      categories: d,
+      store: "parallax" + c + "_" + h,
       page: 1,
       perPage: 50,
-      children: /* @__PURE__ */ e(P, { children: /* @__PURE__ */ e(v, { configuration: h }) })
+      children: /* @__PURE__ */ a(k, { children: /* @__PURE__ */ a(v, { configuration: f }) })
     }
   ) }) });
 };
 export {
-  M as default
+  A as default
 };

package/dist/esm/embeddable/posts-with-filters/Post.js

@@ -0,0 +1,26 @@
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import { Button as m } from "semantic-ui-react";
+import { format as c } from "date-fns";
+import { decodeHtmlEntitiesToText as u, decodeHtmlEntitiesToHtml as p } from "../../utils/data.js";
+const f = (l) => {
+  var i, o, a, d, s, r;
+  const { post: e } = l;
+  return /* @__PURE__ */ n("div", { className: "post-card", children: [
+    /* @__PURE__ */ t("div", { className: "post-image", children: /* @__PURE__ */ t(
+      "img",
+      {
+        src: e.featured_media_url,
+        alt: ((i = e.yoast_head_json) == null ? void 0 : i.title) || ((o = e.title) == null ? void 0 : o.rendered)
+      }
+    ) }),
+    /* @__PURE__ */ n("div", { className: "post-content", children: [
+      /* @__PURE__ */ t("div", { className: "publication-date", children: c(new Date(e.date), "MMM dd, yyyy") }),
+      /* @__PURE__ */ t("h2", { className: "publication-title", children: u(((a = e.yoast_head_json) == null ? void 0 : a.title) || ((d = e.title) == null ? void 0 : d.rendered) || "Publication Title") }),
+      /* @__PURE__ */ t("p", { className: "publication-description", dangerouslySetInnerHTML: { __html: p(((s = e.yoast_head_json) == null ? void 0 : s.og_description) || ((r = e.excerpt) == null ? void 0 : r.rendered) || "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.") } }),
+      /* @__PURE__ */ t(m, { className: "read-more-button", children: "Read more" })
+    ] })
+  ] }, e.id);
+};
+export {
+  f as default
+};

package/dist/esm/embeddable/posts-with-filters/index.js

@@ -0,0 +1,205 @@
+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
+};

package/dist/esm/embeddable/posts-with-filters/utils.js

@@ -0,0 +1,8 @@
+import "@devgateway/wp-react-lib";
+function D(t) {
+  const e = new Date(Date.UTC(t, 0, 1, 0, 0, 0, 0)), a = new Date(Date.UTC(t, 11, 31, 23, 59, 59, 999));
+  return { startDate: e, endDate: a };
+}
+export {
+  D as getStartDateAndEndDateFromYear
+};

package/dist/esm/embeddable/reducers/data-api.js

@@ -1,17 +1,31 @@
-import { Config as s } from "../../conf/index.js";
-import { get as n } from "../../api/commons.js";
-const r = s.REACT_APP_API_ROOT;
-function i(o) {
-  return Object.keys(o).map((t) => encodeURIComponent(t) + "=" + encodeURIComponent(o[t])).join("&");
+import "../../conf/index.js";
+import { get as f } from "../../api/commons.js";
+function c(t) {
+  return JSON.parse(JSON.stringify(t));
 }
-const f = ({ app: o, params: t }) => {
-  const e = `${r ?? ""}/api/${o}/categories${t ? "?" + i(t) : ""}`;
-  return n(e);
-}, g = ({ source: o, app: t, params: e }) => {
-  const c = `${r ?? ""}/api/${t}/stats/${o}${e ? "?" + i(e) : ""}`;
-  return n(c);
+const i = process.env.VITE_REACT_APP_API_ROOT, r = {}, s = {}, p = 3 * 60 * 1e3;
+function a(t) {
+  return Object.keys(t).map((e) => encodeURIComponent(e) + "=" + encodeURIComponent(t[e])).join("&");
+}
+function l(t) {
+  const e = t, n = Date.now();
+  if (s[e] && n - s[e].timestamp < p)
+    return Promise.resolve(c(s[e].data));
+  if (r[e])
+    return r[e].then(c);
+  const o = f(t).then((u) => (s[e] = { data: u, timestamp: Date.now() }, c(u))).finally(() => {
+    delete r[e];
+  });
+  return r[e] = o, o;
+}
+const O = ({ app: t, params: e }) => {
+  const n = `${i || ""}/api/${t}/categories${e ? "?" + a(e) : ""}`;
+  return console.log("categories==>", n), l(n);
+}, R = ({ source: t, app: e, params: n }) => {
+  const o = `${i || ""}/api/${e}/stats/${t}${n ? "?" + a(n) : ""}`;
+  return l(o);
 };
 export {
-  f as getCategories,
-  g as getData
+  O as getCategories,
+  R as getData
 };