@nocobase/client 0.10.0-alpha.2 → 0.10.0-alpha.4

package/es/schema-component/antd/menu/Menu.js

@@ -1,14 +1,9 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-var _excluded = ["onSelect", "mode", "selectedUid", "defaultSelectedUid", "sideMenuRefScopeKey", "defaultSelectedKeys", "defaultOpenKeys"],
-  _excluded2 = ["icon"],
-  _excluded3 = ["icon"],
-  _excluded4 = ["icon"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
-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) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+var _excluded = ["onSelect", "mode", "selectedUid", "defaultSelectedUid", "sideMenuRefScopeKey", "defaultSelectedKeys", "defaultOpenKeys", "children"],
+  _excluded2 = ["icon", "children"],
+  _excluded3 = ["icon", "children"],
+  _excluded4 = ["icon", "children"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 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); }
@@ -17,21 +12,170 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+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) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { css } from '@emotion/css';
-import { observer, RecursionField, SchemaExpressionScopeContext, useField, useFieldSchema } from '@formily/react';
+import { FieldContext, observer, RecursionField, SchemaContext, SchemaExpressionScopeContext, useField, useFieldSchema } from '@formily/react';
+import { error } from '@nocobase/utils/client';
 import { Menu as AntdMenu } from 'antd';
-import React, { createContext, useContext, useEffect, useState } from 'react';
+import React, { createContext, useContext, useEffect, useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
 import { createDesignable, DndContext, SortableItem, useDesignable, useDesigner } from '../..';
 import { Icon, useAPIClient, useSchemaInitializer } from '../../../';
+import { useCollectMenuItems, useMenuItem } from '../../../hooks/useMenuItem';
 import { useProps } from '../../hooks/useProps';
 import { MenuDesigner } from './Menu.Designer';
 import { findKeysByUid, findMenuItem } from './util';
 var subMenuDesignerCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  display: inline-block;\n  margin-left: -24px;\n  margin-right: -34px;\n  padding: 0 34px 0 24px;\n  width: calc(100% + 58px);\n  &:hover {\n    > .general-schema-designer {\n      display: block;\n    }\n  }\n  &.nb-action-link {\n    > .general-schema-designer {\n      top: -10px;\n      bottom: -10px;\n      left: -10px;\n      right: -10px;\n    }\n  }\n  > .general-schema-designer {\n    position: absolute;\n    z-index: 999;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    display: none;\n    background: rgba(241, 139, 98, 0.06);\n    border: 0;\n    pointer-events: none;\n    > .general-schema-designer-icons {\n      position: absolute;\n      right: 2px;\n      top: 2px;\n      line-height: 16px;\n      pointer-events: all;\n      .ant-space-item {\n        background-color: #f18b62;\n        color: #fff;\n        line-height: 16px;\n        width: 16px;\n        padding-left: 1px;\n      }\n    }\n  }\n"])));
 var designerCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-left: -20px;\n  margin-right: -20px;\n  padding: 0 20px;\n  width: calc(100% + 40px);\n  &:hover {\n    > .general-schema-designer {\n      display: block;\n    }\n  }\n  &.nb-action-link {\n    > .general-schema-designer {\n      top: -10px;\n      bottom: -10px;\n      left: -10px;\n      right: -10px;\n    }\n  }\n  > .general-schema-designer {\n    position: absolute;\n    z-index: 999;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    display: none;\n    background: rgba(241, 139, 98, 0.06);\n    border: 0;\n    pointer-events: none;\n    > .general-schema-designer-icons {\n      position: absolute;\n      right: 2px;\n      top: 2px;\n      line-height: 16px;\n      pointer-events: all;\n      .ant-space-item {\n        background-color: #f18b62;\n        color: #fff;\n        line-height: 16px;\n        width: 16px;\n        padding-left: 1px;\n      }\n    }\n  }\n"])));
-var antdMenuClass = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  .ant-menu-item:hover {\n    > .ant-menu-title-content > div {\n      .general-schema-designer {\n        display: block;\n      }\n    }\n  }\n"])));
+var headerMenuClass = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  .ant-menu-item:hover {\n    > .ant-menu-title-content > div {\n      .general-schema-designer {\n        display: block;\n      }\n    }\n  }\n"])));
+var sideMenuClass = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  height: 100%;\n  overflow-y: auto;\n  overflow-x: hidden;\n  .ant-menu-item {\n    > .ant-menu-title-content {\n      margin-left: -24px;\n      margin-right: -16px;\n      padding: 0 16px 0 24px;\n      > div {\n        > .general-schema-designer {\n          right: 6px !important;\n        }\n      }\n    }\n  }\n  .ant-menu-submenu-title {\n    .ant-menu-title-content {\n      margin-left: -24px;\n      margin-right: -34px;\n      padding: 0 34px 0 24px;\n      > div {\n        > .general-schema-designer {\n          right: 6px !important;\n        }\n        > span.anticon {\n          margin-right: 10px;\n        }\n      }\n    }\n  }\n"])));
+var menuItemClass = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  :active {\n    background: inherit;\n  }\n"])));
+var HeaderMenu = function HeaderMenu(_ref) {
+  var others = _ref.others,
+    schema = _ref.schema,
+    mode = _ref.mode,
+    _onSelect = _ref.onSelect,
+    setLoading = _ref.setLoading,
+    setDefaultSelectedKeys = _ref.setDefaultSelectedKeys,
+    defaultSelectedKeys = _ref.defaultSelectedKeys,
+    defaultOpenKeys = _ref.defaultOpenKeys,
+    selectedKeys = _ref.selectedKeys,
+    designable = _ref.designable,
+    render = _ref.render,
+    children = _ref.children;
+  var _useMenuItem = useMenuItem(),
+    Component = _useMenuItem.Component,
+    getMenuItems = _useMenuItem.getMenuItems;
+  var items = useMemo(function () {
+    var designerBtn = {
+      key: 'x-designer-button',
+      disabled: true,
+      style: {
+        padding: '0 8px',
+        order: 9999
+      },
+      label: render({
+        style: {
+          background: 'none'
+        }
+      }),
+      notdelete: true
+    };
+    var result = getMenuItems(function () {
+      return children;
+    });
+    if (designable) {
+      result.push(designerBtn);
+    }
+    return result;
+  }, [children, designable]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Component, null), /*#__PURE__*/React.createElement(AntdMenu, _objectSpread(_objectSpread({}, others), {}, {
+    className: headerMenuClass,
+    onSelect: function onSelect(info) {
+      var s = schema.properties[info.key];
+      if (mode === 'mix') {
+        if (s['x-component'] !== 'Menu.SubMenu') {
+          _onSelect === null || _onSelect === void 0 ? void 0 : _onSelect(info);
+        } else {
+          var menuItemSchema = findMenuItem(s);
+          if (!menuItemSchema) {
+            return _onSelect === null || _onSelect === void 0 ? void 0 : _onSelect(info);
+          }
+          // TODO
+          setLoading(true);
+          var keys = findKeysByUid(schema, menuItemSchema['x-uid']);
+          setDefaultSelectedKeys(keys);
+          setTimeout(function () {
+            setLoading(false);
+          }, 100);
+          _onSelect === null || _onSelect === void 0 ? void 0 : _onSelect({
+            key: menuItemSchema.name,
+            item: {
+              props: {
+                schema: menuItemSchema
+              }
+            }
+          });
+        }
+      } else {
+        _onSelect === null || _onSelect === void 0 ? void 0 : _onSelect(info);
+      }
+    },
+    mode: mode === 'mix' ? 'horizontal' : mode,
+    defaultOpenKeys: defaultOpenKeys,
+    defaultSelectedKeys: defaultSelectedKeys,
+    selectedKeys: selectedKeys,
+    items: items
+  })));
+};
+var SideMenu = function SideMenu(_ref2) {
+  var _sideMenuRef$current;
+  var loading = _ref2.loading,
+    mode = _ref2.mode,
+    sideMenuSchema = _ref2.sideMenuSchema,
+    sideMenuRef = _ref2.sideMenuRef,
+    defaultOpenKeys = _ref2.defaultOpenKeys,
+    defaultSelectedKeys = _ref2.defaultSelectedKeys,
+    _onSelect2 = _ref2.onSelect,
+    render = _ref2.render,
+    t = _ref2.t,
+    api = _ref2.api,
+    refresh = _ref2.refresh,
+    designable = _ref2.designable;
+  var _useMenuItem2 = useMenuItem(),
+    Component = _useMenuItem2.Component,
+    getMenuItems = _useMenuItem2.getMenuItems;
+  var items = useMemo(function () {
+    var result = getMenuItems(function () {
+      return /*#__PURE__*/React.createElement(RecursionField, {
+        schema: sideMenuSchema,
+        onlyRenderProperties: true
+      });
+    });
+    if (designable) {
+      result.push({
+        key: 'x-designer-button',
+        disabled: true,
+        label: render({
+          insert: function insert(s) {
+            var dn = createDesignable({
+              t: t,
+              api: api,
+              refresh: refresh,
+              current: sideMenuSchema
+            });
+            dn.loadAPIClientEvents();
+            dn.insertAdjacent('beforeEnd', s);
+          }
+        }),
+        order: 1,
+        notdelete: true
+      });
+    }
+    return result;
+  }, [render, sideMenuSchema, designable, loading]);
+  if (loading) {
+    return null;
+  }
+  return mode === 'mix' && (sideMenuSchema === null || sideMenuSchema === void 0 ? void 0 : sideMenuSchema['x-component']) === 'Menu.SubMenu' && (sideMenuRef === null || sideMenuRef === void 0 ? void 0 : (_sideMenuRef$current = sideMenuRef.current) === null || _sideMenuRef$current === void 0 ? void 0 : _sideMenuRef$current.firstChild) && /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(MenuModeContext.Provider, {
+    value: 'inline'
+  }, /*#__PURE__*/React.createElement(Component, null), /*#__PURE__*/React.createElement(AntdMenu, {
+    mode: 'inline',
+    defaultOpenKeys: defaultOpenKeys,
+    defaultSelectedKeys: defaultSelectedKeys,
+    onSelect: function onSelect(info) {
+      _onSelect2 === null || _onSelect2 === void 0 ? void 0 : _onSelect2(info);
+    },
+    className: sideMenuClass,
+    items: items
+  })), sideMenuRef.current.firstChild);
+};
 var MenuModeContext = /*#__PURE__*/createContext(null);
 MenuModeContext.displayName = 'MenuModeContext';
 var useSideMenuRef = function useSideMenuRef() {
@@ -47,15 +191,15 @@ var useSideMenuRef = function useSideMenuRef() {
 var MenuItemDesignerContext = /*#__PURE__*/createContext(null);
 MenuItemDesignerContext.displayName = 'MenuItemDesignerContext';
 export var Menu = observer(function (props) {
-  var _sideMenuRef$current;
   var _useProps = useProps(props),
-    _onSelect = _useProps.onSelect,
+    onSelect = _useProps.onSelect,
     mode = _useProps.mode,
     selectedUid = _useProps.selectedUid,
     defaultSelectedUid = _useProps.defaultSelectedUid,
     sideMenuRefScopeKey = _useProps.sideMenuRefScopeKey,
     dSelectedKeys = _useProps.defaultSelectedKeys,
     dOpenKeys = _useProps.defaultOpenKeys,
+    children = _useProps.children,
     others = _objectWithoutProperties(_useProps, _excluded);
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
@@ -96,20 +240,23 @@ export var Menu = observer(function (props) {
     _useState8 = _slicedToArray(_useState7, 2),
     defaultOpenKeys = _useState8[0],
     setDefaultOpenKeys = _useState8[1];
-  var _useState9 = useState(function () {
-      var key = (defaultSelectedKeys === null || defaultSelectedKeys === void 0 ? void 0 : defaultSelectedKeys[0]) || null;
-      if (mode === 'mix' && key) {
-        var _schema$properties;
-        var s = (_schema$properties = schema.properties) === null || _schema$properties === void 0 ? void 0 : _schema$properties[key];
-        if (s['x-component'] === 'Menu.SubMenu') {
-          return s;
-        }
+  var sideMenuSchema = useMemo(function () {
+    var key;
+    if (selectedUid) {
+      var keys = findKeysByUid(schema, selectedUid);
+      key = (keys === null || keys === void 0 ? void 0 : keys[0]) || null;
+    } else {
+      key = (defaultSelectedKeys === null || defaultSelectedKeys === void 0 ? void 0 : defaultSelectedKeys[0]) || null;
+    }
+    if (mode === 'mix' && key) {
+      var _schema$properties;
+      var s = (_schema$properties = schema.properties) === null || _schema$properties === void 0 ? void 0 : _schema$properties[key];
+      if (s['x-component'] === 'Menu.SubMenu') {
+        return s;
       }
-      return null;
-    }),
-    _useState10 = _slicedToArray(_useState9, 2),
-    sideMenuSchema = _useState10[0],
-    setSideMenuSchema = _useState10[1];
+    }
+    return null;
+  }, [defaultSelectedKeys, mode, schema, selectedUid]);
   useEffect(function () {
     if (!selectedUid) {
       setSelectedKeys(undefined);
@@ -120,18 +267,6 @@ export var Menu = observer(function (props) {
     if (['inline', 'mix'].includes(mode)) {
       setDefaultOpenKeys(dOpenKeys || keys);
     }
-    var key = (keys === null || keys === void 0 ? void 0 : keys[0]) || null;
-    if (mode === 'mix') {
-      if (key) {
-        var _schema$properties2;
-        var s = (_schema$properties2 = schema.properties) === null || _schema$properties2 === void 0 ? void 0 : _schema$properties2[key];
-        if (s['x-component'] === 'Menu.SubMenu') {
-          setSideMenuSchema(s);
-        }
-      } else {
-        setSideMenuSchema(null);
-      }
-    }
   }, [selectedUid]);
   useEffect(function () {
     if (['inline', 'mix'].includes(mode)) {
@@ -144,156 +279,171 @@ export var Menu = observer(function (props) {
     value: Designer
   }, /*#__PURE__*/React.createElement(MenuModeContext.Provider, {
     value: mode
-  }, /*#__PURE__*/React.createElement(AntdMenu, _objectSpread(_objectSpread({}, others), {}, {
-    className: antdMenuClass,
-    onSelect: function onSelect(info) {
-      var s = schema.properties[info.key];
-      if (mode === 'mix') {
-        setSideMenuSchema(s);
-        if (s['x-component'] !== 'Menu.SubMenu') {
-          _onSelect && _onSelect(info);
-        } else {
-          var menuItemSchema = findMenuItem(s);
-          if (!menuItemSchema) {
-            return;
-          }
-          // TODO
-          setLoading(true);
-          var keys = findKeysByUid(schema, menuItemSchema['x-uid']);
-          setDefaultSelectedKeys(keys);
-          setTimeout(function () {
-            setLoading(false);
-          }, 100);
-          _onSelect && _onSelect({
-            key: menuItemSchema.name,
-            item: {
-              props: {
-                schema: menuItemSchema
-              }
-            }
-          });
-        }
-      } else {
-        _onSelect && _onSelect(info);
-      }
-    },
-    mode: mode === 'mix' ? 'horizontal' : mode,
-    defaultOpenKeys: defaultOpenKeys,
+  }, /*#__PURE__*/React.createElement(HeaderMenu, {
+    others: others,
+    schema: schema,
+    mode: mode,
+    onSelect: onSelect,
+    setLoading: setLoading,
+    setDefaultSelectedKeys: setDefaultSelectedKeys,
     defaultSelectedKeys: defaultSelectedKeys,
-    selectedKeys: selectedKeys
-  }), designable && /*#__PURE__*/React.createElement(AntdMenu.Item, {
-    disabled: true,
-    key: "x-designer-button",
-    style: {
-      padding: '0 8px',
-      order: 9999
-    }
-  }, render({
-    style: {
-      background: 'none'
-    }
-  })), props.children), loading ? null : mode === 'mix' && (sideMenuSchema === null || sideMenuSchema === void 0 ? void 0 : sideMenuSchema['x-component']) === 'Menu.SubMenu' && (sideMenuRef === null || sideMenuRef === void 0 ? void 0 : (_sideMenuRef$current = sideMenuRef.current) === null || _sideMenuRef$current === void 0 ? void 0 : _sideMenuRef$current.firstChild) && /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(MenuModeContext.Provider, {
-    value: 'inline'
-  }, /*#__PURE__*/React.createElement(AntdMenu, {
-    mode: 'inline',
+    defaultOpenKeys: defaultOpenKeys,
+    selectedKeys: selectedKeys,
+    designable: designable,
+    render: render
+  }, children), /*#__PURE__*/React.createElement(SideMenu, {
+    loading: loading,
+    mode: mode,
+    sideMenuSchema: sideMenuSchema,
+    sideMenuRef: sideMenuRef,
     defaultOpenKeys: defaultOpenKeys,
     defaultSelectedKeys: defaultSelectedKeys,
-    onSelect: function onSelect(info) {
-      _onSelect && _onSelect(info);
-    },
-    className: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n                        height: 100%;\n                        overflow-y: auto;\n                        overflow-x: hidden;\n                        .ant-menu-item {\n                          > .ant-menu-title-content {\n                            margin-left: -24px;\n                            margin-right: -16px;\n                            padding: 0 16px 0 24px;\n                            > div {\n                              > .general-schema-designer {\n                                right: 6px !important;\n                              }\n                            }\n                          }\n                        }\n                        .ant-menu-submenu-title {\n                          .ant-menu-title-content {\n                            margin-left: -24px;\n                            margin-right: -34px;\n                            padding: 0 34px 0 24px;\n                            > div {\n                              > .general-schema-designer {\n                                right: 6px !important;\n                              }\n                              > span.anticon {\n                                margin-right: 10px;\n                              }\n                            }\n                          }\n                        }\n                      "])))
-  }, /*#__PURE__*/React.createElement(RecursionField, {
-    schema: sideMenuSchema,
-    onlyRenderProperties: true
-  }), render({
-    style: {
-      margin: 8
-    },
-    insert: function insert(s) {
-      var dn = createDesignable({
-        t: t,
-        api: api,
-        refresh: refresh,
-        current: sideMenuSchema
-      });
-      dn.loadAPIClientEvents();
-      dn.insertAdjacent('beforeEnd', s);
-    }
-  }))), sideMenuRef.current.firstChild))));
+    onSelect: onSelect,
+    render: render,
+    t: t,
+    api: api,
+    refresh: refresh,
+    designable: designable
+  }))));
 }, {
   displayName: 'Menu'
 });
 Menu.Item = observer(function (props) {
+  var _useCollectMenuItems = useCollectMenuItems(),
+    pushMenuItem = _useCollectMenuItems.pushMenuItem;
   var icon = props.icon,
+    children = props.children,
     others = _objectWithoutProperties(props, _excluded2);
   var schema = useFieldSchema();
   var field = useField();
   var Designer = useContext(MenuItemDesignerContext);
-  return /*#__PURE__*/React.createElement(AntdMenu.Item, _objectSpread(_objectSpread({}, others), {}, {
-    className: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          :active {\n            background: inherit;\n          }\n        "]))),
-    key: schema.name,
-    eventKey: schema.name,
-    schema: schema
-  }), /*#__PURE__*/React.createElement(SortableItem, {
-    className: designerCss,
-    removeParentsIfNoChildren: false
-  }, /*#__PURE__*/React.createElement(Icon, {
-    type: icon
-  }), /*#__PURE__*/React.createElement("span", {
-    className: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n              overflow: hidden;\n              text-overflow: ellipsis;\n              display: inline-block;\n              width: 100%;\n              vertical-align: middle;\n            "])))
-  }, field.title), Designer && /*#__PURE__*/React.createElement(Designer, null)));
+  var item = useMemo(function () {
+    return _objectSpread(_objectSpread({}, others), {}, {
+      className: menuItemClass,
+      key: schema.name,
+      eventKey: schema.name,
+      schema: schema,
+      label: /*#__PURE__*/React.createElement(SchemaContext.Provider, {
+        value: schema
+      }, /*#__PURE__*/React.createElement(FieldContext.Provider, {
+        value: field
+      }, /*#__PURE__*/React.createElement(SortableItem, {
+        className: designerCss,
+        removeParentsIfNoChildren: false
+      }, /*#__PURE__*/React.createElement(Icon, {
+        type: icon
+      }), /*#__PURE__*/React.createElement("span", {
+        style: {
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          display: 'inline-block',
+          width: '100%',
+          verticalAlign: 'middle'
+        }
+      }, field.title), /*#__PURE__*/React.createElement(Designer, null))))
+    });
+  }, [field.title, icon, schema, Designer]);
+  if (!pushMenuItem) {
+    error('Menu.Item must be wrapped by GetMenuItemsContext.Provider');
+    return null;
+  }
+  pushMenuItem(item);
+  return null;
 }, {
   displayName: 'Menu.Item'
 });
 Menu.URL = observer(function (props) {
+  var _useCollectMenuItems2 = useCollectMenuItems(),
+    pushMenuItem = _useCollectMenuItems2.pushMenuItem;
   var icon = props.icon,
+    children = props.children,
     others = _objectWithoutProperties(props, _excluded3);
   var schema = useFieldSchema();
   var field = useField();
   var Designer = useContext(MenuItemDesignerContext);
-  return /*#__PURE__*/React.createElement(AntdMenu.Item, _objectSpread(_objectSpread({}, others), {}, {
-    className: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n          :active {\n            background: inherit;\n          }\n        "]))),
-    key: schema.name,
-    eventKey: schema.name,
-    schema: schema,
-    onClick: function onClick() {
-      window.open(props.href, '_blank');
-    }
-  }), /*#__PURE__*/React.createElement(SortableItem, {
-    className: designerCss,
-    removeParentsIfNoChildren: false
-  }, /*#__PURE__*/React.createElement(Icon, {
-    type: icon
-  }), /*#__PURE__*/React.createElement("span", {
-    className: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n              overflow: hidden;\n              text-overflow: ellipsis;\n              display: inline-block;\n              width: 100%;\n              vertical-align: middle;\n            "])))
-  }, field.title), Designer && /*#__PURE__*/React.createElement(Designer, null)));
+  if (!pushMenuItem) {
+    error('Menu.URL must be wrapped by GetMenuItemsContext.Provider');
+    return null;
+  }
+  var item = useMemo(function () {
+    return _objectSpread(_objectSpread({}, others), {}, {
+      className: menuItemClass,
+      key: schema.name,
+      eventKey: schema.name,
+      schema: schema,
+      onClick: function onClick() {
+        window.open(props.href, '_blank');
+      },
+      label: /*#__PURE__*/React.createElement(SchemaContext.Provider, {
+        value: schema
+      }, /*#__PURE__*/React.createElement(FieldContext.Provider, {
+        value: field
+      }, /*#__PURE__*/React.createElement(SortableItem, {
+        className: designerCss,
+        removeParentsIfNoChildren: false
+      }, /*#__PURE__*/React.createElement(Icon, {
+        type: icon
+      }), /*#__PURE__*/React.createElement("span", {
+        style: {
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          display: 'inline-block',
+          width: '100%',
+          verticalAlign: 'middle'
+        }
+      }, field.title), /*#__PURE__*/React.createElement(Designer, null))))
+    });
+  }, [field.title, icon, props.href, schema, Designer]);
+  pushMenuItem(item);
+  return null;
 }, {
   displayName: 'MenuURL'
 });
 Menu.SubMenu = observer(function (props) {
+  var _useMenuItem3 = useMenuItem(),
+    Component = _useMenuItem3.Component,
+    getMenuItems = _useMenuItem3.getMenuItems;
+  var _useCollectMenuItems3 = useCollectMenuItems(),
+    pushMenuItem = _useCollectMenuItems3.pushMenuItem;
   var icon = props.icon,
+    children = props.children,
     others = _objectWithoutProperties(props, _excluded4);
   var schema = useFieldSchema();
   var field = useField();
   var mode = useContext(MenuModeContext);
   var Designer = useContext(MenuItemDesignerContext);
+  var submenu = useMemo(function () {
+    return _objectSpread(_objectSpread({}, others), {}, {
+      className: menuItemClass,
+      key: schema.name,
+      eventKey: schema.name,
+      label: /*#__PURE__*/React.createElement(SchemaContext.Provider, {
+        value: schema
+      }, /*#__PURE__*/React.createElement(FieldContext.Provider, {
+        value: field
+      }, /*#__PURE__*/React.createElement(SortableItem, {
+        className: subMenuDesignerCss,
+        removeParentsIfNoChildren: false
+      }, /*#__PURE__*/React.createElement(Icon, {
+        type: icon
+      }), field.title, /*#__PURE__*/React.createElement(Designer, null)))),
+      children: getMenuItems(function () {
+        return /*#__PURE__*/React.createElement(RecursionField, {
+          schema: schema,
+          onlyRenderProperties: true
+        });
+      })
+    });
+  }, [field.title, icon, schema, children, Designer]);
+  if (!pushMenuItem) {
+    error('Menu.SubMenu must be wrapped by GetMenuItemsContext.Provider');
+    return null;
+  }
   if (mode === 'mix') {
     return /*#__PURE__*/React.createElement(Menu.Item, _objectSpread({}, props));
   }
-  return /*#__PURE__*/React.createElement(AntdMenu.SubMenu, _objectSpread(_objectSpread({}, others), {}, {
-    className: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n          :active {\n            background: inherit;\n          }\n        "]))),
-    key: schema.name,
-    eventKey: schema.name,
-    title: /*#__PURE__*/React.createElement(SortableItem, {
-      className: subMenuDesignerCss,
-      removeParentsIfNoChildren: false
-    }, /*#__PURE__*/React.createElement(Icon, {
-      type: icon
-    }), field.title, Designer && /*#__PURE__*/React.createElement(Designer, null))
-  }), /*#__PURE__*/React.createElement(RecursionField, {
-    schema: schema,
-    onlyRenderProperties: true
-  }));
+  pushMenuItem(submenu);
+  return /*#__PURE__*/React.createElement(Component, null);
 }, {
   displayName: 'Menu.SubMenu'
 });