@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.
264 lines (263 loc) • 10.5 kB
JavaScript
import { jsx as e, jsxs as b } from "react/jsx-runtime";
import F, { useState as p, useRef as ne, useEffect as T } from "react";
import { Container as S, Accordion as E, Icon as oe, Menu as z, Grid as _, Label as G, Button as ie } from "semantic-ui-react";
import { PostProvider as re, PostConsumer as q, MediaProvider as V, MediaConsumer as U, PostIcon as Y, PostLabel as J } from "@devgateway/wp-react-lib";
import { injectIntl as ae } from "react-intl";
import { connect as le } from "react-redux";
import K from "../connected-templates/PostIntro.js";
import { useWindowDimensionsAndDevice as ce } from "../../lib/hooks/window-dimensions.js";
const se = ({ posts: t, activeItem: s, setActive: i, showLabels: n }) => t ? t.map((r) => /* @__PURE__ */ e(
z.Item,
{
onClick: () => i(r.slug),
className: r.slug === s ? "active" : "",
children: n ? /* @__PURE__ */ e(J, { post: r }) : /* @__PURE__ */ e(G, { children: /* @__PURE__ */ e("span", { dangerouslySetInnerHTML: { __html: r.title.rendered } }) })
},
r.id
)) : null, de = ({
posts: t,
activeItem: s,
setActive: i,
showIcons: n,
showLabels: r
}) => {
const l = t.length;
return t ? t.map((c) => {
var h, w;
return (h = c._embedded) != null && h["wp:featuredmedia"] && c._embedded["wp:featuredmedia"][0].source_url, /* @__PURE__ */ e(
_.Column,
{
className: (c.slug === s ? "active" : "") + (n ? " has-icon" : ""),
children: /* @__PURE__ */ b(
ie,
{
onClick: () => i(c.slug),
className: `nav ${l === 1 ? "one" : ""}`,
children: [
n && /* @__PURE__ */ e(
V,
{
id: (w = c.meta_fields) != null && w.icon ? c.meta_fields.icon[0] : null,
children: /* @__PURE__ */ e(U, { children: /* @__PURE__ */ e(Y, { className: "icon" }) })
}
),
r ? /* @__PURE__ */ e(J, { post: c }) : /* @__PURE__ */ e(G, { children: /* @__PURE__ */ e(
"span",
{
dangerouslySetInnerHTML: { __html: c.title.rendered }
}
) })
]
}
)
},
c.id
);
}) : null;
}, Q = ({ posts: t, activeItem: s }) => (T(() => {
const i = document.querySelector(".ui.container.content-tab");
i && (i.scrollTop = 0);
}, [s]), t ? t.map((i) => {
let n = {};
return i.slug !== s ? n = {
position: "absolute",
left: "-3000px",
width: "auto",
height: "0px",
overflow: "hidden",
visibility: "hidden"
} : n = {
visibility: "visible",
position: "relative",
width: "auto"
}, /* @__PURE__ */ e(K, { as: S, fluid: !0, post: i, style: n }, i.slug);
}) : null), ue = ({ posts: t, activeItem: s, setActive: i }) => {
const [n, r] = p(
t.findIndex((o) => o.slug === s)
), [l, c] = p(null), h = ne(null), [w, A] = p(window.innerWidth <= 1250);
T(() => {
if (l) {
const o = l.getBoundingClientRect().top + window.scrollY;
window.scrollTo({
top: o,
behavior: "smooth"
});
}
}, [l]);
const v = () => {
var o;
return ((o = window.screen.orientation) == null ? void 0 : o.type) || (window.innerWidth > window.innerHeight ? "landscape-primary" : "portrait-primary");
}, [m, L] = p(v()), g = () => {
setTimeout(() => {
L(v()), A(window.innerWidth <= 1250);
}, 100);
}, P = (o) => {
setTimeout(() => {
var d;
const u = o.querySelectorAll(
".accordion .legends.container.has-standard-12-font-size.bottom, .legends.container.items-section"
);
if (u.length !== 0)
for (const a of u) {
const x = a.closest(".ui.fluid.container.content"), f = x ? x.querySelector(".data-source") : null;
if (!f || a.offsetParent === null || f.offsetParent === null || a.offsetHeight === 0 || f.offsetHeight === 0)
continue;
const I = f.getBoundingClientRect(), D = a.getBoundingClientRect(), X = window.getComputedStyle(f), H = window.getComputedStyle(a), Z = Number.parseFloat(X.marginTop) || 0, ee = Number.parseFloat(H.marginBottom) || 0, M = D.bottom + ee, W = I.top - Z;
if (M > W) {
const C = M - W;
f.style.marginTop = `${C + 20}px`;
}
const N = (d = a.closest(
".wp-block-column.is-layout-flow.wp-block-column-is-layout-flow"
)) == null ? void 0 : d.nextElementSibling;
if (N) {
const C = N.getBoundingClientRect(), k = window.getComputedStyle(N), $ = Number.parseFloat(k.marginTop) || 0, y = C.top - $;
if (M > y) {
const j = M - y;
N.style.marginTop = `${j + 20}px`;
}
}
const R = a.closest(".chart.container");
if (R) {
const C = R.getBoundingClientRect(), k = window.getComputedStyle(R), $ = Number.parseFloat(k.marginBottom) || 0, y = C.bottom + $, j = Number.parseFloat(H.marginTop) || 0, O = D.top - j;
if (O < y) {
const te = y - O;
a.style.marginTop = `${te + 20}px`;
}
}
}
}, 10);
};
T(() => (window.screen.orientation && window.screen.orientation.addEventListener(
"change",
g
), window.addEventListener("resize", g), () => window.removeEventListener("resize", g)), []), T(() => {
let o;
const u = [];
return n !== -1 && (o = setTimeout(() => {
document.querySelectorAll(".accordion").forEach((a) => P(a));
}, 0)), () => {
clearTimeout(o), u.forEach((d) => d.disconnect());
};
}, [n, w, m]);
const B = (o, u) => {
const { index: d } = u, a = n === d ? -1 : d;
r(a), i(t[d].slug), a !== -1 && c(o.currentTarget);
};
return /* @__PURE__ */ e(E, { fluid: !0, styled: !0, children: t.map((o, u) => {
var a;
const d = (a = o.meta_fields) != null && a.icon ? o.meta_fields.icon[0] : null;
return /* @__PURE__ */ b(F.Fragment, { children: [
/* @__PURE__ */ e(
E.Title,
{
active: n === u,
index: u,
onClick: B,
children: /* @__PURE__ */ b(
"div",
{
style: {
display: "flex",
alignItems: "center",
justifyContent: "space-between",
width: "100%"
},
children: [
/* @__PURE__ */ b("div", { style: { display: "flex", alignItems: "center" }, children: [
d && /* @__PURE__ */ e(V, { id: d, children: /* @__PURE__ */ e(U, { children: /* @__PURE__ */ e(Y, { className: "icon" }) }) }),
/* @__PURE__ */ e(
"span",
{
dangerouslySetInnerHTML: { __html: o.title.rendered },
style: { marginLeft: d ? "10px" : "0" }
}
)
] }),
/* @__PURE__ */ e(oe, { name: "chevron down" })
]
}
)
}
),
/* @__PURE__ */ e(
E.Content,
{
className: "accordion-post-content",
active: n === u,
children: /* @__PURE__ */ e("div", { ref: h, children: /* @__PURE__ */ e(K, { post: o, as: S, fluid: !0 }) })
}
)
] }, o.id);
}) });
}, me = ({ posts: t, showLabels: s, height: i }) => {
const [n, r] = p(t ? t[0].slug : null);
return T(() => {
setTimeout(() => {
if (window.location.hash) {
const l = window.location.hash.substr(1), c = document.getElementById(l);
c && t.map((h) => h.slug).indexOf(l) > -1 && (r(l), c.scrollIntoView({ behavior: "auto", block: "start" }));
}
}, 0);
}, [t]), /* @__PURE__ */ b(F.Fragment, { children: [
t.map((l) => /* @__PURE__ */ e("anchor", { id: l.slug }, l.slug)),
/* @__PURE__ */ e(z, { className: "tabbed posts", text: !0, children: /* @__PURE__ */ e(se, { showLabels: s, posts: t, setActive: r, activeItem: n }) }),
/* @__PURE__ */ e(S, { className: "content-tab", style: { height: `${i}px` }, children: /* @__PURE__ */ e(Q, { posts: t, activeItem: n }) })
] });
}, he = ({ posts: t, showLabels: s, showIcons: i, height: n }) => {
const [r, l] = p(t ? t[0].slug : null);
return /* @__PURE__ */ e(F.Fragment, { children: /* @__PURE__ */ b(_, { stackable: !0, className: "tabbed posts", columns: t.length, style: { height: n + "px" }, children: [
/* @__PURE__ */ e(de, { showIcons: i, showLabels: s, posts: t, activeItem: r, setActive: l }),
/* @__PURE__ */ e(_.Row, { style: { height: `${n}px` }, children: /* @__PURE__ */ e(_.Column, { width: 16, className: "content", children: /* @__PURE__ */ e(S, { className: "content-tab", style: { height: `${n}px` }, children: /* @__PURE__ */ e(Q, { className: "content-tab", posts: t, activeItem: r }) }) }) })
] }) });
}, ge = (t) => {
var I;
let {
"data-type": s,
"data-taxonomy": i,
"data-categories": n,
"data-items": r,
"data-theme": l = "light",
"data-show-icons": c,
"data-use-scrolls": h,
"data-show-labels": w,
"data-height": A,
"data-preview-mode": v = "Desktop",
pageModuleProps: m,
parent: L,
editing: g,
unique: P
} = t;
m != null && m.previewMode && (m != null && m.editing) && (v = m.previewMode, g = m.editing);
const B = t.intl.locale, o = h === "true", u = o ? A : void 0, { width: d } = ce(), a = d <= 1024, x = v !== "Desktop" && g, f = a && !g;
return /* @__PURE__ */ e(S, { className: `viz tabbed posts ${g ? "editing" : ""} ${o ? "scrollable" : ""}`, fluid: !0, children: /* @__PURE__ */ e(
re,
{
locale: B,
type: s,
taxonomy: i,
categories: n,
store: `tabbedposts_${L}_${P}`,
page: 1,
perPage: r,
children: /* @__PURE__ */ e(q, { children: /* @__PURE__ */ e(q, { children: f || x ? /* @__PURE__ */ e(ue, { posts: r, activeItem: (I = r[0]) == null ? void 0 : I.slug, setActive: () => {
} }) : l === "light" ? /* @__PURE__ */ e(me, { height: u, showLabels: w === "true" }) : /* @__PURE__ */ e(
he,
{
height: u,
showLabels: w === "true",
showIcons: c === "true"
}
) }) })
}
) });
}, fe = (t, s) => {
const i = t.getIn([
"data",
"pageModuleProps"
]), n = {};
return i && (n.pageModuleProps = i), n;
}, we = {}, Ie = le(fe, we)(ae(ge));
export {
Ie as default
};