@arcblock/ux 2.12.40 → 2.12.41

package/lib/NavMenu/style.js

@@ -239,7 +239,6 @@ export const NavMenuSubList = styled('ul')(() => ({
   padding: '16px',
   borderRadius: '4px',
   background: '#fff',
-  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
   '& .navmenu-item + .navmenu-item': {
     marginTop: '8px'
   }

package/lib/NavMenu/sub-container.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useThrottleFn } from 'ahooks';
 import React, { useEffect, useRef, useState } from 'react';
 const paddingTop = 8;
 
@@ -8,19 +9,23 @@ export function SubContainer({
   ...props
 }) {
   const rootRef = useRef(null);
+  const contentRef = useRef(null);
+  const [positionUpdated, setPositionUpdated] = useState(false);
   const [position, setPosition] = useState(0); // 只需要保存水平偏移量
 
-  const updatePosition = () => {
-    if (!rootRef.current) return;
+  const {
+    run: updatePosition
+  } = useThrottleFn(() => {
+    if (!rootRef.current || !contentRef.current) return;
     const anchor = rootRef.current.parentElement; // 以父容器作为参照
     if (!anchor) return;
     const anchorRect = anchor.getBoundingClientRect();
-    const containerRect = rootRef.current.getBoundingClientRect();
+    const contentRect = contentRef.current.getBoundingClientRect();
     const windowWidth = window.innerWidth;
     const padding = 32;
 
     // 1. 计算相对于父元素的水平居中位置
-    let left = (anchorRect.width - containerRect.width) / 2;
+    let left = (anchorRect.width - contentRect.width) / 2;
 
     // 2. 检查容器在视口中的绝对位置
     const absoluteLeft = anchorRect.left + left;
@@ -29,12 +34,17 @@ export function SubContainer({
     if (absoluteLeft < 0) {
       // 如果超出左边界，向右偏移
       left = left - absoluteLeft + padding;
-    } else if (absoluteLeft + containerRect.width > windowWidth) {
+    } else if (absoluteLeft + contentRect.width > windowWidth) {
       // 如果超出右边界，向左偏移
-      left -= absoluteLeft + containerRect.width - windowWidth + padding;
+      left -= absoluteLeft + contentRect.width - windowWidth + padding;
     }
     setPosition(left);
-  };
+    if (!positionUpdated) {
+      setPositionUpdated(true);
+    }
+  }, {
+    wait: 100
+  });
 
   // 监听自身大小变化
   useEffect(() => {
@@ -73,11 +83,20 @@ export function SubContainer({
     ref: rootRef,
     className: "navmenu-sub__container",
     style: {
+      width: '100%',
       paddingTop: `${paddingTop}px`,
-      transform: `translateX(${position}px)`
+      transform: `translateX(${position}px)`,
+      overflow: positionUpdated ? 'visible' : 'hidden'
     },
     ...props,
-    children: children
+    children: /*#__PURE__*/_jsx("div", {
+      style: {
+        display: 'inline-block',
+        boxShadow: '0px 40px 60px rgba(0, 0, 0, 0.08)'
+      },
+      ref: contentRef,
+      children: children
+    })
   });
 }
 export default SubContainer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.12.40",
+  "version": "2.12.41",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -68,12 +68,12 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "076b70d60366280b6a7a803b3af4a2578bb8332c",
+  "gitHead": "7330c7db64e3ff07abfc8360b8ee1e396ab0c8c2",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.12.40",
-    "@arcblock/nft-display": "^2.12.40",
-    "@arcblock/react-hooks": "^2.12.40",
+    "@arcblock/icons": "^2.12.41",
+    "@arcblock/nft-display": "^2.12.41",
+    "@arcblock/react-hooks": "^2.12.41",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/inter": "^5.0.16",
     "@fontsource/ubuntu-mono": "^5.0.18",

package/src/NavMenu/style.ts

@@ -241,7 +241,6 @@ export const NavMenuSubList = styled('ul')(() => ({
   padding: '16px',
   borderRadius: '4px',
   background: '#fff',
-  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
   '& .navmenu-item + .navmenu-item': {
     marginTop: '8px',
   },

package/src/NavMenu/sub-container.tsx

@@ -1,3 +1,4 @@
+import { useThrottleFn } from 'ahooks';
 import React, { useEffect, useRef, useState } from 'react';
 
 interface SubContainerProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -9,35 +10,45 @@ const paddingTop = 8;
 // 下拉子菜单容器
 export function SubContainer({ children, ...props }: SubContainerProps) {
   const rootRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [positionUpdated, setPositionUpdated] = useState(false);
   const [position, setPosition] = useState(0); // 只需要保存水平偏移量
 
-  const updatePosition = () => {
-    if (!rootRef.current) return;
-    const anchor = rootRef.current.parentElement; // 以父容器作为参照
-    if (!anchor) return;
-
-    const anchorRect = anchor.getBoundingClientRect();
-    const containerRect = rootRef.current.getBoundingClientRect();
-    const windowWidth = window.innerWidth;
-    const padding = 32;
-
-    // 1. 计算相对于父元素的水平居中位置
-    let left = (anchorRect.width - containerRect.width) / 2;
-
-    // 2. 检查容器在视口中的绝对位置
-    const absoluteLeft = anchorRect.left + left;
-
-    // 3. 调整水平位置确保不超出窗口
-    if (absoluteLeft < 0) {
-      // 如果超出左边界，向右偏移
-      left = left - absoluteLeft + padding;
-    } else if (absoluteLeft + containerRect.width > windowWidth) {
-      // 如果超出右边界，向左偏移
-      left -= absoluteLeft + containerRect.width - windowWidth + padding;
+  const { run: updatePosition } = useThrottleFn(
+    () => {
+      if (!rootRef.current || !contentRef.current) return;
+      const anchor = rootRef.current.parentElement; // 以父容器作为参照
+      if (!anchor) return;
+
+      const anchorRect = anchor.getBoundingClientRect();
+      const contentRect = contentRef.current.getBoundingClientRect();
+      const windowWidth = window.innerWidth;
+      const padding = 32;
+
+      // 1. 计算相对于父元素的水平居中位置
+      let left = (anchorRect.width - contentRect.width) / 2;
+
+      // 2. 检查容器在视口中的绝对位置
+      const absoluteLeft = anchorRect.left + left;
+
+      // 3. 调整水平位置确保不超出窗口
+      if (absoluteLeft < 0) {
+        // 如果超出左边界，向右偏移
+        left = left - absoluteLeft + padding;
+      } else if (absoluteLeft + contentRect.width > windowWidth) {
+        // 如果超出右边界，向左偏移
+        left -= absoluteLeft + contentRect.width - windowWidth + padding;
+      }
+
+      setPosition(left);
+      if (!positionUpdated) {
+        setPositionUpdated(true);
+      }
+    },
+    {
+      wait: 100,
     }
-
-    setPosition(left);
-  };
+  );
 
   // 监听自身大小变化
   useEffect(() => {
@@ -84,11 +95,15 @@ export function SubContainer({ children, ...props }: SubContainerProps) {
       ref={rootRef}
       className="navmenu-sub__container"
       style={{
+        width: '100%',
         paddingTop: `${paddingTop}px`,
         transform: `translateX(${position}px)`,
+        overflow: positionUpdated ? 'visible' : 'hidden',
       }}
       {...props}>
-      {children}
+      <div style={{ display: 'inline-block', boxShadow: '0px 40px 60px rgba(0, 0, 0, 0.08)' }} ref={contentRef}>
+        {children}
+      </div>
     </div>
   );
 }