burger-menu
Version:
A modern, flexible menu component that provides navigation for pages and features.
3 lines (2 loc) • 6.28 kB
JavaScript
import e,{createElement as t,useState as n,useCallback as l,useMemo as s,Children as a,cloneElement as i,useRef as o,useEffect as r,isValidElement as c}from"react";import m from"classnames";import{motion as d,AnimatePresence as u}from"framer-motion";function p(e,t){var n={};for(var l in e)Object.prototype.hasOwnProperty.call(e,l)&&t.indexOf(l)<0&&(n[l]=e[l]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var s=0;for(l=Object.getOwnPropertySymbols(e);s<l.length;s++)t.indexOf(l[s])<0&&Object.prototype.propertyIsEnumerable.call(e,l[s])&&(n[l[s]]=e[l[s]])}return n}function v(n){return function(l){const{style:s,className:a,rotate:i}=l,o=p(l,["style","className","rotate"]),r=m("icon icon-default",a),c={};return Number.isSafeInteger(i)&&(c.transform=`rotate(${i}deg)`),Object.assign(c,s),e.createElement("span",Object.assign({role:"img",className:r,style:c},o),t(n))}}var y=v((function(t){return e.createElement("svg",Object.assign({viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em"},t),e.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 h=t=>{const{children:a,isVisible:i}=t,[o,r]=n(0),c=l((e=>{if(e){const t=e.scrollHeight;t&&o!==t&&r(t)}}),[o]),m=s((()=>`${Math.random()}:${Date.now()}`),[]),p=e.createElement(d.div,{className:"sub-menu",ref:c,key:m,transition:{duration:.3,ease:"easeInOut"},initial:"collapsed",animate:i?"open":"collapsed",exit:"collapsed",variants:{open:{height:o||"auto",opacity:1,overflow:"auto",transitionEnd:{height:"auto"}},collapsed:{height:0,opacity:0,overflow:"hidden"}}},a||"");return e.createElement(u,null,i&&p)},g=t=>{const{title:l,icon:s,children:o}=t,r=p(t,["title","icon","children"]),c=e=>{var t;return e.props.itemKey===r.selectedKey||!!(null===(t=e.props.children)||void 0===t?void 0:t.length)&&e.props.children.some(c)},[m,d]=n({isVisible:a.toArray(o).some(c),rotate:0}),{isVisible:u,rotate:v}=m;return e.createElement("div",{className:"sub-menu-wrap"},e.createElement("div",{className:"sub-item",onClick:()=>{const e=m.isVisible?0:180;d(Object.assign(Object.assign({},m),{isVisible:!m.isVisible,rotate:e}))}},e.createElement("span",{className:"title"},l),e.createElement("span",{className:"arrow"},s||e.createElement(y,{className:"arrow",rotate:v}))),e.createElement(h,{isVisible:u},a.map(o,(e=>i(e,Object.assign(Object.assign({},r),{level:r.level+1}))))))};g.defaultProps={};const b={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%"})},f={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 E(){}var N=v((function(t){return e.createElement("svg",Object.assign({viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em"},t),e.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 w=t=>{var l,s;const[p,v]=n(!1),y=o(null),{isOpen:h,width:g,duration:E,customCrossIcon:w,customIcon:O,side:x,animate:C}=t;r((()=>{void 0!==h&&v(h)}),[h]);const j=()=>{t.onClose(!1)};function k(e){let t=b[e]?function(e){return e("string"!=typeof g?`${g}px`:g)}(b[e]):{};return t=Object.assign({},t),t}const I=()=>{const e=(e,t)=>{null==e||e.classList[p?"add":"remove"](t)};t.bodyClassName&&e(document.querySelector("body"),t.bodyClassName),t.htmlClassName&&e(document.querySelector("html"),t.htmlClassName)},K=w||e.createElement(N,{className:"close-icon"}),V=t.children?a.map(t.children,(e=>i(e,{onClick:t.onClick,selectedKey:t.selectedKey,level:1}))):null,L=null!==(s=null===(l=null==f?void 0:f[C])||void 0===l?void 0:l[x])&&void 0!==s?s:{};return e.createElement(e.Fragment,null,!t.noOverlay&&e.createElement(u,null,p&&e.createElement(d.div,{className:`overlay ${t.overlayClassName}`,style:k("overlay"),onClick:()=>{j()},initial:"closed",animate:"open",exit:"closed",variants:{open:{opacity:1},closed:{opacity:0}}})),e.createElement(u,{onExitComplete:()=>{p||(I(),t.onClose())}},p&&e.createElement(d.div,{className:m("menu-wrap",t.className),ref:y,style:Object.assign(Object.assign({},k("menuWrap")),null==L?void 0:L.style),transition:{duration:E,ease:"easeInOut"},initial:"end",animate:"start",exit:"end",variants:{start:null==L?void 0:L.start,end:null==L?void 0:L.end},onAnimationComplete:()=>{p&&(I(),t.onOpen())}},e.createElement("div",{className:"head"},c(O)&&i(O,{className:m("logo",O.props.className)}),e.createElement("div",{className:"close",onClick:j},K)),e.createElement("div",{className:"menu"},V))))};w.defaultProps={width:300,noOverlay:!1,overlayClassName:"",onOpen:E,onClose:E,onClick:E,side:"right",animate:"slide"};const O=t=>{return e.createElement("div",{className:m("bm-item",{"bm-item-selected":t.itemKey===t.selectedKey}),onClick:e=>{const n={itemKey:t.itemKey,domEvent:e,text:t.text};t.onClick(n)}},(n=t.icon)||t.level>1?e.createElement("i",{className:"bm-item-icon"},n):null,e.createElement("span",{className:"item-text"},t.text));var n};O.defaultProps={onClick:E,icon:null,level:1};const x=w,C=g,j=O;export{j as Item,x as Menu,C as SubMenu};
//# sourceMappingURL=index.js.map