@devgateway/dvz-ui-react 1.4.0 → 1.5.0

package/dist/esm/layout/Header.js

@@ -1,178 +1,173 @@
 import { jsx as e, jsxs as u } from "react/jsx-runtime";
-import { Menu as d, Container as M, Flag as F, Image as P } from "semantic-ui-react";
-import N, { useEffect as v, useState as _, useRef as y } from "react";
-import { utils as W, MenuProvider as j, MediaProvider as H, MediaConsumer as V, MenuConsumer as z } from "@devgateway/wp-react-lib";
-import { injectIntl as O } from "react-intl";
-import { useParams as R } from "react-router";
-import A from "./SearchControl.js";
-import B from "./LangSwitcher.js";
-const T = (r, l) => {
-  const c = [];
-  return r.items.forEach((a) => {
-    a.child_items ? a.child_items.forEach((i) => {
-      i.slug == l.slug && (c.push(a), c.push(i));
-    }) : a.slug == l.slug && a.url != "/" && c.push(a);
-  }), c;
-}, x = (r, l) => r ? r.substr(r.indexOf("/wp") + 3).startsWith("/" + l) ? r.substr(r.indexOf("/wp") + 3) : "/" + l + r.substr(r.indexOf("/wp") + 3) : "", K = O(({ menu: r, intl: l }) => {
-  const c = R(), a = T(r, c);
-  return /* @__PURE__ */ e(N.Fragment, { children: a.filter((i) => i.url != "#wpm-languages").map(
-    (i, t) => i.child_items ? /* @__PURE__ */ u("span", { children: [
-      i.post_title,
+import { Menu as d, Container as N, Flag as P, Image as U } from "semantic-ui-react";
+import S, { useEffect as _, useState as p, useRef as y } from "react";
+import { utils as j, MenuProvider as H, MediaProvider as V, MediaConsumer as A, MenuConsumer as L } from "@devgateway/wp-react-lib";
+import { injectIntl as R } from "react-intl";
+import { useParams as $ } from "react-router";
+import B from "./SearchControl.js";
+import K from "./LangSwitcher.js";
+const W = (r, s) => {
+  const a = [];
+  return r.items.forEach((i) => {
+    i.child_items ? i.child_items.forEach((t) => {
+      t.slug == s.slug && (a.push(i), a.push(t));
+    }) : i.slug == s.slug && i.url != "/" && a.push(i);
+  }), a;
+}, z = (r, s) => {
+  if (r) {
+    const a = r.indexOf("/wp");
+    if (a !== -1) {
+      const i = r.substr(a + 3);
+      return i.startsWith("/" + s) ? i : "/" + s + i;
+    } else
+      return r.startsWith("/" + s) ? r : "/" + s + r;
+  }
+  return "";
+}, q = R(({ menu: r, intl: s }) => {
+  const a = $(), i = W(r, a);
+  return /* @__PURE__ */ e(S.Fragment, { children: i.filter((t) => t.url != "#wpm-languages").map(
+    (t) => t.child_items ? /* @__PURE__ */ u("span", { children: [
+      t.post_title,
       " "
-    ] }, t) : /* @__PURE__ */ u(
+    ] }) : /* @__PURE__ */ u(
       "a",
       {
-        className: i.slug == c.slug ? "active" : "",
-        href: W.replaceLink(i.url, l.locale),
+        className: t.slug == a.slug ? "active" : "",
+        href: j.replaceLink(t.url, s.locale),
         children: [
           " ",
-          i.post_title
+          t.post_title
         ]
-      },
-      t
+      }
     )
   ) });
-}), C = O(
+}), C = R(
   ({
     settings: r,
-    withIcons: l,
-    active: c,
-    menu: a,
-    onSetSelected: i,
-    selected: t,
-    intl: { locale: h },
-    isSmallScreen: D
+    withIcons: s,
+    active: a,
+    menu: i,
+    onSetSelected: t,
+    selected: o,
+    intl: { locale: g },
+    isSmallScreen: x
   }) => {
-    const S = R();
-    v(
+    const D = $();
+    _(
       (n) => {
-        if (!t) {
-          const s = T(a, S).filter((w) => w.menu_item_parent == 0);
-          s && i(s[0]);
+        if (!o) {
+          const l = W(i, D).filter((f) => f.menu_item_parent == 0);
+          l && t(l[0]);
         }
       },
-      [a, i, t]
+      [i, t, o]
     );
-    const [p, I] = _(null);
-    v(() => {
-      I(a);
-    }, [a]), v(() => {
-      if (r && r.menu_settings && p) {
-        const n = [], f = a.items.map((s) => (r.menu_settings && r.menu_settings["nav_menu_item[" + s.ID + "]"] === !1 && n.push(s.ID), r.menu_settings && r.menu_settings["nav_menu_item[" + s.ID + "]"] ? (r.menu_settings["nav_menu_item[" + s.ID + "]"], {
-          ...s,
-          ...r.menu_settings["nav_menu_item[" + s.ID + "]"]
-        }) : s));
-        Object.keys(r.menu_settings).map((s) => {
-          const w = r.menu_settings[s];
-          if (w.type == "nav_menu_item") {
-            const L = /(-)?[0-9]+/g.exec(s), k = parseInt(L[0]);
-            f.find((g) => g.ID == k) || f.push(w.value);
+    const [v, I] = p(null);
+    _(() => {
+      I(i);
+    }, [i]), _(() => {
+      if (r && r.menu_settings && v) {
+        const n = [], h = i.items.map((l) => (r.menu_settings && r.menu_settings["nav_menu_item[" + l.ID + "]"] === !1 && n.push(l.ID), r.menu_settings && r.menu_settings["nav_menu_item[" + l.ID + "]"] ? (r.menu_settings["nav_menu_item[" + l.ID + "]"], {
+          ...l,
+          ...r.menu_settings["nav_menu_item[" + l.ID + "]"]
+        }) : l));
+        Object.keys(r.menu_settings).map((l) => {
+          const f = r.menu_settings[l];
+          if (f.type == "nav_menu_item") {
+            const k = /(-)?[0-9]+/g.exec(l), E = parseInt(k[0]);
+            h.find((c) => c.ID == E) || h.push(f.value);
           }
         }), I({
-          ...a,
-          items: f.filter((s) => n.indexOf(s.ID) === -1)
+          ...i,
+          items: h.filter((l) => n.indexOf(l.ID) === -1)
         });
       }
     }, [r]);
-    const [b, E] = _(!1);
-    return v(() => {
+    const [w, M] = p(!1);
+    return _(() => {
       const n = () => {
-        E(window.innerWidth <= 1200);
+        M(window.innerWidth <= 1200);
       };
       return n(), window.addEventListener("resize", n), () => window.removeEventListener("resize", n);
-    }, []), p && /* @__PURE__ */ e(N.Fragment, { children: p.items.filter((n) => n.url !== "#wpm-languages").map((n, f) => /* @__PURE__ */ u(N.Fragment, { children: [
+    }, []), v && /* @__PURE__ */ e(S.Fragment, { children: v.items.filter((n) => n.url !== "#wpm-languages").map((n, h) => /* @__PURE__ */ u(S.Fragment, { children: [
       /* @__PURE__ */ u(
         d.Item,
         {
           className: `divided ${n.child_items ? "has-child-items" : ""}
-                            ${t && t.ID === n.ID ? "selected" : ""}
-                            ${c === n.slug ? "active" : ""}`,
+                            ${o && o.ID === n.ID ? "selected" : ""}
+                            ${a === n.slug ? "active" : ""}`,
           children: [
-            l && /* @__PURE__ */ e("a", { href: x(n.url, h), children: /* @__PURE__ */ e("div", { className: "mark", children: /* @__PURE__ */ e("span", { className: "sr-only", children: n.title }) }) }),
-            D ? n.child_items ? /* @__PURE__ */ e(
+            s && /* @__PURE__ */ e("a", { href: z(n.url, g), children: /* @__PURE__ */ e("div", { className: "mark", children: /* @__PURE__ */ e("span", { className: "sr-only", children: n.title }) }) }),
+            x ? n.child_items ? /* @__PURE__ */ e(
               "span",
               {
-                onClick: () => i(t === n ? null : n),
+                onClick: () => t(o === n ? null : n),
                 children: n.title
               }
-            ) : /* @__PURE__ */ e("a", { href: x(n.url, h), children: n.title }) : n.child_items ? /* @__PURE__ */ e("span", { onMouseOver: (s) => i(n), children: n.title }) : /* @__PURE__ */ e(
+            ) : /* @__PURE__ */ e("a", { href: z(n.url, g), children: n.title }) : n.child_items ? /* @__PURE__ */ e("span", { onMouseOver: (l) => t(n), children: n.title }) : /* @__PURE__ */ e(
               "a",
               {
-                onMouseOut: (s) => i(null),
-                onMouseOver: (s) => i(n),
-                href: x(n.url, h),
+                onMouseOut: (l) => t(null),
+                onMouseOver: (l) => t(n),
+                href: z(n.url, g),
                 children: n.title
               }
             )
           ]
         }
       ),
-      b && t && t.ID === n.ID && t.child_items && /* @__PURE__ */ e(N.Fragment, { children: t.child_items.map((s) => /* @__PURE__ */ u(
+      w && o && o.ID === n.ID && o.child_items && /* @__PURE__ */ e(S.Fragment, { children: o.child_items.map((l) => /* @__PURE__ */ u(
         d.Item,
         {
-          className: `divided child-item ${c === s.slug ? "active" : ""}`,
+          className: `divided child-item ${a === l.slug ? "active" : ""}`,
           children: [
             /* @__PURE__ */ e("div", { className: "mark" }),
-            /* @__PURE__ */ e("a", { href: x(s.url, h), children: s.title })
+            /* @__PURE__ */ e("a", { href: z(l.url, g), children: l.title })
           ]
         },
-        s.ID
+        l.ID
       )) })
     ] }, n.ID)) });
   }
-), U = ({ intl: r, settings: l = {} }) => {
-  const [c, a] = _(), [i, t] = _(!1), [h, D] = _(!1), [S, p] = _(!1), { slug: I } = R(), b = y(null), E = y(null), n = () => {
-    p(!S), t(!i);
+), G = ({ intl: r, settings: s }) => {
+  const [a, i] = p(), [t, o] = p(!1), [g, x] = p(!1), [D, v] = p(!1), [I, w] = p(!1), { slug: M } = $(), n = y(null), h = y(null), l = () => {
+    w(!I), o(!t);
   };
-  v(() => {
-    const o = (m) => {
-      (b.current && !b.current.contains(m.target) && !E.current.contains(m.target) || m.target.closest(".desktop") || m.target.closest(".breadcrumbs")) && (t(!1), p(!1));
-    }, g = (m) => {
-      m.key === "Escape" && (t(!1), p(!1));
+  _(() => {
+    const c = (m) => {
+      (n.current && !n.current.contains(m.target) && !h.current.contains(m.target) || m.target.closest(".desktop") || m.target.closest(".breadcrumbs")) && (o(!1), w(!1));
+    }, b = (m) => {
+      m.key === "Escape" && (o(!1), w(!1));
     };
-    return document.addEventListener("mousedown", o), document.addEventListener("keydown", g), () => {
-      document.removeEventListener("mousedown", o), document.removeEventListener("keydown", g);
+    return document.addEventListener("mousedown", c), document.addEventListener("keydown", b), () => {
+      document.removeEventListener("mousedown", c), document.removeEventListener("keydown", b);
     };
-  }, []);
-  const f = window.innerWidth <= 1200;
-  v(() => {
-    let o;
-    const g = () => {
-      f && !h && i && t(!1), D(f);
+  }, []), _(() => {
+    let c;
+    const b = () => {
+      const F = window.innerWidth <= 1200;
+      x(F), v(!1);
     }, m = () => {
-      clearTimeout(o), o = setTimeout(g, 200);
+      v(!0), clearTimeout(c), c = setTimeout(b, 300);
     };
-    return g(), window.addEventListener("resize", m), () => {
-      clearTimeout(o), window.removeEventListener("resize", m);
+    return b(), window.addEventListener("resize", m), () => {
+      clearTimeout(c), window.removeEventListener("resize", m);
     };
   }, []);
-  const [s, w] = _(!1);
-  v(() => {
-    const o = () => {
-      w(window.innerWidth <= 1365);
+  const [f, T] = p(!1);
+  _(() => {
+    const c = () => {
+      T(window.innerWidth <= 1364);
     };
-    return o(), window.addEventListener("resize", o), () => window.removeEventListener("resize", o);
+    return c(), window.addEventListener("resize", c), () => window.removeEventListener("resize", c);
   }, []);
-  const $ = ({ media: o }) => o ? /* @__PURE__ */ e(P, { src: o.guid.rendered }) : /* @__PURE__ */ e("img", { className: "brand logo", size: "large", src: "/logo_full.png" }), L = (l == null ? void 0 : l.landing_page_url) && l.landing_page_url !== !1 && l.landing_page_url !== void 0 && l.landing_page_url !== "", k = L ? l.landing_page_url : `/${r.locale}`;
-  return console.log("isMenuVisible", i), /* @__PURE__ */ e(N.Fragment, { children: /* @__PURE__ */ u(j, { slug: "main", locale: r.locale, children: [
-    /* @__PURE__ */ u(M, { fluid: !0, className: "header", children: [
-      /* @__PURE__ */ u(
-        "div",
-        {
-          ref: E,
-          className: `hamburger-menu ${S ? "animate" : ""} ${i ? "open" : "close"}`,
-          onClick: n,
-          children: [
-            /* @__PURE__ */ e("div", {}),
-            /* @__PURE__ */ e("div", { className: "middle-line" }),
-            /* @__PURE__ */ e("div", {})
-          ]
-        }
-      ),
-      /* @__PURE__ */ e(M, { fluid: !0, className: "background", ref: b, children: /* @__PURE__ */ u(d, { className: "branding", text: !0, children: [
-        /* @__PURE__ */ e(d.Item, { children: /* @__PURE__ */ u("a", { href: `${k}`, target: L ? "_blank" : "_self", rel: "noopener noreferrer", children: [
-          l.site_logo !== 0 && !s && /* @__PURE__ */ e(H, { id: l.site_logo, children: /* @__PURE__ */ e(V, { children: /* @__PURE__ */ e($, {}, "logo") }) }),
-          l.site_logo === 0 && !s && /* @__PURE__ */ e(
+  const k = ({ media: c }) => c ? /* @__PURE__ */ e(U, { src: c.guid.rendered }) : /* @__PURE__ */ e("img", { className: "brand logo", size: "large", src: "/logo_full.png" }), E = (s == null ? void 0 : s.landing_page_url) && s.landing_page_url !== !1 && s.landing_page_url !== void 0 && s.landing_page_url !== "", O = E ? s.landing_page_url : `/${r.locale}`;
+  return console.log("isMenuVisible", t), /* @__PURE__ */ e(S.Fragment, { children: /* @__PURE__ */ u(H, { slug: "main", locale: r.locale, children: [
+    /* @__PURE__ */ u(N, { fluid: !0, className: "header", children: [
+      /* @__PURE__ */ e(N, { fluid: !0, className: "background", ref: n, children: /* @__PURE__ */ u(d, { className: "branding", text: !0, children: [
+        /* @__PURE__ */ e(d.Item, { children: /* @__PURE__ */ u("a", { href: `${O}`, target: E ? "_blank" : "_self", rel: "noopener noreferrer", id: "site_url", children: [
+          s.site_logo !== 0 && !f && /* @__PURE__ */ e(V, { id: s.site_logo, children: /* @__PURE__ */ e(A, { children: /* @__PURE__ */ e(k, {}, "logo") }) }),
+          s.site_logo === 0 && !f && /* @__PURE__ */ e(
             "img",
             {
               className: "brand logo",
@@ -180,7 +175,7 @@ const T = (r, l) => {
               src: "/logo_full.png"
             }
           ),
-          s && /* @__PURE__ */ e(
+          f && /* @__PURE__ */ e(
             "img",
             {
               className: "brand logo small",
@@ -191,58 +186,71 @@ const T = (r, l) => {
         ] }) }),
         /* @__PURE__ */ e(d.Item, { className: "divider", children: /* @__PURE__ */ e("div", {}) }),
         /* @__PURE__ */ u(d.Item, { fitted: !0, href: "/", children: [
-          /* @__PURE__ */ e(F, { name: "za" }),
-          /* @__PURE__ */ e("div", { className: "site name", children: l.name })
+          /* @__PURE__ */ e(P, { name: "za" }),
+          /* @__PURE__ */ e("div", { className: "site name", children: s.name })
         ] }),
-        h ? /* @__PURE__ */ e(d, { className: `pages ${i ? "show" : ""}`, children: /* @__PURE__ */ e(M, { fluid: !0, children: /* @__PURE__ */ e(z, { children: /* @__PURE__ */ e(
+        !D && (g ? /* @__PURE__ */ e(d, { className: `pages ${t ? "show" : ""}`, children: /* @__PURE__ */ e(N, { fluid: !0, children: /* @__PURE__ */ e(L, { children: /* @__PURE__ */ e(
           C,
           {
-            settings: l,
-            active: I,
-            selected: c,
-            onSetSelected: a,
-            isSmallScreen: h
+            settings: s,
+            active: M,
+            selected: a,
+            onSetSelected: i,
+            isSmallScreen: g
           },
           "items"
-        ) }) }) }) : /* @__PURE__ */ e(d.Menu, { className: "pages", children: /* @__PURE__ */ e(z, { children: /* @__PURE__ */ e(
+        ) }) }) }) : /* @__PURE__ */ e(d.Menu, { className: "pages", children: /* @__PURE__ */ e(L, { children: /* @__PURE__ */ e(
           C,
           {
-            settings: l,
-            active: I,
-            selected: c,
-            onSetSelected: a
+            settings: s,
+            active: M,
+            selected: a,
+            onSetSelected: i
           },
           "items"
-        ) }) }),
-        /* @__PURE__ */ e(d.Item, { children: /* @__PURE__ */ e(z, { children: /* @__PURE__ */ e(
-          B,
+        ) }) })),
+        /* @__PURE__ */ e(d.Item, { children: /* @__PURE__ */ e(L, { children: /* @__PURE__ */ e(
+          K,
           {
             locale: r.locale
           },
           "lang"
         ) }) }),
         /* @__PURE__ */ e(d.Item, { fitted: !0, children: /* @__PURE__ */ e(
-          A,
+          B,
+          {
+            onSetSelected: i,
+            settings: s
+          }
+        ) }),
+        /* @__PURE__ */ u(
+          "div",
           {
-            onSetSelected: a,
-            settings: l
+            ref: h,
+            className: `hamburger-menu ${I ? "animate" : ""} ${t ? "open" : "close"}`,
+            onClick: l,
+            children: [
+              /* @__PURE__ */ e("div", {}),
+              /* @__PURE__ */ e("div", { className: "middle-line" }),
+              /* @__PURE__ */ e("div", {})
+            ]
           }
-        ) })
+        )
       ] }) }),
-      /* @__PURE__ */ e(M, { fluid: !0, className: "child", children: c && c.child_items && /* @__PURE__ */ e(d, { fluid: !0, text: !0, children: /* @__PURE__ */ e(
+      /* @__PURE__ */ e(N, { fluid: !0, className: "child", children: a && a.child_items && /* @__PURE__ */ e(d, { fluid: !0, text: !0, children: /* @__PURE__ */ e(
         C,
         {
-          active: I,
+          active: M,
           locale: r.locale,
           withIcons: !0,
-          onSetSelected: (o) => null,
-          menu: { items: c.child_items }
+          onSetSelected: (c) => null,
+          menu: { items: a.child_items }
         }
       ) }) })
     ] }, "header-container"),
-    /* @__PURE__ */ e(M, { className: "url breadcrumbs", children: /* @__PURE__ */ e(z, { children: /* @__PURE__ */ e(K, {}) }) })
+    /* @__PURE__ */ e(N, { className: "url breadcrumbs", children: /* @__PURE__ */ e(L, { children: /* @__PURE__ */ e(q, {}) }) })
   ] }) });
-}, ne = O(U);
+}, se = R(G);
 export {
-  ne as default
+  se as default
 };

package/dist/esm/layout/Layout.js

@@ -18,7 +18,8 @@ import { updateIntl as x } from "../lib/react-intl-redux/index.js";
 import "immutable";
 import { store as r } from "../redux/store.js";
 import "./Favicon.js";
-import "./CustomSemanticSearch.js";
+import "clsx";
+import "../utils/semanticUtils.js";
 import "./SearchControl.js";
 import "./ClassicHeader.js";
 import "./FloatingMenuHeader.js";
@@ -26,7 +27,7 @@ const n = {
   en: N,
   fr: O,
   am: b
-}, X = () => {
+}, Y = () => {
   const i = d(), l = g(), t = E.DEFAULT_LOCALE, [S, p] = u(!1);
   console.log("defaultLocale", t);
   const o = i.lan, c = l.pathname;
@@ -45,5 +46,5 @@ const n = {
   ] }) }) }) }, o) }) : /* @__PURE__ */ e(a, { to: `/${t}${c}`, replace: !0 }) : /* @__PURE__ */ e(a, { to: t, replace: !0 });
 };
 export {
-  X as default
+  Y as default
 };