[v4.21.4] fix(Menu): 修复当嵌套多个子菜单时，会有遮住子菜单问题 # 779 (#797) 83b1306

uiwjs · Apr 26, 2022 · cfbea27 · cfbea27
1 parent a468636
commit cfbea27
Show file tree

Hide file tree

Showing 8 changed files with 94 additions and 44 deletions.
diff --git a/asset-manifest.json b/asset-manifest.json
@@ -1,7 +1,7 @@
 {
   "files": {
     "main.css": "/static/css/main.90c83768.css",
-    "main.js": "/static/js/main.e136e345.js",
+    "main.js": "/static/js/main.723e738c.js",
     "static/css/9200.14abaeb3.chunk.css": "/static/css/9200.14abaeb3.chunk.css",
     "static/js/9200.0a1f7353.chunk.js": "/static/js/9200.0a1f7353.chunk.js",
     "static/css/6730.296853db.chunk.css": "/static/css/6730.296853db.chunk.css",
@@ -226,7 +226,7 @@
     "static/js/5183.ac2ca737.js": "/static/js/5183.ac2ca737.js",
     "index.html": "/index.html",
     "main.90c83768.css.map": "/static/css/main.90c83768.css.map",
-    "main.e136e345.js.map": "/static/js/main.e136e345.js.map",
+    "main.723e738c.js.map": "/static/js/main.723e738c.js.map",
     "9200.14abaeb3.chunk.css.map": "/static/css/9200.14abaeb3.chunk.css.map",
     "9200.0a1f7353.chunk.js.map": "/static/js/9200.0a1f7353.chunk.js.map",
     "6730.296853db.chunk.css.map": "/static/css/6730.296853db.chunk.css.map",
@@ -454,6 +454,6 @@
     "static/js/vendors-react.a09f50fb.js",
     "static/js/5183.ac2ca737.js",
     "static/css/main.90c83768.css",
-    "static/js/main.e136e345.js"
+    "static/js/main.723e738c.js"
   ]
 }
diff --git a/index.html b/index.html
@@ -1 +1 @@
-<!doctype html><html xmlns="http://www.w3.org/1999/xhtml"><head><title>uiw react, A high quality UI Toolkit, A Component Library for React 16+.</title><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="UIW React, A high quality UI Toolkit, A Component Library for React 16+. "><meta name="keywords" content="uiw, uiw-react, uiwjs, react.js, react, component, components, ui, framework, toolkit"><script defer="defer" src="./static/js/vendors-react.a09f50fb.js"></script><script defer="defer" src="./static/js/5183.ac2ca737.js"></script><script defer="defer" src="./static/js/main.e136e345.js"></script><link href="./static/css/main.90c83768.css" rel="stylesheet"></head><body><div id="root"></div></body></html>
+<!doctype html><html xmlns="http://www.w3.org/1999/xhtml"><head><title>uiw react, A high quality UI Toolkit, A Component Library for React 16+.</title><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="UIW React, A high quality UI Toolkit, A Component Library for React 16+. "><meta name="keywords" content="uiw, uiw-react, uiwjs, react.js, react, component, components, ui, framework, toolkit"><script defer="defer" src="./static/js/vendors-react.a09f50fb.js"></script><script defer="defer" src="./static/js/5183.ac2ca737.js"></script><script defer="defer" src="./static/js/main.723e738c.js"></script><link href="./static/css/main.90c83768.css" rel="stylesheet"></head><body><div id="root"></div></body></html>
diff --git a/static/js/main.723e738c.js b/static/js/main.723e738c.js
diff --git a/static/js/main.723e738c.js.map b/static/js/main.723e738c.js.map
diff --git a/static/js/main.e136e345.js b/static/js/main.e136e345.js
diff --git a/static/js/main.e136e345.js.map b/static/js/main.e136e345.js.map
diff --git a/uiw.js b/uiw.js
@@ -328,6 +328,7 @@ __webpack_require__.d(__webpack_exports__, {
   "Circle": () => (/* reexport */ Circle),
   "Col": () => (/* reexport */ Col),
   "Collapse": () => (/* reexport */ react_collapse_esm),
+  "ContextMenu": () => (/* reexport */ ContextMenu),
   "CopyToClipboard": () => (/* reexport */ CopyToClipboard),
   "DateInput": () => (/* reexport */ DateInput),
   "DateInputRange": () => (/* reexport */ DateInputRange),
@@ -390,6 +391,7 @@ __webpack_require__.d(__webpack_exports__, {
   "Tabs": () => (/* reexport */ Tabs),
   "Tag": () => (/* reexport */ react_tag_esm),
   "Textarea": () => (/* reexport */ react_textarea_esm),
+  "ThemeContext": () => (/* reexport */ ThemeContext),
   "TimePicker": () => (/* reexport */ TimePicker),
   "TimePickerTime": () => (/* reexport */ TimePickerTime),
   "Tooltip": () => (/* reexport */ react_tooltip_esm),
@@ -4593,7 +4595,22 @@ var SubMenu = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_am
     className: [prefixCls ? prefixCls + "-overlay" : null].filter(Boolean).join(' ').trim()
   };
   var popupRef = external_root_React_commonjs2_react_commonjs_react_amd_react_default().useRef(null);
+  var refNode = external_root_React_commonjs2_react_commonjs_react_amd_react_default().useRef();
+  var currentHeight = external_root_React_commonjs2_react_commonjs_react_amd_react_default().useRef(0);
+  var elementSource = external_root_React_commonjs2_react_commonjs_react_amd_react_default().useRef();
   var [isOpen, setIsOpen] = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(!!overlayProps.isOpen);
+  var {
+    height,
+    setContextHeight,
+    ele
+  } = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useContext)(ThemeContext);
+  external_root_React_commonjs2_react_commonjs_react_amd_react_default().useEffect(() => {
+    if (refNode.current && refNode.current.style && ele === elementSource.current) {
+      var _currentHeight = refNode.current.style.height;
+      if (height + 'px' === _currentHeight) return;
+      refNode.current.style.height = Number(_currentHeight.substr(0, _currentHeight.length - 2)) + height + 'px';
+    }
+  }, [height]);
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useMemo)(() => {
     if (collapse) setIsOpen(false);
   }, [collapse]);
@@ -4617,23 +4634,30 @@ var SubMenu = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_am
 
   function onExiting(node) {
     node.style.height = '0px';
+    setContextHeight({
+      height: -currentHeight.current,
+      ele: elementSource.current
+    });
   }
 
   function onEnter(node) {
     node.style.height = '1px';
     setIsOpen(true);
+    currentHeight.current = popupRef.current.overlayDom.current.getBoundingClientRect().height;
+    setContextHeight({
+      height: currentHeight.current,
+      ele: elementSource.current
+    });
   }
 
   function onEntering(node) {
     node.style.height = node.scrollHeight + "px";
   }
 
   function onEntered(node) {
-    node.style.height = 'initial';
-
-    if (popupRef.current && popupRef.current.overlayDom) {
-      node.style.height = popupRef.current.overlayDom.current.getBoundingClientRect().height + 'px';
-    }
+    // node.style.height = 'initial';
+    node.style.height = currentHeight.current + 'px';
+    refNode.current = node;
   }
 
   if (!collapse) {
@@ -4658,35 +4682,45 @@ var SubMenu = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_am
     menuProps.onClick = onClick;
   }
 
-  return /*#__PURE__*/(0,jsx_runtime.jsx)("li", {
-    "data-menu": "subitem",
-    ref: ref,
-    children: /*#__PURE__*/(0,jsx_runtime.jsx)(react_overlay_trigger_esm, _extends({
-      placement: "rightTop",
-      autoAdjustOverflow: true,
-      disabled: disabled,
-      isOpen: isOpen,
-      usePortal: false,
-      isOutside: true
-    }, overlayTriggerProps, overlayProps, {
-      ref: popupRef,
-      overlay: /*#__PURE__*/(0,jsx_runtime.jsx)(esm_Menu, _extends({}, menuProps, {
-        style: !collapse ? {
-          paddingLeft: inlineIndent
-        } : {}
-      })),
-      children: /*#__PURE__*/(0,jsx_runtime.jsx)(MenuItem, _extends({}, other, {
-        ref: null,
+  return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+    onClick: e => {
+      if (collapse) {
+        e.stopPropagation();
+        return;
+      }
+
+      elementSource.current = e.target;
+    },
+    children: /*#__PURE__*/(0,jsx_runtime.jsx)("li", {
+      "data-menu": "subitem",
+      ref: ref,
+      children: /*#__PURE__*/(0,jsx_runtime.jsx)(react_overlay_trigger_esm, _extends({
+        placement: "rightTop",
+        autoAdjustOverflow: true,
         disabled: disabled,
-        isSubMenuItem: true,
-        addonAfter: /*#__PURE__*/(0,jsx_runtime.jsx)(IconView, {
-          collapse: collapse,
-          prefixCls: prefixCls,
-          isOpen: isOpen
-        }),
-        className: [prefixCls ? prefixCls + "-title" : null, !collapse ? prefixCls + "-collapse-title" : null, className].filter(Boolean).join(' ').trim()
+        isOpen: isOpen,
+        usePortal: false,
+        isOutside: true
+      }, overlayTriggerProps, overlayProps, {
+        ref: popupRef,
+        overlay: /*#__PURE__*/(0,jsx_runtime.jsx)(Menu, _extends({}, menuProps, {
+          style: !collapse ? {
+            paddingLeft: inlineIndent
+          } : {}
+        })),
+        children: /*#__PURE__*/(0,jsx_runtime.jsx)(MenuItem, _extends({}, other, {
+          ref: null,
+          disabled: disabled,
+          isSubMenuItem: true,
+          addonAfter: /*#__PURE__*/(0,jsx_runtime.jsx)(IconView, {
+            collapse: collapse,
+            prefixCls: prefixCls,
+            isOpen: isOpen
+          }),
+          className: [prefixCls ? prefixCls + "-title" : null, !collapse ? prefixCls + "-collapse-title" : null, className].filter(Boolean).join(' ').trim()
+        }))
       }))
-    }))
+    })
   });
 });
 SubMenu.displayName = 'uiw.SubMenu';
@@ -4704,6 +4738,7 @@ var Menu_excluded = ["prefixCls", "className", "children", "bordered", "theme",
 
 
 
+var ThemeContext = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.createContext)({});
 var Menu = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().forwardRef((props, ref) => {
   var {
     prefixCls = 'w-menu',
@@ -4735,11 +4770,26 @@ var Menu = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_r
     })
   }));
 });
+var ContextMenu = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().forwardRef((props, ref) => {
+  var [contextHeight, setContextHeight] = external_root_React_commonjs2_react_commonjs_react_amd_react_default().useState({
+    height: 0,
+    ele: null
+  });
+  return /*#__PURE__*/(0,jsx_runtime.jsx)(ThemeContext.Provider, {
+    value: _extends({}, contextHeight, {
+      setContextHeight
+    }),
+    children: /*#__PURE__*/(0,jsx_runtime.jsx)(Menu, _extends({}, props, {
+      ref: ref
+    }))
+  });
+});
 Menu.displayName = 'uiw.Menu';
-Menu.Item = MenuItem;
-Menu.SubMenu = SubMenu;
-Menu.Divider = MenuDivider;
-/* harmony default export */ const esm_Menu = (Menu);
+ContextMenu.displayName = 'uiw.Menu';
+ContextMenu.Item = MenuItem;
+ContextMenu.SubMenu = SubMenu;
+ContextMenu.Divider = MenuDivider;
+/* harmony default export */ const esm_Menu = (ContextMenu);
 
 ;// CONCATENATED MODULE: ../react-menu/esm/index.js
 

diff --git a/uiw.min.js b/uiw.min.js