primereact
Version:
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
2 lines (1 loc) • 16.9 kB
JavaScript
import*as e from"react";import t,{PrimeReactContext as n,localeOption as r,ariaLabel as a}from"primereact/api";import{ComponentBase as o,useHandleStyle as i}from"primereact/componentbase";import{useMergeProps as c,usePrevious as l,useResizeListener as u,useMountEffect as s,useUpdateEffect as p}from"primereact/hooks";import{ChevronDownIcon as m}from"primereact/icons/chevrondown";import{ChevronLeftIcon as f}from"primereact/icons/chevronleft";import{ChevronRightIcon as d}from"primereact/icons/chevronright";import{ChevronUpIcon as v}from"primereact/icons/chevronup";import{Ripple as h}from"primereact/ripple";import{classNames as b,UniqueComponentId as g,DomHandler as y,ObjectUtils as x,IconUtils as w}from"primereact/utils";function I(e){return I="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},I(e)}function S(e,t){if("object"!=I(e)||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!=I(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function N(e){var t=S(e,"string");return"symbol"==I(t)?t:t+""}function E(e,t,n){return(t=N(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function C(){return C=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},C.apply(null,arguments)}function O(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}function P(e){if(Array.isArray(e))return O(e)}function j(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function k(e,t){if(e){if("string"==typeof e)return O(e,t);var n={}.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)?O(e,t):void 0}}function A(){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 D(e){return P(e)||j(e)||k(e)||A()}function R(e){if(Array.isArray(e))return e}function T(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,a,o,i,c=[],l=!0,u=!1;try{if(o=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;l=!1}else for(;!(l=(r=o.call(n)).done)&&(c.push(r.value),c.length!==t);l=!0);}catch(e){u=!0,a=e}finally{try{if(!l&&null!=n.return&&(i=n.return(),Object(i)!==i))return}finally{if(u)throw a}}return c}}function B(){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 V(e,t){return R(e)||T(e,t)||k(e,t)||B()}var M=o.extend({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,prevIcon:null,nextIcon:null,responsiveOptions:null,orientation:"horizontal",verticalViewPortHeight:"300px",contentClassName:null,containerClassName:null,indicatorsContentClassName:null,onPageChange:null,children:void 0},css:{classes:{root:function(e){var t=e.isVertical;return b("p-carousel p-component",{"p-carousel-vertical":t,"p-carousel-horizontal":!t})},container:"p-carousel-container",content:"p-carousel-content",indicators:"p-carousel-indicators p-reset",header:"p-carousel-header",footer:"p-carousel-footer",itemsContainer:"p-carousel-items-container",itemsContent:"p-carousel-items-content",previousButton:function(e){return b("p-carousel-prev p-link",{"p-disabled":e.isDisabled})},previousButtonIcon:"p-carousel-prev-icon",nextButton:function(e){return b("p-carousel-next p-link",{"p-disabled":e.isDisabled})},nextButtonIcon:"p-carousel-next-icon",indicator:function(e){return b("p-carousel-indicator",{"p-highlight":e.isActive})},indicatorButton:"p-link",itemCloned:function(e){var t=e.itemProps;return b(t.className,"p-carousel-item",{"p-carousel-item-active":t.active,"p-carousel-item-start":t.start,"p-carousel-item-end":t.end})},item:function(e){var t=e.itemProps;return b(t.className,"p-carousel-item",{"p-carousel-item-active":t.active,"p-carousel-item-start":t.start,"p-carousel-item-end":t.end})}},styles:"\n@layer primereact {\n .p-carousel {\n display: flex;\n flex-direction: column;\n }\n \n .p-carousel-content {\n display: flex;\n flex-direction: column;\n overflow: auto;\n }\n \n .p-carousel-prev,\n .p-carousel-next {\n align-self: center;\n flex-grow: 0;\n flex-shrink: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n position: relative;\n }\n \n .p-carousel-container {\n display: flex;\n flex-direction: row;\n }\n \n .p-carousel-items-content {\n overflow: hidden;\n width: 100%;\n }\n \n .p-carousel-items-container {\n display: flex;\n flex-direction: row;\n }\n \n .p-carousel-indicators {\n display: flex;\n flex-direction: row;\n justify-content: center;\n flex-wrap: wrap;\n }\n \n .p-carousel-indicator > button {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n \n /* Vertical */\n .p-carousel-vertical .p-carousel-container {\n flex-direction: column;\n }\n \n .p-carousel-vertical .p-carousel-items-container {\n flex-direction: column;\n height: 100%;\n }\n \n /* Keyboard Support */\n .p-items-hidden .p-carousel-item {\n visibility: hidden;\n }\n \n .p-items-hidden .p-carousel-item.p-carousel-item-active {\n visibility: visible;\n }\n}\n",inlineStyles:{itemsContent:function(e){return{height:e.height}}}}});function H(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function L(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?H(Object(n),!0).forEach((function(t){E(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):H(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var X=e.memo((function(t){var n=c(),r=t.ptm,a=t.cx,o=t.className&&"p-carousel-item-cloned"===t.className?"itemCloned":"item",i=t.template(t.item),l=n({className:a(o,{itemProps:t}),role:t.role,"aria-roledescription":t.ariaRoledescription,"aria-label":t.ariaLabel,"aria-hidden":t.ariaHidden,"data-p-carousel-item-active":t.active,"data-p-carousel-item-start":t.start,"data-p-carousel-item-end":t.end},r(o));return e.createElement("div",l,i)})),_=e.memo(e.forwardRef((function(o,I){var S=c(),N=e.useContext(n),E=M.getProps(o,N),O=V(e.useState(E.numVisible),2),P=O[0],j=O[1],k=V(e.useState(E.numScroll),2),A=k[0],R=k[1],T=V(e.useState(E.page*E.numScroll*-1),2),B=T[0],H=T[1],_=V(e.useState(E.page),2),U=_[0],Y=_[1],z=M.setMetaData({props:E,state:{numVisible:P,numScroll:A,totalShiftedItems:B,page:U}}),J=z.ptm,K=z.cx,F=z.sx,W=z.isUnstyled;i(M.css.styles,W,{name:"carousel"});var $=e.useRef(null),q=e.useRef(null),G=e.useRef(0),Q=e.useRef(!!E.autoplayInterval),Z=e.useRef(""),ee=e.useRef(20),te=e.useRef(null),ne=e.useRef(null),re=e.useRef(null),ae=e.useRef(null),oe=e.useRef(!1),ie=e.useRef(null),ce=l(A),le=l(P),ue=l(E.value),se=l(E.page),pe="vertical"===E.orientation,me=E.circular||!!E.autoplayInterval,fe=me&&E.value&&E.value.length>=P,de=E.value?Math.max(Math.ceil((E.value.length-P)/A)+1,0):0,ve=de&&E.autoplayInterval&&Q.current,he=E.onPageChange&&!ve,be=he?E.page:U,ge=V(u({listener:function(){xe()},when:E.responsiveOptions}),1)[0],ye=function(e,t){var n=B;null!=t?(n=A*t*-1,fe&&(n-=P),oe.current=!1):(n+=A*e,oe.current&&(n+=G.current-A*e,oe.current=!1),t=Math.abs(Math.floor((fe?n+P:n)/A)));fe&&U===de-1&&-1===e?(n=-1*(E.value.length+P),t=0):fe&&0===U&&1===e?(n=0,t=de-1):t===de-1&&G.current>0&&(n+=-1*G.current-A*e,oe.current=!0),q.current&&(!W()&&y.removeClass(q.current,"p-items-hidden"),Xe(n),q.current.style.transition="transform 500ms ease 0s"),_e(t),H(n)},xe=function(){if(q.current&&ie.current){for(var e=window.innerWidth,t={numVisible:E.numVisible,numScroll:E.numScroll},n=0;n<ie.current.length;n++){var r=ie.current[n];parseInt(r.breakpoint,10)>=e&&(t=r)}if(A!==t.numScroll){var a=Math.floor(be*A/t.numScroll),o=t.numScroll*a*-1;fe&&(o-=t.numVisible),H(o),R(t.numScroll),_e(a)}P!==t.numVisible&&j(t.numVisible)}},we=function(e,t){(me||0!==be)&&ye(1,t),Q.current=!1,e.cancelable&&e.preventDefault()},Ie=function(e,t){(me||be<de-1)&&ye(-1,t),Q.current=!1,e.cancelable&&e.preventDefault()},Se=function(e,t){t>be?Ie(e,t):t<be&&we(e,t)},Ne=function(e){q.current&&"transform"===e.propertyName&&(y.addClass(q.current,"p-items-hidden"),q.current.style.transition="",0!==U&&U!==de-1||!fe||Xe(B))},Ee=function(e){var t=e.changedTouches[0];te.current={x:t.pageX,y:t.pageY}},Ce=function(e){e.cancelable&&e.preventDefault()},Oe=function(e){var t=e.changedTouches[0];Pe(e,pe?t.pageY-te.current.y:t.pageX-te.current.x)},Pe=function(e,t){Math.abs(t)>ee.current&&(t<0?Ie(e):we(e))},je=function(e){switch(e.code){case"ArrowRight":ke();break;case"ArrowLeft":Ae();break;case"Home":De(),e.preventDefault();break;case"End":Re(),e.preventDefault();break;case"ArrowUp":case"ArrowDown":e.preventDefault();break;case"Tab":Te()}},ke=function(){var e=D(y.find(ae.current,'[data-pc-section="indicator"]')),t=Be();Ve(t,t+1===e.length?e.length-1:t+1)},Ae=function(){var e=Be();Ve(e,e-1<=0?0:e-1)},De=function(){var e=Be();Ve(e,0)},Re=function(){var e=D(y.find(ae.current,'[data-pc-section="indicator"]r')),t=Be();Ve(t,e.length-1)},Te=function(){var e=D(y.find(ae.current,'[data-pc-section="indicator"]')),t=e.findIndex((function(e){return!0===y.getAttribute(e,"data-p-highlight")})),n=y.findSingle(ae.current,'[data-pc-section="indicator"] > button[tabindex="0"]'),r=e.findIndex((function(e){return e===n.parentElement}));e[r].children[0].tabIndex="-1",e[t].children[0].tabIndex="0"},Be=function(){var e=D(y.find(ae.current,'[data-pc-section="indicator"]')),t=y.findSingle(ae.current,'[data-pc-section="indicator"] > button[tabindex="0"]');return e.findIndex((function(e){return e===t.parentElement}))},Ve=function(e,t){var n=D(y.find(ae.current,'[data-pc-section="indicator"]'));n[e].children[0].tabIndex="-1",n[t].children[0].tabIndex="0",n[t].children[0].focus()},Me=function(){E.autoplayInterval>0&&(ne.current=setInterval((function(){ye(-1,U===de-1?0:U+1)}),E.autoplayInterval))},He=function(){ne.current&&clearInterval(ne.current)},Le=function(){re.current||(re.current=y.createInlineStyle(N&&N.nonce||t.nonce,N&&N.styleContainer));var e="\n .p-carousel[".concat(Z.current,"] .p-carousel-item {\n flex: 1 0 ").concat(100/P,"%\n }\n ");if(E.responsiveOptions){var n=x.localeComparator(N&&N.locale||t.locale);ie.current=D(E.responsiveOptions),ie.current.sort((function(e,r){return x.sort(e.breakpoint,r.breakpoint,-1,n,N&&N.nullSortOrder||t.nullSortOrder)}));for(var r=0;r<ie.current.length;r++){var a=ie.current[r];e+="\n @media screen and (max-width: ".concat(a.breakpoint,") {\n .p-carousel[").concat(Z.current,"] .p-carousel-item {\n flex: 1 0 ").concat(100/a.numVisible,"%\n }\n }\n ")}xe()}re.current.innerHTML=e},Xe=function(e){q.current&&(q.current.style.transform=pe?"translate3d(0, ".concat(e*(100/P),"%, 0)"):"translate3d(".concat(e*(100/P),"%, 0, 0)"))},_e=function(e){!he&&Y(e),E.onPageChange&&E.onPageChange({page:e})};e.useImperativeHandle(I,(function(){return{props:E,startAutoplay:Me,stopAutoplay:He,getElement:function(){return $.current}}})),s((function(){$.current&&(Z.current=g(),$.current.setAttribute(Z.current,"")),re.current||(xe(),Xe(B),ge())})),p((function(){var e=!1,t=B;if(Le(),E.autoplayInterval&&He(),ce!==A||le!==P||E.value&&ue&&ue.length!==E.value.length){G.current=(E.value.length-P)%A;var n=be;0!==de&&n>=de&&(_e(n=de-1),e=!0),t=n*A*-1,fe&&(t-=P),n===de-1&&G.current>0?(t+=-1*G.current+A,oe.current=!0):oe.current=!1,t!==B&&(H(t),e=!0),Xe(t)}return fe&&(0===U?t=-1*P:0===t&&(t=-1*E.value.length,G.current>0&&(oe.current=!0)),t!==B&&(H(t),e=!0)),se!==E.page&&(E.page>se&&E.page<=de-1?ye(-1,E.page):E.page<se&&ye(1,E.page)),!e&&ve&&Me(),function(){E.autoplayInterval&&He(),re.current=y.removeInlineStyle(re.current)}}));var Ue,Ye,ze,Je,Ke,Fe,We,$e=function(e){return a("slideNumber",{slideNumber:e})},qe=function(){if(E.value&&E.value.length){var t=null,n=null;if(fe){var a=null;t=(a=E.value.slice(-1*P)).map((function(t,n){return e.createElement(X,{key:n+"_scloned",className:"p-carousel-item-cloned",template:E.itemTemplate,item:t,active:-1*B===E.value.length+P,start:0===n,end:n===a.length-1,ptm:J,cx:K})})),n=(a=E.value.slice(0,P)).map((function(t,n){return e.createElement(X,{key:n+"_fcloned",className:"p-carousel-item-cloned",template:E.itemTemplate,item:t,active:0===B,start:0===n,end:n===a.length-1,ptm:J,cx:K})}))}var o=E.value.map((function(t,n){var a=fe?-1*(B+P):-1*B,o=a+P-1,i=a<=n&&o>=n,c=a===n,l=o===n,u=a>n||o<n||void 0,s=$e(n),p=r("aria")?r("aria").slide:void 0;return e.createElement(X,{key:n,template:E.itemTemplate,item:t,active:i,start:c,ariaHidden:u,ariaLabel:s,ariaRoledescription:p,role:"group",end:l,ptm:J,cx:K})}));return e.createElement(e.Fragment,null,t,o,n)}},Ge=function(){if(E.showNavigators){var t=(!me||E.value&&E.value.length<P)&&0===be,n=S({className:K("previousButtonIcon")},J("previousButtonIcon")),a=w.getJSXIcon(pe?E.prevIcon||e.createElement(v,n):E.prevIcon||e.createElement(f,n),L({},n),{props:E}),o=S({type:"button",className:K("previousButton",{isDisabled:t}),onClick:function(e){return we(e)},disabled:t,"aria-label":r("aria")?r("aria").prevPageLabel:void 0,"data-pc-group-section":"navigator"},J("previousButton"));return e.createElement("button",o,a,e.createElement(h,null))}return null},Qe=function(){if(E.showNavigators){var t=(!me||E.value&&E.value.length<P)&&(be===de-1||0===de),n=S({className:K("nextButtonIcon")},J("nextButtonIcon")),a=w.getJSXIcon(pe?E.nextIcon||e.createElement(m,n):E.nextIcon||e.createElement(d,n),L({},n),{props:E}),o=S({type:"button",className:K("nextButton",{isDisabled:t}),onClick:function(e){return Ie(e)},disabled:t,"aria-label":r("aria")?r("aria").nextPageLabel:void 0,"data-pc-group-section":"navigator"},J("nextButton"));return e.createElement("button",o,a,e.createElement(h,null))}return null},Ze=function(t){var n,r=be===t,o=function(e){return J(e,{context:{active:r}})},i="carousel-indicator-"+t,c=S({className:K("indicator",{isActive:r}),"data-p-highlight":r},o("indicator")),l=S({type:"button",className:K("indicatorButton"),tabIndex:be===t?"0":"-1",onClick:function(e){return Se(e,t)},"aria-label":(n=t+1,a("pageLabel",{page:n})),"aria-current":be===t?"page":void 0},o("indicatorButton"));return e.createElement("li",C({},c,{key:i}),e.createElement("button",l,e.createElement(h,null)))},et=(Ue=qe(),Ye=pe?E.verticalViewPortHeight:"auto",ze=Ge(),Je=Qe(),Ke=S({className:K("itemsContent"),style:F("itemsContent",{height:Ye}),onTouchStart:function(e){return Ee(e)},onTouchMove:function(e){return Ce(e)},onTouchEnd:function(e){return Oe(e)}},J("itemsContent")),Fe=S({className:b(E.containerClassName,K("container")),"aria-live":Q.current?"polite":"off"},J("container")),We=S({className:K("itemsContainer"),onTransitionEnd:Ne},J("itemsContainer")),e.createElement("div",Fe,ze,e.createElement("div",Ke,e.createElement("div",C({ref:q},We),Ue)),Je)),tt=function(){if(E.showIndicators){for(var t=[],n=0;n<de;n++)t.push(Ze(n));var r=S({ref:ae,className:b(E.indicatorsContentClassName,K("indicators")),onKeyDown:je},J("indicators"));return e.createElement("ul",r,t)}return null}(),nt=function(){if(E.header){var t=S({className:K("header")},J("header"));return e.createElement("div",t,E.header)}return null}(),rt=function(){if(E.footer){var t=S({className:K("footer")},J("footer"));return e.createElement("div",t,E.footer)}return null}(),at=S({id:E.id,ref:$,className:b(E.className,K("root",{isVertical:pe})),style:E.style,role:"region"},M.getOtherProps(E),J("root")),ot=S({className:b(E.contentClassName,K("content"))},J("content"));return e.createElement("div",at,nt,e.createElement("div",ot,et,tt),rt)})));X.displayName="CarouselItem",_.displayName="Carousel";export{_ as Carousel};