@progress/kendo-react-layout
Version:
React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package
233 lines (232 loc) • 8.22 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import * as s from "react";
import ft from "prop-types";
import { TimelineCard as ut } from "./TimelineCard.mjs";
import { addYearsFlags as mt } from "./utils.mjs";
import { caretAltLeftIcon as dt, caretAltRightIcon as Tt } from "@progress/kendo-svg-icons";
import { useInternationalization as ht } from "@progress/kendo-react-intl";
import { Navigation as Et, canUseDOM as vt, classNames as R } from "@progress/kendo-react-common";
import { Button as z } from "@progress/kendo-react-buttons";
const gt = (g) => {
const M = ht(), [_, j] = s.useState(!1), [y, K] = s.useState(!0), [X, Y] = s.useState(), [f, S] = s.useState(0), [b, B] = s.useState(), [l, q] = s.useState(0), [d, G] = s.useState(0), [a, L] = s.useState(1), [u, I] = s.useState(), [c, J] = s.useState(), [w, O] = s.useState([0, 0, 0]), [N, F] = s.useState(0), [Q, Z] = s.useState(1), m = s.useRef(null), i = s.useRef(null), W = s.useRef(null), { eventsData: tt, dateFormat: et, navigatable: nt, onActionClick: st } = g, D = b ? `${b}%` : "150px", T = s.useRef(
new Et({
tabIndex: 0,
root: m,
selectors: [".k-timeline-scrollable-wrap"]
})
);
s.useEffect(() => {
m.current && g.navigatable && (setTimeout(() => {
const t = T.current.first;
t && t.setAttribute("tabindex", String(0));
}, 0), T.current.keyboardEvents = {
keydown: {
ArrowRight: at,
ArrowLeft: ot,
End: ct,
Home: it
}
});
}, [g.navigatable, a, l]), s.useEffect(() => {
T.current.update();
});
const rt = (t) => {
nt && T.current && T.current.triggerKeyboardEvent(t);
};
s.useEffect(() => {
var r;
const t = vt && window.ResizeObserver && new window.ResizeObserver(p), e = i.current, n = ((r = m == null ? void 0 : m.current) == null ? void 0 : r.offsetWidth) || 0;
return t && e && t.observe(e), U(), p(), O([n, 0, -n]), () => {
t && t.disconnect();
};
}, []), s.useEffect(() => {
const t = i.current, e = t && t.children[a];
if (e) {
const n = e.offsetWidth, r = !(f >= 0);
if (j(r), c) {
const o = c.length * n > l * n * ((f * -1 + 100) / 100);
K(o);
}
(t == null ? void 0 : t.offsetWidth) * -f / 100 >= t.children.length * n && (U(), p(), S(
(e.offsetLeft - e.offsetWidth) / (l * e.offsetWidth) * 100 * -1
)), V(e);
}
}, [l, b, a]);
const at = (t, e, n) => {
if (i.current) {
const r = i.current.children[a + 1], o = r && r.classList.contains("k-timeline-flag-wrap") ? a + 2 : a + 1;
if (c && c.length <= o)
return;
l + d <= o && P(), E(o, n);
}
}, ot = (t, e, n) => {
if (i.current) {
const r = i.current && i.current.children[a - 1], o = r && r.classList.contains("k-timeline-flag-wrap") ? a - 2 : a - 1;
if (o <= 0)
return;
o < d && x(), E(o, n);
}
}, it = (t, e, n) => {
if (i.current) {
if (a <= 1)
return;
const r = 1;
k(!0, r, 0, 0), E(r, n);
}
}, ct = (t, e, n) => {
if (i.current) {
const r = i.current && i.current.children.length - 1;
if (r <= a)
return;
const o = Math.floor(r / l), v = o * -100, C = o * l;
k(!0, r, C, v), E(r, n);
}
}, U = () => {
const t = mt(tt);
J(t), I([t[a - 1], t[a], t[a + 1]]);
}, x = () => {
var e;
if (i.current && c) {
const n = d - l, r = d - 1, o = c[r] && ((e = c[r]) != null && e.yearFlag) ? r - 1 : r, v = f + 100 > 0 ? 0 : f + 100;
k(!1, o, n, v);
}
}, P = () => {
if (i.current && c) {
const e = d + l, n = c[e] && c[e].yearFlag ? e + 1 : e, r = f - 100;
k(!0, n, e, r);
}
}, k = (t, e, n, r) => {
A(t, e), p(), G(n), S(r), L(e);
}, A = (t, e) => {
if (u && c) {
const n = h(t, Q), r = Object.assign([], u, { [n]: c[e] });
I(r), Z(n), F(t ? -100 : 100), setTimeout(() => {
var H;
const o = (H = m.current) == null ? void 0 : H.offsetWidth, v = Object.assign([], w, {
[n]: 0,
[h(!0, n)]: o,
[h(!1, n)]: o && -o
}), C = Object.assign([], r, {
[h(!0, n)]: {},
[h(!1, n)]: {}
});
I(C), O(v), F(0);
}, g.transitionDuration || 300);
}
}, h = (t, e) => {
const n = t ? e + 1 : e - 1;
return u ? n < 0 ? u.length - 1 : n % u.length : 0;
}, V = (t) => {
var n, r;
const e = (a - d) * t.offsetWidth + t.offsetWidth / 2 + (((r = (n = W.current) == null ? void 0 : n.element) == null ? void 0 : r.clientWidth) || 0);
Y(e);
}, E = (t, e) => {
e.preventDefault(), t > a ? A(!0, t) : t < a && A(!1, t), L(t);
}, p = s.useCallback(() => {
const t = i.current, e = t && t.children[a];
if (t instanceof HTMLElement && e) {
const n = Math.round(t.offsetWidth / 150);
V(e), B(100 / n), q(n);
}
}, []), lt = () => ({
transitionDuration: "300ms"
}), $ = (t) => ({
transform: `translateX(${t}%)`,
transformOrigin: "left top"
});
return /* @__PURE__ */ s.createElement(s.Fragment, null, /* @__PURE__ */ s.createElement("div", { className: "k-timeline-track-wrap", ref: m, onKeyDown: rt }, /* @__PURE__ */ s.createElement(
z,
{
ref: W,
"aria-hidden": "true",
fillMode: "solid",
rounded: "full",
svgIcon: dt,
icon: "caret-alt-left",
onClick: () => _ && x(),
className: R("k-timeline-arrow", "k-timeline-arrow-left", { "k-disabled": !_ })
}
), /* @__PURE__ */ s.createElement(
z,
{
"aria-hidden": "true",
fillMode: "solid",
rounded: "full",
svgIcon: Tt,
icon: "caret-alt-right",
onClick: () => y && P(),
className: R("k-timeline-arrow", "k-timeline-arrow-right", { "k-disabled": !y })
}
), /* @__PURE__ */ s.createElement("div", { className: "k-timeline-track" }, /* @__PURE__ */ s.createElement(
"ul",
{
ref: i,
className: "k-timeline-scrollable-wrap",
role: "tablist",
tabIndex: 0,
style: { transform: `translateX(${f}%)` }
},
c && c.map(
(t, e) => t.yearFlag ? /* @__PURE__ */ s.createElement(
"li",
{
role: "none",
className: "k-timeline-track-item k-timeline-flag-wrap",
style: { flex: `1 0 ${D}` },
key: e
},
/* @__PURE__ */ s.createElement("span", { className: "k-timeline-flag" }, t.yearFlag)
) : /* @__PURE__ */ s.createElement(
"li",
{
role: "tab",
className: R("k-timeline-track-item", {
"k-focus": e === a
}),
"aria-selected": e === a,
style: { flex: `1 0 ${D}` },
key: e
},
/* @__PURE__ */ s.createElement("div", { className: "k-timeline-date-wrap" }, /* @__PURE__ */ s.createElement("span", { className: "k-timeline-date" }, M.formatDate(t.date, et))),
/* @__PURE__ */ s.createElement("span", { onClick: (n) => E(e, n), className: "k-timeline-circle" })
)
)
))), /* @__PURE__ */ s.createElement("div", { className: "k-timeline-events-list" }, /* @__PURE__ */ s.createElement(
"ul",
{
className: "k-timeline-scrollable-wrap",
style: N === 0 ? { ...$(N) } : { ...$(N), ...lt() }
},
u && u.map((t, e) => /* @__PURE__ */ s.createElement(
"li",
{
key: e,
className: "k-timeline-event",
style: { transform: `translate3d(${w[e]}px, 0px, 0px)` }
},
t && /* @__PURE__ */ s.createElement(
ut,
{
tabindex: w[e] === 0 ? 0 : -1,
eventData: t,
onActionClick: st,
horizontal: !0,
collapsible: !1,
calloutStyle: { left: `${X}px` }
}
)
))
)));
};
gt.propTypes = {
onActionClick: ft.func
};
export {
gt as TimelineHorizontal
};