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