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