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) • 11 kB
JavaScript
import*as e from"react";import n,{PrimeReactContext as t}from"primereact/api";import{ComponentBase as r,useHandleStyle as a}from"primereact/componentbase";import{CSSTransition as o}from"primereact/csstransition";import{useMergeProps as i,useDisplayOrder as u,useGlobalOnEscapeKey as l,ESC_KEY_HANDLING_PRIORITIES as c,useOverlayListener as s,useMountEffect as p,useUnmountEffect as m}from"primereact/hooks";import{OverlayService as d}from"primereact/overlayservice";import{Portal as f}from"primereact/portal";import{Ripple as b}from"primereact/ripple";import{classNames as y,UniqueComponentId as v,ZIndexUtils as g,DomHandler as h,IconUtils as S,ObjectUtils as x}from"primereact/utils";function E(){return E=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},E.apply(this,arguments)}function O(e){return O="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},O(e)}function w(e,n){if("object"!==O(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n||"default");if("object"!==O(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}function j(e){var n=w(e,"string");return"symbol"===O(n)?n:String(n)}function k(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}function I(e){if(Array.isArray(e))return k(e)}function N(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function P(e,n){if(e){if("string"==typeof e)return k(e,n);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)?k(e,n):void 0}}function D(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function A(e){return I(e)||N(e)||P(e)||D()}function T(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,a,o,i,u=[],l=!0,c=!1;try{if(o=(t=t.call(e)).next,0===n){if(Object(t)!==t)return;l=!1}else for(;!(l=(r=o.call(t)).done)&&(u.push(r.value),u.length!==n);l=!0);}catch(e){c=!0,a=e}finally{try{if(!l&&null!=t.return&&(i=t.return(),Object(i)!==i))return}finally{if(c)throw a}}return u}}function _(){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 C(e,n){return T(e)||H(e,n)||P(e,n)||_()}var B=r.extend({defaultProps:{__TYPE:"Menu",id:null,ariaLabel:null,ariaLabelledBy:null,tabIndex:0,model:null,popup:!1,popupAlignment:"left",style:null,className:null,autoZIndex:!0,baseZIndex:0,appendTo:null,onFocus:null,onBlur:null,transitionOptions:null,onShow:null,onHide:null,children:void 0,closeOnEscape:!0},css:{classes:{root:function(e){var t=e.context;return y("p-menu p-component",{"p-menu-overlay":e.props.popup,"p-input-filled":t&&"filled"===t.inputStyle||"filled"===n.inputStyle,"p-ripple-disabled":t&&!1===t.ripple||!1===n.ripple})},menu:"p-menu-list p-reset",content:"p-menuitem-content",action:function(e){return y("p-menuitem-link",{"p-disabled":e.item.disabled})},menuitem:function(e){return y("p-menuitem",{"p-focus":e.focused})},submenuHeader:function(e){return y("p-submenu-header",{"p-disabled":e.submenu.disabled})},separator:"p-menu-separator",label:"p-menuitem-text",icon:"p-menuitem-icon",transition:"p-connected-overlay"},styles:"\n@layer primereact {\n .p-menu-overlay {\n position: absolute;\n /* Github #3122: Prevent animation flickering */\n top: -9999px;\n left: -9999px;\n }\n\n .p-menu ul {\n margin: 0;\n padding: 0;\n list-style: none;\n }\n\n .p-menu .p-menuitem-link {\n cursor: pointer;\n display: flex;\n align-items: center;\n text-decoration: none;\n overflow: hidden;\n position: relative;\n }\n\n .p-menu .p-menuitem-text {\n line-height: 1;\n }\n}\n",inlineStyles:{submenuHeader:function(e){return e.submenu.style},menuitem:function(e){return e.item.style}}}});function F(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 M(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?F(Object(t),!0).forEach((function(n){var r,a,o;r=e,o=t[n],(a=j(a=n))in r?Object.defineProperty(r,a,{value:o,enumerable:!0,configurable:!0,writable:!0}):r[a]=o})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):F(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}var R=e.memo(e.forwardRef((function(r,O){var w=i(),j=e.useContext(t),k=B.getProps(r,j),I=C(e.useState(k.id),2),N=I[0],P=I[1],D=C(e.useState(!k.popup),2),T=D[0],H=D[1],_=C(e.useState(-1),2),F=_[0],R=_[1],Z=C(e.useState(-1),2),L=Z[0],U=Z[1],z=C(e.useState(!1),2),J=z[0],K=z[1],X=B.setMetaData({props:k,state:{id:N,visible:T,focused:J}}),G=X.ptm,Y=X.cx,$=X.sx;a(B.css.styles,X.isUnstyled,{name:"menu"});var q=e.useRef(null),Q=e.useRef(null),V=e.useRef(null),W=!!(T&&k.popup&&k.closeOnEscape),ee=u("menu",W);l({callback:function(e){Se(e)},when:W&&ee,priority:[c.MENU,ee]});var ne=C(s({target:V,overlay:q,listener:function(e,n){n.valid&&(Se(e),R(-1))},when:T}),2),te=ne[0],re=ne[1],ae=function(e,n,t){n.disabled?e.preventDefault():(n.command&&n.command({originalEvent:e,item:n}),k.popup&&Se(e),k.popup||F===t||R(t),n.url||(e.preventDefault(),e.stopPropagation()))},oe=function(e){K(!0),k.popup||(-1!==L?(ye(L),U(-1)):ye(0)),k.onFocus&&k.onFocus(e)},ie=function(e){K(!1),R(-1),k.onBlur&&k.onBlur(e)},ue=function(e){switch(e.code){case"ArrowDown":le(e);break;case"ArrowUp":ce(e);break;case"Home":se(e);break;case"End":pe(e);break;case"Enter":me(e);break;case"Space":de(e);break;case"Escape":k.popup&&(h.focus(V.current),Se(e));case"Tab":k.popup&&T&&Se(e)}},le=function(e){var n=fe(F);ye(n),e.preventDefault()},ce=function(e){if(e.altKey&&k.popup)h.focus(V.current),Se(e),e.preventDefault();else{var n=be(F);ye(n),e.preventDefault()}},se=function(e){ye(0),e.preventDefault()},pe=function(e){ye(h.find(q.current,'li[data-pc-section="menuitem"][data-p-disabled="false"]').length-1),e.preventDefault()},me=function(e){var n=h.findSingle(q.current,'li[id="'.concat("".concat(F),'"]')),t=n&&h.findSingle(n,'a[data-pc-section="action"]');k.popup&&h.focus(V.current),t?t.click():n&&n.click(),e.preventDefault()},de=function(e){me(e)},fe=function(e){var n=A(h.find(q.current,'li[data-pc-section="menuitem"][data-p-disabled="false"]')).findIndex((function(n){return n.id===e}));return n>-1?n+1:0},be=function(e){var n=A(h.find(q.current,'li[data-pc-section="menuitem"][data-p-disabled="false"]')).findIndex((function(n){return n.id===e}));return n>-1?n-1:0},ye=function(e){var n=h.find(q.current,'li[data-pc-section="menuitem"][data-p-disabled="false"]'),t=e>=n.length?n.length-1:e<0?0:e;t>-1&&R(n[t].getAttribute("id"))},ve=function(){return-1!==F?F:null},ge=function(e){k.popup&&(T?Se(e):he(e))},he=function(e){V.current=e.currentTarget,H(!0),k.onShow&&k.onShow(e)},Se=function(e){V.current=e.currentTarget,H(!1),k.onHide&&k.onHide(e)},xe=function(){h.addStyles(q.current,{position:"absolute",top:"0",left:"0"}),g.set("menu",q.current,j&&j.autoZIndex||n.autoZIndex,k.baseZIndex||j&&j.zIndex.menu||n.zIndex.menu),h.absolutePosition(q.current,V.current,k.popupAlignment),k.popup&&(h.focus(Q.current),ye(0))},Ee=function(){te()},Oe=function(){V.current=null,re()},we=function(){g.clear(q.current)};p((function(){N||P(v())})),m((function(){g.clear(q.current)})),e.useImperativeHandle(O,(function(){return{props:k,toggle:ge,show:he,hide:Se,getElement:function(){return q.current},getTarget:function(){return V.current}}}));var je=function(n,t){var r=N+"_sub_"+t,a=n.items.map((function(e,n){return Ie(e,n,r)})),o=w({id:r,key:r,role:"none",className:y(n.className,Y("submenuHeader",{submenu:n})),style:$("submenuHeader",{submenu:n}),"data-p-disabled":n.disabled},G("submenuHeader"));return e.createElement(e.Fragment,{key:r},e.createElement("li",o,n.label),a)},ke=function(n){var t=N+"_separator_"+n,r=w({id:t,key:t,className:Y("separator"),role:"separator"},G("separator"));return e.createElement("li",r)},Ie=function(n,t){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null;if(!1===n.visible)return null;var a=y("p-menuitem-link",{"p-disabled":n.disabled}),o=y("p-menuitem-icon",n.icon),i=w({className:Y("icon")},G("icon")),u=S.getJSXIcon(n.icon,M({},i),{props:k}),l=w({className:Y("label")},G("label")),c=n.label&&e.createElement("span",l,n.label),s=n.id||(r||N)+"_"+t,p=w({onClick:function(e){return ae(e,n,s)},className:Y("content")},G("content")),m=w({href:n.url||"#",className:Y("action",{item:n}),onFocus:function(e){return e.stopPropagation()},target:n.target,tabIndex:"-1","aria-label":n.label,"aria-hidden":!0,"aria-disabled":n.disabled,"data-p-disabled":n.disabled},G("action")),d=e.createElement("div",p,e.createElement("a",m,u,c,e.createElement(b,null)));n.template&&(d=x.getJSXElement(n.template,n,{onClick:function(e){return ae(e,n,s)},className:a,tabIndex:"-1",labelClassName:"p-menuitem-text",iconClassName:o,element:d,props:k}));var f=w({id:s,key:s,className:y(n.className,Y("menuitem",{focused:F===s})),style:$("menuitem",{item:n}),role:"menuitem","aria-label":n.label,"aria-disabled":n.disabled,"data-p-focused":ve()===s,"data-p-disabled":n.disabled||!1},G("menuitem"));return e.createElement("li",f,d)},Ne=function(e,n){return e.separator?ke(n):e.items?je(e,n):Ie(e,n)},Pe=function(){if(k.model){var n=k.model.map(Ne),t=w({className:y(k.className,Y("root",{context:j})),style:k.style,onClick:function(e){return n=e,void(k.popup&&d.emit("overlay-click",{originalEvent:n,target:V.current}));var n}},B.getOtherProps(k),G("root")),r=w({ref:Q,className:Y("menu"),id:N+"_list",tabIndex:k.tabIndex||"0",role:"menu","aria-label":k.ariaLabel,"aria-labelledby":k.ariaLabelledBy,"aria-activedescendant":J?ve():void 0,onFocus:oe,onKeyDown:ue,onBlur:ie},G("menu")),a=w({classNames:Y("transition"),in:T,timeout:{enter:120,exit:100},options:k.transitionOptions,unmountOnExit:!0,onEnter:xe,onEntered:Ee,onExit:Oe,onExited:we},G("transition"));return e.createElement(o,E({nodeRef:q},a),e.createElement("div",E({id:k.id,ref:q},t),e.createElement("ul",r,n)))}return null}();return k.popup?e.createElement(f,{element:Pe,appendTo:k.appendTo}):Pe})));R.displayName="Menu";export{R as Menu};