@devgateway/dvz-ui-react 1.7.15 → 1.8.0

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

@@ -1,65 +1,65 @@
-import { jsx as e, jsxs as b } from "react/jsx-runtime";
-import F, { useState as p, useRef as ne, useEffect as T } from "react";
-import { Container as S, Accordion as E, Icon as oe, Menu as z, Grid as _, Label as G, Button as ie } from "semantic-ui-react";
-import { PostProvider as re, PostConsumer as q, MediaProvider as V, MediaConsumer as U, PostIcon as Y, PostLabel as J } from "@devgateway/wp-react-lib";
-import { injectIntl as ae } from "react-intl";
-import { connect as le } from "react-redux";
-import K from "../connected-templates/PostIntro.js";
-import { useWindowDimensionsAndDevice as ce } from "../../lib/hooks/window-dimensions.js";
-const se = ({ posts: t, activeItem: s, setActive: i, showLabels: n }) => t ? t.map((r) => /* @__PURE__ */ e(
-  z.Item,
+import { jsx as e, jsxs as g } from "react/jsx-runtime";
+import y, { useState as v, useRef as G, useEffect as I } from "react";
+import { Container as f, Accordion as p, Icon as V, Menu as T, Grid as w, Label as M, Button as W } from "semantic-ui-react";
+import { PostProvider as q, PostConsumer as N, MediaProvider as P, MediaConsumer as k, PostIcon as L, PostLabel as S } from "@devgateway/wp-react-lib";
+import { injectIntl as E } from "react-intl";
+import { connect as z } from "react-redux";
+import A from "../connected-templates/PostIntro.js";
+import { useWindowDimensionsAndDevice as O } from "../../lib/hooks/window-dimensions.js";
+const U = ({ posts: t, activeItem: a, setActive: i, showLabels: n }) => t ? t.map((l) => /* @__PURE__ */ e(
+  T.Item,
   {
-    onClick: () => i(r.slug),
-    className: r.slug === s ? "active" : "",
-    children: n ? /* @__PURE__ */ e(J, { post: r }) : /* @__PURE__ */ e(G, { children: /* @__PURE__ */ e("span", { dangerouslySetInnerHTML: { __html: r.title.rendered } }) })
+    onClick: () => i(l.slug),
+    className: l.slug === a ? "active" : "",
+    children: n ? /* @__PURE__ */ e(S, { post: l }) : /* @__PURE__ */ e(M, { children: /* @__PURE__ */ e("span", { dangerouslySetInnerHTML: { __html: l.title.rendered } }) })
   },
-  r.id
-)) : null, de = ({
+  l.id
+)) : null, Y = ({
   posts: t,
-  activeItem: s,
+  activeItem: a,
   setActive: i,
   showIcons: n,
-  showLabels: r
+  showLabels: l
 }) => {
-  const l = t.length;
-  return t ? t.map((c) => {
-    var h, w;
-    return (h = c._embedded) != null && h["wp:featuredmedia"] && c._embedded["wp:featuredmedia"][0].source_url, /* @__PURE__ */ e(
-      _.Column,
+  const o = t.length;
+  return t ? t.map((r) => {
+    var d, m;
+    return (d = r._embedded) != null && d["wp:featuredmedia"] && r._embedded["wp:featuredmedia"][0].source_url, /* @__PURE__ */ e(
+      w.Column,
       {
-        className: (c.slug === s ? "active" : "") + (n ? " has-icon" : ""),
-        children: /* @__PURE__ */ b(
-          ie,
+        className: (r.slug === a ? "active" : "") + (n ? " has-icon" : ""),
+        children: /* @__PURE__ */ g(
+          W,
           {
-            onClick: () => i(c.slug),
-            className: `nav  ${l === 1 ? "one" : ""}`,
+            onClick: () => i(r.slug),
+            className: `nav  ${o === 1 ? "one" : ""}`,
             children: [
               n && /* @__PURE__ */ e(
-                V,
+                P,
                 {
-                  id: (w = c.meta_fields) != null && w.icon ? c.meta_fields.icon[0] : null,
-                  children: /* @__PURE__ */ e(U, { children: /* @__PURE__ */ e(Y, { className: "icon" }) })
+                  id: (m = r.meta_fields) != null && m.icon ? r.meta_fields.icon[0] : null,
+                  children: /* @__PURE__ */ e(k, { children: /* @__PURE__ */ e(L, { className: "icon" }) })
                 }
               ),
-              r ? /* @__PURE__ */ e(J, { post: c }) : /* @__PURE__ */ e(G, { children: /* @__PURE__ */ e(
+              l ? /* @__PURE__ */ e(S, { post: r }) : /* @__PURE__ */ e(M, { children: /* @__PURE__ */ e(
                 "span",
                 {
-                  dangerouslySetInnerHTML: { __html: c.title.rendered }
+                  dangerouslySetInnerHTML: { __html: r.title.rendered }
                 }
               ) })
             ]
           }
         )
       },
-      c.id
+      r.id
     );
   }) : null;
-}, Q = ({ posts: t, activeItem: s }) => (T(() => {
+}, $ = ({ posts: t, activeItem: a }) => (I(() => {
   const i = document.querySelector(".ui.container.content-tab");
   i && (i.scrollTop = 0);
-}, [s]), t ? t.map((i) => {
+}, [a]), t ? t.map((i) => {
   let n = {};
-  return i.slug !== s ? n = {
+  return i.slug !== a ? n = {
     position: "absolute",
     left: "-3000px",
     width: "auto",
@@ -70,91 +70,35 @@ const se = ({ posts: t, activeItem: s, setActive: i, showLabels: n }) => t ? t.m
     visibility: "visible",
     position: "relative",
     width: "auto"
-  }, /* @__PURE__ */ e(K, { as: S, fluid: !0, post: i, style: n }, i.slug);
-}) : null), ue = ({ posts: t, activeItem: s, setActive: i }) => {
-  const [n, r] = p(
-    t.findIndex((o) => o.slug === s)
-  ), [l, c] = p(null), h = ne(null), [w, A] = p(window.innerWidth <= 1250);
-  T(() => {
-    if (l) {
-      const o = l.getBoundingClientRect().top + window.scrollY;
+  }, /* @__PURE__ */ e(A, { as: f, fluid: !0, post: i, style: n }, i.slug);
+}) : null), J = ({ posts: t, activeItem: a, setActive: i }) => {
+  const [n, l] = v(
+    t.findIndex((s) => s.slug === a)
+  ), [o, r] = v(null), d = G(null);
+  I(() => {
+    if (o) {
+      const s = o.getBoundingClientRect().top + window.scrollY;
       window.scrollTo({
-        top: o,
+        top: s,
         behavior: "smooth"
       });
     }
-  }, [l]);
-  const v = () => {
-    var o;
-    return ((o = window.screen.orientation) == null ? void 0 : o.type) || (window.innerWidth > window.innerHeight ? "landscape-primary" : "portrait-primary");
-  }, [m, L] = p(v()), g = () => {
-    setTimeout(() => {
-      L(v()), A(window.innerWidth <= 1250);
-    }, 100);
-  }, P = (o) => {
-    setTimeout(() => {
-      var d;
-      const u = o.querySelectorAll(
-        ".accordion .legends.container.has-standard-12-font-size.bottom, .legends.container.items-section"
-      );
-      if (u.length !== 0)
-        for (const a of u) {
-          const x = a.closest(".ui.fluid.container.content"), f = x ? x.querySelector(".data-source") : null;
-          if (!f || a.offsetParent === null || f.offsetParent === null || a.offsetHeight === 0 || f.offsetHeight === 0)
-            continue;
-          const I = f.getBoundingClientRect(), D = a.getBoundingClientRect(), X = window.getComputedStyle(f), H = window.getComputedStyle(a), Z = Number.parseFloat(X.marginTop) || 0, ee = Number.parseFloat(H.marginBottom) || 0, M = D.bottom + ee, W = I.top - Z;
-          if (M > W) {
-            const C = M - W;
-            f.style.marginTop = `${C + 20}px`;
-          }
-          const N = (d = a.closest(
-            ".wp-block-column.is-layout-flow.wp-block-column-is-layout-flow"
-          )) == null ? void 0 : d.nextElementSibling;
-          if (N) {
-            const C = N.getBoundingClientRect(), k = window.getComputedStyle(N), $ = Number.parseFloat(k.marginTop) || 0, y = C.top - $;
-            if (M > y) {
-              const j = M - y;
-              N.style.marginTop = `${j + 20}px`;
-            }
-          }
-          const R = a.closest(".chart.container");
-          if (R) {
-            const C = R.getBoundingClientRect(), k = window.getComputedStyle(R), $ = Number.parseFloat(k.marginBottom) || 0, y = C.bottom + $, j = Number.parseFloat(H.marginTop) || 0, O = D.top - j;
-            if (O < y) {
-              const te = y - O;
-              a.style.marginTop = `${te + 20}px`;
-            }
-          }
-        }
-    }, 10);
-  };
-  T(() => (window.screen.orientation && window.screen.orientation.addEventListener(
-    "change",
-    g
-  ), window.addEventListener("resize", g), () => window.removeEventListener("resize", g)), []), T(() => {
-    let o;
-    const u = [];
-    return n !== -1 && (o = setTimeout(() => {
-      document.querySelectorAll(".accordion").forEach((a) => P(a));
-    }, 0)), () => {
-      clearTimeout(o), u.forEach((d) => d.disconnect());
-    };
-  }, [n, w, m]);
-  const B = (o, u) => {
-    const { index: d } = u, a = n === d ? -1 : d;
-    r(a), i(t[d].slug), a !== -1 && c(o.currentTarget);
+  }, [o]);
+  const m = (s, u) => {
+    const { index: c } = u, h = n === c ? -1 : c;
+    l(h), i(t[c].slug), h !== -1 && r(s.currentTarget);
   };
-  return /* @__PURE__ */ e(E, { fluid: !0, styled: !0, children: t.map((o, u) => {
-    var a;
-    const d = (a = o.meta_fields) != null && a.icon ? o.meta_fields.icon[0] : null;
-    return /* @__PURE__ */ b(F.Fragment, { children: [
+  return /* @__PURE__ */ e(p, { fluid: !0, styled: !0, children: t.map((s, u) => {
+    var h;
+    const c = (h = s.meta_fields) != null && h.icon ? s.meta_fields.icon[0] : null;
+    return /* @__PURE__ */ g(y.Fragment, { children: [
       /* @__PURE__ */ e(
-        E.Title,
+        p.Title,
         {
           active: n === u,
           index: u,
-          onClick: B,
-          children: /* @__PURE__ */ b(
+          onClick: m,
+          children: /* @__PURE__ */ g(
             "div",
             {
               style: {
@@ -164,100 +108,100 @@ const se = ({ posts: t, activeItem: s, setActive: i, showLabels: n }) => t ? t.m
                 width: "100%"
               },
               children: [
-                /* @__PURE__ */ b("div", { style: { display: "flex", alignItems: "center" }, children: [
-                  d && /* @__PURE__ */ e(V, { id: d, children: /* @__PURE__ */ e(U, { children: /* @__PURE__ */ e(Y, { className: "icon" }) }) }),
+                /* @__PURE__ */ g("div", { style: { display: "flex", alignItems: "center" }, children: [
+                  c && /* @__PURE__ */ e(P, { id: c, children: /* @__PURE__ */ e(k, { children: /* @__PURE__ */ e(L, { className: "icon" }) }) }),
                   /* @__PURE__ */ e(
                     "span",
                     {
-                      dangerouslySetInnerHTML: { __html: o.title.rendered },
-                      style: { marginLeft: d ? "10px" : "0" }
+                      dangerouslySetInnerHTML: { __html: s.title.rendered },
+                      style: { marginLeft: c ? "10px" : "0" }
                     }
                   )
                 ] }),
-                /* @__PURE__ */ e(oe, { name: "chevron down" })
+                /* @__PURE__ */ e(V, { name: "chevron down" })
               ]
             }
           )
         }
       ),
       /* @__PURE__ */ e(
-        E.Content,
+        p.Content,
         {
           className: "accordion-post-content",
           active: n === u,
-          children: /* @__PURE__ */ e("div", { ref: h, children: /* @__PURE__ */ e(K, { post: o, as: S, fluid: !0 }) })
+          children: /* @__PURE__ */ e("div", { ref: d, children: /* @__PURE__ */ e(A, { post: s, as: f, fluid: !0 }) })
         }
       )
-    ] }, o.id);
+    ] }, s.id);
   }) });
-}, me = ({ posts: t, showLabels: s, height: i }) => {
-  const [n, r] = p(t ? t[0].slug : null);
-  return T(() => {
+}, K = ({ posts: t, showLabels: a, height: i }) => {
+  const [n, l] = v(t ? t[0].slug : null);
+  return I(() => {
     setTimeout(() => {
       if (window.location.hash) {
-        const l = window.location.hash.substr(1), c = document.getElementById(l);
-        c && t.map((h) => h.slug).indexOf(l) > -1 && (r(l), c.scrollIntoView({ behavior: "auto", block: "start" }));
+        const o = window.location.hash.substr(1), r = document.getElementById(o);
+        r && t.map((d) => d.slug).indexOf(o) > -1 && (l(o), r.scrollIntoView({ behavior: "auto", block: "start" }));
       }
     }, 0);
-  }, [t]), /* @__PURE__ */ b(F.Fragment, { children: [
-    t.map((l) => /* @__PURE__ */ e("anchor", { id: l.slug }, l.slug)),
-    /* @__PURE__ */ e(z, { className: "tabbed posts", text: !0, children: /* @__PURE__ */ e(se, { showLabels: s, posts: t, setActive: r, activeItem: n }) }),
-    /* @__PURE__ */ e(S, { className: "content-tab", style: { height: `${i}px` }, children: /* @__PURE__ */ e(Q, { posts: t, activeItem: n }) })
+  }, [t]), /* @__PURE__ */ g(y.Fragment, { children: [
+    t.map((o) => /* @__PURE__ */ e("anchor", { id: o.slug }, o.slug)),
+    /* @__PURE__ */ e(T, { className: "tabbed posts", text: !0, children: /* @__PURE__ */ e(U, { showLabels: a, posts: t, setActive: l, activeItem: n }) }),
+    /* @__PURE__ */ e(f, { className: "content-tab", style: { height: `${i}px` }, children: /* @__PURE__ */ e($, { posts: t, activeItem: n }) })
   ] });
-}, he = ({ posts: t, showLabels: s, showIcons: i, height: n }) => {
-  const [r, l] = p(t ? t[0].slug : null);
-  return /* @__PURE__ */ e(F.Fragment, { children: /* @__PURE__ */ b(_, { stackable: !0, className: "tabbed posts", columns: t.length, style: { height: n + "px" }, children: [
-    /* @__PURE__ */ e(de, { showIcons: i, showLabels: s, posts: t, activeItem: r, setActive: l }),
-    /* @__PURE__ */ e(_.Row, { style: { height: `${n}px` }, children: /* @__PURE__ */ e(_.Column, { width: 16, className: "content", children: /* @__PURE__ */ e(S, { className: "content-tab", style: { height: `${n}px` }, children: /* @__PURE__ */ e(Q, { className: "content-tab", posts: t, activeItem: r }) }) }) })
+}, Q = ({ posts: t, showLabels: a, showIcons: i, height: n }) => {
+  const [l, o] = v(t ? t[0].slug : null);
+  return /* @__PURE__ */ e(y.Fragment, { children: /* @__PURE__ */ g(w, { stackable: !0, className: "tabbed posts", columns: t.length, style: { height: n + "px" }, children: [
+    /* @__PURE__ */ e(Y, { showIcons: i, showLabels: a, posts: t, activeItem: l, setActive: o }),
+    /* @__PURE__ */ e(w.Row, { style: { height: `${n}px` }, children: /* @__PURE__ */ e(w.Column, { width: 16, className: "content", children: /* @__PURE__ */ e(f, { className: "content-tab", style: { height: `${n}px` }, children: /* @__PURE__ */ e($, { className: "content-tab", posts: t, activeItem: l }) }) }) })
   ] }) });
-}, ge = (t) => {
-  var I;
+}, X = (t) => {
+  var _;
   let {
-    "data-type": s,
+    "data-type": a,
     "data-taxonomy": i,
     "data-categories": n,
-    "data-items": r,
-    "data-theme": l = "light",
-    "data-show-icons": c,
-    "data-use-scrolls": h,
-    "data-show-labels": w,
-    "data-height": A,
-    "data-preview-mode": v = "Desktop",
-    pageModuleProps: m,
-    parent: L,
-    editing: g,
-    unique: P
+    "data-items": l,
+    "data-theme": o = "light",
+    "data-show-icons": r,
+    "data-use-scrolls": d,
+    "data-show-labels": m,
+    "data-height": s,
+    "data-preview-mode": u = "Desktop",
+    pageModuleProps: c,
+    parent: h,
+    editing: b,
+    unique: D
   } = t;
-  m != null && m.previewMode && (m != null && m.editing) && (v = m.previewMode, g = m.editing);
-  const B = t.intl.locale, o = h === "true", u = o ? A : void 0, { width: d } = ce(), a = d <= 1024, x = v !== "Desktop" && g, f = a && !g;
-  return /* @__PURE__ */ e(S, { className: `viz tabbed posts ${g ? "editing" : ""} ${o ? "scrollable" : ""}`, fluid: !0, children: /* @__PURE__ */ e(
-    re,
+  c != null && c.previewMode && (c != null && c.editing) && (u = c.previewMode, b = c.editing);
+  const R = t.intl.locale, x = d === "true", C = x ? s : void 0, { width: j } = O(), H = j <= 1024, B = u !== "Desktop" && b, F = H && !b;
+  return /* @__PURE__ */ e(f, { className: `viz tabbed posts ${b ? "editing" : ""} ${x ? "scrollable" : ""}`, fluid: !0, children: /* @__PURE__ */ e(
+    q,
     {
-      locale: B,
-      type: s,
+      locale: R,
+      type: a,
       taxonomy: i,
       categories: n,
-      store: `tabbedposts_${L}_${P}`,
+      store: `tabbedposts_${h}_${D}`,
       page: 1,
-      perPage: r,
-      children: /* @__PURE__ */ e(q, { children: /* @__PURE__ */ e(q, { children: f || x ? /* @__PURE__ */ e(ue, { posts: r, activeItem: (I = r[0]) == null ? void 0 : I.slug, setActive: () => {
-      } }) : l === "light" ? /* @__PURE__ */ e(me, { height: u, showLabels: w === "true" }) : /* @__PURE__ */ e(
-        he,
+      perPage: l,
+      children: /* @__PURE__ */ e(N, { children: /* @__PURE__ */ e(N, { children: F || B ? /* @__PURE__ */ e(J, { posts: l, activeItem: (_ = l[0]) == null ? void 0 : _.slug, setActive: () => {
+      } }) : o === "light" ? /* @__PURE__ */ e(K, { height: C, showLabels: m === "true" }) : /* @__PURE__ */ e(
+        Q,
         {
-          height: u,
-          showLabels: w === "true",
-          showIcons: c === "true"
+          height: C,
+          showLabels: m === "true",
+          showIcons: r === "true"
         }
       ) }) })
     }
   ) });
-}, fe = (t, s) => {
+}, Z = (t, a) => {
   const i = t.getIn([
     "data",
     "pageModuleProps"
   ]), n = {};
   return i && (n.pageModuleProps = i), n;
-}, we = {}, Ie = le(fe, we)(ae(ge));
+}, ee = {}, se = z(Z, ee)(E(X));
 export {
-  Ie as default
+  se as default
 };