@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.
257 lines (256 loc) • 9.82 kB
JavaScript
import { jsx as e, jsxs as u } from "react/jsx-runtime";
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,
" "
] }) : /* @__PURE__ */ u(
"a",
{
className: t.slug == a.slug ? "active" : "",
href: j.replaceLink(t.url, s.locale),
children: [
" ",
t.post_title
]
}
)
) });
}), C = R(
({
settings: r,
withIcons: s,
active: a,
menu: i,
onSetSelected: t,
selected: o,
intl: { locale: g },
isSmallScreen: x
}) => {
const D = $();
_(
(n) => {
if (!o) {
const l = W(i, D).filter((f) => f.menu_item_parent == 0);
l && t(l[0]);
}
},
[i, t, o]
);
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({
...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(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" : ""}
${o && o.ID === n.ID ? "selected" : ""}
${a === n.slug ? "active" : ""}`,
children: [
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: () => t(o === n ? null : n),
children: n.title
}
) : /* @__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: (l) => t(null),
onMouseOver: (l) => t(n),
href: z(n.url, g),
children: n.title
}
)
]
}
),
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 ${a === l.slug ? "active" : ""}`,
children: [
/* @__PURE__ */ e("div", { className: "mark" }),
/* @__PURE__ */ e("a", { href: z(l.url, g), children: l.title })
]
},
l.ID
)) })
] }, n.ID)) });
}
), 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);
};
_(() => {
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", c), document.addEventListener("keydown", b), () => {
document.removeEventListener("mousedown", c), document.removeEventListener("keydown", b);
};
}, []), _(() => {
let c;
const b = () => {
const F = window.innerWidth <= 1200;
x(F), v(!1);
}, m = () => {
v(!0), clearTimeout(c), c = setTimeout(b, 300);
};
return b(), 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 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",
size: "large",
src: "/logo_full.png"
}
),
f && /* @__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(P, { name: "za" }),
/* @__PURE__ */ e("div", { className: "site name", children: s.name })
] }),
!D && (g ? /* @__PURE__ */ e(d, { className: `pages ${t ? "show" : ""}`, children: /* @__PURE__ */ e(N, { fluid: !0, children: /* @__PURE__ */ e(L, { children: /* @__PURE__ */ e(
C,
{
settings: s,
active: M,
selected: a,
onSetSelected: i,
isSmallScreen: g
},
"items"
) }) }) }) : /* @__PURE__ */ e(d.Menu, { className: "pages", children: /* @__PURE__ */ e(L, { children: /* @__PURE__ */ e(
C,
{
settings: s,
active: M,
selected: a,
onSetSelected: i
},
"items"
) }) })),
/* @__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(
B,
{
onSetSelected: i,
settings: s
}
) }),
/* @__PURE__ */ u(
"div",
{
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(N, { fluid: !0, className: "child", children: a && a.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: a.child_items }
}
) }) })
] }, "header-container"),
/* @__PURE__ */ e(N, { className: "url breadcrumbs", children: /* @__PURE__ */ e(L, { children: /* @__PURE__ */ e(q, {}) }) })
] }) });
}, se = R(G);
export {
se as default
};