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) • 14.7 kB
JavaScript
import*as e from"react";import t,{localeOption as n}from"primereact/api";import{CSSTransition as a}from"primereact/csstransition";import{useMountEffect as r,usePrevious as i,useResizeListener as l,useUpdateEffect as o,useInterval as c,useUnmountEffect as u}from"primereact/hooks";import{Portal as s}from"primereact/portal";import{Ripple as m}from"primereact/ripple";import{ObjectUtils as d,classNames as p,UniqueComponentId as v,DomHandler as h,ZIndexUtils as f}from"primereact/utils";function g(){return g=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},g.apply(this,arguments)}function I(e){if(Array.isArray(e))return e}function b(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var a,r,i,l,o=[],c=!0,u=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;c=!1}else for(;!(c=(a=i.call(n)).done)&&(o.push(a.value),o.length!==t);c=!0);}catch(e){u=!0,r=e}finally{try{if(!c&&null!=n.return&&(l=n.return(),Object(l)!==l))return}finally{if(u)throw r}}return o}}function x(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,a=new Array(t);n<t;n++)a[n]=e[n];return a}function y(e,t){if(e){if("string"==typeof e)return x(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)?x(e,t):void 0}}function w(){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 E(e,t){return I(e)||b(e,t)||y(e,t)||w()}var N={defaultProps:{__TYPE:"Galleria",id:null,value:null,activeIndex:0,fullScreen:!1,item:null,thumbnail:null,indicator:null,caption:null,className:null,style:null,header:null,footer:null,numVisible:3,responsiveOptions:null,showItemNavigators:!1,showThumbnailNavigators:!0,showItemNavigatorsOnHover:!1,changeItemOnIndicatorHover:!1,circular:!1,autoPlay:!1,transitionInterval:4e3,showThumbnails:!0,thumbnailsPosition:"bottom",verticalThumbnailViewPortHeight:"300px",showIndicators:!1,showIndicatorsOnItem:!1,indicatorsPosition:"bottom",baseZIndex:0,transitionOptions:null,onItemChange:null,children:void 0},getProps:function(e){return d.getMergedProps(e,N.defaultProps)},getOtherProps:function(e){return d.getDiffProps(e,N.defaultProps)}},S=e.memo(e.forwardRef((function(t,n){var a=function(){t.slideShowActive&&t.stopSlideShow&&t.stopSlideShow()},i=function(e){a(),t.onActiveItemChange({index:t.circular&&0===t.activeItemIndex?t.value.length-1:0!==t.activeItemIndex?t.activeItemIndex-1:0}),e&&e.cancelable&&e.preventDefault()},l=function(e){a(),t.onActiveItemChange({index:t.circular&&t.value.length-1===t.activeItemIndex?0:t.activeItemIndex+1}),e&&e.cancelable&&e.preventDefault()},o=function(e){a(),t.onActiveItemChange({index:e})},c=function(e){t.changeItemOnIndicatorHover&&(a(),t.onActiveItemChange({index:e}))},u=function(e,n){13===e.which&&(a(),t.onActiveItemChange({index:n}))};r((function(){t.autoPlay&&t.startSlideShow()}));var s=function(n){var a="p-galleria-indicator-"+n,r=p("p-galleria-indicator",{"p-highlight":t.activeItemIndex===n}),i=t.indicator&&t.indicator(n);return i||(i=e.createElement("button",{type:"button",tabIndex:-1,className:"p-link"},e.createElement(m,null))),e.createElement("li",{className:r,key:a,tabIndex:0,onClick:function(){return o(n)},onMouseEnter:function(){return c(n)},onKeyDown:function(e){return u(e,n)}},i)},d=t.itemTemplate&&t.itemTemplate(t.value[t.activeItemIndex]),v=function(){if(t.showItemNavigators){var n=!t.circular&&0===t.activeItemIndex,a=p("p-galleria-item-prev p-galleria-item-nav p-link",{"p-disabled":n});return e.createElement("button",{type:"button",className:a,onClick:i,disabled:n},e.createElement("span",{className:"p-galleria-item-prev-icon pi pi-chevron-left"}),e.createElement(m,null))}return null}(),h=function(){if(t.showItemNavigators){var n=!t.circular&&t.activeItemIndex===t.value.length-1,a=p("p-galleria-item-next p-galleria-item-nav p-link",{"p-disabled":n});return e.createElement("button",{type:"button",className:a,onClick:l,disabled:n},e.createElement("span",{className:"p-galleria-item-next-icon pi pi-chevron-right"}),e.createElement(m,null))}return null}(),f=function(){if(t.caption){var n=t.caption(t.value[t.activeItemIndex]);return e.createElement("div",{className:"p-galleria-caption"},n)}return null}(),g=function(){if(t.showIndicators){for(var n=p("p-galleria-indicators p-reset",t.indicatorsContentClassName),a=[],r=0;r<t.value.length;r++)a.push(s(r));return e.createElement("ul",{className:n},a)}return null}();return e.createElement("div",{ref:n,className:"p-galleria-item-wrapper"},e.createElement("div",{className:"p-galleria-item-container"},v,e.createElement("div",{className:"p-galleria-item"},d),h,f),g)})));function C(e){if(Array.isArray(e))return x(e)}function O(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function P(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}S.displayName="GalleriaItem";var T=e.memo((function(t){var n=t.active?0:null,a=t.template&&t.template(t.item),r=p("p-galleria-thumbnail-item",{"p-galleria-thumbnail-item-current":t.current,"p-galleria-thumbnail-item-active":t.active,"p-galleria-thumbnail-item-start":t.start,"p-galleria-thumbnail-item-end":t.end},t.className);return e.createElement("div",{className:r},e.createElement("div",{className:"p-galleria-thumbnail-item-content",tabIndex:n,onClick:function(e){t.onItemClick({originalEvent:e,index:t.index})},onKeyDown:function(e){13===e.which&&t.onItemClick({originalEvent:e,index:t.index})}},a))})),A=e.memo(e.forwardRef((function(n,a){var c=E(e.useState(n.numVisible),2),u=c[0],s=c[1],f=E(e.useState(0),2),g=f[0],I=f[1],b=e.useRef(null),x=e.useRef(null),w=e.useRef(""),N=e.useRef(null),S=e.useRef(null),A=i(u),k=i(n.activeItemIndex),V=E(l({listener:function(){U()},when:n.responsiveOptions}),1)[0],H=function(e){var t=g+e;e<0&&-1*t+u>n.value.length-1?t=u-n.value.length:e>0&&t>0&&(t=0),n.circular&&(e<0&&n.value.length-1===n.activeItemIndex?t=0:e>0&&0===n.activeItemIndex&&(t=u-n.value.length)),b.current&&(h.removeClass(b.current,"p-items-hidden"),b.current.style.transform=n.isVertical?"translate3d(0, ".concat(t*(100/u),"%, 0)"):"translate3d(".concat(t*(100/u),"%, 0, 0)"),b.current.style.transition="transform 500ms ease 0s"),I(t)},R=function(){n.slideShowActive&&n.stopSlideShow&&n.stopSlideShow()},j=function(){var e=Math.floor(u/2);return u%2?e:e-1},D=function(e){R();var t=0!==n.activeItemIndex?n.activeItemIndex-1:0;u-(t+g)-1>j()&&(-1*g!=0||n.circular)&&H(1),n.onActiveItemChange({index:n.circular&&0===n.activeItemIndex?n.value.length-1:t}),e.cancelable&&e.preventDefault()},M=function(e){R();var t=n.activeItemIndex+1;t+g>j()&&(-1*g<z()-1||n.circular)&&H(-1),n.onActiveItemChange({index:n.circular&&n.value.length-1===n.activeItemIndex?0:t}),e.cancelable&&e.preventDefault()},G=function(e){R();var t=e.index;if(t!==n.activeItemIndex){var a=t+g,r=0;t<n.activeItemIndex?(r=u-a-1-j())>0&&-1*g!=0&&H(r):(r=j()-a)<0&&-1*g<z()-1&&H(r),n.onActiveItemChange({index:t})}},Y=function(e){b.current&&"transform"===e.propertyName&&(h.addClass(b.current,"p-items-hidden"),b.current.style.transition="")},Z=function(e){var t=e.changedTouches[0];x.current={x:t.pageX,y:t.pageY}},K=function(e){e.cancelable&&e.preventDefault()},X=function(e){var t=e.changedTouches[0];_(e,n.isVertical?t.pageY-x.current.y:t.pageX-x.current.x)},_=function(e,t){t<0?M(e):D(e)},z=function(){return n.value.length>u?n.value.length-u+1:0},L=function(){N.current||(N.current=h.createInlineStyle(t.nonce));var e,a="\n .p-galleria-thumbnail-items[".concat(w.current,"] .p-galleria-thumbnail-item {\n flex: 1 0 ").concat(100/u,"%\n }\n ");if(n.responsiveOptions){S.current=C(e=n.responsiveOptions)||O(e)||y(e)||P(),S.current.sort((function(e,n){return d.sort(e.breakpoint,n.breakpoint,-1,t.locale,t.nullSortOrder)}));for(var r=0;r<S.current.length;r++){var i=S.current[r];a+="\n @media screen and (max-width: ".concat(i.breakpoint,") {\n .p-galleria-thumbnail-items[").concat(w.current,"] .p-galleria-thumbnail-item {\n flex: 1 0 ").concat(100/i.numVisible,"%\n }\n }\n ")}}N.current.innerHTML=a},U=function(){if(b.current&&S.current){for(var e=window.innerWidth,t={numVisible:n.numVisible},a=0;a<S.current.length;a++){var r=S.current[a];parseInt(r.breakpoint,10)>=e&&(t=r)}u!==t.numVisible&&s(t.numVisible)}};r((function(){b.current&&(w.current=v(),b.current.setAttribute(w.current,"")),L(),U(),V()})),o((function(){var e=g;A===u&&k===n.activeItemIndex||((e=n.activeItemIndex<=j()?0:n.value.length-u+j()<n.activeItemIndex?u-n.value.length:n.value.length-u<n.activeItemIndex&&u%2==0?-1*n.activeItemIndex+j()+1:-1*n.activeItemIndex+j())!==g&&I(e),b.current.style.transform=n.isVertical?"translate3d(0, ".concat(e*(100/u),"%, 0)"):"translate3d(".concat(e*(100/u),"%, 0, 0)"),k!==n.activeItemIndex&&(h.removeClass(b.current,"p-items-hidden"),b.current.style.transition="transform 500ms ease 0s"))}));var W,$,q,B,F=function(){if(n.showThumbnailNavigators){var t=!n.circular&&0===n.activeItemIndex||n.value.length<=u,a=p("p-galleria-thumbnail-prev p-link",{"p-disabled":t}),r=p("p-galleria-thumbnail-prev-icon pi",{"pi-chevron-left":!n.isVertical,"pi-chevron-up":n.isVertical});return e.createElement("button",{className:a,onClick:D,disabled:t},e.createElement("span",{className:r}),e.createElement(m,null))}return null},J=function(){if(n.showThumbnailNavigators){var t=!n.circular&&n.activeItemIndex===n.value.length-1||n.value.length<=u,a=p("p-galleria-thumbnail-next p-link",{"p-disabled":t}),r=p("p-galleria-thumbnail-next-icon pi",{"pi-chevron-right":!n.isVertical,"pi-chevron-down":n.isVertical});return e.createElement("button",{className:a,onClick:M,disabled:t},e.createElement("span",{className:r}),e.createElement(m,null))}return null},Q=(W=n.value.map((function(t,a){var r=-1*g,i=r+u-1;return e.createElement(T,{key:a,index:a,template:n.itemTemplate,item:t,active:r<=a&&i>=a,start:r===a,end:i===a,onItemClick:G,current:n.activeItemIndex===a})})),$=n.isVertical?n.contentHeight:"",q=F(),B=J(),e.createElement("div",{className:"p-galleria-thumbnail-container"},q,e.createElement("div",{className:"p-galleria-thumbnail-items-container",style:{height:$}},e.createElement("div",{ref:b,className:"p-galleria-thumbnail-items",onTransitionEnd:Y,onTouchStart:Z,onTouchMove:K,onTouchEnd:X},W)),B));return e.createElement("div",{className:"p-galleria-thumbnail-wrapper"},Q)})));T.displayName="GalleriaThumbnailItem",A.displayName="GalleriaThumbnails";var k=e.memo(e.forwardRef((function(r,i){var l=N.getProps(r),o=E(e.useState(!1),2),v=o[0],I=o[1],b=E(e.useState(l.numVisible),2),x=b[0],y=b[1],w=E(e.useState(!1),2),C=w[0],O=w[1],P=E(e.useState(l.activeIndex),2),T=P[0],k=P[1],V=e.useRef(null),H=e.useRef(null),R=e.useRef(null),j=l.onItemChange?l.activeIndex:T,D="left"===l.thumbnailsPosition||"right"===l.thumbnailsPosition;c((function(){M({index:l.circular&&l.value.length-1===j?0:j+1})}),l.transitionInterval,C);var M=function(e){l.onItemChange?l.onItemChange(e):k(e.index)},G=function(){I(!0)},Y=function(){I(!1)},Z=function(){h.addClass(document.body,"p-overflow-hidden")},K=function(){f.set("modal",R.current,t.autoZIndex,l.baseZIndex||t.zIndex.modal),h.addMultipleClasses(R.current,"p-component-overlay p-component-overlay-enter")},X=function(){l.onShow&&l.onShow()},_=function(){h.removeClass(document.body,"p-overflow-hidden"),h.addClass(R.current,"p-component-overlay-leave")},z=function(){f.clear(R.current),l.onHide&&l.onHide()},L=function(){return C},U=function(){O(!0)},W=function(){O(!1)},$=function(e,t){var n=["top","left","bottom","right"].find((function(e){return e===t}));return n?"".concat(e,"-").concat(n):""};e.useEffect((function(){l.value&&l.value.length<x&&y(l.value.length)}),[l.value,x]),e.useEffect((function(){y(l.numVisible)}),[l.numVisible]),u((function(){C&&W(),f.clear(R.current)})),e.useImperativeHandle(i,(function(){return{props:l,show:G,hide:Y,isAutoPlayActive:L,startSlideShow:U,stopSlideShow:W,getElement:function(){return V.current},getPreviewContent:function(){return H.current}}}));return d.isNotEmpty(l.value)&&function(){var r,i,o,c,u,d,h,f=(r=N.getOtherProps(l),i=l.showThumbnails&&$("p-galleria-thumbnails",l.thumbnailsPosition),o=l.showIndicators&&$("p-galleria-indicators",l.indicatorsPosition),c=p("p-galleria p-component",l.className,{"p-galleria-fullscreen":l.fullScreen,"p-galleria-indicator-onitem":l.showIndicatorsOnItem,"p-galleria-item-nav-onhover":l.showItemNavigatorsOnHover&&!l.fullScreen,"p-input-filled":"filled"===t.inputStyle,"p-ripple-disabled":!1===t.ripple},i,o),u=l.fullScreen&&e.createElement("button",{type:"button",className:"p-galleria-close p-link","aria-label":n("close"),onClick:Y},e.createElement("span",{className:"p-galleria-close-icon pi pi-times","aria-hidden":"true"}),e.createElement(m,null)),d=l.header?e.createElement("div",{className:"p-galleria-header"},l.header):null,h=l.footer?e.createElement("div",{className:"p-galleria-footer"},l.footer):null,e.createElement("div",g({ref:V,id:l.id,className:c,style:l.style},r),u,d,e.createElement("div",{className:"p-galleria-content"},e.createElement(S,{ref:H,value:l.value,activeItemIndex:j,onActiveItemChange:M,itemTemplate:l.item,circular:l.circular,caption:l.caption,showIndicators:l.showIndicators,changeItemOnIndicatorHover:l.changeItemOnIndicatorHover,indicator:l.indicator,showItemNavigators:l.showItemNavigators,autoPlay:l.autoPlay,slideShowActive:C,startSlideShow:U,stopSlideShow:W}),l.showThumbnails&&e.createElement(A,{value:l.value,activeItemIndex:j,onActiveItemChange:M,itemTemplate:l.thumbnail,numVisible:x,responsiveOptions:l.responsiveOptions,circular:l.circular,isVertical:D,contentHeight:l.verticalThumbnailViewPortHeight,showThumbnailNavigators:l.showThumbnailNavigators,autoPlay:l.autoPlay,slideShowActive:C,stopSlideShow:W})),h));if(l.fullScreen){var I=p("p-galleria-mask",{"p-galleria-visible":v});return e.createElement(s,{element:e.createElement("div",{ref:R,className:I},e.createElement(a,{nodeRef:V,classNames:"p-galleria",in:v,timeout:{enter:150,exit:150},options:l.transitionOptions,unmountOnExit:!0,onEnter:Z,onEntering:K,onEntered:X,onExit:_,onExited:z},f))})}return f}()})));k.displayName="Galleria";export{k as Galleria};