@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.
212 lines (211 loc) • 9.03 kB
JavaScript
import { jsx as t, jsxs as d } from "react/jsx-runtime";
import z, { useState as b, useEffect as I } from "react";
import { Container as M, Accordion as T, Icon as k, Grid as _, Segment as F, Label as P } from "semantic-ui-react";
import { PostProvider as q, PostConsumer as H, MediaProvider as A, MediaConsumer as L, PostIcon as N, PostContent as E, PostTitle as O } from "@devgateway/wp-react-lib";
import R from "../connected-templates/PostIntro.js";
import { useWindowDimensionsAndDevice as W } from "../../lib/hooks/window-dimensions.js";
import { connect as j } from "react-redux";
const B = ({ post: n, onClick: f, active: c, moreLabel: l }) => {
const u = n._embedded ? n._embedded["wp:featuredmedia"] : null;
return /* @__PURE__ */ d("div", { className: "cover", style: { backgroundImage: `url(${u ? u[0].source_url : ""})` }, children: [
/* @__PURE__ */ t(R, { post: n }),
c ? /* @__PURE__ */ d(P, { onClick: f, children: [
/* @__PURE__ */ t(k, { name: "arrow alternate circle left outline", size: "large" }),
" Back "
] }) : /* @__PURE__ */ d(P, { onClick: f, children: [
/* @__PURE__ */ t(k, { name: "search", size: "large" }),
" ",
l
] })
] });
}, G = ({ post: n }) => {
const l = new DOMParser().parseFromString(n.content.rendered, "text/html").querySelector("figure");
return l ? /* @__PURE__ */ t("div", { style: {
flex: "0 0 40px"
}, dangerouslySetInnerHTML: { __html: l.outerHTML } }) : null;
}, V = ({ posts: n, width: f, height: c, color: l, moreLabel: u, closeLabel: y }) => {
const [o, m] = b(null), [p, w] = b(!1), [C, v] = b([0, 0]), a = l.split(","), h = (i) => {
p ? (w(!1), m(i)) : (m(i), w(!0));
};
return I(() => {
o && v([window.scrollX, window.scrollY]), o == null && window.scrollTo(C[0], C[1]);
}, [o]), I(() => {
window.setTimeout(() => {
if (window.location.hash) {
const i = window.location.hash.substr(1), e = document.getElementById(i);
e && n && n.map((r) => r.slug).indexOf(i) > -1 && (m(i), e.scrollIntoView({ behavior: "auto", block: "start" }));
}
}, 0);
}, [n]), /* @__PURE__ */ t(M, { fluid: !0, className: "featured tabs", style: { minHeight: `${c}px` }, children: /* @__PURE__ */ t(_, { stackable: !0, columns: o != null ? 1 : n == null ? void 0 : n.length, className: "desktop", children: n == null ? void 0 : n.map((i, e) => {
var r;
return /* @__PURE__ */ d(z.Fragment, { children: [
/* @__PURE__ */ d(
_.Column,
{
style: o == null ? { display: "block", visibility: "visible", backgroundColor: a[e] } : { display: "none", visibility: "hidden" },
children: [
/* @__PURE__ */ t("a", { id: i.slug }),
/* @__PURE__ */ t(B, { post: i, moreLabel: u, onClick: () => h(i.slug) })
]
}
),
/* @__PURE__ */ d(
_.Column,
{
className: "expanded",
style: o != i.slug ? { display: "none", visibility: "hidden" } : { display: "block", visibility: "visible" },
children: [
/* @__PURE__ */ d(F, { style: { backgroundColor: a[e] }, children: [
((r = i.meta_fields) == null ? void 0 : r.icon) && /* @__PURE__ */ t(A, { id: i.meta_fields ? i.meta_fields.icon[0] : null, children: /* @__PURE__ */ t(L, { children: /* @__PURE__ */ t(N, {}) }) }),
/* @__PURE__ */ t(O, { as: "h2", post: i, className: "has-standard-36-font-size has-white-color" }),
/* @__PURE__ */ t(P, { className: "closeIcon", onClick: () => m(null), children: /* @__PURE__ */ t(k, { name: "times circle outline", size: "large" }) })
] }),
/* @__PURE__ */ t(
E,
{
as: "div",
fluid: !0,
post: i,
style: { maxHeight: `calc(${c}px - 150px)` }
}
),
/* @__PURE__ */ d(P, { className: "closeIconText", style: { backgroundColor: `${a[e]}` }, onClick: () => m(null), children: [
/* @__PURE__ */ t(k, { name: "times circle outline", size: "large" }),
" ",
y || "Close",
" "
] })
]
}
)
] }, i.slug);
}) }) });
}, Y = ({ posts: n, activeItem: f, setActive: c, color: l }) => {
const [u, y] = b(n.findIndex((e) => e.slug === f)), [o, m] = b(null), p = l.split(","), w = () => {
var e;
return ((e = window.screen.orientation) == null ? void 0 : e.type) || (window.innerWidth > window.innerHeight ? "landscape-primary" : "portrait-primary");
}, [C, v] = b(w()), a = () => {
setTimeout(() => {
v(w());
}, 100);
}, h = (e, r, s) => {
document.querySelectorAll(e).forEach((x) => {
x.querySelector(r) && x.classList.add(s);
});
};
I(() => {
if (o) {
const e = o.getBoundingClientRect().top + window.scrollY;
window.scrollTo({
top: e,
behavior: "smooth"
});
}
h(".ui.fluid.container.viz.featured.tabs", ".accordion .accordion-post-ft-title", "has-accordion-title"), h(".ui.fluid.container.viz.featured.tabs", ".accordion .accordion-post-vft-content", "has-accordion-content"), h(".ui.fluid.container.viz.featured.tabs", "blockquote", "has-blockquote"), h(".ui.fluid.container.viz.featured.tabs", ".vt-accordion-post-intro figure", "has-vt-accordion-figure"), h(".ui.fluid.container.viz.featured.tabs", ".content.active.accordion-post-content .wp-block-columns", "has-wp-block-columns");
}, [o]), I(() => (window.screen.orientation && window.screen.orientation.addEventListener(
"change",
a
), window.addEventListener("resize", a), () => {
window.removeEventListener("resize", a), window.screen.orientation && window.screen.orientation.removeEventListener(
"change",
a
);
}), []);
const i = (e, r) => {
const { index: s } = r, g = u === s ? -1 : s;
y(g), c(n[s].slug), g !== -1 && m(e.currentTarget);
};
return /* @__PURE__ */ t(T, { fluid: !0, styled: !0, children: n.map((e, r) => {
var g;
const s = (g = e.meta_fields) != null && g.icon ? e.meta_fields.icon[0] : null;
return /* @__PURE__ */ d(z.Fragment, { children: [
/* @__PURE__ */ t(
T.Title,
{
active: u === r,
index: r,
onClick: i,
style: { backgroundColor: p[r] },
children: /* @__PURE__ */ d("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }, children: [
/* @__PURE__ */ d("div", { style: { display: "flex", alignItems: "center" }, children: [
s && /* @__PURE__ */ t(A, { id: s, children: /* @__PURE__ */ t(L, { children: /* @__PURE__ */ t(N, { className: "icon" }) }) }),
!s && /* @__PURE__ */ t(G, { post: e }),
/* @__PURE__ */ t("p", { className: "accordion-post-ft-title", dangerouslySetInnerHTML: { __html: e.title.rendered }, style: { marginLeft: "10px" } })
] }),
/* @__PURE__ */ t(k, { name: "chevron down" })
] })
}
),
/* @__PURE__ */ t(T.Content, { className: "accordion-post-ft-content", active: u === r, children: /* @__PURE__ */ t(E, { post: e }) })
] }, e.id);
}) });
}, U = (n) => {
var S;
let {
"data-width": f,
"data-height": c,
"data-type": l,
"data-taxonomy": u,
"data-categories": y,
"data-items": o,
"data-color": m,
"data-use-scrolls": p,
"data-read-more-label": w = "READ More",
"data-close-label": C = "Close",
"data-preview-mode": v = "Desktop",
editing: a,
parent: h,
unique: i,
pageModuleProps: e
} = n;
const r = n.intl.locale;
e != null && e.editing && (e != null && e.previewMode) && (a = e.editing, v = e.previewMode);
const s = p == "true", { width: g } = W(), x = g <= 1250, $ = v !== "Desktop" && a, D = x && !a;
return /* @__PURE__ */ t(
M,
{
className: `viz featured tabs ${a ? "editing" : ""} ${s ? "scrollable" : ""}`,
fluid: !0,
children: /* @__PURE__ */ t(
q,
{
locale: r,
type: l,
taxonomy: u,
categories: y,
store: `tabbedposts_${h}_${i}`,
page: 1,
perPage: o,
children: /* @__PURE__ */ t(H, { children: $ || D ? /* @__PURE__ */ t(
Y,
{
posts: o,
activeItem: (S = o == null ? void 0 : o[0]) == null ? void 0 : S.slug,
color: m,
setActive: () => {
}
}
) : /* @__PURE__ */ t(
V,
{
moreLabel: w,
closeLabel: C,
color: m,
width: f,
height: c
}
) })
}
)
}
);
}, X = (n, f) => {
const c = n.getIn([
"data",
"pageModuleProps"
]), l = {};
return c && (l.pageModuleProps = c), l;
}, J = {}, oe = j(X, J)(U);
export {
oe as default
};