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

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

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 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 ve=require("react"),ge=require("prop-types"),Te=require("./TimelineCard.js"),be=require("./utils.js"),X=require("@progress/kendo-svg-icons"),ke=require("@progress/kendo-react-intl"),v=require("@progress/kendo-react-common"),Y=require("@progress/kendo-react-buttons");function Ee(l){const I=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const g in l)if(g!=="default"){const T=Object.getOwnPropertyDescriptor(l,g);Object.defineProperty(I,g,T.get?T:{enumerable:!0,get:()=>l[g]})}}return I.default=l,Object.freeze(I)}const s=Ee(ve),G=l=>{const T=ke.useInternationalization(),[A,J]=s.useState(!1),[O,Q]=s.useState(!0),[Z,ee]=s.useState(),[f,L]=s.useState(0),[y,te]=s.useState(),[u,ne]=s.useState(0),[h,se]=s.useState(0),[a,D]=s.useState(1),[d,R]=s.useState(),[i,re]=s.useState(),[F,W]=s.useState([0,0,0]),[_,U]=s.useState(0),[P,ae]=s.useState(1),V=v.useId(),m=s.useRef(null),c=s.useRef(null),x=s.useRef(null),{eventsData:oe,dateFormat:$,navigatable:ie,onActionClick:ce}=l,j=y?`${y}%`:"150px",b=s.useRef(new v.Navigation({tabIndex:0,root:m,selectors:[".k-timeline-scrollable-wrap"]}));s.useEffect(()=>{m.current&&l.navigatable&&(setTimeout(()=>{const e=b.current.first;e&&e.setAttribute("tabindex",String(0))},0),b.current.keyboardEvents={keydown:{ArrowRight:ue,ArrowLeft:fe,End:me,Home:de}})},[l.navigatable,a,u]),s.useEffect(()=>{b.current.update()});const le=e=>{ie&&b.current&&b.current.triggerKeyboardEvent(e)};s.useEffect(()=>{var r;const e=v.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(w),t=c.current,n=((r=m==null?void 0:m.current)==null?void 0:r.offsetWidth)||0;return e&&t&&e.observe(t),q(),w(),W([n,0,-n]),()=>{e&&e.disconnect()}},[]),s.useEffect(()=>{const e=c.current,t=e&&e.children[a];if(t){const n=t.offsetWidth,r=!(f>=0);if(J(r),i){const o=i.length*n>u*n*((f*-1+100)/100);Q(o)}(e==null?void 0:e.offsetWidth)*-f/100>=e.children.length*n&&(q(),w(),L((t.offsetLeft-t.offsetWidth)/(u*t.offsetWidth)*100*-1)),M(t)}},[u,y,a]);const ue=(e,t,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;u+h<=o&&H(),E(o,n)}},fe=(e,t,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<h&&z(),E(o,n)}},de=(e,t,n)=>{if(c.current){if(a<=1)return;const r=1;N(!0,r,0,0),E(r,n)}},me=(e,t,n)=>{if(c.current){const r=c.current&&c.current.children.length-1;if(r<=a)return;const o=Math.floor(r/u),p=o*-100,S=o*u;N(!0,r,S,p),E(r,n)}},q=()=>{const e=be.addYearsFlags(oe);re(e),R([e[a-1],e[a],e[a+1]])},z=()=>{var t;if(c.current&&i){const n=h-u,r=h-1,o=i[r]&&((t=i[r])!=null&&t.yearFlag)?r-1:r,p=f+100>0?0:f+100;N(!1,o,n,p)}},H=()=>{if(c.current&&i){const t=h+u,n=i[t]&&i[t].yearFlag?t+1:t,r=f-100;N(!0,n,t,r)}},N=(e,t,n,r)=>{C(e,t),w(),se(n),L(r),D(t)},C=(e,t)=>{if(d&&i){const n=k(e,P),r=Object.assign([],d,{[n]:i[t]});R(r),ae(n),U(e?-100:100),setTimeout(()=>{var K;const o=(K=m.current)==null?void 0:K.offsetWidth,p=Object.assign([],F,{[n]:0,[k(!0,n)]:o,[k(!1,n)]:o&&-o}),S=Object.assign([],r,{[k(!0,n)]:{},[k(!1,n)]:{}});R(S),W(p),U(0)},l.transitionDuration||300)}},k=(e,t)=>{const n=e?t+1:t-1;return d?n<0?d.length-1:n%d.length:0},M=e=>{var n,r;const t=(a-h)*e.offsetWidth+e.offsetWidth/2+(((r=(n=x.current)==null?void 0:n.element)==null?void 0:r.clientWidth)||0);ee(t)},E=(e,t)=>{t.preventDefault(),e>a?C(!0,e):e<a&&C(!1,e),D(e)},w=s.useCallback(()=>{const e=c.current,t=e&&e.children[a];if(e instanceof HTMLElement&&t){const n=Math.round(e.offsetWidth/150);M(t),te(100/n),ne(n)}},[]),he=()=>({transitionDuration:"300ms"}),B=e=>({transform:`translateX(${e}%)`,transformOrigin:"left top"});return s.createElement(s.Fragment,null,s.createElement("div",{className:"k-timeline-track-wrap",ref:m,onKeyDown:le},s.createElement(Y.Button,{ref:x,"aria-hidden":"true",rounded:"full",svgIcon:X.chevronLeftIcon,icon:"chevron-left",onClick:()=>A&&z(),className:v.classNames("k-timeline-arrow","k-timeline-arrow-left",{"k-disabled":!A})}),s.createElement(Y.Button,{"aria-hidden":"true",rounded:"full",svgIcon:X.chevronRightIcon,icon:"chevron-right",onClick:()=>O&&H(),className:v.classNames("k-timeline-arrow","k-timeline-arrow-right",{"k-disabled":!O})}),s.createElement("div",{className:"k-timeline-track"},s.createElement("ul",{ref:c,className:"k-timeline-scrollable-wrap",role:"tablist",tabIndex:0,style:{transform:`translateX(${f}%)`}},i==null?void 0:i.map((e,t)=>e.yearFlag?s.createElement("li",{role:"none","aria-hidden":"true",className:"k-timeline-track-item k-timeline-flag-wrap",style:{flex:`1 0 ${j}`},key:t},s.createElement("span",{className:"k-timeline-flag"},e.yearFlag)):s.createElement("li",{role:"tab",className:v.classNames("k-timeline-track-item",{"k-focus":t===a}),"aria-selected":t===a||void 0,"aria-describedby":t===a?V:void 0,style:{flex:`1 0 ${j}`},key:t},s.createElement("div",{className:"k-timeline-date-wrap"},s.createElement("span",{className:"k-timeline-date"},T.formatDate(e.date,$))),s.createElement("span",{onClick:n=>E(t,n),className:"k-timeline-circle"})))))),s.createElement("div",{className:"k-timeline-events-list"},s.createElement("ul",{className:"k-timeline-scrollable-wrap",style:_===0?{...B(_)}:{...B(_),...he()}},d&&d.map((e,t)=>t===P?s.createElement("li",{key:t,className:"k-timeline-event",style:{transform:`translate3d(${F[t]}px, 0px, 0px)`}},e&&s.createElement(Te.TimelineCard,{tabindex:0,panelId:V,eventData:e,ariaLabel:e.date?T.formatDate(e.date,$):void 0,onActionClick:ce,horizontal:!0,collapsible:!1,calloutStyle:{left:`${Z}px`}})):null))))};G.propTypes={onActionClick:ge.func};exports.TimelineHorizontal=G;