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