@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.
374 lines (373 loc) • 12.4 kB
JavaScript
import { jsx as r, jsxs as S } from "react/jsx-runtime";
import K, { useState as M, useEffect as L, useRef as q, useLayoutEffect as U } from "react";
import { Container as F, Accordion as j, Icon as X } from "semantic-ui-react";
import { PostProvider as J, PostConsumer as Y, MediaProvider as G, MediaConsumer as Q, PostIcon as Z, PostContent as O } from "@devgateway/wp-react-lib";
import { connect as ee } from "react-redux";
import H from "../connected-templates/PostIntro.js";
const te = ({
posts: i,
activeItem: d,
setActive: p,
colors: g
}) => {
const [m, f] = M(
i.findIndex((n) => n.slug === d)
), [c, w] = M(null), l = (n, o, s) => {
document.querySelectorAll(n).forEach((t) => {
t.querySelector(o) && t.classList.add(s);
});
};
L(() => {
if (c) {
const n = c.getBoundingClientRect().top + window.scrollY;
window.scrollTo({
top: n,
behavior: "smooth"
});
}
l(
".ui.fluid.container.viz.featured.tabs",
".accordion",
"has-accordion"
), l(
".ui.fluid.container.viz.featured.tabs",
"blockquote",
"has-blockquote"
), l(
".ui.fluid.container.viz.featured.tabs",
".accordion .accordion-post-ft-title",
"has-accordion-title"
), l(
".ui.fluid.container.viz.featured.tabs",
".accordion .accordion-post-vft-content",
"has-accordion-content"
), l(
".ui.fluid.container.viz.featured.tabs",
".vt-accordion-post-intro figure",
"has-vt-accordion-figure"
), l(
".ui.fluid.container.viz.featured.tabs",
".content.active.accordion-post-content .wp-block-columns",
"has-wp-block-columns"
);
}, [c]), L(() => {
let n;
const o = [], s = (e) => {
setTimeout(() => {
var h;
const t = e.querySelectorAll(
".accordion .legends.container.has-standard-12-font-size.bottom, .legends.container.items-section:not(.legends.container.top .items-section)"
);
if (t.length !== 0)
for (const u of t) {
if (u.closest(".legends.container.top"))
continue;
const P = u.closest(
".ui.fluid.container.content"
), v = P ? P.querySelector(".data-source") : null;
if (!v || u.offsetParent === null || v.offsetParent === null || u.offsetHeight === 0 || v.offsetHeight === 0)
continue;
const A = v.getBoundingClientRect(), y = u.getBoundingClientRect();
if (y.top === 0 || y.bottom === 0 || A.top === 0 || Math.abs(y.top) > 1e4 || Math.abs(A.top) > 1e4)
continue;
const B = window.getComputedStyle(v), T = window.getComputedStyle(u), _ = parseFloat(B.marginTop) || 0, $ = parseFloat(T.marginBottom) || 0, E = y.bottom + $, R = A.top - _;
if (E > R) {
const a = E - R;
v.style.marginTop = `${a + 20}px`;
}
const x = (h = u.closest(
".wp-block-column.is-layout-flow.wp-block-column-is-layout-flow"
)) == null ? void 0 : h.nextElementSibling;
if (x) {
const a = x.getBoundingClientRect(), b = window.getComputedStyle(x), N = Number.parseFloat(b.marginTop) || 0, k = a.top - N;
if (E > k) {
const z = E - k;
x.style.marginTop = `${z + 20}px`;
}
}
const I = u.closest(".chart.container");
if (I) {
const a = I.getBoundingClientRect(), b = window.getComputedStyle(I), N = Number.parseFloat(b.marginBottom) || 0, k = a.bottom + N, z = Number.parseFloat(T.marginTop) || 0, D = y.top - z;
if (D < k) {
const W = k - D, V = Math.min(W + 20, 200);
u.style.marginTop = `${V}px`;
}
}
}
}, 150);
};
return m !== -1 && (n = setTimeout(() => {
document.querySelectorAll(".accordion").forEach((t) => s(t));
}, 0)), () => {
clearTimeout(n), o.forEach((e) => e.disconnect());
};
}, [m]);
const C = (n, o) => {
const { index: s } = o, e = m === s ? -1 : s;
f(e), p(i[s].slug), e !== -1 && w(n.currentTarget);
};
return /* @__PURE__ */ r(j, { fluid: !0, styled: !0, children: i.map((n, o) => {
var e;
const s = (e = n.meta_fields) != null && e.icon ? n.meta_fields.icon[0] : null;
return /* @__PURE__ */ S(K.Fragment, { children: [
/* @__PURE__ */ r(
j.Title,
{
active: m === o,
index: o,
onClick: (t) => C(t, { index: o }),
style: { backgroundColor: g[`color_${o}`] },
children: /* @__PURE__ */ S(
"div",
{
style: {
display: "flex",
alignItems: "center",
justifyContent: "space-between",
width: "100%"
},
children: [
/* @__PURE__ */ S("div", { style: { display: "flex", alignItems: "center" }, children: [
s && /* @__PURE__ */ r(G, { id: s, children: /* @__PURE__ */ r(Q, { children: /* @__PURE__ */ r(Z, { className: "icon" }) }) }),
/* @__PURE__ */ r(H, { post: n, className: "vt-accordion-post-intro" })
] }),
/* @__PURE__ */ r(X, { name: "chevron down" })
]
}
)
}
),
/* @__PURE__ */ r(
j.Content,
{
className: "accordion-post-content accordion-post-vft-content",
active: m === o,
children: /* @__PURE__ */ r(O, { post: n })
}
)
] }, n.id);
}) });
}, ne = ({
post: i,
count: d,
backgroundColor: p,
active: g,
dimensions: m,
height: f,
coverWidth: c,
index: w,
editing: l,
clickToExpandLabel: C
}) => {
const n = i._embedded ? i._embedded["wp:featuredmedia"] : null, [o, s] = M(!1), e = l ? d - w : 1;
return /* @__PURE__ */ S("div", { className: "content-area", children: [
/* @__PURE__ */ S(
"div",
{
className: "cover",
style: {
width: `${c}px`,
backgroundColor: p,
backgroundImage: `url(${n ? n[0].source_url : ""})`
},
onMouseEnter: () => s(!0),
onMouseLeave: () => s(!1),
children: [
/* @__PURE__ */ r(
"div",
{
className: "rotator",
style: {
width: `${f}px`,
transform: `translate(${c / 2}px, 0px) rotate(90deg)`
},
children: /* @__PURE__ */ r(H, { post: i })
}
),
/* @__PURE__ */ S("div", { className: "overlay-label-container", children: [
/* @__PURE__ */ r(
"div",
{
className: `overlay-label ${o && !g ? "visible" : ""}`,
children: C || "CLICK TO EXPAND"
}
),
/* @__PURE__ */ r("div", { className: "arrow-svg" })
] })
]
}
),
/* @__PURE__ */ r(
"div",
{
className: `collapsable-content ${g ? "expanded" : "collapsed"}`,
style: {
backgroundColor: "#f9f9f9",
width: `${m.width - c * d}px`,
marginLeft: `${c * e}px`
},
children: /* @__PURE__ */ r(O, { post: i })
}
)
] });
}, oe = ({
editing: i,
posts: d,
height: p,
colors: g,
coverWidth: m,
clickToExpandLabel: f
}) => {
const [c, w] = M(null), l = q(null), [C, n] = M({ width: 0, height: 0 }), o = q(null), s = (e) => {
c !== e && w(e);
};
return L(() => {
d.length > 0 && c === null && i && w(d[0].slug);
}, [d, c, i]), U(() => {
var e, t, h, u;
(e = l.current) != null && e.parentElement && n({
width: i ? ((h = (t = l.current.parentElement) == null ? void 0 : t.parentElement) == null ? void 0 : h.offsetWidth) ?? 0 : ((u = l.current.parentElement) == null ? void 0 : u.offsetWidth) ?? 0,
height: l.current.offsetHeight
}), o.current && (o.current.style.overflow = i ? "visible" : "hidden");
}, [i]), /* @__PURE__ */ r(
F,
{
fluid: !0,
className: "vertical featured tabs",
ref: o,
children: d == null ? void 0 : d.map((e, t) => {
const h = c ? e.slug === c : t === 0;
return /* @__PURE__ */ S(
"div",
{
ref: l,
onClick: () => s(e.slug),
className: h ? "item expanded" : "item collapsed",
style: {
minHeight: `${p}px`,
minWidth: `${m}px`
},
children: [
/* @__PURE__ */ r("a", { id: e.slug }),
/* @__PURE__ */ r(
ne,
{
editing: i,
coverWidth: m,
height: p,
backgroundColor: g[`color_${t}`],
count: d.length,
dimensions: C,
active: h,
post: e,
index: t,
clickToExpandLabel: f
}
)
]
},
e.slug
);
})
}
);
}, re = (i) => {
var x, I;
let {
"data-height": d,
"data-type": p,
"data-taxonomy": g,
"data-categories": m,
"data-count": f,
"data-colors": c,
"data-cover-width": w = 50,
"data-read-more-label": l = "READ More",
"data-click-to-expand-label": C = "CLICK TO EXPAND",
"data-preview-mode": n = "Desktop",
editing: o,
parent: s,
unique: e,
pageModuleProps: t
} = i;
t != null && t.previewMode && (t != null && t.editing) && (n = t.previewMode, o = t.editing);
const h = i.intl.locale, u = m || "[]", [P, v] = M(
(((x = window == null ? void 0 : window.visualViewport) == null ? void 0 : x.width) || window.innerWidth) <= 1365
), A = () => {
var a, b, N;
return ((a = window.screen.orientation) == null ? void 0 : a.type) || ((((b = window == null ? void 0 : window.visualViewport) == null ? void 0 : b.width) || window.innerWidth) > (((N = window == null ? void 0 : window.visualViewport) == null ? void 0 : N.height) || window.innerHeight) ? "landscape-primary" : "portrait-primary");
}, [y, B] = M(A()), T = () => {
setTimeout(() => {
var a;
B(A()), v(
(((a = window == null ? void 0 : window.visualViewport) == null ? void 0 : a.width) || window.innerWidth) <= 1365
);
}, 100);
};
L(() => (window.screen.orientation && window.screen.orientation.addEventListener(
"change",
T
), window.addEventListener("resize", T), () => {
window.removeEventListener("resize", T), window.screen.orientation && window.screen.orientation.removeEventListener(
"change",
T
);
}), []);
const _ = (a) => o ? a : decodeURIComponent(a), $ = (a) => {
if (!a) return null;
try {
return JSON.parse(_(a));
} catch (b) {
console.error(`error parsing value:${a}
error:${b}`);
}
return null;
}, E = n !== "Desktop" && o, R = P && !o;
return /* @__PURE__ */ r(
F,
{
style: { maxWidth: "100%" },
className: `viz featured tabs ${o ? "editing" : ""}`,
fluid: !0,
children: /* @__PURE__ */ r(
J,
{
type: p,
locale: h,
taxonomy: g,
categories: $(u),
store: `vertical_tabs${s}_${e}`,
page: 1,
perPage: f,
children: /* @__PURE__ */ r(Y, { children: R || E ? /* @__PURE__ */ r(
te,
{
posts: f,
activeItem: (I = f == null ? void 0 : f[0]) == null ? void 0 : I.slug,
colors: $(c),
setActive: () => {
}
}
) : /* @__PURE__ */ r(
oe,
{
editing: o,
coverWidth: w,
moreLabel: l,
clickToExpandLabel: C,
colors: $(c),
height: d,
posts: f
}
) })
}
)
},
y + Math.random()
);
}, ie = (i, d) => {
const p = i.getIn(["data", "pageModuleProps"]), g = {};
return p && (g.pageModuleProps = p), g;
}, ae = {}, pe = ee(ie, ae)(re);
export {
pe as default
};