@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.
271 lines (270 loc) • 9.98 kB
JavaScript
import { jsx as a, jsxs as at } from "react/jsx-runtime";
import { PostProvider as bt, PostConsumer as xt } from "@devgateway/wp-react-lib";
import Ct from "../connected-templates/PostIntro.js";
import { useRef as st, useState as F, useCallback as q, useLayoutEffect as wt } from "react";
import { Container as vt, Modal as G } from "semantic-ui-react";
import * as p from "d3";
import { useWindowDimensionsAndDevice as Tt } from "../../lib/hooks/window-dimensions.js";
import { useScreenOrientation as Pt } from "../../lib/hooks/screen-orientation.js";
const $t = {
visibility: "visible",
position: "relative",
height: "auto",
width: "auto"
}, Dt = 0, Wt = (T) => {
let {
posts: s,
lineWidth: P,
lineColor: $,
config: c,
marginLeft: U,
marginTop: L,
marginRight: J,
marginBottom: N,
fontSize: y,
subtitleWidth: R,
subtitleHeight: b,
enableTitlePopup: D,
enableCirclePopup: W,
enableDefaultPopup: V,
closePopupOnMouseOut: X,
unique: u
} = T;
R = 250;
const x = st(), H = st(), [I, h] = F(!1), [O, k] = F(0), [S, _] = F(null), { orientation: g } = Pt(), { width: Y, deviceType: f, height: C } = Tt({
getDeviceType: !0,
getHeight: !0
}), B = q((t) => `circle${u}${t}`, [u]), ct = q((t) => `title${u}${t}`, [u]), dt = (t) => {
var i;
return ((i = c[t]) == null ? void 0 : i.size) || 10;
}, pt = ({ content: t, isOpen: i, style: l }) => {
const m = (n) => (n = n.replace(
/<ul(.*?)>/g,
'<ul class="has-white-color has-text-color has-standard-14-font-size" style="list-style-type:disc !important; list-style: initial !important; padding-left:20px; color:#fefefe;">'
), n = n.replace(/<a(.*?)>/g, '<a$1 style="color:#fefefe;">'), n);
return /* @__PURE__ */ at(
G,
{
open: i,
onClose: () => h(!1),
size: "fullscreen",
closeIcon: !0,
centered: !0,
style: {
maxHeight: "80vh",
overflowY: "auto",
padding: "0.5rem",
...l
},
children: [
/* @__PURE__ */ a(G.Header, { style: { ...l, borderBottom: "none" } }),
/* @__PURE__ */ a(
G.Content,
{
className: "styled-list-content",
style: { ...l },
dangerouslySetInnerHTML: {
__html: m(
t.props.children.props.post.content.rendered
)
}
}
)
]
},
`${t.props.children.key}modal`
);
}, K = (t) => {
var i;
return (i = c[t]) == null ? void 0 : i.circleColor;
}, Q = (t) => c[t].titleColor, Z = (t) => c[t].lineColor, tt = (t) => c[t].tooltipFontColor || "#fff", ut = (t) => c[t].readMoreLabel, et = q((t, i) => {
t.preventDefault();
const l = 260, m = 50;
let n = [0, 0];
if (t) {
const w = t.target.getBoundingClientRect(), A = t.target.closest(".time").getBoundingClientRect(), r = w.left - A.left, v = w.top + A.top;
n = [r + l, v + m];
const M = 400;
w.left + r + M + l > window.innerWidth && (n[0] = r - M * 0.6);
}
h(!0), _({ data: i, id: i.id, position: n }), gt(i.id);
}, []), ft = () => {
h(!1);
}, ht = (t) => {
p.selectAll(`#${B(t)}`).style("stroke", "none").style("fill", K(t)), p.selectAll(`#label${t}`).style("font-weight", "normal");
}, gt = (t) => {
ht(Dt), p.selectAll(`#${B(t)}`).style("stroke", K(t)).style("fill", "#fff"), p.selectAll(`#label${t}`).style("font-weight", "bold");
};
return wt(() => {
var nt;
const t = {
top: L,
bottom: N
}, i = x.current.clientWidth, l = H.current.clientWidth;
l > 0 && k(l);
const m = C, n = {
mobile: "75",
tablet: "150",
midTablet: "150",
laptop: "150"
}, w = {
mobile: "250",
tablet: "350",
midTablet: "350",
laptop: "400"
}, A = {
mobile: 20,
tablet: 30,
midTablet: 30,
laptop: 40
}, r = p.scaleLinear().domain([0, s.length - 1]).range([t.top, m - t.bottom]), v = p.select(x.current);
v.selectAll("*").remove(), v.attr("width", i).attr("height", m);
const M = p.line(), mt = [
[0, r(0)],
[0, r(s.length - 1)]
], yt = M(mt);
let ot = `translate(${n[f]},0)`;
((nt = process.env.REACT_APP_THEME) == null ? void 0 : nt.startsWith("cd")) && (ot = `translate(${n[f]},20)`);
const z = v.append("g").attr("transform", ot);
$ = "#E4E5EA", P = 6, z.append("path").attr("d", yt).attr("stroke-width", P).attr("stroke", $).attr("class", "timeline-path"), z.selectAll(".circle").data(s).enter().append("circle").attr("id", (o, e) => B(e)).attr("cx", 0).attr("class", "timeline-circle").attr("cy", (o, e) => r(e)).attr("r", (o, e) => dt(e)).style("fill", (o, e) => {
var d;
return ((d = c[e]) == null ? void 0 : d.circleColor) || "#000";
}).style("cursor", W ? "pointer" : "default").on("click", (o, e) => {
o.preventDefault(), W && et(o, e);
}), z.selectAll(".title").data(s).enter().append("foreignObject").attr("x", A[f]).attr("y", (o, e) => r(e) - Number.parseInt(b) / 2).attr("width", Number.parseInt(w[f])).attr("height", Number.parseInt(b)).attr("class", "timeline-title").append("xhtml:div").attr("id", (o, e) => ct(e)).style("font-size", `${Number.parseInt(y) + 1}px`).style("color", (o, e) => Q(e)).style("font-weight", "bold").style("line-height", "1.2rem").style("text-align", "left").style("cursor", D ? "pointer" : "default").style("overflow", "hidden").style("display", "-webkit-box").style("-webkit-line-clamp", "2").style("-webkit-box-orient", "vertical").style("text-overflow", "ellipsis").style("overflow-wrap", "break-word").html((o, e) => {
const d = ut(e);
let E = o.title.rendered;
return d && (E += `<br><span style="font-size:${Number.parseInt(y) - 3}px;color:${Q(
e
)};text-decoration:underline;text-underline-offset:3px">${d}</span>`), E;
}).each(function(o, e) {
const d = p.select(this.parentNode);
setTimeout(() => {
const E = this.getBoundingClientRect(), rt = Math.min(
E.height,
Number.parseInt(b) * 2
);
d.attr("height", rt), d.attr("y", r(e) - rt / 2);
}, 0);
}).on("click", (o, e, d) => {
o.preventDefault(), D && et(o, e);
});
const it = +y + 1, lt = 60, j = it * 0.9;
z.selectAll(".year-fo").data(s).enter().append("foreignObject").attr("class", "year-fo").attr("x", -70).attr("y", (o, e) => r(e) - j / 2).attr("width", lt).attr("height", j).append("xhtml:div").style("display", "flex").style("align-items", "center").style("justify-content", "flex-end").style("width", `${lt}px`).style("height", `${j}px`).style("font-size", `${it}px`).style("line-height", "1em").style("font-weight", "400").style("color", "#4C4D50").html((o) => o.meta_fields.subtitle);
}, [f, g, C]), /* @__PURE__ */ at(
"div",
{
className: "time line",
style: { position: "relative" },
ref: H,
children: [
s.filter((t) => S && S.id === t.id).map((t) => {
const i = t.slug || "unknown-slug", l = s.indexOf(t);
return /* @__PURE__ */ a(
pt,
{
isOpen: I,
content: /* @__PURE__ */ a(
"div",
{
style: {
backgroundColor: Z(l),
color: tt(l)
},
children: /* @__PURE__ */ a(
Ct,
{
post: t,
style: $t
},
i
)
}
),
closeTooltip: ft,
style: {
backgroundColor: Z(l),
color: tt(l)
}
},
`${i}_modal`
);
}),
/* @__PURE__ */ a("svg", { height: C, width: O, ref: x, style: { overflow: "visible" } })
]
},
u + f + g
);
}, Et = (T) => {
const {
"data-type": s,
"data-taxonomy": P,
"data-categories": $,
"data-items": c,
"data-height": U,
"data-line-color": L = "#000",
"data-config": J = "{}",
"data-position": N = "middle",
"data-line-width": y = "1",
"data-margin-left": R = 50,
"data-margin-top": b = 25,
"data-margin-right": D = 50,
"data-margin-bottom": W = 25,
"data-font-size": V = 14,
"data-title-width": X = 100,
"data-title-height": u = 50,
"data-subtitle-width": x = 250,
"data-subtitle-height": H = 60,
"data-enable-title-popup": I = "false",
"data-enable-circle-popup": h = "true",
"data-enable-default-popup": O = "false",
"data-close-popup-on-mouse-out": k = "false",
editing: S,
parent: _,
unique: g
} = T, Y = T.intl.locale, C = {
unique: g || Math.random().toString(36).substring(2, 9),
marginLeft: R,
marginTop: b,
marginRight: D,
marginBottom: W,
lineWidth: y,
height: U,
position: N,
lineColor: decodeURIComponent(L),
config: JSON.parse(decodeURIComponent(J)),
fontSize: V,
titleWidth: X,
titleHeight: u,
subtitleWidth: x,
subtitleHeight: H,
enableTitlePopup: I == !0 || I == "true",
enableCirclePopup: h == !0 || h == "true",
enableDefaultPopup: O == !0 || O == "true",
closePopupOnMouseOut: k == !0 || k == "true"
};
return /* @__PURE__ */ a(
vt,
{
style: { height: "auto" },
className: `viz time line ${S ? "editing" : ""} mobile`,
fluid: !0,
children: /* @__PURE__ */ a(
bt,
{
locale: Y,
type: s,
taxonomy: P,
categories: $,
store: `carousel_${_}_${g}`,
page: 1,
perPage: c,
children: /* @__PURE__ */ a(xt, { children: /* @__PURE__ */ a(Wt, { ...C }) })
}
)
}
);
};
export {
Et as default
};