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