UNPKG

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