primereact
Version:
PrimeReact is an open source UI library for React featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with Prime
2 lines (1 loc) • 9.52 kB
JavaScript
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 u,useUnmountEffect as o}from"primereact/hooks";import{Ripple as c}from"primereact/ripple";import{classNames as i,UniqueComponentId as s,ObjectUtils as m,DomHandler as p}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 y(){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 b(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=[],u=!0,o=!1;try{for(n=n.call(e);!(u=(r=n.next()).done)&&(l.push(r.value),!t||l.length!==t);u=!0);}catch(e){o=!0,a=e}finally{try{u||null==n.return||n.return()}finally{if(o)throw a}}return l}}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 b(e)||N(e,t)||g(e,t)||E()}var S=e.memo((function(t){var n=t.template(t.item),r=i(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,b){var N=C(e.useState(v.numVisible),2),E=N[0],I=N[1],P=C(e.useState(v.numScroll),2),k=P[0],T=P[1],x=C(e.useState(v.page*v.numScroll*-1),2),R=x[0],O=x[1],A=C(e.useState(v.page),2),V=A[0],M=A[1],j=e.useRef(null),D=e.useRef(null),H=e.useRef(0),L=e.useRef(!!v.autoplayInterval),_=e.useRef(""),Y=e.useRef(20),z=e.useRef(null),X=e.useRef(null),F=e.useRef(null),K=e.useRef(!1),U=e.useRef(null),W=r(k),$=r(E),q=r(v.value),B=r(v.page),G="vertical"===v.orientation,J=v.circular||!!v.autoplayInterval,Q=J&&v.value&&v.value.length>=E,Z=v.onPageChange?v.page:V,ee=v.value?Math.max(Math.ceil((v.value.length-E)/k)+1,0):0,te=ee&&v.autoplayInterval&&L.current,ne=C(a({listener:function(){ae()},when:v.responsiveOptions}),1)[0],re=function(e,t){var n=R;null!=t?(n=k*t*-1,Q&&(n-=E),K.current=!1):(n+=k*e,K.current&&(n+=H.current-k*e,K.current=!1),t=Math.abs(Math.floor((Q?n+E:n)/k)));Q&&V===ee-1&&-1===e?(n=-1*(v.value.length+E),t=0):Q&&0===V&&1===e?(n=0,t=ee-1):t===ee-1&&H.current>0&&(n+=-1*H.current-k*e,K.current=!0),D.current&&(p.removeClass(D.current,"p-items-hidden"),de(n),D.current.style.transition="transform 500ms ease 0s"),v.onPageChange?(O(n),v.onPageChange({page:t})):(M(t),O(n))},ae=function(){if(D.current&&U.current){for(var e=window.innerWidth,t={numVisible:v.numVisible,numScroll:v.numScroll},n=0;n<U.current.length;n++){var r=U.current[n];parseInt(r.breakpoint,10)>=e&&(t=r)}if(k!==t.numScroll){var a=Math.floor(Z*k/t.numScroll),l=t.numScroll*a*-1;Q&&(l-=t.numVisible),O(l),T(t.numScroll),v.onPageChange?v.onPageChange({page:a}):M(a)}E!==t.numVisible&&I(t.numVisible)}},le=function(e,t){(J||0!==Z)&&re(1,t),L.current=!1,e.cancelable&&e.preventDefault()},ue=function(e,t){(J||Z<ee-1)&&re(-1,t),L.current=!1,e.cancelable&&e.preventDefault()},oe=function(e,t){t>Z?ue(e,t):t<Z&&le(e,t)},ce=function(e){D.current&&"transform"===e.propertyName&&(p.addClass(D.current,"p-items-hidden"),D.current.style.transition="",0!==V&&V!==ee-1||!Q||de(R))},ie=function(e){var t=e.changedTouches[0];z.current={x:t.pageX,y:t.pageY}},se=function(e){e.cancelable&&e.preventDefault()},me=function(e){var t=e.changedTouches[0];pe(e,G?t.pageY-z.current.y:t.pageX-z.current.x)},pe=function(e,t){Math.abs(t)>Y&&(t<0?ue(e):le(e))},fe=function(){X.current&&clearInterval(X.current)},ve=function(){F.current||(F.current=p.createInlineStyle(t.nonce));var e,n="\n .p-carousel[".concat(_.current,"] .p-carousel-item {\n flex: 1 0 ").concat(100/E,"%\n }\n ");if(v.responsiveOptions){U.current=d(e=v.responsiveOptions)||h(e)||g(e)||y(),U.current.sort((function(e,n){return m.sort(e.breakpoint,n.breakpoint,-1,t.locale,t.nullSortOrder)}));for(var r=0;r<U.current.length;r++){var a=U.current[r];n+="\n @media screen and (max-width: ".concat(a.breakpoint,") {\n .p-carousel[").concat(_.current,"] .p-carousel-item {\n flex: 1 0 ").concat(100/a.numVisible,"%\n }\n }\n ")}}F.current.innerHTML=n},de=function(e){D.current&&(D.current.style.transform=G?"translate3d(0, ".concat(e*(100/E),"%, 0)"):"translate3d(".concat(e*(100/E),"%, 0, 0)"))};e.useImperativeHandle(b,(function(){return{props:v,getElement:function(){return j.current}}})),l((function(){j.current&&(_.current=s(),j.current.setAttribute(_.current,"")),ve(),ae(),de(R),ne()})),u((function(){var e=!1,t=R;if(v.autoplayInterval&&fe(),W!==k||$!==E||v.value&&q&&q.length!==v.value.length){H.current=(v.value.length-E)%k;var n=Z;0!==ee&&n>=ee&&(n=ee-1,v.onPageChange?v.onPageChange({page:n}):M(n),e=!0),t=n*k*-1,Q&&(t-=E),n===ee-1&&H.current>0?(t+=-1*H.current+k,K.current=!0):K.current=!1,t!==R&&(O(t),e=!0),de(t)}Q&&(0===V?t=-1*E:0===t&&(t=-1*v.value.length,H.current>0&&(K.current=!0)),t!==R&&(O(t),e=!0)),B!==v.page&&(v.page>B&&v.page<=ee-1?re(-1,v.page):v.page<B&&re(1,v.page)),!e&&te&&(X.current=setInterval((function(){re(-1,V===ee-1?0:V+1)}),v.autoplayInterval))})),o((function(){v.autoplayInterval&&fe()}));var he=function(){if(v.value&&v.value.length){var t=null,n=null;if(Q){var r=null;t=(r=v.value.slice(-1*E)).map((function(t,n){return e.createElement(S,{key:n+"_scloned",className:"p-carousel-item-cloned",template:v.itemTemplate,item:t,active:-1*R===v.value.length+E,start:0===n,end:n===r.length-1})})),n=(r=v.value.slice(0,E)).map((function(t,n){return e.createElement(S,{key:n+"_fcloned",className:"p-carousel-item-cloned",template:v.itemTemplate,item:t,active:0===R,start:0===n,end:n===r.length-1})}))}var a=v.value.map((function(t,n){var r=Q?-1*(R+E):-1*R,a=r+E-1;return e.createElement(S,{key:n,template:v.itemTemplate,item:t,active:r<=n&&a>=n,start:r===n,end:a===n})}));return e.createElement(e.Fragment,null,t,a,n)}},ge=function(){if(v.showNavigators){var t=(!J||v.value&&v.value.length<E)&&0===Z,r=i("p-carousel-prev p-link",{"p-disabled":t}),a=i("p-carousel-prev-icon pi",{"pi-chevron-left":!G,"pi-chevron-up":G});return e.createElement("button",{type:"button",className:r,onClick:le,disabled:t,"aria-label":n("previousPageLabel")},e.createElement("span",{className:a}),e.createElement(c,null))}return null},ye=function(){if(v.showNavigators){var t=(!J||v.value&&v.value.length<E)&&(Z===ee-1||0===ee),r=i("p-carousel-next p-link",{"p-disabled":t}),a=i("p-carousel-next-icon pi",{"pi-chevron-right":!G,"pi-chevron-down":G});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},be=function(t){var r="carousel-indicator-"+t,a=i("p-carousel-indicator",{"p-highlight":Z===t});return e.createElement("li",{key:r,className:a},e.createElement("button",{type:"button",className:"p-link",onClick:function(e){return oe(e,t)},"aria-label":"".concat(n("pageLabel")," ").concat(t+1)},e.createElement(c,null)))},Ne=m.findDiffKeys(v,w.defaultProps),Ee=i("p-carousel p-component",{"p-carousel-vertical":G,"p-carousel-horizontal":!G},v.className),Ce=i("p-carousel-content",v.contentClassName),Se=function(){var t=he(),n=G?v.verticalViewPortHeight:"auto",r=ge(),a=ye(),l=i("p-carousel-container",v.containerClassName);return e.createElement("div",{className:l},r,e.createElement("div",{className:"p-carousel-items-content",style:{height:n},onTouchStart:ie,onTouchMove:se,onTouchEnd:me},e.createElement("div",{ref:D,className:"p-carousel-items-container",onTransitionEnd:ce},t)),a)}(),we=function(){if(v.showIndicators){for(var t=i("p-carousel-indicators p-reset",v.indicatorsContentClassName),n=[],r=0;r<ee;r++)n.push(be(r));return e.createElement("ul",{className:t},n)}return null}(),Ie=v.header?e.createElement("div",{className:"p-carousel-header"},v.header):null,Pe=v.footer?e.createElement("div",{className:"p-carousel-footer"},v.footer):null;return e.createElement("div",f({ref:j,id:v.id,className:Ee,style:v.style},Ne),Ie,e.createElement("div",{className:Ce},Se,we),Pe)})));S.displayName="CarouselItem",w.displayName="Carousel",w.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};export{w as Carousel};