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