@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.
249 lines (248 loc) • 9.69 kB
JavaScript
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,
" "
] }, t) : /* @__PURE__ */ u(
"a",
{
className: i.slug == c.slug ? "active" : "",
href: W.replaceLink(i.url, l.locale),
children: [
" ",
i.post_title
]
},
t
)
) });
}), C = O(
({
settings: r,
withIcons: l,
active: c,
menu: a,
onSetSelected: i,
selected: t,
intl: { locale: h },
isSmallScreen: D
}) => {
const S = R();
v(
(n) => {
if (!t) {
const s = T(a, S).filter((w) => w.menu_item_parent == 0);
s && i(s[0]);
}
},
[a, i, t]
);
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);
}
}), I({
...a,
items: f.filter((s) => n.indexOf(s.ID) === -1)
});
}
}, [r]);
const [b, E] = _(!1);
return v(() => {
const n = () => {
E(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: [
/* @__PURE__ */ u(
d.Item,
{
className: `divided ${n.child_items ? "has-child-items" : ""}
${t && t.ID === n.ID ? "selected" : ""}
${c === 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(
"span",
{
onClick: () => i(t === 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(
"a",
{
onMouseOut: (s) => i(null),
onMouseOver: (s) => i(n),
href: x(n.url, h),
children: n.title
}
)
]
}
),
b && t && t.ID === n.ID && t.child_items && /* @__PURE__ */ e(N.Fragment, { children: t.child_items.map((s) => /* @__PURE__ */ u(
d.Item,
{
className: `divided child-item ${c === s.slug ? "active" : ""}`,
children: [
/* @__PURE__ */ e("div", { className: "mark" }),
/* @__PURE__ */ e("a", { href: x(s.url, h), children: s.title })
]
},
s.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);
};
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));
};
return document.addEventListener("mousedown", o), document.addEventListener("keydown", g), () => {
document.removeEventListener("mousedown", o), document.removeEventListener("keydown", g);
};
}, []);
const f = window.innerWidth <= 1200;
v(() => {
let o;
const g = () => {
f && !h && i && t(!1), D(f);
}, m = () => {
clearTimeout(o), o = setTimeout(g, 200);
};
return g(), window.addEventListener("resize", m), () => {
clearTimeout(o), window.removeEventListener("resize", m);
};
}, []);
const [s, w] = _(!1);
v(() => {
const o = () => {
w(window.innerWidth <= 1365);
};
return o(), window.addEventListener("resize", o), () => window.removeEventListener("resize", o);
}, []);
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(
"img",
{
className: "brand logo",
size: "large",
src: "/logo_full.png"
}
),
s && /* @__PURE__ */ e(
"img",
{
className: "brand logo small",
size: "small",
src: "/TCDI-Icon-small_02.png"
}
)
] }) }),
/* @__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 })
] }),
h ? /* @__PURE__ */ e(d, { className: `pages ${i ? "show" : ""}`, children: /* @__PURE__ */ e(M, { fluid: !0, children: /* @__PURE__ */ e(z, { children: /* @__PURE__ */ e(
C,
{
settings: l,
active: I,
selected: c,
onSetSelected: a,
isSmallScreen: h
},
"items"
) }) }) }) : /* @__PURE__ */ e(d.Menu, { className: "pages", children: /* @__PURE__ */ e(z, { children: /* @__PURE__ */ e(
C,
{
settings: l,
active: I,
selected: c,
onSetSelected: a
},
"items"
) }) }),
/* @__PURE__ */ e(d.Item, { children: /* @__PURE__ */ e(z, { children: /* @__PURE__ */ e(
B,
{
locale: r.locale
},
"lang"
) }) }),
/* @__PURE__ */ e(d.Item, { fitted: !0, children: /* @__PURE__ */ e(
A,
{
onSetSelected: a,
settings: l
}
) })
] }) }),
/* @__PURE__ */ e(M, { fluid: !0, className: "child", children: c && c.child_items && /* @__PURE__ */ e(d, { fluid: !0, text: !0, children: /* @__PURE__ */ e(
C,
{
active: I,
locale: r.locale,
withIcons: !0,
onSetSelected: (o) => null,
menu: { items: c.child_items }
}
) }) })
] }, "header-container"),
/* @__PURE__ */ e(M, { className: "url breadcrumbs", children: /* @__PURE__ */ e(z, { children: /* @__PURE__ */ e(K, {}) }) })
] }) });
}, ne = O(U);
export {
ne as default
};