@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.
94 lines (93 loc) • 3.85 kB
JavaScript
import { jsx as o, jsxs as m } from "react/jsx-runtime";
import { Config as h } from "../conf/index.js";
import { useState as p, useEffect as f } from "react";
import { Dropdown as w, Image as _ } from "semantic-ui-react";
const g = (s) => {
window.location = window.location.origin + "/" + s.toLowerCase() + window.location.pathname.toString().substring(3);
}, u = (s, t, c) => Object.keys(s).map((n) => ({
key: n,
text: t === "name" || t === "both" ? s[n].name : n.toUpperCase(),
value: n,
selected: n.toUpperCase() === c.toUpperCase(),
icon: t === "flag" || t === "both" ? /* @__PURE__ */ o(_, { src: "/wp/wp-content/plugins/wp-multilang/flags/" + s[n].flag }) : null
})), C = (s) => {
const { menu: { menu_item_languages_show: t }, settings: { languages: c }, locale: n } = s, l = u(c, t, n);
return /* @__PURE__ */ o(
w,
{
button: !0,
className: "icon language selector",
floating: !0,
labeled: !0,
icon: "world",
options: l,
onChange: (e, { name: r, value: a }) => {
g(a);
},
text: "Language"
}
);
}, L = (s) => {
const { menu: { menu_item_languages_show: t }, settings: { languages: c }, locale: n } = s, l = u(c, t, n);
return /* @__PURE__ */ o("p", { className: "inline language selector", children: l.map((e) => /* @__PURE__ */ m("span", { className: e.selected ? "selected" : "", children: [
e.icon,
/* @__PURE__ */ o("a", { onClick: (r) => g(e.value), children: e.text }),
" "
] })) });
}, N = (s) => {
const { menu: { menu_item_languages_show: t }, settings: { languages: c }, locale: n } = s, l = u(c, t, n);
return /* @__PURE__ */ o("p", { className: "single language selector", children: l.map((e) => /* @__PURE__ */ o("a", { className: e.selected ? "selected" : "", onClick: (r) => g(e.value), children: e.value })) });
}, b = (s) => {
const { menu: { menu_item_languages_show: t }, settings: { languages: c }, locale: n } = s;
u(c, t, n);
const [l, e] = p(n);
return /* @__PURE__ */ m("div", { className: "toggler language selector", children: [
/* @__PURE__ */ o("a", { className: `language-label ${l === "en" ? "active" : ""}`, onClick: () => {
g("en"), e("en");
}, children: "EN" }),
/* @__PURE__ */ o("button", { className: "toggle-button", onClick: () => {
const a = l === "en" ? "fr" : "en";
e(a);
const i = document.querySelector(".circle");
i.classList.toggle("en"), i.classList.toggle("fr"), setTimeout(() => {
g(a);
}, 300);
}, children: /* @__PURE__ */ o("div", { className: `circle ${l === "en" ? "en" : "fr"}` }) }),
/* @__PURE__ */ o("a", { className: `language-label ${l === "fr" ? "active" : ""}`, onClick: () => {
g("fr"), e("fr");
}, children: "FR" })
] });
}, S = (s) => {
const { locale: t, menu: c } = s, n = c.items.filter((a) => a.url === "#wpm-languages"), l = n.length > 0, [e, r] = p(null);
return f(() => {
async function a() {
const d = await (await fetch(
h.REACT_APP_WP_API + "/dg/v1/settings",
{
headers: {
"Content-Type": "application/json"
// 'Content-Type': 'application/x-www-form-urlencoded',
}
}
)).json();
r(d);
}
a();
}, []), l && e ? n.map((a) => {
const i = a.menu_item_languages_type;
switch (a.menu_item_languages_show, i) {
case "dropdown":
return /* @__PURE__ */ o(C, { locale: t, menu: a, settings: e });
case "inline":
return /* @__PURE__ */ o(L, { locale: t, menu: a, settings: e });
case "single":
return /* @__PURE__ */ o(N, { locale: t, menu: a, settings: e });
case "toggler":
return /* @__PURE__ */ o(b, { locale: t, menu: a, settings: e });
}
return null;
}) : null;
};
export {
S as default
};