primereact/carousel/carousel.esm.min.js

PrimeReact is an open source UI library for React featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with Prime

import*as e from"react";import t,{ariaLabel as n}from"primereact/api";import{usePrevious as r,useResizeListener as a,useMountEffect as l,useUpdateEffect as o,useUnmountEffect as u}from"primereact/hooks";import{Ripple as c}from"primereact/ripple";import{ObjectUtils as i,classNames as s,UniqueComponentId as p,DomHandler as m}from"primereact/utils";function f(){return f=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},f.apply(this,arguments)}function v(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function d(e){if(Array.isArray(e))return v(e)}function h(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function g(e,t){if(e){if("string"==typeof e)return v(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?v(e,t):void 0}}function b(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function y(e){if(Array.isArray(e))return e}function N(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,a,l,o,u=[],c=!0,i=!1;try{if(l=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;c=!1}else for(;!(c=(r=l.call(n)).done)&&(u.push(r.value),u.length!==t);c=!0);}catch(e){i=!0,a=e}finally{try{if(!c&&null!=n.return&&(o=n.return(),Object(o)!==o))return}finally{if(i)throw a}}return u}}function E(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function C(e,t){return y(e)||N(e,t)||g(e,t)||E()}var S={defaultProps:{__TYPE:"Carousel",id:null,value:null,page:0,header:null,footer:null,style:null,className:null,itemTemplate:null,circular:!1,showIndicators:!0,showNavigators:!0,autoplayInterval:0,numVisible:1,numScroll:1,responsiveOptions:null,orientation:"horizontal",verticalViewPortHeight:"300px",contentClassName:null,containerClassName:null,indicatorsContentClassName:null,onPageChange:null,children:void 0},getProps:function(e){return i.getMergedProps(e,S.defaultProps)},getOtherProps:function(e){return i.getDiffProps(e,S.defaultProps)}},P=e.memo((function(t){var n=t.template(t.item),r=s(t.className,"p-carousel-item",{"p-carousel-item-active":t.active,"p-carousel-item-start":t.start,"p-carousel-item-end":t.end});return e.createElement("div",{className:r},n)})),w=e.memo(e.forwardRef((function(v,y){var N=S.getProps(v),E=C(e.useState(N.numVisible),2),w=E[0],I=E[1],k=C(e.useState(N.numScroll),2),O=k[0],T=k[1],x=C(e.useState(N.page*N.numScroll*-1),2),R=x[0],A=x[1],M=C(e.useState(N.page),2),V=M[0],j=M[1],D=e.useRef(null),H=e.useRef(null),L=e.useRef(0),_=e.useRef(!!N.autoplayInterval),Y=e.useRef(""),z=e.useRef(20),X=e.useRef(null),F=e.useRef(null),U=e.useRef(null),W=e.useRef(!1),$=e.useRef(null),q=r(O),B=r(w),G=r(N.value),J=r(N.page),K="vertical"===N.orientation,Q=N.circular||!!N.autoplayInterval,Z=Q&&N.value&&N.value.length>=w,ee=N.onPageChange?N.page:V,te=N.value?Math.max(Math.ceil((N.value.length-w)/O)+1,0):0,ne=te&&N.autoplayInterval&&_.current,re=C(a({listener:function(){le()},when:N.responsiveOptions}),1)[0],ae=function(e,t){var n=R;null!=t?(n=O*t*-1,Z&&(n-=w),W.current=!1):(n+=O*e,W.current&&(n+=L.current-O*e,W.current=!1),t=Math.abs(Math.floor((Z?n+w:n)/O)));Z&&V===te-1&&-1===e?(n=-1*(N.value.length+w),t=0):Z&&0===V&&1===e?(n=0,t=te-1):t===te-1&&L.current>0&&(n+=-1*L.current-O*e,W.current=!0),H.current&&(m.removeClass(H.current,"p-items-hidden"),he(n),H.current.style.transition="transform 500ms ease 0s"),N.onPageChange?(A(n),N.onPageChange({page:t})):(j(t),A(n))},le=function(){if(H.current&&$.current){for(var e=window.innerWidth,t={numVisible:N.numVisible,numScroll:N.numScroll},n=0;n<$.current.length;n++){var r=$.current[n];parseInt(r.breakpoint,10)>=e&&(t=r)}if(O!==t.numScroll){var a=Math.floor(ee*O/t.numScroll),l=t.numScroll*a*-1;Z&&(l-=t.numVisible),A(l),T(t.numScroll),N.onPageChange?N.onPageChange({page:a}):j(a)}w!==t.numVisible&&I(t.numVisible)}},oe=function(e,t){(Q||0!==ee)&&ae(1,t),_.current=!1,e.cancelable&&e.preventDefault()},ue=function(e,t){(Q||ee<te-1)&&ae(-1,t),_.current=!1,e.cancelable&&e.preventDefault()},ce=function(e,t){t>ee?ue(e,t):t<ee&&oe(e,t)},ie=function(e){H.current&&"transform"===e.propertyName&&(m.addClass(H.current,"p-items-hidden"),H.current.style.transition="",0!==V&&V!==te-1||!Z||he(R))},se=function(e){var t=e.changedTouches[0];X.current={x:t.pageX,y:t.pageY}},pe=function(e){e.cancelable&&e.preventDefault()},me=function(e){var t=e.changedTouches[0];fe(e,K?t.pageY-X.current.y:t.pageX-X.current.x)},fe=function(e,t){Math.abs(t)>z&&(t<0?ue(e):oe(e))},ve=function(){F.current&&clearInterval(F.current)},de=function(){U.current||(U.current=m.createInlineStyle(t.nonce));var e,n="\n            .p-carousel[".concat(Y.current,"] .p-carousel-item {\n                flex: 1 0 ").concat(100/w,"%\n            }\n        ");if(N.responsiveOptions){$.current=d(e=N.responsiveOptions)||h(e)||g(e)||b(),$.current.sort((function(e,n){return i.sort(e.breakpoint,n.breakpoint,-1,t.locale,t.nullSortOrder)}));for(var r=0;r<$.current.length;r++){var a=$.current[r];n+="\n                    @media screen and (max-width: ".concat(a.breakpoint,") {\n                        .p-carousel[").concat(Y.current,"] .p-carousel-item {\n                            flex: 1 0 ").concat(100/a.numVisible,"%\n                        }\n                    }\n                ")}}U.current.innerHTML=n},he=function(e){H.current&&(H.current.style.transform=K?"translate3d(0, ".concat(e*(100/w),"%, 0)"):"translate3d(".concat(e*(100/w),"%, 0, 0)"))};e.useImperativeHandle(y,(function(){return{props:N,getElement:function(){return D.current}}})),l((function(){D.current&&(Y.current=p(),D.current.setAttribute(Y.current,"")),de(),le(),he(R),re()})),o((function(){var e=!1,t=R;if(N.autoplayInterval&&ve(),q!==O||B!==w||N.value&&G&&G.length!==N.value.length){L.current=(N.value.length-w)%O;var n=ee;0!==te&&n>=te&&(n=te-1,N.onPageChange?N.onPageChange({page:n}):j(n),e=!0),t=n*O*-1,Z&&(t-=w),n===te-1&&L.current>0?(t+=-1*L.current+O,W.current=!0):W.current=!1,t!==R&&(A(t),e=!0),he(t)}Z&&(0===V?t=-1*w:0===t&&(t=-1*N.value.length,L.current>0&&(W.current=!0)),t!==R&&(A(t),e=!0)),J!==N.page&&(N.page>J&&N.page<=te-1?ae(-1,N.page):N.page<J&&ae(1,N.page)),!e&&ne&&(F.current=setInterval((function(){ae(-1,V===te-1?0:V+1)}),N.autoplayInterval))})),u((function(){N.autoplayInterval&&ve()}));var ge=function(){if(N.value&&N.value.length){var t=null,n=null;if(Z){var r=null;t=(r=N.value.slice(-1*w)).map((function(t,n){return e.createElement(P,{key:n+"_scloned",className:"p-carousel-item-cloned",template:N.itemTemplate,item:t,active:-1*R===N.value.length+w,start:0===n,end:n===r.length-1})})),n=(r=N.value.slice(0,w)).map((function(t,n){return e.createElement(P,{key:n+"_fcloned",className:"p-carousel-item-cloned",template:N.itemTemplate,item:t,active:0===R,start:0===n,end:n===r.length-1})}))}var a=N.value.map((function(t,n){var r=Z?-1*(R+w):-1*R,a=r+w-1;return e.createElement(P,{key:n,template:N.itemTemplate,item:t,active:r<=n&&a>=n,start:r===n,end:a===n})}));return e.createElement(e.Fragment,null,t,a,n)}},be=function(){if(N.showNavigators){var t=(!Q||N.value&&N.value.length<w)&&0===ee,r=s("p-carousel-prev p-link",{"p-disabled":t}),a=s("p-carousel-prev-icon pi",{"pi-chevron-left":!K,"pi-chevron-up":K});return e.createElement("button",{type:"button",className:r,onClick:oe,disabled:t,"aria-label":n("previousPageLabel")},e.createElement("span",{className:a}),e.createElement(c,null))}return null},ye=function(){if(N.showNavigators){var t=(!Q||N.value&&N.value.length<w)&&(ee===te-1||0===te),r=s("p-carousel-next p-link",{"p-disabled":t}),a=s("p-carousel-next-icon pi",{"pi-chevron-right":!K,"pi-chevron-down":K});return e.createElement("button",{type:"button",className:r,onClick:ue,disabled:t,"aria-label":n("nextPageLabel")},e.createElement("span",{className:a}),e.createElement(c,null))}return null},Ne=function(t){var r="carousel-indicator-"+t,a=s("p-carousel-indicator",{"p-highlight":ee===t});return e.createElement("li",{key:r,className:a},e.createElement("button",{type:"button",className:"p-link",onClick:function(e){return ce(e,t)},"aria-label":"".concat(n("pageLabel")," ").concat(t+1)},e.createElement(c,null)))},Ee=S.getOtherProps(N),Ce=s("p-carousel p-component",{"p-carousel-vertical":K,"p-carousel-horizontal":!K},N.className),Se=s("p-carousel-content",N.contentClassName),Pe=function(){var t=ge(),n=K?N.verticalViewPortHeight:"auto",r=be(),a=ye(),l=s("p-carousel-container",N.containerClassName);return e.createElement("div",{className:l},r,e.createElement("div",{className:"p-carousel-items-content",style:{height:n},onTouchStart:se,onTouchMove:pe,onTouchEnd:me},e.createElement("div",{ref:H,className:"p-carousel-items-container",onTransitionEnd:ie},t)),a)}(),we=function(){if(N.showIndicators){for(var t=s("p-carousel-indicators p-reset",N.indicatorsContentClassName),n=[],r=0;r<te;r++)n.push(Ne(r));return e.createElement("ul",{className:t},n)}return null}(),Ie=N.header?e.createElement("div",{className:"p-carousel-header"},N.header):null,ke=N.footer?e.createElement("div",{className:"p-carousel-footer"},N.footer):null;return e.createElement("div",f({ref:D,id:N.id,className:Ce,style:N.style},Ee),Ie,e.createElement("div",{className:Se},Pe,we),ke)})));P.displayName="CarouselItem",w.displayName="Carousel";export{w as Carousel};