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