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) 10.3 kB
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),n=require("primereact/api"),t=require("primereact/componentbase"),r=require("primereact/csstransition"),o=require("primereact/hooks"),l=require("primereact/icons/times"),a=require("primereact/overlayservice"),i=require("primereact/portal"),c=require("primereact/ripple"),u=require("primereact/utils");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function p(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach(function(t){if("default"!==t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}}),n.default=e,Object.freeze(n)}var f=p(e),y=s(n);function d(){return d=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)({}).hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},d.apply(null,arguments)}function v(e){return v="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},v(e)}function m(e,n){if("object"!=v(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n||"default");if("object"!=v(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}function b(e){var n=m(e,"string");return"symbol"==v(n)?n:n+""}function g(e,n,t){return(n=b(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function O(e){if(Array.isArray(e))return e}function h(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,o,l,a,i=[],c=!0,u=!1;try{if(l=(t=t.call(e)).next,0===n){if(Object(t)!==t)return;c=!1}else for(;!(c=(r=l.call(t)).done)&&(i.push(r.value),i.length!==n);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 S(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=Array(n);t<n;t++)r[t]=e[t];return r}function x(e,n){if(e){if("string"==typeof e)return S(e,n);var t={}.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)?S(e,n):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 P(e,n){return O(e)||h(e,n)||x(e,n)||w()}var E=t.ComponentBase.extend({defaultProps:{__TYPE:"OverlayPanel",id:null,dismissable:!0,showCloseIcon:!1,closeIcon:null,style:null,className:null,appendTo:null,breakpoints:null,ariaCloseLabel:null,transitionOptions:null,onShow:null,onHide:null,children:void 0,closeOnEscape:!0},css:{classes:{root:function(e){var n=e.context;return u.classNames("p-overlaypanel p-component",{"p-input-filled":n&&"filled"===n.inputStyle||"filled"===y.default.inputStyle,"p-ripple-disabled":n&&!1===n.ripple||!1===y.default.ripple})},closeIcon:"p-overlaypanel-close-icon",closeButton:"p-overlaypanel-close p-link",content:"p-overlaypanel-content",transition:"p-overlaypanel"},styles:'\n@layer primereact {\n .p-overlaypanel {\n position: absolute;\n margin-top: 10px;\n /* Github #3122: Prevent animation flickering */\n top: -9999px;\n left: -9999px;\n }\n \n .p-overlaypanel-flipped {\n margin-top: -10px;\n margin-bottom: 10px;\n }\n \n .p-overlaypanel-close {\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n position: relative;\n }\n \n /* Animation */\n .p-overlaypanel-enter {\n opacity: 0;\n transform: scaleY(0.8);\n }\n \n .p-overlaypanel-enter-active {\n opacity: 1;\n transform: scaleY(1);\n transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);\n }\n \n .p-overlaypanel-enter-done {\n transform: none;\n }\n \n .p-overlaypanel-exit {\n opacity: 1;\n }\n \n .p-overlaypanel-exit-active {\n opacity: 0;\n transition: opacity .1s linear;\n }\n \n .p-overlaypanel:after, .p-overlaypanel:before {\n bottom: 100%;\n left: calc(var(--overlayArrowLeft, 0) + 1.25rem);\n content: " ";\n height: 0;\n width: 0;\n position: absolute;\n pointer-events: none;\n }\n \n .p-overlaypanel:after {\n border-width: 8px;\n margin-left: -8px;\n }\n \n .p-overlaypanel:before {\n border-width: 10px;\n margin-left: -10px;\n }\n \n .p-overlaypanel-flipped:after, .p-overlaypanel-flipped:before {\n bottom: auto;\n top: 100%;\n }\n \n .p-overlaypanel.p-overlaypanel-flipped:after {\n border-bottom-color: transparent;\n }\n \n .p-overlaypanel.p-overlaypanel-flipped:before {\n border-bottom-color: transparent\n }\n}\n'}});function j(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter(function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable})),t.push.apply(t,r)}return t}function I(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?j(Object(t),!0).forEach(function(n){g(e,n,t[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):j(Object(t)).forEach(function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})}return e}var D=f.forwardRef(function(e,s){var p=o.useMergeProps(),v=f.useContext(n.PrimeReactContext),m=E.getProps(e,v),b=P(f.useState(!1),2),g=b[0],O=b[1],h=E.setMetaData({props:m,state:{visible:g}}),S=h.ptm,x=h.cx,w=h.isUnstyled;t.useHandleStyle(E.css.styles,w,{name:"overlaypanel"});var j=f.useRef(""),D=f.useRef(null),k=f.useRef(null),C=f.useRef(!1),H=f.useRef(null),T=f.useRef(null),A=P(o.useOverlayListener({target:k,overlay:D,listener:function(e,n){n.valid&&("outside"===n.type?(m.dismissable&&!C.current&&Z(),C.current=!1):v.hideOverlaysOnDocumentScrolling?Z():u.DomHandler.isDocument(e.target)||$())},when:g}),2),N=A[0],R=A[1],q=g&&m.closeOnEscape,L=o.useDisplayOrder("overlay-panel",q);o.useGlobalOnEscapeKey({callback:function(){Z()},when:q&&L,priority:[o.ESC_KEY_HANDLING_PRIORITIES.OVERLAY_PANEL,L]});var _=function(e){return D&&D.current&&!(D.current.isSameNode(e)||D.current.contains(e))},M=function(e,n){return null!=k.current&&k.current!==(n||e.currentTarget||e.target)},U=function(){C.current=!0},z=function(e,n){g?(Z(),M(e,n)&&(k.current=n||e.currentTarget||e.target,setTimeout(function(){Y(e,k.current)},200))):Y(e,n)},Y=function(e,n){k.current=n||e.currentTarget||e.target,g?$():(O(!0),T.current=function(e){!_(e.target)&&(C.current=!0)},a.OverlayService.on("overlay-click",T.current))},Z=function(){O(!1),a.OverlayService.off("overlay-click",T.current),T.current=null},B=function(){D.current.setAttribute(j.current,""),u.ZIndexUtils.set("overlay",D.current,v&&v.autoZIndex||y.default.autoZIndex,v&&v.zIndex.overlay||y.default.zIndex.overlay),u.DomHandler.addStyles(D.current,{position:"absolute",top:"0",left:"0"}),$()},G=null,K=function(){J(),G=setTimeout(function(){N()}),m.onShow&&m.onShow()},V=function(){J(),R()},J=function(){G&&(clearTimeout(G),G=null)},X=function(){u.ZIndexUtils.clear(D.current),m.onHide&&m.onHide()},$=function(){if(k.current&&D.current){u.DomHandler.absolutePosition(D.current,k.current);var e=u.DomHandler.getOffset(D.current),n=u.DomHandler.getOffset(k.current),t=0;e.left<n.left&&(t=n.left-e.left),D.current.style.setProperty("--overlayArrowLeft","".concat(t,"px")),e.top<n.top?(D.current.setAttribute("data-p-overlaypanel-flipped","true"),w&&u.DomHandler.addClass(D.current,"p-overlaypanel-flipped")):(D.current.setAttribute("data-p-overlaypanel-flipped","false"),w&&u.DomHandler.removeClass(D.current,"p-overlaypanel-flipped"))}},F=function(){if(!H.current){H.current=u.DomHandler.createInlineStyle(v&&v.nonce||y.default.nonce,v&&v.styleContainer);var e="";for(var n in m.breakpoints)e+="\n @media screen and (max-width: ".concat(n,") {\n .p-overlaypanel[").concat(j.current,"] {\n width: ").concat(m.breakpoints[n],";\n }\n }\n ");H.current.innerHTML=e}};o.useMountEffect(function(){j.current=u.UniqueComponentId(),m.breakpoints&&F()}),o.useUnmountEffect(function(){H.current=u.DomHandler.removeInlineStyle(H.current),T.current&&(a.OverlayService.off("overlay-click",T.current),T.current=null),u.ZIndexUtils.clear(D.current)}),f.useImperativeHandle(s,function(){return{props:m,toggle:z,show:Y,hide:Z,align:$,isVisible:function(){return g},getElement:function(){return D.current}}});var Q,W,ee,ne,te=function(){var e=p({className:x("closeIcon"),"aria-hidden":!0},S("closeIcon")),t=u.IconUtils.getJSXIcon(m.closeIcon||f.createElement(l.TimesIcon,e),I({},e),{props:m}),r=p({type:"button",className:x("closeButton"),onClick:function(e){return n=e,Z(),void n.preventDefault();var n},"aria-label":m.ariaCloseLabel||n.ariaLabel("close")},S("closeButton"));return m.showCloseIcon?f.createElement("button",r,t,f.createElement(c.Ripple,null)):null},re=(Q=te(),W=p({id:m.id,className:u.classNames(m.className,x("root",{context:v})),style:m.style,onClick:function(e){return n=e,C.current=!0,void a.OverlayService.emit("overlay-click",{originalEvent:n,target:k.current});var n}},E.getOtherProps(m),S("root")),ee=p({className:x("content"),onClick:function(e){return U()},onMouseDown:U},E.getOtherProps(m),S("content")),ne=p({classNames:x("transition"),in:g,timeout:{enter:120,exit:100},options:m.transitionOptions,unmountOnExit:!0,onEnter:B,onEntered:K,onExit:V,onExited:X},S("transition")),f.createElement(r.CSSTransition,d({nodeRef:D},ne),f.createElement("div",d({ref:D},W),f.createElement("div",ee,m.children),Q)));return f.createElement(i.Portal,{element:re,appendTo:m.appendTo})});D.displayName="OverlayPanel",exports.OverlayPanel=D;