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.6 kB
JavaScript
import*as e from"react";import n,{PrimeReactContext as t}from"primereact/api";import{ComponentBase as r,useHandleStyle as i}from"primereact/componentbase";import{CSSTransition as o}from"primereact/csstransition";import{useMergeProps as a,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,DomHandler as v,UniqueComponentId as g,ZIndexUtils as h,IconUtils as x,ObjectUtils as S}from"primereact/utils";function E(e){return E="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},E(e)}function O(e,n){if("object"!=E(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n||"default");if("object"!=E(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}function w(e){var n=O(e,"string");return"symbol"==E(n)?n:n+""}function k(e,n,t){return(n=w(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function I(){return I=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},I.apply(null,arguments)}function N(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 j(e){if(Array.isArray(e))return N(e)}function P(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function D(e,n){if(e){if("string"==typeof e)return N(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)?N(e,n):void 0}}function A(){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 T(e){return j(e)||P(e)||D(e)||A()}function H(e){if(Array.isArray(e))return e}function M(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,i,o,a,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,i=e}finally{try{if(!l&&null!=t.return&&(a=t.return(),Object(a)!==a))return}finally{if(c)throw i}}return u}}function C(){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,n){return H(e)||M(e,n)||D(e,n)||C()}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:function(e){return y("p-menuitem-content",{"p-disabled":e.item.disabled})},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 R(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){k(e,n,t[n])})):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 Z=e.memo(e.forwardRef((function(r,E){var O=a(),w=e.useContext(t),k=B.getProps(r,w),N=_(e.useState(k.id),2),j=N[0],P=N[1],D=_(e.useState(!k.popup),2),A=D[0],H=D[1],M=_(e.useState(-1),2),C=M[0],F=M[1],Z=_(e.useState(-1),2),L=Z[0],U=Z[1],z=_(e.useState(!1),2),J=z[0],K=z[1],X=B.setMetaData({props:k,state:{id:j,visible:A,focused:J}}),G=X.ptm,Y=X.cx,$=X.sx,q=function(e,n){return G(e,{context:n})};i(B.css.styles,X.isUnstyled,{name:"menu"});var Q=e.useRef(null),V=e.useRef(null),W=e.useRef(null),ee=!!(A&&k.popup&&k.closeOnEscape),ne=u("menu",ee);l({callback:function(e){Ee(e)},when:ee&&ne,priority:[c.MENU,ne]});var te=_(s({target:W,overlay:Q,listener:function(e,n){n.valid&&(w.hideOverlaysOnDocumentScrolling||"outside"===n.type?(Ee(e),F(-1)):v.isDocument(e.target)||v.absolutePosition(Q.current,W.current,k.popupAlignment))},when:A}),2),re=te[0],ie=te[1],oe=function(e,n,t){n.disabled?e.preventDefault():(n.command&&n.command({originalEvent:e,item:n}),k.popup&&Ee(e),k.popup||C===t||F(t),n.url||(e.preventDefault(),e.stopPropagation()))},ae=function(e,n){e&&k.popup&&C!==n&&F(n)},ue=function(e){K(!0),k.popup||(-1!==L?(ge(L),U(-1)):ge(0)),k.onFocus&&k.onFocus(e)},le=function(e){var n=e.relatedTarget;n&&e.currentTarget.contains(n)||(K(!1),F(-1),k.onBlur&&k.onBlur(e))},ce=function(e){switch(e.code){case"ArrowDown":se(e);break;case"ArrowUp":pe(e);break;case"Home":me(e);break;case"End":de(e);break;case"Enter":case"NumpadEnter":fe(e);break;case"Space":be(e);break;case"Escape":k.popup&&(v.focus(W.current),Ee(e));case"Tab":k.popup&&A&&Ee(e)}},se=function(e){var n=ye(C);ge(n),e.preventDefault()},pe=function(e){if(e.altKey&&k.popup)v.focus(W.current),Ee(e),e.preventDefault();else{var n=ve(C);ge(n),e.preventDefault()}},me=function(e){ge(0),e.preventDefault()},de=function(e){ge(v.find(Q.current,'li[data-pc-section="menuitem"][data-p-disabled="false"]').length-1),e.preventDefault()},fe=function(e){var n=v.findSingle(Q.current,'li[id="'.concat("".concat(C),'"]')),t=n&&v.findSingle(n,'a[data-pc-section="action"]');k.popup&&v.focus(W.current),t?t.click():n&&n.click(),e.preventDefault()},be=function(e){fe(e)},ye=function(e){var n=T(v.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},ve=function(e){var n=T(v.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},ge=function(e){var n=v.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&&F(n[t].getAttribute("id"))},he=function(){return-1!==C?C:null},xe=function(e){k.popup&&(A?Ee(e):Se(e))},Se=function(e){W.current=e.currentTarget,H(!0),k.onShow&&k.onShow(e)},Ee=function(e){W.current=e.currentTarget,H(!1),k.onHide&&k.onHide(e)},Oe=function(){v.addStyles(Q.current,{position:"absolute",top:"0",left:"0"}),h.set("menu",Q.current,w&&w.autoZIndex||n.autoZIndex,k.baseZIndex||w&&w.zIndex.menu||n.zIndex.menu),v.absolutePosition(Q.current,W.current,k.popupAlignment),k.popup&&(v.focus(V.current),ge(0))},we=function(){re()},ke=function(){W.current=null,ie()},Ie=function(){h.clear(Q.current)};p((function(){j||P(g())})),m((function(){h.clear(Q.current)})),e.useImperativeHandle(E,(function(){return{props:k,toggle:xe,show:Se,hide:Ee,getElement:function(){return Q.current},getTarget:function(){return W.current}}}));var Ne=function(n,t){var r=j+"_sub_"+t,i=n.items.map((function(e,n){return Pe(e,n,r)})),o=O({id: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",I({},o,{key:r}),n.label),i)},je=function(n,t){if(!1===n.visible)return null;var r=j+"_separator_"+t,i=O({id:r,className:y(n.className,Y("separator")),role:"separator"},G("separator"));return e.createElement("li",I({},i,{key:r}))},Pe=function(n,t){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null;if(!1===n.visible)return null;var i={item:n,index:t,parentId:r},o=y("p-menuitem-link",{"p-disabled":n.disabled}),a=y("p-menuitem-icon",n.icon),u=O({className:Y("icon")},q("icon",i)),l=x.getJSXIcon(n.icon,R({},u),{props:k}),c=O({className:Y("label")},q("label",i)),s=n.label&&e.createElement("span",c,n.label),p=n.id||(r||j)+"_"+t,m=O({onClick:function(e){return oe(e,n,p)},onMouseMove:function(e){return ae(e,p)},className:Y("content",{item:n})},q("content",i)),d=O({href:n.url||"#",className:Y("action",{item:n}),onFocus:function(e){return e.stopPropagation()},target:n.target,tabIndex:"-1","aria-label":n.label,"aria-disabled":n.disabled,"data-p-disabled":n.disabled},q("action",i)),f=e.createElement("div",m,e.createElement("a",d,l,s,e.createElement(b,null)));n.template&&(f=S.getJSXElement(n.template,n,{onClick:function(e){return oe(e,n,p)},onMouseMove:function(e){return ae(e,p)},className:o,tabIndex:"-1",labelClassName:"p-menuitem-text",iconClassName:a,element:f,props:k}));var v=O({id:p,className:y(n.className,Y("menuitem",{focused:C===p})),onClick:function(e){return oe(e,n,p)},style:$("menuitem",{item:n}),role:"menuitem","aria-label":n.label,"aria-disabled":n.disabled,"data-p-focused":he()===p,"data-p-disabled":n.disabled||!1},q("menuitem",i));return e.createElement("li",I({},v,{key:p}),f)},De=function(e,n){return!1===e.visible?null:e.separator?je(e,n):e.items?Ne(e,n):Pe(e,n)},Ae=function(){if(k.model){var n=k.model.map(De),t=O({className:y(k.className,Y("root",{context:w})),style:k.style,onClick:function(e){return n=e,void(k.popup&&d.emit("overlay-click",{originalEvent:n,target:W.current}));var n}},B.getOtherProps(k),G("root")),r=O({ref:V,className:Y("menu"),id:j+"_list",tabIndex:k.tabIndex||"0",role:"menu","aria-label":k.ariaLabel,"aria-labelledby":k.ariaLabelledBy,"aria-activedescendant":J?he():void 0,onFocus:ue,onKeyDown:ce,onBlur:le},G("menu")),i=O({classNames:Y("transition"),in:A,timeout:{enter:120,exit:100},options:k.transitionOptions,unmountOnExit:!0,onEnter:Oe,onEntered:we,onExit:ke,onExited:Ie},G("transition"));return e.createElement(o,I({nodeRef:Q},i),e.createElement("div",I({id:k.id,ref:Q},t),e.createElement("ul",r,n)))}return null}();return k.popup?e.createElement(f,{element:Ae,appendTo:k.appendTo}):Ae})));Z.displayName="Menu";export{Z as Menu};