primereact
Version:
PrimeReact is an open source UI library for React featuring a rich set of 80+ 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) • 6.84 kB
JavaScript
import*as e from"react";import t from"primereact/api";import{CSSTransition as n}from"primereact/csstransition";import{useOverlayListener as r,useUpdateEffect as i,useUnmountEffect as o}from"primereact/hooks";import{OverlayService as a}from"primereact/overlayservice";import{Portal as l}from"primereact/portal";import{classNames as u,IconUtils as c,ObjectUtils as s,ZIndexUtils as m,DomHandler as p}from"primereact/utils";function f(){return f=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},f.apply(this,arguments)}function d(e){if(Array.isArray(e))return e}function v(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,i,o=[],a=!0,l=!1;try{for(n=n.call(e);!(a=(r=n.next()).done)&&(o.push(r.value),!t||o.length!==t);a=!0);}catch(e){l=!0,i=e}finally{try{a||null==n.return||n.return()}finally{if(l)throw i}}return o}}function b(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function y(e,t){if(e){if("string"==typeof e)return b(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?b(e,t):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 h(e,t){return d(e)||v(e,t)||y(e,t)||g()}function w(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function E(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function O(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?E(Object(n),!0).forEach((function(t){w(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):E(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var N=e.memo((function(t){var n=h(e.useState(null),2),r=n[0],i=n[1],o=h(e.useState({}),2),a=o[0],l=o[1],m=function(e,n,r){if(n.disabled)e.preventDefault();else if(n.url||e.preventDefault(),n.command&&n.command({originalEvent:e,item:n}),n.items){var o=d(n,r);l(O(O({},a),{},w({},o,!0))),i(n),t.onForward()}},p=function(t){return e.createElement("li",{key:"separator_"+t,className:"p-menu-separator"})},f=function(n,i){var o=a[d(n,i)];return n.items&&o?e.createElement(N,{menuProps:t.menuProps,model:n.items,index:t.index+1,menuWidth:t.menuWidth,effectDuration:t.effectDuration,onForward:t.onForward,parentActive:n===r}):null},d=function(e,t){return e.label+"_"+t},v=function(n,i){if(!1===n.visible)return null;var o=d(n,i),a=r===n,l=u("p-menuitem",{"p-menuitem-active":a,"p-disabled":n.disabled},n.className),p=u("p-menuitem-icon",n.icon),v="p-submenu-icon pi pi-fw pi-angle-right",b=c.getJSXIcon(n.icon,{className:"p-menuitem-icon"},{props:t.menuProps}),y=n.label&&e.createElement("span",{className:"p-menuitem-text"},n.label),g=n.items&&e.createElement("span",{className:v}),h=f(n,i),w=e.createElement("a",{href:n.url||"#",className:"p-menuitem-link",target:n.target,onClick:function(e){return m(e,n,i)},"aria-disabled":n.disabled},b,y,g);n.template&&(w=s.getJSXElement(n.template,n,{onClick:function(e){return m(e,n,i)},className:"p-menuitem-link",labelClassName:"p-menuitem-text",iconClassName:p,submenuIconClassName:v,element:w,props:t,active:a}));return e.createElement("li",{key:o,id:n.id,className:l,style:n.style},w,h)},b=function(e,t){return e.separator?p(t):v(e,t)},y={width:t.menuWidth+"px",left:t.root?-1*t.level*t.menuWidth+"px":t.menuWidth+"px",transitionProperty:t.root?"left":"none",transitionDuration:t.effectDuration+"ms",transitionTimingFunction:t.easing},g=u({"p-slidemenu-rootlist":t.root,"p-submenu-list":!t.root,"p-active-submenu":t.parentActive}),E=t.model?t.model.map(b):null;return e.createElement("ul",{className:g,style:y},E)}));N.displayName="SlideMenuSub";var x=e.memo(e.forwardRef((function(c,d){var v=h(e.useState(0),2),b=v[0],y=v[1],g=h(e.useState(!1),2),w=g[0],E=g[1],O=e.useRef(null),S=e.useRef(null),P=e.useRef(null),j=e.useRef(null),k=h(r({target:S,overlay:O,listener:function(e,t){t.valid&&H(e)},when:w}),2),D=k[0],I=k[1],A=function(e){c.popup&&a.emit("overlay-click",{originalEvent:e,target:S.current})},C=function(){y((function(e){return e+1}))},T=function(){y((function(e){return e-1}))},W=function(e){c.popup&&(w?H(e):F(e))},F=function(e){S.current=e.currentTarget,E(!0),c.onShow&&c.onShow(e)},H=function(e){S.current=e.currentTarget,E(!1),c.onHide&&c.onHide(e)},R=function(){c.autoZIndex&&m.set("menu",O.current,t.autoZIndex,c.baseZIndex||t.zIndex.menu),p.absolutePosition(O.current,S.current)},Z=function(){D()},M=function(){S.current=null,I()},_=function(){m.clear(O.current),y(0)};i((function(){y(0)}),[c.model]),i((function(){c.onNavigate&&c.onNavigate({level:b})}),[b]),o((function(){m.clear(O.current)})),e.useImperativeHandle(d,(function(){return{props:c,toggle:W,show:F,hide:H,navigateForward:C,navigateBack:T,setLevelState:y,getElement:function(){return O.current}}}));var L=function(){var t=u("p-slidemenu-backward",{"p-hidden":0===b});return e.createElement("div",{ref:P,className:t,onClick:T},e.createElement("span",{className:"p-slidemenu-backward-icon pi pi-fw pi-chevron-left"}),e.createElement("span",null,c.backLabel))},B=function(){var t=s.findDiffKeys(c,x.defaultProps),r=u("p-slidemenu p-component",{"p-slidemenu-overlay":c.popup},c.className),i={height:c.viewportHeight+"px"},o=L();return e.createElement(n,{nodeRef:O,classNames:"p-connected-overlay",in:!c.popup||w,timeout:{enter:120,exit:100},options:c.transitionOptions,unmountOnExit:!0,onEnter:R,onEntered:Z,onExit:M,onExited:_},e.createElement("div",f({ref:O,id:c.id,className:r,style:c.style},t,{onClick:A}),e.createElement("div",{className:"p-slidemenu-wrapper",style:i},e.createElement("div",{className:"p-slidemenu-content",ref:j},e.createElement(N,{menuProps:c,model:c.model,root:!0,index:0,menuWidth:c.menuWidth,effectDuration:c.effectDuration,level:b,parentActive:0===b,onForward:C})),o)))}();return c.popup?e.createElement(l,{element:B,appendTo:c.appendTo}):B})));x.displayName="SlideMenu",x.defaultProps={__TYPE:"SlideMenu",appendTo:null,autoZIndex:!0,backLabel:"Back",baseZIndex:0,className:null,easing:"ease-out",effectDuration:250,id:null,menuWidth:190,model:null,onHide:null,onShow:null,onNavigate:null,popup:!1,style:null,transitionOptions:null,viewportHeight:175};export{x as SlideMenu};