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) • 5.02 kB
JavaScript
import*as e from"react";import r,{localeOption as n}from"primereact/api";import{CSSTransition as t}from"primereact/csstransition";import{useOverlayListener as o,useMountEffect as a,useUnmountEffect as l}from"primereact/hooks";import{OverlayService as i}from"primereact/overlayservice";import{Portal as c}from"primereact/portal";import{Ripple as u}from"primereact/ripple";import{UniqueComponentId as s,DomHandler as f,ZIndexUtils as p,ObjectUtils as m,classNames as y}from"primereact/utils";function d(){return d=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var n=arguments[r];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e},d.apply(this,arguments)}function v(e){if(Array.isArray(e))return e}function b(e,r){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var t,o,a=[],l=!0,i=!1;try{for(n=n.call(e);!(l=(t=n.next()).done)&&(a.push(t.value),!r||a.length!==r);l=!0);}catch(e){i=!0,o=e}finally{try{l||null==n.return||n.return()}finally{if(i)throw o}}return a}}function h(e,r){(null==r||r>e.length)&&(r=e.length);for(var n=0,t=new Array(r);n<r;n++)t[n]=e[n];return t}function g(e,r){if(e){if("string"==typeof e)return h(e,r);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)?h(e,r):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,r){return v(e)||b(e,r)||g(e,r)||w()}var k=e.forwardRef((function(v,b){var h=E(e.useState(!1),2),g=h[0],w=h[1],O=e.useRef(""),S=e.useRef(null),x=e.useRef(null),I=e.useRef(!1),T=e.useRef(null),C=e.useRef(null),N=E(o({target:x,overlay:S,listener:function(e,r){r.valid&&("outside"===r.type?v.dismissable&&!I.current&&z():z()),I.current=!1},when:g}),2),A=N[0],P=N[1],R=function(e){return S&&S.current&&!(S.current.isSameNode(e)||S.current.contains(e))},j=function(e,r){return null!=x.current&&x.current!==(r||e.currentTarget||e.target)},H=function(e){z(),e.preventDefault()},L=function(e){I.current=!0,i.emit("overlay-click",{originalEvent:e,target:x.current})},D=function(){I.current=!0},M=function(e,r){g?(z(),j(e,r)&&(x.current=r||e.currentTarget||e.target,setTimeout((function(){_(e,x.current)}),200))):_(e,r)},_=function(e,r){x.current=r||e.currentTarget||e.target,g?$():(w(!0),C.current=function(e){!R(e.target)&&(I.current=!0)},i.on("overlay-click",C.current))},z=function(){w(!1),i.off("overlay-click",C.current),C.current=null},K=function(){S.current.setAttribute(O.current,""),p.set("overlay",S.current,r.autoZIndex,r.zIndex.overlay),$()},U=function(){A(),v.onShow&&v.onShow()},Y=function(){P()},Z=function(){p.clear(S.current),v.onHide&&v.onHide()},$=function(){if(x.current&&S.current){f.absolutePosition(S.current,x.current);var e=f.getOffset(S.current),r=f.getOffset(x.current),n=0;e.left<r.left&&(n=r.left-e.left),S.current.style.setProperty("--overlayArrowLeft","".concat(n,"px")),e.top<r.top&&f.addClass(S.current,"p-overlaypanel-flipped")}},q=function(){if(!T.current){T.current=f.createInlineStyle(r.nonce);var e="";for(var n in v.breakpoints)e+="\n @media screen and (max-width: ".concat(n,") {\n .p-overlaypanel[").concat(O.current,"] {\n width: ").concat(v.breakpoints[n]," !important;\n }\n }\n ");T.current.innerHTML=e}};a((function(){O.current=s(),v.breakpoints&&q()})),l((function(){T.current=f.removeInlineStyle(T.current),C.current&&(i.off("overlay-click",C.current),C.current=null),p.clear(S.current)})),e.useImperativeHandle(b,(function(){return{props:v,toggle:M,show:_,hide:z,getElement:function(){return S.current}}}));var B,F,G,J=function(){if(v.showCloseIcon){var r=v.ariaCloseLabel||n("close");return e.createElement("button",{type:"button",className:"p-overlaypanel-close p-link",onClick:H,"aria-label":r},e.createElement("span",{className:"p-overlaypanel-close-icon pi pi-times","aria-hidden":"true"}),e.createElement(u,null))}return null},Q=(B=m.findDiffKeys(v,k.defaultProps),F=y("p-overlaypanel p-component",v.className),G=J(),e.createElement(t,{nodeRef:S,classNames:"p-overlaypanel",in:g,timeout:{enter:120,exit:100},options:v.transitionOptions,unmountOnExit:!0,onEnter:K,onEntered:U,onExit:Y,onExited:Z},e.createElement("div",d({ref:S,id:v.id,className:F,style:v.style},B,{onClick:L}),e.createElement("div",{className:"p-overlaypanel-content",onClick:D,onMouseDown:D},v.children),G)));return e.createElement(c,{element:Q,appendTo:v.appendTo})}));k.displayName="OverlayPanel",k.defaultProps={__TYPE:"OverlayPanel",id:null,dismissable:!0,showCloseIcon:!1,style:null,className:null,appendTo:null,breakpoints:null,ariaCloseLabel:null,transitionOptions:null,onShow:null,onHide:null};export{k as OverlayPanel};