@lemon-fe/components 0.1.82 → 0.1.85

package/es/MainFramework/components/Menu/index.js

@@ -0,0 +1,656 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { 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 _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import classNames from 'classnames';
+import { useDebounce } from '@lemon-fe/hooks';
+import { PREFIX_CLS as prefixCls } from '../../../constants';
+import { Divider } from 'antd';
+
+function Star(props) {
+  if (props.active) {
+    return /*#__PURE__*/React.createElement("svg", {
+      className: props.className,
+      width: "20",
+      height: "20",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, /*#__PURE__*/React.createElement("path", {
+      d: "m9.666 15.526-3.584 1.27a1 1 0 0 1-1.334-.97l.1-3.8a1 1 0 0 0-.206-.636L2.326 8.373a1 1 0 0 1 .51-1.567l3.646-1.08a1 1 0 0 0 .54-.393L9.176 2.2a1 1 0 0 1 1.648 0l2.154 3.134a1 1 0 0 0 .54.393l3.646 1.08a1 1 0 0 1 .51 1.567l-2.316 3.017a1 1 0 0 0-.206.635l.1 3.801a1 1 0 0 1-1.334.97l-3.584-1.27a1 1 0 0 0-.668 0Z",
+      fill: "currentColor",
+      fillRule: "evenodd"
+    }));
+  }
+
+  return /*#__PURE__*/React.createElement("svg", {
+    className: props.className,
+    width: "20",
+    height: "20",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "m9.954 2.52 2.406 3.238c.227.33.56.573.945.687l3.646 1.08a.25.25 0 0 1 .179.22l-2.367 3.188a1.75 1.75 0 0 0-.36 1.112l.1 3.801a.25.25 0 0 1-.156.238l-3.77-1.267a1.75 1.75 0 0 0-1.161.002l-3.585 1.27a.25.25 0 0 1-.274-.075l.04-3.976a1.75 1.75 0 0 0-.36-1.105L2.92 7.917a.25.25 0 0 1-.014-.284l3.794-1.19a1.75 1.75 0 0 0 .94-.685l2.153-3.134a.25.25 0 0 1 .16-.104Z",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    fill: "none",
+    fillRule: "evenodd"
+  }));
+}
+
+var drawerIcon = /*#__PURE__*/React.createElement("svg", {
+  width: "20",
+  height: "20",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React.createElement("g", {
+  fill: "none",
+  fillRule: "evenodd"
+}, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("g", {
+  fill: "currentColor"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M4.75,5 L15.25,5 C15.6642136,5 16,5.33578644 16,5.75 C16,6.16421356 15.6642136,6.5 15.25,6.5 L4.75,6.5 C4.33578644,6.5 4,6.16421356 4,5.75 C4,5.33578644 4.33578644,5 4.75,5 Z",
+  opacity: ".7",
+  transform: "translate(-274.000000, -586.000000) translate(274.000000, 586.000000)"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M4.75,9 L15.25,9 C15.6642136,9 16,9.33578644 16,9.75 C16,10.1642136 15.6642136,10.5 15.25,10.5 L4.75,10.5 C4.33578644,10.5 4,10.1642136 4,9.75 C4,9.33578644 4.33578644,9 4.75,9 Z",
+  opacity: ".7",
+  transform: "translate(-274.000000, -586.000000) translate(274.000000, 586.000000)"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M4.75,13 L15.25,13 C15.6642136,13 16,13.3357864 16,13.75 C16,14.1642136 15.6642136,14.5 15.25,14.5 L4.75,14.5 C4.33578644,14.5 4,14.1642136 4,13.75 C4,13.3357864 4.33578644,13 4.75,13 Z",
+  opacity: ".7",
+  transform: "translate(-274.000000, -586.000000) translate(274.000000, 586.000000)"
+})))));
+
+function FavoritesEmpty(props) {
+  return /*#__PURE__*/React.createElement("svg", _objectSpread(_objectSpread({}, props), {}, {
+    width: "72",
+    height: "72",
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlnsXlink: "http://www.w3.org/1999/xlink"
+  }), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("path", {
+    d: "M3.2 0h27.475a3.2 3.2 0 0 1 2.262.937l10.126 10.126c.6.6.937 1.414.937 2.262V46.8a3.2 3.2 0 0 1-3.2 3.2H3.2A3.2 3.2 0 0 1 0 46.8V3.2A3.2 3.2 0 0 1 3.2 0Z",
+    id: "a"
+  })), /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M10.766 23.2h20.889a3.2 3.2 0 0 1 3.051 2.236l9.98 31.6a3.2 3.2 0 0 1-3.052 4.164H20.745a3.2 3.2 0 0 1-3.051-2.236l-9.98-31.6a3.2 3.2 0 0 1 3.052-4.164Z",
+    fill: "#E7E7E7",
+    opacity: ".4"
+  }), /*#__PURE__*/React.createElement("rect", {
+    fill: "#E7E7E7",
+    x: "49.2",
+    y: "11.2",
+    width: "14.8",
+    height: "14.8",
+    rx: "3.2"
+  }), /*#__PURE__*/React.createElement("g", {
+    transform: "translate(20 11.2)"
+  }, /*#__PURE__*/React.createElement("mask", {
+    id: "b",
+    fill: "#fff"
+  }, /*#__PURE__*/React.createElement("use", {
+    xlinkHref: "#a"
+  })), /*#__PURE__*/React.createElement("use", {
+    fill: "#E7E7E7",
+    xlinkHref: "#a"
+  }), /*#__PURE__*/React.createElement("circle", {
+    fill: "#CFCFCF",
+    mask: "url(#b)",
+    cx: "31.8",
+    cy: "17",
+    r: "35.4"
+  }), /*#__PURE__*/React.createElement("rect", {
+    fill: "#BEBEBE",
+    mask: "url(#b)",
+    x: "29.2",
+    width: "14.8",
+    height: "14.8",
+    rx: "3.2"
+  })), /*#__PURE__*/React.createElement("rect", {
+    fill: "#FFF",
+    x: "30",
+    y: "31.6",
+    width: "24",
+    height: "2.4",
+    rx: "1.2"
+  }), /*#__PURE__*/React.createElement("rect", {
+    fill: "#FFF",
+    x: "30",
+    y: "39.6",
+    width: "12.8",
+    height: "2.4",
+    rx: "1.2"
+  })));
+}
+
+var favoriteIcon = /*#__PURE__*/React.createElement("svg", {
+  width: "20px",
+  height: "20px",
+  viewBox: "0 0 20 20",
+  version: "1.1",
+  xmlns: "http://www.w3.org/2000/svg",
+  xmlnsXlink: "http://www.w3.org/1999/xlink"
+}, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("rect", {
+  x: "0",
+  y: "0",
+  width: "20",
+  height: "20"
+})), /*#__PURE__*/React.createElement("g", {
+  stroke: "none",
+  strokeWidth: "1",
+  fill: "none",
+  fillRule: "evenodd"
+}, /*#__PURE__*/React.createElement("g", {
+  transform: "translate(-1398.000000, -481.000000)"
+}, /*#__PURE__*/React.createElement("g", {
+  transform: "translate(1398.000000, 481.000000)"
+}, /*#__PURE__*/React.createElement("mask", {
+  fill: "white"
+}, /*#__PURE__*/React.createElement("use", {
+  xlinkHref: "#path-1"
+})), /*#__PURE__*/React.createElement("use", {
+  fillOpacity: "0",
+  fill: "#C4C4C4",
+  xlinkHref: "#path-1"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M17.4350762,7.192388 L17.4350762,13.192388 C17.4350762,15.9538117 15.1964999,18.192388 12.4350762,18.192388 C9.67365243,18.192388 7.43507618,15.9538117 7.43507618,13.192388 L7.43507618,7.192388 C7.43507618,4.43096425 9.67365243,2.192388 12.4350762,2.192388 C15.1964999,2.192388 17.4350762,4.43096425 17.4350762,7.192388 Z",
+  fill: "currentColor",
+  opacity: "0.5",
+  mask: "url(#mask-2)",
+  transform: "translate(12.435076, 10.192388) rotate(45.000000) translate(-12.435076, -10.192388) "
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M13.192388,7.19236523 L13.192388,13.1923652 C13.192388,15.953789 10.9538117,18.1923652 8.192388,18.1923652 C5.43096425,18.1923652 3.192388,15.953789 3.192388,13.1923652 L3.192388,7.19236523 C3.192388,4.43094148 5.43096425,2.19236523 8.192388,2.19236523 C10.9538117,2.19236523 13.192388,4.43094148 13.192388,7.19236523 Z",
+  fill: "currentColor",
+  fillRule: "nonzero",
+  mask: "url(#mask-2)",
+  transform: "translate(8.192388, 10.192365) rotate(-45.000000) translate(-8.192388, -10.192365) "
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M6,6 C5.5,6 4,6.5 4,8.5",
+  stroke: "#F2F2F2",
+  strokeLinecap: "round",
+  strokeDasharray: "0,0",
+  mask: "url(#mask-2)"
+})))));
+var WIDTH = 1280;
+var FAVORITES_POPOVER = 'FAVORITES_POPOVER';
+export default function Menu(props) {
+  var menus = props.data,
+      onClick = props.onClick,
+      onFavoritesChange = props.onFavoritesChange,
+      _props$favorites = props.favorites,
+      favorites = _props$favorites === void 0 ? [] : _props$favorites;
+  var location = window.location;
+
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      popover = _useState2[0],
+      setPopover = _useState2[1];
+
+  var popup = useRef(null);
+  var drawer = useRef(null);
+  var clientWidth = useRef(document.body.clientWidth);
+
+  var _useState3 = useState(clientWidth.current <= WIDTH),
+      _useState4 = _slicedToArray(_useState3, 2),
+      collapsed = _useState4[0],
+      setCollapsed = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      visible = _useState6[0],
+      setVisible = _useState6[1];
+
+  var _useState7 = useState(0),
+      _useState8 = _slicedToArray(_useState7, 2),
+      top = _useState8[0],
+      setTop = _useState8[1];
+
+  var activeMenu = useMemo(function () {
+    var check = function check(path) {
+      if (path) {
+        return new RegExp("".concat(path.split('?')[0], "(?![^\\/])")).test(location.pathname);
+      }
+
+      return false;
+    };
+
+    for (var i = 0; i < menus.length; i += 1) {
+      var _menus$i = menus[i],
+          _menus$i$children = _menus$i.children,
+          subMenus = _menus$i$children === void 0 ? [] : _menus$i$children,
+          topPath = _menus$i.path;
+
+      if (check(topPath)) {
+        return {
+          path: [i],
+          key: topPath
+        };
+      }
+
+      for (var j = 0; j < subMenus.length; j += 1) {
+        var _subMenus$j = subMenus[j],
+            subPath = _subMenus$j.path,
+            _subMenus$j$children = _subMenus$j.children,
+            items = _subMenus$j$children === void 0 ? [] : _subMenus$j$children;
+
+        if (check(subPath)) {
+          return {
+            path: [i, j],
+            key: subPath
+          };
+        }
+
+        for (var k = 0; k < items.length; k += 1) {
+          if (check(items[k].path)) {
+            return {
+              path: [i, j, k],
+              key: items[k].path
+            };
+          }
+        }
+      }
+    }
+  }, [location.pathname, menus]);
+
+  var openMenu = function openMenu(item, elm) {
+    if (item.name === FAVORITES_POPOVER || item.children !== undefined && item.children.length > 0 || collapsed) {
+      setPopover(item);
+      setTop(elm.offsetTop);
+      setTimeout(function () {
+        if (popup.current) {
+          popup.current.classList.add('animated');
+        }
+      }, 16);
+    } else {
+      setPopover(null);
+    }
+  };
+
+  var closeMenu = function closeMenu() {
+    if (popup.current) {
+      popup.current.classList.remove('animated');
+
+      var handler = function handler() {
+        var _popup$current;
+
+        setPopover(null);
+        (_popup$current = popup.current) === null || _popup$current === void 0 ? void 0 : _popup$current.removeEventListener('transitionend', handler);
+      };
+
+      popup.current.addEventListener('transitionend', handler);
+    }
+  };
+
+  var toggle = useDebounce(function (handler) {
+    if (handler) {
+      handler();
+    }
+  }, 200);
+
+  var toggleCollapse = function toggleCollapse() {
+    setCollapsed(function (prev) {
+      return !prev;
+    });
+  };
+
+  useEffect(function () {
+    if (!visible) {
+      return;
+    }
+
+    var target = drawer.current;
+
+    if (target !== null) {
+      var handler = function handler(e) {
+        if (!target.contains(e.target)) {
+          closeDrawer();
+        }
+      };
+
+      requestAnimationFrame(function () {
+        window.addEventListener('click', handler);
+      });
+      return function () {
+        window.removeEventListener('click', handler);
+      };
+    }
+  }, [visible]);
+  useEffect(function () {
+    var handleResize = function handleResize() {
+      var width = document.body.clientWidth;
+
+      if (clientWidth.current > WIDTH && width <= WIDTH) {
+        setCollapsed(true);
+      } else if (clientWidth.current <= WIDTH && width > WIDTH) {
+        setCollapsed(false);
+      }
+
+      clientWidth.current = width;
+    };
+
+    window.addEventListener('resize', handleResize);
+    return function () {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  var openDrawer = function openDrawer() {
+    setVisible(true);
+    setTimeout(function () {
+      var _drawer$current;
+
+      (_drawer$current = drawer.current) === null || _drawer$current === void 0 ? void 0 : _drawer$current.classList.add('animated');
+    }, 16);
+  };
+
+  var closeDrawer = function closeDrawer() {
+    if (drawer.current) {
+      drawer.current.classList.remove('animated');
+
+      var handler = function handler() {
+        var _drawer$current2;
+
+        (_drawer$current2 = drawer.current) === null || _drawer$current2 === void 0 ? void 0 : _drawer$current2.removeEventListener('transitionend', handler);
+        setVisible(false);
+      };
+
+      drawer.current.addEventListener('transitionend', handler);
+    }
+  };
+
+  var handleClick = function handleClick(item) {
+    if (item.path) {
+      onClick(item);
+      closeDrawer();
+      closeMenu();
+    }
+  };
+
+  var favoritesMap = useMemo(function () {
+    return new Map(favorites.map(function (item) {
+      return [item.path || '', item];
+    }));
+  }, [favorites]);
+
+  var toggleFavorite = function toggleFavorite(e, item) {
+    e.stopPropagation();
+    var nextMap = new Map(favoritesMap);
+    var key = item.path || '';
+
+    if (nextMap.has(key)) {
+      nextMap.delete(key);
+    } else {
+      nextMap.set(key, {
+        name: item.name,
+        path: item.path
+      });
+    }
+
+    if (onFavoritesChange) {
+      onFavoritesChange(_toConsumableArray(nextMap.values()));
+    }
+  };
+
+  var renderItem = function renderItem(item, index) {
+    var favorited = favoritesMap.has(item.path || '');
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      className: classNames("".concat(prefixCls, "-menu-item"), _defineProperty({}, "".concat(prefixCls, "-menu-active"), activeMenu !== undefined && activeMenu.key === item.path)),
+      onClick: function onClick() {
+        return handleClick(item);
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        overflow: 'hidden'
+      }
+    }, item.name), /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-menu-item-favorite"),
+      onClick: function onClick(e) {
+        toggleFavorite(e, item);
+      }
+    }, /*#__PURE__*/React.createElement(Star, {
+      className: "".concat(prefixCls, "-menu-favorite-star"),
+      active: favorited
+    })));
+  };
+
+  var renderDrawerItems = function renderDrawerItems() {
+    var cols = [[], [], []];
+    var value = [0, 0, 0];
+    menus.forEach(function (item) {
+      var list = [/*#__PURE__*/React.createElement("div", {
+        className: classNames("".concat(prefixCls, "-menu-drawer-1"), _defineProperty({}, "".concat(prefixCls, "-menu-drawer-1-path"), item.path !== undefined)),
+        key: item.name,
+        onClick: function onClick() {
+          return handleClick(item);
+        }
+      }, item.name)];
+
+      if (item.children) {
+        item.children.forEach(function (subItem) {
+          list.push( /*#__PURE__*/React.createElement("div", {
+            className: "".concat(prefixCls, "-menu-drawer-2"),
+            key: "2-".concat(subItem.name),
+            onClick: function onClick() {
+              return handleClick(subItem);
+            }
+          }, subItem.name));
+
+          if (subItem.children) {
+            subItem.children.forEach(function (child) {
+              list.push( /*#__PURE__*/React.createElement("div", {
+                className: classNames("".concat(prefixCls, "-menu-drawer-3"), _defineProperty({}, "".concat(prefixCls, "-menu-active"), activeMenu !== undefined && activeMenu.key === child.path)),
+                key: "3-".concat(child.name),
+                onClick: function onClick() {
+                  return handleClick(child);
+                }
+              }, child.name));
+            });
+          }
+        });
+      }
+
+      var node = /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-menu-drawer-block")
+      }, /*#__PURE__*/React.createElement("div", null, list));
+      var target = 0;
+      var min = Infinity;
+
+      for (var i = 0; i < value.length; i++) {
+        if (value[i] < min) {
+          target = i;
+          min = value[i];
+        }
+      }
+
+      value[target] += list.length;
+      cols[target].push(node);
+    });
+    return cols.map(function (items, index) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-menu-drawer-col"),
+        key: index
+      }, items);
+    });
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(prefixCls, "-menu"), _defineProperty({}, "".concat(prefixCls, "-menu-collapsed"), collapsed))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-bar"),
+    onMouseLeave: function onMouseLeave() {
+      toggle(closeMenu);
+    }
+  }, popover !== null && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-popup"),
+    style: {
+      top: top
+    },
+    ref: popup,
+    onMouseEnter: function onMouseEnter() {
+      return toggle.cancel();
+    }
+  }, popover.children !== undefined ? popover.name === FAVORITES_POPOVER ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-popup-body"),
+    key: "pop"
+  }, popover.children !== undefined && popover.children.length > 0 ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-block-favorite")
+  }, popover.children.map(renderItem)) : /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-block-empty")
+  }, /*#__PURE__*/React.createElement(FavoritesEmpty, null), /*#__PURE__*/React.createElement("span", null, "\u6682\u65E0\u6536\u85CF"))) : /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-popup-body"),
+    key: "pop"
+  }, popover.children.map(function (item, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-menu-block"),
+      key: index
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-menu-sub-item")
+    }, item.name), item.children !== undefined && item.children.map(renderItem));
+  })) : /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-popup-tip"),
+    key: "tip"
+  }, popover.name)), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-collapse"),
+    onClick: toggleCollapse,
+    onMouseEnter: function onMouseEnter() {
+      return toggle(closeMenu);
+    }
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "20",
+    height: "20",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd",
+    opacity: ".7"
+  }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
+    d: "M14.75,5 C15.1642136,5 15.5,5.33578644 15.5,5.75 L15.5,14.25 C15.5,14.6642136 15.1642136,15 14.75,15 C14.3357864,15 14,14.6642136 14,14.25 L14,5.75 C14,5.33578644 14.3357864,5 14.75,5 Z",
+    fill: "currentColor",
+    transform: "translate(-274.000000, -57.000000) translate(284.000000, 67.000000) scale(-1, 1) translate(-284.000000, -67.000000) translate(274.000000, 57.000000)"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M15,10 C15,10.4142136 14.6642136,10.75 14.25,10.75 L5,10.75 L5,10.75 L5,9.25 L14.25,9.25 C14.6642136,9.25 15,9.58578644 15,10 Z",
+    fill: "currentColor",
+    fillRule: "nonzero",
+    transform: "translate(-274.000000, -57.000000) translate(284.000000, 67.000000) scale(-1, 1) translate(-284.000000, -67.000000) translate(274.000000, 57.000000)"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M11.7426212,6.79290128 L5.32842371,6.79290128 L5.32842371,13.2070987",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeDasharray: "0,0",
+    transform: "translate(-274.000000, -57.000000) translate(284.000000, 67.000000) scale(-1, 1) translate(-284.000000, -67.000000) translate(274.000000, 57.000000) translate(8.535522, 10.000000) rotate(-45.000000) translate(-8.535522, -10.000000)"
+  })))))), menus.map(function (item, index) {
+    var _classNames5;
+
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      className: classNames("".concat(prefixCls, "-menu-top-item"), (_classNames5 = {}, _defineProperty(_classNames5, "".concat(prefixCls, "-menu-top-item-active"), activeMenu !== undefined && activeMenu.path[0] === index), _defineProperty(_classNames5, "".concat(prefixCls, "-menu-top-item-popover-active"), item === popover), _classNames5)),
+      onClick: function onClick() {
+        return handleClick(item);
+      },
+      onMouseEnter: function onMouseEnter(e) {
+        var target = e.currentTarget;
+        toggle(function () {
+          return openMenu(item, target);
+        });
+      }
+    }, typeof item.icon === 'string' ? /*#__PURE__*/React.createElement("img", {
+      className: "".concat(prefixCls, "-menu-icon"),
+      src: item.icon
+    }) : /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-menu-icon")
+    }, item.icon), /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-menu-title")
+    }, item.name));
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(prefixCls, "-menu-divider-div"), _defineProperty({}, "".concat(prefixCls, "-menu-divider-div-collapsed"), collapsed))
+  }, /*#__PURE__*/React.createElement(Divider, {
+    className: "".concat(prefixCls, "-menu-divider")
+  })), !collapsed ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-other-title")
+  }, "\u529F\u80FD\u7BA1\u7406") : null, /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(prefixCls, "-menu-top-item"), _defineProperty({}, "".concat(prefixCls, "-menu-top-item-popover-active"), (popover === null || popover === void 0 ? void 0 : popover.name) === FAVORITES_POPOVER)),
+    onMouseEnter: function onMouseEnter(e) {
+      var target = e.currentTarget;
+      toggle(function () {
+        return openMenu({
+          name: FAVORITES_POPOVER,
+          children: _toConsumableArray(favoritesMap.values())
+        }, target);
+      });
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-icon")
+  }, favoriteIcon), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-title")
+  }, "\u6536\u85CF"))), false && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-gutter")
+  }), collapsed ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-top-item"),
+    onClick: openDrawer
+  }, drawerIcon) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-label")
+  }, "\u6CA1\u6709\u627E\u5230\u60F3\u8981\u7684\u529F\u80FD?"), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-more"),
+    onClick: openDrawer
+  }, drawerIcon, /*#__PURE__*/React.createElement("span", null, "\u67E5\u770B\u5168\u90E8")))), visible && /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-drawer"),
+    ref: drawer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-drawer-header")
+  }, /*#__PURE__*/React.createElement("div", null, "\u67E5\u770B\u5168\u90E8"), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-drawer-close"),
+    onClick: closeDrawer
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "16",
+    height: "16",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd",
+    opacity: ".7"
+  }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("g", {
+    transform: "translate(-1880.000000, -20.000000) translate(1880.000000, 20.000000)",
+    fill: "currentColor"
+  }, /*#__PURE__*/React.createElement("rect", {
+    transform: "translate(8.000000, 8.000000) rotate(-45.000000) translate(-8.000000, -8.000000)",
+    x: "7.25",
+    y: "1",
+    width: "1.5",
+    height: "14",
+    rx: ".75"
+  }), /*#__PURE__*/React.createElement("rect", {
+    transform: "translate(8.000000, 8.000000) scale(-1, 1) rotate(-45.000000) translate(-8.000000, -8.000000)",
+    x: "7.25",
+    y: "1",
+    width: "1.5",
+    height: "14",
+    rx: ".75"
+  }))))))), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu-drawer-body")
+  }, renderDrawerItems())), document.body));
+}