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
JavaScript
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),n=require("primereact/api"),t=require("primereact/componentbase"),r=require("primereact/csstransition"),i=require("primereact/hooks"),o=require("primereact/icons/chevronleft"),a=require("primereact/overlayservice"),u=require("primereact/portal"),l=require("primereact/utils"),s=require("primereact/icons/angleright");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function p(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 m=p(e),d=c(n);function f(){return f=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},f.apply(null,arguments)}function b(e){return b="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},b(e)}function v(e,n){if("object"!=b(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n||"default");if("object"!=b(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}function y(e){var n=v(e,"string");return"symbol"==b(n)?n:n+""}function g(e,n,t){return(n=y(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function h(e){if(Array.isArray(e))return e}function O(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 w(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 S(e,n){if(e){if("string"==typeof e)return w(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)?w(e,n):void 0}}function E(){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 x(e,n){return h(e)||O(e,n)||S(e,n)||E()}var I=t.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 l.classNames("p-slidemenu-backward",{"p-hidden-space":0===n,"p-slidemenu-separator":n>0})},root:function(e){return l.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 l.classNames({"p-slidemenu-rootlist":n.root,"p-submenu-list":!n.root,"p-active-submenu":n.parentActive})},menuitem:function(e){var n=e.item;return l.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 P(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 N(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?P(Object(t),!0).forEach((function(n){g(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):P(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}var j=m.memo((function(e){var n=x(m.useState(null),2),t=n[0],r=n[1],o=x(m.useState({}),2),a=o[0],u=o[1],c=i.useMergeProps(),p=e.ptm,d=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(N(N({},a),{},g({},o,!0))),r(t),e.onForward()}t.url||(n.preventDefault(),n.stopPropagation())}},y=function(n){var t=e.id+"_sep_"+n,r=c({id:t,key:t,className:d("separator"),role:"separator"},p("separator",{hostName:e.hostName}));return m.createElement("li",r)},h=function(n,r){var i=a[O(n,r)];return n.items&&i?m.createElement(j,{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:d,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=l.classNames("p-menuitem-icon",n.icon),u=c({className:d("icon")},b(n,"icon")),p=l.IconUtils.getJSXIcon(n.icon,N({},u),{props:e.menuProps}),f=c({className:d("submenuIcon")},b(n,"submenuIcon")),y=c({className:d("label")},b(n,"label")),g=n.items&&l.IconUtils.getJSXIcon(e.submenuIcon||m.createElement(s.AngleRightIcon,f),N({},f),{props:e}),w=n.label&&m.createElement("span",y,n.label),S=h(n,r),E=c({href:n.url||"#",className:d("action"),target:n.target,onClick:function(e){return v(e,n,r)},"aria-disabled":n.disabled},b(n,"action")),x=m.createElement("a",E,p,w,g);n.template&&(x=l.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:x,props:e,active:o}));var I=c({id:i,key:i,className:d("menuitem",{active:o,item:n}),style:n.style},b(n,"menuitem"));return m.createElement("li",I,x,S)},S=e.model?e.model.map((function(e,n){return!1===e.visible?null:e.separator?y(n):w(e,n)})):null,E=c({className:d("menu",{subProps:e}),style:f("menu",{subProps:e})},p("menu",{hostName:e.hostName}));return m.createElement("ul",E,S)}));function k(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 D(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?k(Object(t),!0).forEach((function(n){g(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):k(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}j.displayName="SlideMenuSub";var C=m.memo(m.forwardRef((function(e,s){var c=i.useMergeProps(),p=m.useContext(n.PrimeReactContext),b=I.getProps(e,p),v=x(m.useState(b.id),2),y=v[0],g=v[1],h=x(m.useState(0),2),O=h[0],w=h[1],S=x(m.useState(!1),2),E=S[0],P=S[1],N=I.setMetaData({props:b,state:{id:y,visible:E,level:O}}),k=N.ptm,C=N.cx,U=N.sx;t.useHandleStyle(I.css.styles,N.isUnstyled,{name:"slidemenu"});var _=m.useRef(null),M=m.useRef(null),H=m.useRef(null),q=m.useRef(null),A=E&&b.popup&&b.closeOnEscape,T=i.useDisplayOrder("slide-menu",A);i.useGlobalOnEscapeKey({callback:function(e){z(e)},when:A&&T,priority:[i.ESC_KEY_HANDLING_PRIORITIES.SLIDE_MENU,T]});var R=x(i.useOverlayListener({target:M,overlay:_,listener:function(e,n){n.valid&&("outside"===n.type||p.hideOverlaysOnDocumentScrolling?z(e):l.DomHandler.isDocument(e.target)||l.DomHandler.absolutePosition(_.current,M.current))},when:E}),2),Z=R[0],L=R[1],W=function(){w((function(e){return e+1}))},F=function(){w((function(e){return e-1}))},J=function(e){b.popup&&(E?z(e):X(e))},X=function(e){M.current=e.currentTarget,P(!0),b.onShow&&b.onShow(e)},z=function(e){M.current=e.currentTarget,P(!1),b.onHide&&b.onHide(e)},B=function(){b.autoZIndex&&l.ZIndexUtils.set("menu",_.current,p&&p.autoZIndex||d.default.autoZIndex,b.baseZIndex||p&&p.zIndex.menu||d.default.zIndex.menu),l.DomHandler.addStyles(_.current,{position:"absolute",top:"0",left:"0"}),l.DomHandler.absolutePosition(_.current,M.current)},G=function(){Z()},K=function(){M.current=null,L()},Y=function(){l.ZIndexUtils.clear(_.current),w(0)};i.useMountEffect((function(){y||g(l.UniqueComponentId())})),i.useUpdateEffect((function(){w(0)}),[b.model]),i.useUpdateEffect((function(){b.onNavigate&&b.onNavigate({level:O})}),[O]),i.useUnmountEffect((function(){l.ZIndexUtils.clear(_.current)})),m.useImperativeHandle(s,(function(){return{props:b,toggle:J,show:X,hide:z,navigateForward:W,navigateBack:F,setLevelState:w,getElement:function(){return _.current}}}));var $=function(){var e=c({className:C("previousIcon")},k("previousIcon")),n=l.IconUtils.getJSXIcon(b.backIcon||m.createElement(o.ChevronLeftIcon,e),D({},e),{props:b}),t=c(k("previousLabel")),r=c({ref:H,className:C("previous",{levelState:O}),onClick:function(e){return F()}},k("previous"));return m.createElement("div",r,n,m.createElement("span",t,b.backLabel))},Q=function(){var e={height:b.viewportHeight+"px"},n=$(),t=c({ref:_,id:b.id,className:l.classNames(b.className,C("root")),style:b.style,onClick:function(e){return n=e,void(b.popup&&a.OverlayService.emit("overlay-click",{originalEvent:n,target:M.current}));var n}},I.getOtherProps(b),k("root")),i=c({className:C("wrapper"),style:e},k("wrapper")),o=c({ref:q,className:C("content")},k("content")),u=c({classNames:C("transition"),in:!b.popup||E,timeout:{enter:120,exit:100},options:b.transitionOptions,unmountOnExit:!0,onEnter:B,onEntered:G,onExit:K,onExited:Y},k("transition"));return m.createElement(r.CSSTransition,f({nodeRef:_},u),m.createElement("div",t,m.createElement("div",i,m.createElement("div",o,m.createElement(j,{id:y,hostName:"SlideMenu",menuProps:b,model:b.model,root:!0,index:0,menuWidth:b.menuWidth,effectDuration:b.effectDuration,level:O,parentActive:0===O,onForward:W,submenuIcon:b.submenuIcon,ptm:k,cx:C,sx:U}))),n))}();return b.popup?m.createElement(u.Portal,{element:Q,appendTo:b.appendTo}):Q})));C.displayName="SlideMenu",exports.SlideMenu=C;