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) • 9.45 kB
JavaScript
this.primereact=this.primereact||{},this.primereact.tieredmenu=function(e,n,t,r,o,i,l,a,u){"use strict";function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(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 p=s(n),m=c(t);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)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},d.apply(this,arguments)}function f(e){if(Array.isArray(e))return e}function b(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,o,i,l,a=[],u=!0,c=!1;try{if(i=(t=t.call(e)).next,0===n){if(Object(t)!==t)return;u=!1}else for(;!(u=(r=i.call(t)).done)&&(a.push(r.value),a.length!==n);u=!0);}catch(e){c=!0,o=e}finally{try{if(!u&&null!=t.return&&(l=t.return(),Object(l)!==l))return}finally{if(c)throw o}}return a}}function v(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 h(e,n){if(e){if("string"==typeof e)return v(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)?v(e,n):void 0}}function g(){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 y(e,n){return f(e)||b(e,n)||h(e,n)||g()}var E={defaultProps:{__TYPE:"TieredMenu",id:null,model:null,popup:!1,style:null,className:null,autoZIndex:!0,baseZIndex:0,breakpoint:void 0,scrollHeight:"400px",appendTo:null,transitionOptions:null,onShow:null,onHide:null,children:void 0},getProps:function(e){return a.ObjectUtils.getMergedProps(e,E.defaultProps)},getOtherProps:function(e){return a.ObjectUtils.getDiffProps(e,E.defaultProps)}},M=p.memo((function(e){var n=y(p.useState(null),2),t=n[0],r=n[1],i=p.useRef(null),l=y(o.useEventListener({type:"click",listener:function(n){e.isMobileMode||!i.current||i.current.contains(n.target)||r(null)}}),1)[0],c=y(o.useResizeListener({listener:function(){!e.isMobileMode&&r(null)}}),1)[0],s=function(){if(i.current){var e=i.current.parentElement,n=a.DomHandler.getOffset(e),t=a.DomHandler.getViewport(),r=i.current.offsetParent?i.current.offsetWidth:a.DomHandler.getHiddenElementOuterWidth(i.current),o=a.DomHandler.getOuterWidth(e.children[0]),l=parseInt(n.top,10)+i.current.offsetHeight-a.DomHandler.getWindowScrollTop();i.current.style.top=l>t.height?t.height-l+"px":"0px",parseInt(n.left,10)+o+r>t.width-a.DomHandler.calculateScrollbarWidth()&&a.DomHandler.addClass(i.current,"p-submenu-list-flipped")}},m=function(n,o){o.disabled||e.isMobileMode?n.preventDefault():e.root?(t||e.popup)&&r(o):r(o)},d=function(n,o){o.disabled?n.preventDefault():(o.url||n.preventDefault(),o.command&&o.command({originalEvent:n,item:o}),(e.root||e.isMobileMode)&&o.items&&r(t&&o===t?null:o),o.items||g(n))},f=function(n,t){var o=n.currentTarget.parentElement;switch(n.which){case 40:var i=v(o);i&&i.children[0].focus(),n.preventDefault();break;case 38:var l=h(o);l&&l.children[0].focus(),n.preventDefault();break;case 39:t.items&&(r(t),setTimeout((function(){o.children[1].children[0].children[0].focus()}),50)),n.preventDefault()}e.onKeyDown&&e.onKeyDown(n,o)},b=function(e,n){37===e.which&&(r(null),n.parentElement.previousElementSibling.focus())},v=function e(n){var t=n.nextElementSibling;return t?a.DomHandler.hasClass(t,"p-disabled")||!a.DomHandler.hasClass(t,"p-menuitem")?e(t):t:null},h=function e(n){var t=n.previousElementSibling;return t?a.DomHandler.hasClass(t,"p-disabled")||!a.DomHandler.hasClass(t,"p-menuitem")?e(t):t:null},g=function(n){e.isMobileMode&&!e.popup||(r(null),e.onLeafClick&&e.onLeafClick(n),e.onHide&&e.onHide(n))};o.useMountEffect((function(){l(),c()})),o.useUpdateEffect((function(){e.parentActive||r(null),e.root||!e.parentActive||e.isMobileMode||s()}),[e.parentActive]),o.useUpdateEffect((function(){e.onItemToggle&&e.onItemToggle()}),[t]);var E=function(e){return p.createElement("li",{key:"separator_"+e,className:"p-menu-separator",role:"separator"})},w=function(n){return n.items?p.createElement(M,{menuProps:e.menuProps,model:n.items,onLeafClick:g,popup:e.popup,onKeyDown:b,parentActive:n===t,isMobileMode:e.isMobileMode,onItemToggle:e.onItemToggle}):null},D=function(n,r){if(!1===n.visible)return null;var o=n.style,i=n.disabled,l=n.icon,c=n.label,s=n.items,b=n.target,v=n.url,h=n.template,g=c+"_"+r,y=t===n,E=a.classNames("p-menuitem",{"p-menuitem-active":y},n.className),M=a.classNames("p-menuitem-link",{"p-disabled":i}),D=a.classNames("p-menuitem-icon",l),H="p-submenu-icon pi pi-angle-right",O=a.IconUtils.getJSXIcon(l,{className:"p-menuitem-icon"},{props:e.menuProps}),I=c&&p.createElement("span",{className:"p-menuitem-text"},c),S=s&&p.createElement("span",{className:H}),x=w(n),k=p.createElement("a",{href:v||"#",className:M,target:b,role:"menuitem","aria-haspopup":null!=s,onClick:function(e){return d(e,n)},onKeyDown:function(e){return f(e,n)},"aria-disabled":i},O,I,S,p.createElement(u.Ripple,null));h&&(k=a.ObjectUtils.getJSXElement(h,n,{onClick:function(e){return d(e,n)},onKeyDown:function(e){return f(e,n)},className:M,labelClassName:"p-menuitem-text",iconClassName:D,submenuIconClassName:H,element:k,props:e,active:y,disabled:i}));return p.createElement("li",{key:g,id:n,className:E,style:o,onMouseEnter:function(e){return m(e,n)},role:"none"},k,x)},H=function(e,n){return e.separator?E(n):D(e,n)},O=a.classNames({"p-submenu-list":!e.root}),I=e.model?e.model.map(H):null;return p.createElement("ul",{ref:i,className:O,role:e.root?"menubar":"menu","aria-orientation":"horizontal"},I)}));M.displayName="TieredMenuSub";var w=p.memo(p.forwardRef((function(e,n){var t=E.getProps(e),u=y(p.useState(!t.popup),2),c=u[0],s=u[1],f=y(p.useState(null),2),b=f[0],v=f[1],h=p.useRef(null),g=p.useRef(null),w=p.useRef(null),D=o.useMatchMedia("screen and (max-width: ".concat(t.breakpoint,")"),!!t.breakpoint),H=y(o.useOverlayListener({target:g,overlay:h,listener:function(e,n){n.valid&&N(e)},when:c}),2),O=H[0],I=H[1],S=function(e){t.popup&&i.OverlayService.emit("overlay-click",{originalEvent:e,target:g.current})},x=function(e){t.popup&&(c?N(e):k(e))},k=function(e){g.current=e.currentTarget,s(!0),t.onShow&&t.onShow(e)},N=function(e){t.popup&&(g.current=e.currentTarget,s(!1),t.onHide&&t.onHide(e))},P=function(){t.popup&&D&&a.DomHandler.absolutePosition(h.current,g.current)},T=function(){if(!w.current){w.current=a.DomHandler.createInlineStyle(m.default.nonce);var e="".concat(b),n="\n@media screen and (max-width: ".concat(t.breakpoint,") {\n .p-tieredmenu[").concat(e,"] > ul {\n max-height: ").concat(t.scrollHeight,";\n overflow: ").concat(t.scrollHeight?"auto":"",";\n }\n\n .p-tieredmenu[").concat(e,"] .p-submenu-list {\n position: relative;\n }\n\n .p-tieredmenu[").concat(e,"] .p-menuitem-active > .p-submenu-list {\n left: 0 !important;\n box-shadow: none;\n border-radius: 0;\n padding: 0 0 0 calc(var(--inline-spacing) * 2); /* @todo */\n }\n\n .p-tieredmenu[").concat(e,"] .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {\n transform: rotate(-180deg);\n }\n\n .p-tieredmenu[").concat(e,'] .p-submenu-icon:before {\n content: "\\e930";\n }\n\n ').concat(t.popup?"":".p-tieredmenu[".concat(e,"] { width: 100%; }"),"\n}\n");w.current.innerHTML=n}},j=function(){w.current=a.DomHandler.removeInlineStyle(w.current)},C=function(){t.autoZIndex&&a.ZIndexUtils.set("menu",h.current,m.default.autoZIndex,t.baseZIndex||m.default.zIndex.menu),a.DomHandler.absolutePosition(h.current,g.current),b&&t.breakpoint&&(h.current.setAttribute(b,""),T())},U=function(){O()},A=function(){g.current=null,I()},R=function(){a.ZIndexUtils.clear(h.current),j()};o.useMountEffect((function(){t.breakpoint&&!b&&v(a.UniqueComponentId())})),o.useUpdateEffect((function(){return b&&h.current&&(h.current.setAttribute(b,""),T()),function(){j()}}),[b,t.breakpoint]),o.useUnmountEffect((function(){a.ZIndexUtils.clear(h.current)})),p.useImperativeHandle(n,(function(){return{props:t,toggle:x,show:k,hide:N,getElement:function(){return h.current}}}));var Z,_,L=(Z=E.getOtherProps(t),_=a.classNames("p-tieredmenu p-component",{"p-tieredmenu-overlay":t.popup,"p-input-filled":"filled"===m.default.inputStyle,"p-ripple-disabled":!1===m.default.ripple},t.className),p.createElement(r.CSSTransition,{nodeRef:h,classNames:"p-connected-overlay",in:c,timeout:{enter:120,exit:100},options:t.transitionOptions,unmountOnExit:!0,onEnter:C,onEntered:U,onExit:A,onExited:R},p.createElement("div",d({ref:h,id:t.id,className:_,style:t.style},Z,{onClick:S}),p.createElement(M,{menuProps:t,model:t.model,root:!0,popup:t.popup,onHide:N,isMobileMode:D,onItemToggle:P}))));return t.popup?p.createElement(l.Portal,{element:L,appendTo:t.appendTo}):L})));return w.displayName="TieredMenu",e.TieredMenu=w,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.api,primereact.csstransition,primereact.hooks,primereact.overlayservice,primereact.portal,primereact.utils,primereact.ripple);