burger-menu/lib/index.js

A modern, flexible menu component that provides navigation for pages and features.

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("classnames"),l=require("framer-motion");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=a(e),s=a(t);function i(e,t){var l={};for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&t.indexOf(a)<0&&(l[a]=e[a]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(a=Object.getOwnPropertySymbols(e);n<a.length;n++)t.indexOf(a[n])<0&&Object.prototype.propertyIsEnumerable.call(e,a[n])&&(l[a[n]]=e[a[n]])}return l}function o(t){return function(l){const{style:a,className:o,rotate:r}=l,c=i(l,["style","className","rotate"]),d=s.default("icon icon-default",o),m={};return Number.isSafeInteger(r)&&(m.transform=`rotate(${r}deg)`),Object.assign(m,a),n.default.createElement("span",Object.assign({role:"img",className:d,style:m},c),e.createElement(t))}}var r=o((function(e){return n.default.createElement("svg",Object.assign({viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em"},e),n.default.createElement("path",{d:"M904.533333 311.466667c-17.066667-17.066667-42.666667-17.066667-59.733333 0L512 644.266667 179.2 311.466667c-17.066667-17.066667-42.666667-17.066667-59.733333 0-17.066667 17.066667-17.066667 42.666667 0 59.733333l362.666666 362.666667c8.533333 8.533333 19.2 12.8 29.866667 12.8s21.333333-4.266667 29.866667-12.8l362.666666-362.666667c17.066667-17.066667 17.066667-42.666667 0-59.733333z","p-id":"4865"}))}));const c=t=>{const{children:a,isVisible:s}=t,[i,o]=e.useState(0),r=e.useCallback((e=>{if(e){const t=e.scrollHeight;t&&i!==t&&o(t)}}),[i]),c=e.useMemo((()=>`${Math.random()}:${Date.now()}`),[]),d=n.default.createElement(l.motion.div,{className:"sub-menu",ref:r,key:c,transition:{duration:.3,ease:"easeInOut"},initial:"collapsed",animate:s?"open":"collapsed",exit:"collapsed",variants:{open:{height:i||"auto",opacity:1,overflow:"auto",transitionEnd:{height:"auto"}},collapsed:{height:0,opacity:0,overflow:"hidden"}}},a||"");return n.default.createElement(l.AnimatePresence,null,s&&d)},d=t=>{const{title:l,icon:a,children:s}=t,o=i(t,["title","icon","children"]),d=e=>{var t;return e.props.itemKey===o.selectedKey||!!(null===(t=e.props.children)||void 0===t?void 0:t.length)&&e.props.children.some(d)},[m,u]=e.useState({isVisible:e.Children.toArray(s).some(d),rotate:0}),{isVisible:f,rotate:p}=m;return n.default.createElement("div",{className:"sub-menu-wrap"},n.default.createElement("div",{className:"sub-item",onClick:()=>{const e=m.isVisible?0:180;u(Object.assign(Object.assign({},m),{isVisible:!m.isVisible,rotate:e}))}},n.default.createElement("span",{className:"title"},l),n.default.createElement("span",{className:"arrow"},a||n.default.createElement(r,{className:"arrow",rotate:p}))),n.default.createElement(c,{isVisible:f},e.Children.map(s,(t=>e.cloneElement(t,Object.assign(Object.assign({},o),{level:o.level+1}))))))};d.defaultProps={};const m={overlay:()=>({position:"fixed",zIndex:1e3,width:"100%",height:"100%",top:0,bottom:0,left:0,right:0,background:"rgba(0, 0, 0, 0.3)"}),menuWrap:e=>({position:"fixed",zIndex:1100,width:e,height:"100%"})},u={slide:{right:{start:{x:"0"},end:{x:"100%"},style:{right:0}},left:{start:{x:"100%"},end:{x:"0"},style:{right:"100%"}}},fallDown:{left:{start:{y:"100%"},end:{y:"0"},style:{left:0,top:"-100%"}},right:{start:{y:"100%"},end:{y:"0"},style:{right:0,top:"-100%"}}}};function f(){}var p=o((function(e){return n.default.createElement("svg",Object.assign({viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em"},e),n.default.createElement("path",{d:"M571.733333 512l268.8-268.8c17.066667-17.066667 17.066667-42.666667 0-59.733333-17.066667-17.066667-42.666667-17.066667-59.733333 0L512 452.266667 243.2 183.466667c-17.066667-17.066667-42.666667-17.066667-59.733333 0-17.066667 17.066667-17.066667 42.666667 0 59.733333L452.266667 512 183.466667 780.8c-17.066667 17.066667-17.066667 42.666667 0 59.733333 8.533333 8.533333 19.2 12.8 29.866666 12.8s21.333333-4.266667 29.866667-12.8L512 571.733333l268.8 268.8c8.533333 8.533333 19.2 12.8 29.866667 12.8s21.333333-4.266667 29.866666-12.8c17.066667-17.066667 17.066667-42.666667 0-59.733333L571.733333 512z","p-id":"4730"}))}));const v=t=>{var a,i;const[o,r]=e.useState(!1),c=e.useRef(null),{isOpen:d,width:f,duration:v,customCrossIcon:y,customIcon:h,side:g,animate:b}=t;e.useEffect((()=>{void 0!==d&&r(d)}),[d]);const E=()=>{t.onClose(!1)};function N(e){let t=m[e]?function(e){return e("string"!=typeof f?`${f}px`:f)}(m[e]):{};return t=Object.assign({},t),t}const O=()=>{const e=(e,t)=>{null==e||e.classList[o?"add":"remove"](t)};t.bodyClassName&&e(document.querySelector("body"),t.bodyClassName),t.htmlClassName&&e(document.querySelector("html"),t.htmlClassName)},w=y||n.default.createElement(p,{className:"close-icon"}),x=t.children?e.Children.map(t.children,(l=>e.cloneElement(l,{onClick:t.onClick,selectedKey:t.selectedKey,level:1}))):null,C=null!==(i=null===(a=null==u?void 0:u[b])||void 0===a?void 0:a[g])&&void 0!==i?i:{};return n.default.createElement(n.default.Fragment,null,!t.noOverlay&&n.default.createElement(l.AnimatePresence,null,o&&n.default.createElement(l.motion.div,{className:`overlay ${t.overlayClassName}`,style:N("overlay"),onClick:()=>{E()},initial:"closed",animate:"open",exit:"closed",variants:{open:{opacity:1},closed:{opacity:0}}})),n.default.createElement(l.AnimatePresence,{onExitComplete:()=>{o||(O(),t.onClose())}},o&&n.default.createElement(l.motion.div,{className:s.default("menu-wrap",t.className),ref:c,style:Object.assign(Object.assign({},N("menuWrap")),null==C?void 0:C.style),transition:{duration:v,ease:"easeInOut"},initial:"end",animate:"start",exit:"end",variants:{start:null==C?void 0:C.start,end:null==C?void 0:C.end},onAnimationComplete:()=>{o&&(O(),t.onOpen())}},n.default.createElement("div",{className:"head"},e.isValidElement(h)&&e.cloneElement(h,{className:s.default("logo",h.props.className)}),n.default.createElement("div",{className:"close",onClick:E},w)),n.default.createElement("div",{className:"menu"},x))))};v.defaultProps={width:300,noOverlay:!1,overlayClassName:"",onOpen:f,onClose:f,onClick:f,side:"right",animate:"slide"};const y=e=>{return n.default.createElement("div",{className:s.default("bm-item",{"bm-item-selected":e.itemKey===e.selectedKey}),onClick:t=>{const l={itemKey:e.itemKey,domEvent:t,text:e.text};e.onClick(l)}},(t=e.icon)||e.level>1?n.default.createElement("i",{className:"bm-item-icon"},t):null,n.default.createElement("span",{className:"item-text"},e.text));var t};y.defaultProps={onClick:f,icon:null,level:1};const h=v,g=d,b=y;exports.Item=b,exports.Menu=h,exports.SubMenu=g;