@progress/kendo-react-layout
Version:
React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package
80 lines (79 loc) • 2.86 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 e from "react";
import I from "prop-types";
import { TimelineCard as w } from "./TimelineCard.mjs";
import { addYearsFlags as F } from "./utils.mjs";
import { Navigation as T, useId as x, classNames as A } from "@progress/kendo-react-common";
import { useInternationalization as R } from "@progress/kendo-react-intl";
const S = (l) => {
const u = R(), [c, p] = e.useState(), {
collapsibleEvents: v,
transitionDuration: E,
eventsData: g,
dateFormat: k,
alterMode: o,
navigatable: m,
onChange: y,
onActionClick: b
} = l, s = e.useRef(null), a = e.useRef(
new T({
tabIndex: 0,
root: s,
selectors: [".k-card-vertical"]
})
);
e.useEffect(() => {
s.current && l.navigatable && (setTimeout(() => {
const t = a.current.first;
t && t.setAttribute("tabindex", String(0));
}, 0), a.current.keyboardEvents = {
keydown: {
Space: d,
Enter: d
}
});
}, [l.navigatable]), e.useEffect(() => {
p(F(g));
}, []), e.useEffect(() => {
a.current.update();
});
const N = (t) => {
m && a.current && a.current.triggerKeyboardEvent(t);
}, d = (t, r, i) => {
i.preventDefault();
const n = t.querySelector(".k-card-title .k-event-collapse");
n && n.click();
};
let f = 0;
const C = x();
return /* @__PURE__ */ e.createElement("ul", { ref: s, onKeyDown: N }, c && c.map((t, r) => {
const i = (r + f) % 2 === 0;
t.yearFlag && (f += 1);
const n = C + "-" + r, D = o ? { "k-reverse": i } : void 0;
return /* @__PURE__ */ e.createElement(e.Fragment, { key: r }, t.yearFlag ? /* @__PURE__ */ e.createElement("li", { className: "k-timeline-flag-wrap" }, /* @__PURE__ */ e.createElement("span", { className: "k-timeline-flag" }, t.yearFlag)) : /* @__PURE__ */ e.createElement("li", { className: A("k-timeline-event", D) }, /* @__PURE__ */ e.createElement("div", { className: "k-timeline-date-wrap" }, /* @__PURE__ */ e.createElement("span", { className: "k-timeline-date", id: n }, u.formatDate(t.date, k))), /* @__PURE__ */ e.createElement("span", { className: "k-timeline-circle" }), /* @__PURE__ */ e.createElement(
w,
{
id: n,
tabindex: m ? 0 : -1,
eventData: t,
alternated: o && i,
collapsible: v,
transitionDuration: E,
onChange: y,
onActionClick: b
}
)));
}));
};
S.propTypes = {
onActionClick: I.func
};
export {
S as TimelineVertical
};