@arcblock/ux 2.9.42 → 2.9.43

package/es/NavMenu/nav-menu.js

@@ -4,6 +4,7 @@ import clsx from 'clsx';
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import MenuIcon from '@mui/icons-material/Menu';
+import { useMemoizedFn } from 'ahooks';
 import { HorizontalStyle, InlineStyle } from './style';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -90,7 +91,7 @@ function NavMenu({
       });
     });
   };
-  const checkItemsFit = () => {
+  const checkItemsFit = useMemoizedFn(() => {
     let totalWidthUsed = 0;
     let newHiddenCount = 0;
     let leftAllHidden = false;
@@ -113,7 +114,7 @@ function NavMenu({
     if (newHiddenCount !== hiddenItemCount) {
       setHiddenItemCount(newHiddenCount);
     }
-  };
+  }, [hiddenItemCount]);
   useEffect(() => {
     if (mode === 'horizontal') {
       checkItemsFit();
@@ -124,7 +125,7 @@ function NavMenu({
     }
     return undefined;
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [mode, hiddenItemCount]);
+  }, [mode]);
   useEffect(() => {
     // NavMenu#activeId 和 Item#active prop 都可以用来控制激活状态 (一般不会混用这两种方式)
     // 如果未传入 NavMenu#activeId, 应该避免设置一个空值的 activeId 状态 (会与 Item#active 冲突)

package/lib/NavMenu/nav-menu.js

@@ -10,6 +10,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _MoreHoriz = _interopRequireDefault(require("@mui/icons-material/MoreHoriz"));
 var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
 var _Menu = _interopRequireDefault(require("@mui/icons-material/Menu"));
+var _ahooks = require("ahooks");
 var _style = require("./style");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["items", "mode", "children", "activeId", "textColor", "activeTextColor", "bgColor", "onSelected"],
@@ -104,7 +105,7 @@ function NavMenu(_ref) {
       });
     });
   };
-  const checkItemsFit = () => {
+  const checkItemsFit = (0, _ahooks.useMemoizedFn)(() => {
     var _navMenuRef$current;
     let totalWidthUsed = 0;
     let newHiddenCount = 0;
@@ -128,7 +129,7 @@ function NavMenu(_ref) {
     if (newHiddenCount !== hiddenItemCount) {
       setHiddenItemCount(newHiddenCount);
     }
-  };
+  }, [hiddenItemCount]);
   (0, _react.useEffect)(() => {
     if (mode === 'horizontal') {
       checkItemsFit();
@@ -139,7 +140,7 @@ function NavMenu(_ref) {
     }
     return undefined;
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [mode, hiddenItemCount]);
+  }, [mode]);
   (0, _react.useEffect)(() => {
     // NavMenu#activeId 和 Item#active prop 都可以用来控制激活状态 (一般不会混用这两种方式)
     // 如果未传入 NavMenu#activeId, 应该避免设置一个空值的 activeId 状态 (会与 Item#active 冲突)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.9.42",
+  "version": "2.9.43",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -354,12 +354,12 @@
     "@mui/material": "^5.15.0",
     "react": ">=18.2.0"
   },
-  "gitHead": "bd025306aba57f60f5b019ea863698e7ad07d472",
+  "gitHead": "2299d749c24452b4cebe4c094d682f9af1f3d9bf",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.9.42",
-    "@arcblock/nft-display": "^2.9.42",
-    "@arcblock/react-hooks": "^2.9.42",
+    "@arcblock/icons": "^2.9.43",
+    "@arcblock/nft-display": "^2.9.43",
+    "@arcblock/react-hooks": "^2.9.43",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",

package/src/NavMenu/nav-menu.js

@@ -15,6 +15,7 @@ import clsx from 'clsx';
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import MenuIcon from '@mui/icons-material/Menu';
+import { useMemoizedFn } from 'ahooks';
 import { HorizontalStyle, InlineStyle } from './style';
 
 const NavMenuContext = createContext();
@@ -56,6 +57,7 @@ function NavMenu({ items, mode, children, activeId, textColor, activeTextColor,
   const close = useCallback((id) => {
     setState((prev) => ({ ...prev, openedIds: prev.openedIds.filter((item) => item !== id) }));
   }, []);
+
   const contextValue = useMemo(() => {
     return {
       ...state,
@@ -82,7 +84,7 @@ function NavMenu({ items, mode, children, activeId, textColor, activeTextColor,
       });
     });
   };
-  const checkItemsFit = () => {
+  const checkItemsFit = useMemoizedFn(() => {
     let totalWidthUsed = 0;
     let newHiddenCount = 0;
     let leftAllHidden = false;
@@ -110,7 +112,7 @@ function NavMenu({ items, mode, children, activeId, textColor, activeTextColor,
     if (newHiddenCount !== hiddenItemCount) {
       setHiddenItemCount(newHiddenCount);
     }
-  };
+  }, [hiddenItemCount]);
 
   useEffect(() => {
     if (mode === 'horizontal') {
@@ -123,7 +125,7 @@ function NavMenu({ items, mode, children, activeId, textColor, activeTextColor,
     }
     return undefined;
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [mode, hiddenItemCount]);
+  }, [mode]);
 
   useEffect(() => {
     // NavMenu#activeId 和 Item#active prop 都可以用来控制激活状态 (一般不会混用这两种方式)