@progress/kendo-react-scrollview/ScrollView.js

React ScrollView (React Carousel) displays images or content in a horizontally scrollable collection. KendoReact ScrollView 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 H=require("react"),l=require("prop-types"),s=require("@progress/kendo-react-common"),$=require("./package-metadata.js"),b=require("@progress/kendo-svg-icons"),F=require("@progress/kendo-react-intl"),f=require("./messages.js");function G(c){const w=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const v in c)if(v!=="default"){const h=Object.getOwnPropertyDescriptor(c,v);Object.defineProperty(w,v,h.get?h:{enumerable:!0,get:()=>c[v]})}}return w.default=c,Object.freeze(w)}const e=G(H),N=e.forwardRef((c,w)=>{const v=!s.validatePackage($.packageMetadata,{component:"ScrollView"}),{className:h,style:T,children:V,pagerOverlay:y=g.pageOverlay,pageable:q=g.pageable,arrows:j=g.arrows,endless:n=g.endless,activeView:z=g.activeView,automaticViewChange:R=g.automaticViewChange,automaticViewChangeInterval:S=g.automaticViewChangeInterval}=c,[a,o]=e.useState(z||1),u=e.useRef(null),k=e.useRef(null),C=e.useRef(null),r=e.Children.toArray(V),E=s.useRtl(u,c.dir),m=E==="rtl",L=F.useLocalization(),O=e.useCallback(()=>{u.current&&u.current.focus()},[]),A=e.useCallback(()=>({element:u.current,focus:O}),[O]);e.useImperativeHandle(w,A);const d=e.useCallback(()=>{n?a>1?o(a-1):o(r.length):a>1&&o(a-1)},[a,r.length,n]),p=e.useCallback(()=>{n?a<r.length?o(a+1):o(1):a<r.length&&o(a+1)},[a,r.length,n]),x=e.useCallback(t=>{var P,K;const i=t.target;i.classList.contains("k-scrollview-prev")?(d(),!((n||a>2)&&r.length>0)&&((P=u.current)==null||P.focus())):i.classList.contains("k-scrollview-next")&&(p(),!((n||a<r.length-1)&&r.length>0)&&((K=u.current)==null||K.focus()))},[a,r.length,n]);e.useEffect(()=>{const t=r.length;k.current&&(k.current.style.setProperty("--kendo-scrollview-views",`${t}`),k.current.style.setProperty("--kendo-scrollview-current",`${a}`))},[r,a,E]);function D(){C.current&&clearTimeout(C.current)}e.useEffect(()=>{if(R)return D(),C.current=setTimeout(()=>o(t=>t===r.length?n?1:t:t+1),S),()=>{D()}},[R,S,r.length,a,n]);const I=e.useCallback(t=>{switch(t.key){case s.KEYS.left:t.preventDefault(),m?p():d();break;case s.KEYS.right:t.preventDefault(),m?d():p();break;case s.KEYS.space:t.preventDefault(),x(t);break;case s.KEYS.enter:t.preventDefault(),x(t);break}},[m,p,d]),M=e.useMemo(()=>s.classNames("k-scrollview",{"k-scrollview-light":y==="light","k-scrollview-dark":y==="dark"},h),[h,y]),W=e.Children.map(V||null,(t,i)=>e.createElement("div",{className:"k-scrollview-view","aria-hidden":a!==i+1},t)),Y=e.useCallback(()=>{let t;return t=a>1,(n||t)&&r.length>0},[a,r.length,n]),_=e.useCallback(()=>{let t;return t=a<r.length,(n||t)&&r.length>0},[a,r.length,n]);return e.createElement("div",{className:M,style:T,ref:u,tabIndex:0,dir:E,onKeyDown:I},e.createElement("div",{className:"k-scrollview-wrap k-scrollview-animate",ref:k},W),e.createElement("div",{className:"k-scrollview-elements"},j&&e.createElement(e.Fragment,null,Y()&&e.createElement("span",{className:"k-scrollview-prev","aria-label":L.toLanguageString(f.next,f.messages[f.next]),role:"button",tabIndex:0,onClick:d,onKeyDown:I},e.createElement(s.IconWrap,{name:m?"chevron-right":"chevron-left",icon:m?b.chevronRightIcon:b.chevronLeftIcon,size:"xxxlarge"})),_()&&e.createElement("span",{className:"k-scrollview-next","aria-label":L.toLanguageString(f.previous,f.messages[f.previous]),role:"button",tabIndex:0,onClick:p,onKeyDown:I},e.createElement(s.IconWrap,{name:m?"chevron-left":"chevron-right",icon:m?b.chevronLeftIcon:b.chevronRightIcon,size:"xxxlarge"}))),q&&e.createElement("div",{className:"k-scrollview-nav-wrap"},e.createElement("div",{className:"k-scrollview-nav"},r.map((t,i)=>e.createElement("span",{className:s.classNames("k-link",{"k-primary":a===i+1}),key:i+1,onClick:()=>o(i+1)}))))),e.createElement("div",{"aria-live":"polite","aria-atomic":"true",className:"k-sr-only"}),v&&e.createElement(s.WatermarkOverlay,null))});N.propTypes={activeView:l.number,arrows:l.bool,automaticViewChange:l.bool,automaticViewChangeInterval:l.number,children:l.any,className:l.string,dir:l.string,endless:l.bool,pageable:l.bool,pageOverlay:l.string,style:l.object};const g={activeView:1,arrows:!0,automaticViewChange:!0,automaticViewChangeInterval:5e3,endless:!1,pageable:!0,pageOverlay:"none"};N.displayName="KendoScrollView";exports.ScrollView=N;