@arcblock/ux 2.10.2 → 2.10.4

package/lib/Header/header.js

@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types';
-import Box from '@mui/material/Box';
-import Container from '@mui/material/Container';
+import { Box, Container } from '@mui/material';
 import { useRef, useState, useEffect } from 'react';
 import AutoHidden from './auto-hidden';
 import { styled } from '../Theme';
@@ -83,8 +82,10 @@ function Header({
         className: "header-brand-addon",
         children: brandAddon
       }), align === 'right' && /*#__PURE__*/_jsx(Box, {
+        display: "inline-block",
         flexGrow: 1
       }), children, align === 'left' && /*#__PURE__*/_jsx(Box, {
+        display: "inline-block",
         flexGrow: 1
       }), /*#__PURE__*/_jsx("div", {
         className: "header-addons",

package/lib/NavMenu/nav-menu.js

@@ -1,10 +1,8 @@
-import { Children, cloneElement, useEffect, createContext, useContext, useMemo, useState, useRef, useCallback, forwardRef } from 'react';
+import { Children, cloneElement, useEffect, createContext, useContext, useRef, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 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 { MoreHoriz as MoreHorizIcon, ExpandMore as ExpandMoreIcon, Menu as MenuIcon } from '@mui/icons-material';
+import { useCreation, useMemoizedFn, useReactive, useSize, useThrottleFn } from 'ahooks';
 import { HorizontalStyle, InlineStyle } from './style';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -42,47 +40,40 @@ function NavMenu({
   if (!items?.length && !children?.length) {
     throw new Error("One of 'items' or 'children' is required by NavMenu component.");
   }
-  const [state, setState] = useState({
+  const currentState = useReactive({
     activeId,
-    openedIds: []
+    openedIds: [],
+    hiddenItemCount: 0
   });
-  const activate = useCallback(id => {
-    setState(prev => ({
-      ...prev,
-      activeId: id
-    }));
+  const activate = useMemoizedFn(id => {
+    currentState.activeId = id;
     onSelected?.(id);
-  }, [onSelected]);
-  const open = useCallback(id => {
-    setState(prev => ({
-      ...prev,
-      openedIds: [...prev.openedIds, id]
-    }));
-  }, []);
-  const close = useCallback(id => {
-    setState(prev => ({
-      ...prev,
-      openedIds: prev.openedIds.filter(item => item !== id)
-    }));
-  }, []);
-  const contextValue = useMemo(() => {
+  });
+  const open = useMemoizedFn(id => {
+    currentState.openedIds.push(id);
+  });
+  const close = useMemoizedFn(id => {
+    currentState.openedIds = currentState.openedIds.filter(item => item !== id);
+  });
+  const contextValue = useCreation(() => {
     return {
-      ...state,
+      ...currentState,
       mode,
       activate,
       open,
       close
     };
-  }, [state, mode, activate, open, close]);
-  const [hiddenItemCount, setHiddenItemCount] = useState(0);
+  }, [currentState, mode, activate, open, close]);
   const navMenuRef = useRef();
   const itemRefs = useRef([]);
   const moreIconRef = useRef();
-  const isAllItemsHidden = hiddenItemCount === itemRefs.current?.length;
-  const icon = isAllItemsHidden ? /*#__PURE__*/_jsx(MenuIcon, {}) : /*#__PURE__*/_jsx(MoreHorizIcon, {});
+  const isAllItemsHidden = currentState.hiddenItemCount === itemRefs.current?.length;
   const style = isAllItemsHidden ? {
     marginLeft: '0px'
   } : undefined;
+  const icon = useCreation(() => {
+    return isAllItemsHidden ? /*#__PURE__*/_jsx(MenuIcon, {}) : /*#__PURE__*/_jsx(MoreHorizIcon, {});
+  }, [isAllItemsHidden]);
   const renderChildrenWithRef = childrenElement => {
     return Children.map(childrenElement, (child, index) => {
       return /*#__PURE__*/cloneElement(child, {
@@ -92,11 +83,14 @@ function NavMenu({
       });
     });
   };
-  const checkItemsFit = useMemoizedFn(() => {
+  const containerSize = useSize(navMenuRef.current);
+  const {
+    run: checkItemsFit
+  } = useThrottleFn(useMemoizedFn(() => {
     let totalWidthUsed = 0;
     let newHiddenCount = 0;
     let leftAllHidden = false;
-    const containerWidth = navMenuRef.current?.offsetWidth || 0;
+    const containerWidth = containerSize?.width || 0;
     const moreIconWidth = moreIconRef.current ? moreIconRef.current.offsetWidth + parseFloat(window.getComputedStyle(moreIconRef.current).marginLeft) : 0;
     itemRefs.current.forEach((item, index) => {
       if (item) {
@@ -112,10 +106,12 @@ function NavMenu({
         }
       }
     });
-    if (newHiddenCount !== hiddenItemCount) {
-      setHiddenItemCount(newHiddenCount);
+    if (newHiddenCount !== currentState.hiddenItemCount) {
+      currentState.hiddenItemCount = newHiddenCount;
     }
-  }, [hiddenItemCount]);
+  }, [currentState.hiddenItemCount, containerSize?.width]), {
+    wait: 100
+  });
   useEffect(() => {
     if (mode === 'horizontal') {
       checkItemsFit();
@@ -126,16 +122,14 @@ function NavMenu({
     }
     return undefined;
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [mode]);
+  }, [mode, items]);
   useEffect(() => {
     // NavMenu#activeId 和 Item#active prop 都可以用来控制激活状态 (一般不会混用这两种方式)
     // 如果未传入 NavMenu#activeId, 应该避免设置一个空值的 activeId 状态 (会与 Item#active 冲突)
     if (activeId !== undefined && activeId !== null) {
-      setState(prev => ({
-        ...prev,
-        activeId
-      }));
+      currentState.activeId = activeId;
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [activeId]);
   const classes = clsx('navmenu', `navmenu--${mode}`, rest.className);
   const renderItem = (item, index, isTopLevel = false) => {
@@ -163,7 +157,7 @@ function NavMenu({
       } : undefined
     }, index);
   };
-  const content = items ? items?.slice(-hiddenItemCount).map((item, index) => renderItem(item, index)) : children?.slice(-hiddenItemCount);
+  const content = items ? items?.slice(-currentState.hiddenItemCount).map((item, index) => renderItem(item, index)) : children?.slice(-currentState.hiddenItemCount);
   const StyledRoot = mode === 'inline' ? InlineStyle : HorizontalStyle;
   return /*#__PURE__*/_jsx(NavMenuContext.Provider, {
     value: contextValue,
@@ -176,7 +170,7 @@ function NavMenu({
       children: /*#__PURE__*/_jsxs("ul", {
         className: "navmenu-root",
         ref: navMenuRef,
-        children: [items ? items.map((item, index) => renderItem(item, index, true)) : renderChildrenWithRef(children), hiddenItemCount > 0 && /*#__PURE__*/_jsx(Sub, {
+        children: [items ? items.map((item, index) => renderItem(item, index, true)) : renderChildrenWithRef(children), currentState.hiddenItemCount > 0 && /*#__PURE__*/_jsx(Sub, {
           expandIcon: false,
           icon: icon,
           label: "",

package/lib/NavMenu/style.js

@@ -2,6 +2,7 @@ import { styled } from '../Theme';
 const NavMenuBase = styled('nav')`
   background-color: ${props => props.$bgColor};
   font-size: 16px;
+  // width: 100%;
   ul {
     list-style: none;
     margin: 0;
@@ -79,7 +80,8 @@ const NavMenuBase = styled('nav')`
 export const HorizontalStyle = styled(NavMenuBase)`
   padding: 8px 16px;
   min-width: 50px;
-  flex-grow: 1;
+  // FIXME: @zhanghan 这个只是临时的解决方案，会导致 header align right 不能真正的右对齐，需要修改 header 才能真正解决这个问题
+  flex-grow: 100;
 
   .navmenu-root {
     display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.10.2",
+  "version": "2.10.4",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -54,12 +54,12 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "01c29cd905a2baf029d7be25d41c79a261ebd959",
+  "gitHead": "57248b30b2ad697026249b768894c44345c37ed3",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.10.2",
-    "@arcblock/nft-display": "^2.10.2",
-    "@arcblock/react-hooks": "^2.10.2",
+    "@arcblock/icons": "^2.10.4",
+    "@arcblock/nft-display": "^2.10.4",
+    "@arcblock/react-hooks": "^2.10.4",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/inter": "^5.0.16",
     "@fontsource/ubuntu-mono": "^5.0.18",

package/src/Header/header.jsx

@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types';
-import Box from '@mui/material/Box';
-import Container from '@mui/material/Container';
+import { Box, Container } from '@mui/material';
 import { useRef, useState, useEffect } from 'react';
 import AutoHidden from './auto-hidden';
 import { styled } from '../Theme';
@@ -65,9 +64,9 @@ function Header({
           {renderBrand()}
         </div>
         <div className="header-brand-addon">{brandAddon}</div>
-        {align === 'right' && <Box flexGrow={1} />}
+        {align === 'right' && <Box display="inline-block" flexGrow={1} />}
         {children}
-        {align === 'left' && <Box flexGrow={1} />}
+        {align === 'left' && <Box display="inline-block" flexGrow={1} />}
         <div className="header-addons">{addons}</div>
       </Container>
     </Root>

package/src/NavMenu/{nav-menu.js → nav-menu.jsx}

@@ -1,21 +1,8 @@
-import {
-  Children,
-  cloneElement,
-  useEffect,
-  createContext,
-  useContext,
-  useMemo,
-  useState,
-  useRef,
-  useCallback,
-  forwardRef,
-} from 'react';
+import { Children, cloneElement, useEffect, createContext, useContext, useRef, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 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 { MoreHoriz as MoreHorizIcon, ExpandMore as ExpandMoreIcon, Menu as MenuIcon } from '@mui/icons-material';
+import { useCreation, useMemoizedFn, useReactive, useSize, useThrottleFn } from 'ahooks';
 import { HorizontalStyle, InlineStyle } from './style';
 
 const NavMenuContext = createContext();
@@ -43,39 +30,44 @@ function NavMenu({ items, mode, children, activeId, textColor, activeTextColor,
   if (!items?.length && !children?.length) {
     throw new Error("One of 'items' or 'children' is required by NavMenu component.");
   }
-  const [state, setState] = useState({ activeId, openedIds: [] });
-
-  const activate = useCallback(
-    (id) => {
-      setState((prev) => ({ ...prev, activeId: id }));
-      onSelected?.(id);
-    },
-    [onSelected]
-  );
-  const open = useCallback((id) => {
-    setState((prev) => ({ ...prev, openedIds: [...prev.openedIds, id] }));
-  }, []);
-  const close = useCallback((id) => {
-    setState((prev) => ({ ...prev, openedIds: prev.openedIds.filter((item) => item !== id) }));
-  }, []);
-
-  const contextValue = useMemo(() => {
+
+  const currentState = useReactive({
+    activeId,
+    openedIds: [],
+    hiddenItemCount: 0,
+  });
+
+  const activate = useMemoizedFn((id) => {
+    currentState.activeId = id;
+    onSelected?.(id);
+  });
+  const open = useMemoizedFn((id) => {
+    currentState.openedIds.push(id);
+  });
+  const close = useMemoizedFn((id) => {
+    currentState.openedIds = currentState.openedIds.filter((item) => item !== id);
+  });
+
+  const contextValue = useCreation(() => {
     return {
-      ...state,
+      ...currentState,
       mode,
       activate,
       open,
       close,
     };
-  }, [state, mode, activate, open, close]);
-  const [hiddenItemCount, setHiddenItemCount] = useState(0);
+  }, [currentState, mode, activate, open, close]);
+
   const navMenuRef = useRef();
   const itemRefs = useRef([]);
   const moreIconRef = useRef();
-  const isAllItemsHidden = hiddenItemCount === itemRefs.current?.length;
-  const icon = isAllItemsHidden ? <MenuIcon /> : <MoreHorizIcon />;
+  const isAllItemsHidden = currentState.hiddenItemCount === itemRefs.current?.length;
   const style = isAllItemsHidden ? { marginLeft: '0px' } : undefined;
 
+  const icon = useCreation(() => {
+    return isAllItemsHidden ? <MenuIcon /> : <MoreHorizIcon />;
+  }, [isAllItemsHidden]);
+
   const renderChildrenWithRef = (childrenElement) => {
     return Children.map(childrenElement, (child, index) => {
       return cloneElement(child, {
@@ -85,35 +77,41 @@ function NavMenu({ items, mode, children, activeId, textColor, activeTextColor,
       });
     });
   };
-  const checkItemsFit = useMemoizedFn(() => {
-    let totalWidthUsed = 0;
-    let newHiddenCount = 0;
-    let leftAllHidden = false;
-    const containerWidth = navMenuRef.current?.offsetWidth || 0;
-    const moreIconWidth = moreIconRef.current
-      ? moreIconRef.current.offsetWidth + parseFloat(window.getComputedStyle(moreIconRef.current).marginLeft)
-      : 0;
-
-    itemRefs.current.forEach((item, index) => {
-      if (item) {
-        item.style.display = 'flex';
-        const marginLeft = index > 0 ? parseFloat(window.getComputedStyle(item).marginLeft) : 0;
-        const currentItemWidth = item.offsetWidth + marginLeft;
-
-        if (containerWidth - moreIconWidth >= totalWidthUsed + currentItemWidth && !leftAllHidden) {
-          totalWidthUsed += currentItemWidth;
-        } else {
-          item.style.display = 'none';
-          leftAllHidden = true;
-          newHiddenCount++;
+
+  const containerSize = useSize(navMenuRef.current);
+
+  const { run: checkItemsFit } = useThrottleFn(
+    useMemoizedFn(() => {
+      let totalWidthUsed = 0;
+      let newHiddenCount = 0;
+      let leftAllHidden = false;
+      const containerWidth = containerSize?.width || 0;
+      const moreIconWidth = moreIconRef.current
+        ? moreIconRef.current.offsetWidth + parseFloat(window.getComputedStyle(moreIconRef.current).marginLeft)
+        : 0;
+
+      itemRefs.current.forEach((item, index) => {
+        if (item) {
+          item.style.display = 'flex';
+          const marginLeft = index > 0 ? parseFloat(window.getComputedStyle(item).marginLeft) : 0;
+          const currentItemWidth = item.offsetWidth + marginLeft;
+
+          if (containerWidth - moreIconWidth >= totalWidthUsed + currentItemWidth && !leftAllHidden) {
+            totalWidthUsed += currentItemWidth;
+          } else {
+            item.style.display = 'none';
+            leftAllHidden = true;
+            newHiddenCount++;
+          }
         }
-      }
-    });
+      });
 
-    if (newHiddenCount !== hiddenItemCount) {
-      setHiddenItemCount(newHiddenCount);
-    }
-  }, [hiddenItemCount]);
+      if (newHiddenCount !== currentState.hiddenItemCount) {
+        currentState.hiddenItemCount = newHiddenCount;
+      }
+    }, [currentState.hiddenItemCount, containerSize?.width]),
+    { wait: 100 }
+  );
 
   useEffect(() => {
     if (mode === 'horizontal') {
@@ -126,14 +124,15 @@ function NavMenu({ items, mode, children, activeId, textColor, activeTextColor,
     }
     return undefined;
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [mode]);
+  }, [mode, items]);
 
   useEffect(() => {
     // NavMenu#activeId 和 Item#active prop 都可以用来控制激活状态 (一般不会混用这两种方式)
     // 如果未传入 NavMenu#activeId, 应该避免设置一个空值的 activeId 状态 (会与 Item#active 冲突)
     if (activeId !== undefined && activeId !== null) {
-      setState((prev) => ({ ...prev, activeId }));
+      currentState.activeId = activeId;
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [activeId]);
 
   const classes = clsx('navmenu', `navmenu--${mode}`, rest.className);
@@ -179,8 +178,8 @@ function NavMenu({ items, mode, children, activeId, textColor, activeTextColor,
   };
 
   const content = items
-    ? items?.slice(-hiddenItemCount).map((item, index) => renderItem(item, index))
-    : children?.slice(-hiddenItemCount);
+    ? items?.slice(-currentState.hiddenItemCount).map((item, index) => renderItem(item, index))
+    : children?.slice(-currentState.hiddenItemCount);
 
   const StyledRoot = mode === 'inline' ? InlineStyle : HorizontalStyle;
 
@@ -194,7 +193,7 @@ function NavMenu({ items, mode, children, activeId, textColor, activeTextColor,
         $bgColor={bgColor}>
         <ul className="navmenu-root" ref={navMenuRef}>
           {items ? items.map((item, index) => renderItem(item, index, true)) : renderChildrenWithRef(children)}
-          {hiddenItemCount > 0 && (
+          {currentState.hiddenItemCount > 0 && (
             <Sub expandIcon={false} icon={icon} label="" ref={moreIconRef} style={style}>
               {content}
             </Sub>

package/src/NavMenu/style.js

@@ -3,6 +3,7 @@ import { styled } from '../Theme';
 const NavMenuBase = styled('nav')`
   background-color: ${(props) => props.$bgColor};
   font-size: 16px;
+  // width: 100%;
   ul {
     list-style: none;
     margin: 0;
@@ -81,7 +82,8 @@ const NavMenuBase = styled('nav')`
 export const HorizontalStyle = styled(NavMenuBase)`
   padding: 8px 16px;
   min-width: 50px;
-  flex-grow: 1;
+  // FIXME: @zhanghan 这个只是临时的解决方案，会导致 header align right 不能真正的右对齐，需要修改 header 才能真正解决这个问题
+  flex-grow: 100;
 
   .navmenu-root {
     display: flex;