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) 12.7 kB
this.primereact=this.primereact||{},this.primereact.slidemenu=function(e,n,t,r,i,o,a,u,l,s,c){"use strict";function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function m(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 d=m(n),f=p(t);function b(){return b=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},b.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 y(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 g(e){var n=y(e,"string");return"symbol"==v(n)?n:n+""}function h(e,n,t){return(n=g(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 w(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,s=!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){s=!0,i=e}finally{try{if(!l&&null!=t.return&&(a=t.return(),Object(a)!==a))return}finally{if(s)throw i}}return u}}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 E(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 I(){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)||w(e,n)||E(e,n)||I()}var x=r.ComponentBase.extend({defaultProps:{__TYPE:"SlideMenu",appendTo:null,autoZIndex:!0,backIcon:null,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,submenuIcon:null,transitionOptions:null,viewportHeight:175,children:void 0,closeOnEscape:!0},css:{classes:{previousIcon:"p-slidemenu-backward-icon",previous:function(e){var n=e.levelState;return s.classNames("p-slidemenu-backward",{"p-hidden-space":0===n,"p-slidemenu-separator":n>0})},root:function(e){return s.classNames("p-slidemenu p-component",{"p-slidemenu-overlay":e.props.popup})},wrapper:"p-slidemenu-wrapper",content:"p-slidemenu-content",separator:"p-slidemenu-separator",icon:"p-menuitem-icon",submenuIcon:"p-submenu-icon",label:"p-menuitem-text",action:"p-menuitem-link",menu:function(e){var n=e.subProps;return s.classNames({"p-slidemenu-rootlist":n.root,"p-submenu-list":!n.root,"p-active-submenu":n.parentActive})},menuitem:function(e){var n=e.item;return s.classNames("p-menuitem",{"p-menuitem-active":e.active,"p-disabled":n.disabled},n.className)},transition:"p-connected-overlay"},styles:"\n@layer primereact {\n .p-slidemenu {\n width: 12.5em;\n }\n \n .p-slidemenu.p-slidemenu-overlay {\n position: absolute;\n }\n \n .p-slidemenu .p-menu-separator {\n border-width: 1px 0 0 0;\n }\n \n .p-slidemenu ul {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n \n .p-slidemenu .p-slidemenu-rootlist {\n position: absolute;\n top: 0;\n }\n \n .p-slidemenu .p-submenu-list {\n display: none;\n position: absolute;\n top: 0;\n width: 12.5em;\n }\n \n .p-slidemenu .p-menuitem-link {\n cursor: pointer;\n display: flex;\n align-items: center;\n text-decoration: none;\n overflow: hidden;\n }\n \n .p-slidemenu .p-menuitem-icon {\n vertical-align: middle;\n }\n \n .p-slidemenu .p-menuitem-text {\n vertical-align: middle;\n }\n \n .p-slidemenu .p-menuitem {\n position: relative;\n }\n \n .p-slidemenu .p-menuitem-link .p-submenu-icon {\n margin-left: auto;\n }\n \n .p-slidemenu .p-slidemenu-wrapper {\n position: relative;\n }\n \n .p-slidemenu .p-slidemenu-content {\n overflow-x: hidden;\n overflow-y: auto;\n position: relative;\n height: 100%;\n }\n \n .p-slidemenu-backward {\n bottom: 0;\n width: 100%;\n padding: 0.25em;\n cursor: pointer;\n }\n \n .p-slidemenu-backward .p-slidemenu-backward-icon {\n vertical-align: middle;\n }\n \n .p-slidemenu-backward span {\n vertical-align: middle;\n }\n \n .p-slidemenu .p-menuitem-active {\n position: static;\n }\n \n .p-slidemenu .p-menuitem-active > .p-submenu-list {\n display: block;\n }\n}\n",inlineStyles:{menu:function(e){var n=e.subProps;return{width:n.menuWidth+"px",left:n.root?-1*n.level*n.menuWidth+"px":n.menuWidth+"px",transitionProperty:n.root?"left":"none",transitionDuration:n.effectDuration+"ms",transitionTimingFunction:n.easing}}}}});function N(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 j(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?N(Object(t),!0).forEach((function(n){h(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):N(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}var k=d.memo((function(e){var n=P(d.useState(null),2),t=n[0],r=n[1],i=P(d.useState({}),2),a=i[0],u=i[1],l=o.useMergeProps(),p=e.ptm,m=e.cx,f=e.sx,b=function(n,r){return p(r,{hostName:e.hostName,context:{active:t===n}})},v=function(n,t,i){if(t.disabled)n.preventDefault();else{if(t.command&&t.command({originalEvent:n,item:t}),t.items){var o=O(t,i);u(j(j({},a),{},h({},o,!0))),r(t),e.onForward()}t.url||(n.preventDefault(),n.stopPropagation())}},y=function(n){var t=e.id+"_sep_"+n,r=l({id:t,key:t,className:m("separator"),role:"separator"},p("separator",{hostName:e.hostName}));return d.createElement("li",r)},g=function(n,r){var i=a[O(n,r)];return n.items&&i?d.createElement(k,{id:e.id+"_"+r,menuProps:e.menuProps,model:n.items,index:e.index+1,menuWidth:e.menuWidth,effectDuration:e.effectDuration,onForward:e.onForward,parentActive:n===t,submenuIcon:e.submenuIcon,ptm:p,cx:m,sx:f}):null},O=function(n,t){return n.id||e.id+"_"+t},w=function(n,r){if(!1===n.visible)return null;var i=O(n,r),o=t===n,a=s.classNames("p-menuitem-icon",n.icon),u=l({className:m("icon")},b(n,"icon")),p=s.IconUtils.getJSXIcon(n.icon,j({},u),{props:e.menuProps}),f=l({className:m("submenuIcon")},b(n,"submenuIcon")),y=l({className:m("label")},b(n,"label")),h=n.items&&s.IconUtils.getJSXIcon(e.submenuIcon||d.createElement(c.AngleRightIcon,f),j({},f),{props:e}),w=n.label&&d.createElement("span",y,n.label),S=g(n,r),E=l({href:n.url||"#",className:m("action"),target:n.target,onClick:function(e){return v(e,n,r)},"aria-disabled":n.disabled},b(n,"action")),I=d.createElement("a",E,p,w,h);n.template&&(I=s.ObjectUtils.getJSXElement(n.template,n,{onClick:function(e){return v(e,n,r)},className:"p-menuitem-link",labelClassName:"p-menuitem-text",iconClassName:a,submenuIconClassName:"p-submenu-icon",element:I,props:e,active:o}));var P=l({id:i,key:i,className:m("menuitem",{active:o,item:n}),style:n.style},b(n,"menuitem"));return d.createElement("li",P,I,S)},S=e.model?e.model.map((function(e,n){return!1===e.visible?null:e.separator?y(n):w(e,n)})):null,E=l({className:m("menu",{subProps:e}),style:f("menu",{subProps:e})},p("menu",{hostName:e.hostName}));return d.createElement("ul",E,S)}));function D(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 C(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?D(Object(t),!0).forEach((function(n){h(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):D(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}k.displayName="SlideMenuSub";var U=d.memo(d.forwardRef((function(e,n){var c=o.useMergeProps(),p=d.useContext(t.PrimeReactContext),m=x.getProps(e,p),v=P(d.useState(m.id),2),y=v[0],g=v[1],h=P(d.useState(0),2),O=h[0],w=h[1],S=P(d.useState(!1),2),E=S[0],I=S[1],N=x.setMetaData({props:m,state:{id:y,visible:E,level:O}}),j=N.ptm,D=N.cx,U=N.sx;r.useHandleStyle(x.css.styles,N.isUnstyled,{name:"slidemenu"});var _=d.useRef(null),M=d.useRef(null),H=d.useRef(null),A=d.useRef(null),R=E&&m.popup&&m.closeOnEscape,T=o.useDisplayOrder("slide-menu",R);o.useGlobalOnEscapeKey({callback:function(e){B(e)},when:R&&T,priority:[o.ESC_KEY_HANDLING_PRIORITIES.SLIDE_MENU,T]});var Z=P(o.useOverlayListener({target:M,overlay:_,listener:function(e,n){n.valid&&("outside"===n.type||p.hideOverlaysOnDocumentScrolling?B(e):s.DomHandler.isDocument(e.target)||s.DomHandler.absolutePosition(_.current,M.current))},when:E}),2),L=Z[0],W=Z[1],F=function(){w((function(e){return e+1}))},J=function(){w((function(e){return e-1}))},X=function(e){m.popup&&(E?B(e):z(e))},z=function(e){M.current=e.currentTarget,I(!0),m.onShow&&m.onShow(e)},B=function(e){M.current=e.currentTarget,I(!1),m.onHide&&m.onHide(e)},G=function(){m.autoZIndex&&s.ZIndexUtils.set("menu",_.current,p&&p.autoZIndex||f.default.autoZIndex,m.baseZIndex||p&&p.zIndex.menu||f.default.zIndex.menu),s.DomHandler.addStyles(_.current,{position:"absolute",top:"0",left:"0"}),s.DomHandler.absolutePosition(_.current,M.current)},K=function(){L()},Y=function(){M.current=null,W()},q=function(){s.ZIndexUtils.clear(_.current),w(0)};o.useMountEffect((function(){y||g(s.UniqueComponentId())})),o.useUpdateEffect((function(){w(0)}),[m.model]),o.useUpdateEffect((function(){m.onNavigate&&m.onNavigate({level:O})}),[O]),o.useUnmountEffect((function(){s.ZIndexUtils.clear(_.current)})),d.useImperativeHandle(n,(function(){return{props:m,toggle:X,show:z,hide:B,navigateForward:F,navigateBack:J,setLevelState:w,getElement:function(){return _.current}}}));var $=function(){var e=c({className:D("previousIcon")},j("previousIcon")),n=s.IconUtils.getJSXIcon(m.backIcon||d.createElement(a.ChevronLeftIcon,e),C({},e),{props:m}),t=c(j("previousLabel")),r=c({ref:H,className:D("previous",{levelState:O}),onClick:function(e){return J()}},j("previous"));return d.createElement("div",r,n,d.createElement("span",t,m.backLabel))},Q=function(){var e={height:m.viewportHeight+"px"},n=$(),t=c({ref:_,id:m.id,className:s.classNames(m.className,D("root")),style:m.style,onClick:function(e){return n=e,void(m.popup&&u.OverlayService.emit("overlay-click",{originalEvent:n,target:M.current}));var n}},x.getOtherProps(m),j("root")),r=c({className:D("wrapper"),style:e},j("wrapper")),o=c({ref:A,className:D("content")},j("content")),a=c({classNames:D("transition"),in:!m.popup||E,timeout:{enter:120,exit:100},options:m.transitionOptions,unmountOnExit:!0,onEnter:G,onEntered:K,onExit:Y,onExited:q},j("transition"));return d.createElement(i.CSSTransition,b({nodeRef:_},a),d.createElement("div",t,d.createElement("div",r,d.createElement("div",o,d.createElement(k,{id:y,hostName:"SlideMenu",menuProps:m,model:m.model,root:!0,index:0,menuWidth:m.menuWidth,effectDuration:m.effectDuration,level:O,parentActive:0===O,onForward:F,submenuIcon:m.submenuIcon,ptm:j,cx:D,sx:U}))),n))}();return m.popup?d.createElement(l.Portal,{element:Q,appendTo:m.appendTo}):Q})));return U.displayName="SlideMenu",e.SlideMenu=U,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.api,primereact.componentbase,primereact.csstransition,primereact.hooks,primereact.icons.chevronleft,primereact.overlayservice,primereact.portal,primereact.utils,primereact.icons.angleright);