@progress/kendo-react-layout/timeline/TimelineVertical.js

React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("react"),q=require("prop-types"),w=require("./TimelineCard.js"),R=require("./utils.js"),m=require("@progress/kendo-react-common"),F=require("@progress/kendo-react-intl");function O(n){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const a in n)if(a!=="default"){const l=Object.getOwnPropertyDescriptor(n,a);Object.defineProperty(r,a,l.get?l:{enumerable:!0,get:()=>n[a]})}}return r.default=n,Object.freeze(r)}const e=O(S),p=n=>{const r=F.useInternationalization(),[a,l]=e.useState(),{collapsibleEvents:b,transitionDuration:k,eventsData:E,dateFormat:y,alterMode:d,navigatable:f,onChange:C,onActionClick:D}=n,u=e.useRef(null),i=e.useRef(new m.Navigation({tabIndex:0,root:u,selectors:[".k-card-vertical"]}));e.useEffect(()=>{u.current&&n.navigatable&&(setTimeout(()=>{const t=i.current.first;t&&t.setAttribute("tabindex",String(0))},0),i.current.keyboardEvents={keydown:{Space:g,Enter:g}})},[n.navigatable]),e.useEffect(()=>{l(R.addYearsFlags(E))},[]),e.useEffect(()=>{i.current.update()});const N=t=>{f&&i.current&&i.current.triggerKeyboardEvent(t)},g=(t,s,o)=>{o.preventDefault();const c=t.querySelector(".k-card-title .k-event-collapse");c&&c.click()};let v=0;const T=m.useId();return e.createElement("ul",{ref:u,onKeyDown:N},a&&a.map((t,s)=>{const o=(s+v)%2===0;t.yearFlag&&(v+=1);const c=T+"-"+s,I=d?{"k-reverse":o}:void 0;return e.createElement(e.Fragment,{key:s},t.yearFlag?e.createElement("li",{className:"k-timeline-flag-wrap"},e.createElement("span",{className:"k-timeline-flag"},t.yearFlag)):e.createElement("li",{className:m.classNames("k-timeline-event",I)},e.createElement("div",{className:"k-timeline-date-wrap"},e.createElement("span",{className:"k-timeline-date",id:c},r.formatDate(t.date,y))),e.createElement("span",{className:"k-timeline-circle"}),e.createElement(w.TimelineCard,{id:c,tabindex:f?0:-1,eventData:t,alternated:d&&o,collapsible:b,transitionDuration:k,onChange:C,onActionClick:D})))}))};p.propTypes={onActionClick:q.func};exports.TimelineVertical=p;