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.3 kB
JavaScript
this.primereact=this.primereact||{},this.primereact.image=function(e,t,n,o,r,a,i,l,c,s,u,p,m,f,d){"use strict";function g(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function b(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,o.get?o:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var y=b(t),v=g(n);function w(){return w=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)({}).hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},w.apply(null,arguments)}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 h(e,t){if("object"!=I(e)||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t||"default");if("object"!=I(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function O(e){var t=h(e,"string");return"symbol"==I(t)?t:t+""}function C(e,t,n){return(t=O(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function E(e){if(Array.isArray(e))return e}function S(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var o,r,a,i,l=[],c=!0,s=!1;try{if(a=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;c=!1}else for(;!(c=(o=a.call(n)).done)&&(l.push(o.value),l.length!==t);c=!0);}catch(e){s=!0,r=e}finally{try{if(!c&&null!=n.return&&(i=n.return(),Object(i)!==i))return}finally{if(s)throw r}}return l}}function P(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=Array(t);n<t;n++)o[n]=e[n];return o}function j(e,t){if(e){if("string"==typeof e)return P(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)?P(e,t):void 0}}function x(){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 k(e,t){return E(e)||S(e,t)||j(e,t)||x()}var N=y.memo(y.forwardRef((function(e,t){var n=i.IconBase.getPTI(e);return y.createElement("svg",w({ref:t,width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",xmlns:"http://www.w3.org/2000/svg"},n),y.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M7.0118 10C6.93296 10.0003 6.85484 9.98495 6.78202 9.95477C6.7091 9.92454 6.64297 9.88008 6.58749 9.82399L3.38288 6.62399C3.27675 6.51025 3.21897 6.35982 3.22171 6.20438C3.22446 6.04893 3.28752 5.90063 3.39761 5.7907C3.5077 5.68077 3.65622 5.6178 3.81188 5.61505C3.96755 5.61231 4.1182 5.67001 4.23211 5.77599L6.41125 7.95201V0.6C6.41125 0.44087 6.47456 0.288258 6.58724 0.175736C6.69993 0.063214 6.85276 0 7.01212 0C7.17148 0 7.32431 0.063214 7.43699 0.175736C7.54968 0.288258 7.61298 0.44087 7.61298 0.6V7.95198L9.7921 5.77599C9.90601 5.67001 10.0567 5.61231 10.2123 5.61505C10.368 5.6178 10.5165 5.68077 10.6266 5.7907C10.7367 5.90063 10.7997 6.04893 10.8025 6.20438C10.8052 6.35982 10.7475 6.51025 10.6413 6.62399L7.43671 9.82399C7.38124 9.88008 7.3151 9.92454 7.24219 9.95477C7.16938 9.98495 7.09127 10.0003 7.01244 10C7.01233 10 7.01223 10 7.01212 10C7.01201 10 7.0119 10 7.0118 10ZM13.45 13.3115C13.0749 13.7235 12.5521 13.971 11.9952 14H2.02889C1.75106 13.9887 1.47819 13.9228 1.2259 13.806C0.973606 13.6893 0.74684 13.524 0.558578 13.3197C0.370316 13.1153 0.224251 12.8759 0.128742 12.6152C0.0332333 12.3544 -0.00984502 12.0774 0.00197194 11.8V9.39999C0.00197194 9.24086 0.065277 9.08825 0.177961 8.97572C0.290645 8.8632 0.443477 8.79999 0.602836 8.79999C0.762195 8.79999 0.915027 8.8632 1.02771 8.97572C1.1404 9.08825 1.2037 9.24086 1.2037 9.39999V11.8C1.18301 12.0375 1.25469 12.2739 1.40385 12.4601C1.55302 12.6463 1.76823 12.768 2.00485 12.8H11.9952C12.2318 12.768 12.4471 12.6463 12.5962 12.4601C12.7454 12.2739 12.8171 12.0375 12.7964 11.8V9.39999C12.7964 9.24086 12.8597 9.08825 12.9724 8.97572C13.085 8.8632 13.2379 8.79999 13.3972 8.79999C13.5566 8.79999 13.7094 8.8632 13.8221 8.97572C13.9348 9.08825 13.9981 9.24086 13.9981 9.39999V11.8C14.0221 12.3563 13.8251 12.8995 13.45 13.3115Z",fill:"currentColor"}))})));N.displayName="DownloadIcon";var z=o.ComponentBase.extend({defaultProps:{__TYPE:"Image",alt:null,className:null,closeIcon:null,crossOrigin:null,decoding:null,downloadIcon:null,downloadable:!1,height:null,imageClassName:null,imageStyle:null,indicatorIcon:null,loading:null,onError:null,onHide:null,onShow:null,preview:!1,referrerPolicy:null,rotateLeftIcon:null,rotateRightIcon:null,src:null,template:null,useMap:null,width:null,zoomInIcon:null,zoomOutIcon:null,zoomSrc:null,children:void 0,closeOnEscape:!0},css:{classes:{button:"p-image-preview-indicator",mask:"p-image-mask p-component-overlay p-component-overlay-enter",toolbar:"p-image-toolbar",downloadButton:"p-image-action p-link",rotateRightButton:"p-image-action p-link",rotateLeftButton:"p-image-action p-link",zoomOutButton:"p-image-action p-link",zoomInButton:"p-image-action p-link",closeButton:"p-image-action p-link",preview:"p-image-preview",icon:"p-image-preview-icon",root:function(e){return d.classNames("p-image p-component",{"p-image-preview-container":e.props.preview})},transition:"p-image-preview"},styles:"\n@layer primereact {\n .p-image-mask {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n \n .p-image-preview-container {\n position: relative;\n display: inline-block;\n line-height: 0;\n }\n \n .p-image-preview-indicator {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n transition: opacity .3s;\n border: none;\n padding: 0;\n }\n \n .p-image-preview-icon {\n font-size: 1.5rem;\n }\n \n .p-image-preview-container:hover > .p-image-preview-indicator {\n opacity: 1;\n cursor: pointer;\n }\n \n .p-image-preview-container > img {\n cursor: pointer;\n }\n \n .p-image-toolbar {\n position: absolute;\n top: 0;\n right: 0;\n display: flex;\n z-index: 1;\n }\n \n .p-image-action.p-link {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n \n .p-image-preview {\n transition: transform .15s;\n max-width: 100vw;\n max-height: 100vh;\n width: 100%;\n height: 100%;\n }\n \n .p-image-preview-enter {\n opacity: 0;\n transform: scale(0.7);\n }\n \n .p-image-preview-enter-active {\n opacity: 1;\n transform: scale(1);\n transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n }\n \n .p-image-preview-enter-done {\n transform: none;\n }\n \n .p-image-preview-exit {\n opacity: 1;\n }\n \n .p-image-preview-exit-active {\n opacity: 0;\n transform: scale(0.7);\n transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);\n }\n}\n",inlineStyles:{preview:function(e){return{transform:"rotate("+e.rotateState+"deg) scale("+e.scaleState+")"}}}}});function B(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function R(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?B(Object(n),!0).forEach((function(t){C(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):B(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var U=y.memo(y.forwardRef((function(e,t){var i=a.useMergeProps(),g=y.useContext(n.PrimeReactContext),b=z.getProps(e,g),I=k(y.useState(!1),2),h=I[0],O=I[1],C=k(y.useState(!1),2),E=C[0],S=C[1],P=k(y.useState(0),2),j=P[0],x=P[1],B=k(y.useState(1),2),U=B[0],D=B[1],M=y.useRef(null),H=y.useRef(null),L=y.useRef(null),T=y.useRef(null),A=y.useRef(null),_=U<=.5,J=U>=1.5,V=z.setMetaData({props:b,state:{maskVisible:h,previewVisible:E,rotate:j,scale:U}}),X=V.ptm,Z=V.cx,G=V.sx,K=V.isUnstyled;a.useGlobalOnEscapeKey({callback:function(){F()},when:b.closeOnEscape&&h,priority:[a.ESC_KEY_HANDLING_PRIORITIES.IMAGE,0]}),o.useHandleStyle(z.css.styles,K,{name:"image"});var Y=function(){b.preview&&(O(!0),d.DomHandler.blockBodyScroll(),setTimeout((function(){S(!0)}),25))},F=function(){S(!1),d.DomHandler.unblockBodyScroll(),x(0),D(1)},$=function(e){[e.target.classList].includes("p-image-action")||e.target.closest(".p-image-action")||F()},q=function(e){if("Escape"===e.code)F(),setTimeout((function(){d.DomHandler.focus(A.current)}),200),e.preventDefault()},Q=function(){d.DomHandler.saveAs({name:b.alt,src:b.src})},W=function(e){e.stopPropagation(),x((function(e){return e+90}))},ee=function(e){e.stopPropagation(),x((function(e){return e-90}))},te=function(e){e.stopPropagation(),D((function(e){return J?e:e+.1}))},ne=function(e){e.stopPropagation(),D((function(e){return _?e:e-.1}))},oe=function(){d.ZIndexUtils.set("modal",L.current,g&&g.autoZIndex||v.default.autoZIndex,g&&g.zIndex.modal||v.default.zIndex.modal)},re=function(){b.onShow&&b.onShow()},ae=function(){!K()&&d.DomHandler.addClass(L.current,"p-component-overlay-leave")},ie=function(){b.onHide&&b.onHide()},le=function(){d.ZIndexUtils.clear(L.current),O(!1)};a.useUnmountEffect((function(){L.current&&d.ZIndexUtils.clear(L.current)}));y.useImperativeHandle(t,(function(){return{props:b,show:Y,hide:F,getElement:function(){return M.current},getImage:function(){return H.current}}}));var ce,se,ue=b.src,pe=b.alt,me=b.width,fe=b.height,de=b.crossOrigin,ge=b.referrerPolicy,be=b.useMap,ye=b.loading,ve=function(){var e=b.downloadable,t=b.alt,o=b.crossOrigin,a=b.referrerPolicy,l=b.useMap,f=b.loading,g=i(X("downloadIcon")),v=i(X("rotateRightIcon")),I=i(X("rotateLeftIcon")),O=i(X("zoomOutIcon")),C=i(X("zoomInIcon")),S=i(X("closeIcon")),P=d.IconUtils.getJSXIcon(b.downloadIcon||y.createElement(N,null),R({},g),{props:b}),x=d.IconUtils.getJSXIcon(b.rotateRightIcon||y.createElement(c.RefreshIcon,null),R({},v),{props:b}),k=d.IconUtils.getJSXIcon(b.rotateLeftIcon||y.createElement(m.UndoIcon,null),R({},I),{props:b}),z=d.IconUtils.getJSXIcon(b.zoomOutIcon||y.createElement(s.SearchMinusIcon,null),R({},O),{props:b}),B=d.IconUtils.getJSXIcon(b.zoomInIcon||y.createElement(u.SearchPlusIcon,null),R({},C),{props:b}),D=d.IconUtils.getJSXIcon(b.closeIcon||y.createElement(p.TimesIcon,null),R({},S),{props:b}),M=i({ref:L,role:"dialog",className:Z("mask"),"aria-modal":h,onClick:$,onKeyDown:q},X("mask")),H=i({className:Z("toolbar")},X("toolbar")),A=i({className:Z("downloadButton"),onPointerUp:Q,type:"button"},X("downloadButton")),V=i({className:Z("rotateRightButton"),onClick:W,type:"button","aria-label":n.localeOption("aria")?n.localeOption("aria").rotateRight:void 0,"data-pc-group-section":"action"},X("rotateRightButton")),K=i({className:Z("rotateLeftButton"),onClick:ee,type:"button","aria-label":n.localeOption("aria")?n.localeOption("aria").rotateLeft:void 0,"data-pc-group-section":"action"},X("rotateLeftButton")),Y=i({className:d.classNames(Z("zoomOutButton"),{"p-disabled":_}),style:{pointerEvents:"auto"},onClick:ne,type:"button",disabled:_,"aria-label":n.localeOption("aria")?n.localeOption("aria").zoomOut:void 0,"data-pc-group-section":"action"},X("zoomOutButton")),ce=i({className:d.classNames(Z("zoomInButton"),{"p-disabled":J}),style:{pointerEvents:"auto"},onClick:te,type:"button",disabled:J,"aria-label":n.localeOption("aria")?n.localeOption("aria").zoomIn:void 0,"data-pc-group-section":"action"},X("zoomInButton")),se=i({className:Z("closeButton"),type:"button",onClick:F,"aria-label":n.localeOption("aria")?n.localeOption("aria").close:void 0,autoFocus:!0,"data-pc-group-section":"action"},X("closeButton")),ue=i({src:b.zoomSrc||b.src,className:Z("preview"),style:G("preview",{rotateState:j,scaleState:U}),crossOrigin:o,referrerPolicy:a,useMap:l,loading:f},X("preview")),pe=i({ref:T},X("previewContainer")),me=i({classNames:Z("transition"),in:E,timeout:{enter:150,exit:150},unmountOnExit:!0,onEntering:oe,onEntered:re,onExit:ae,onExiting:ie,onExited:le},X("transition"));return y.createElement("div",M,y.createElement("div",H,e&&y.createElement("button",A,P),y.createElement("button",V,x),y.createElement("button",K,k),y.createElement("button",Y,z),y.createElement("button",ce,B),y.createElement("button",se,D)),y.createElement(r.CSSTransition,w({nodeRef:T},me),y.createElement("div",pe,y.createElement("img",w({alt:t},ue)))))}(),we=i({className:Z("icon")},X("icon")),Ie=d.IconUtils.getJSXIcon(b.indicatorIcon||y.createElement(l.EyeIcon,we),R({},we),{props:b}),he=b.template?d.ObjectUtils.getJSXElement(b.template,b):Ie,Oe=(ce=n.localeOption("aria")?n.localeOption("aria").zoomImage:void 0,se=i({ref:A,className:Z("button"),onClick:Y,type:"button","aria-label":ce},X("button")),b.preview?y.createElement("button",se,he):null),Ce=i({ref:H,src:ue,className:b.imageClassName,width:me,height:fe,crossOrigin:de,referrerPolicy:ge,useMap:be,loading:ye,style:b.imageStyle,onError:b.onError},X("image")),Ee=b.src&&y.createElement("img",w({},Ce,{alt:pe})),Se=i({ref:M,className:d.classNames(b.className,Z("root"))},z.getOtherProps(b),X("root"));return y.createElement("span",Se,Ee,Oe,h&&y.createElement(f.Portal,{element:ve,appendTo:document.body}))})));return U.displayName="Image",e.Image=U,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.api,primereact.componentbase,primereact.csstransition,primereact.hooks,primereact.iconbase,primereact.icons.eye,primereact.icons.refresh,primereact.icons.searchminus,primereact.icons.searchplus,primereact.icons.times,primereact.icons.undo,primereact.portal,primereact.utils);