@arcblock/ux 2.12.2 → 2.12.4

package/src/NavMenu/sub-container.tsx

@@ -0,0 +1,96 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+interface SubContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+const paddingTop = 8;
+
+// 下拉子菜单容器
+export function SubContainer({ children, ...props }: SubContainerProps) {
+  const rootRef = useRef<HTMLDivElement>(null);
+  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;
+    }
+
+    setPosition(left);
+  };
+
+  // 监听自身大小变化
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver(() => {
+      updatePosition();
+    });
+
+    resizeObserver.observe(rootRef.current!);
+
+    return () => resizeObserver.disconnect();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // 监听 anchor 的大小变化
+  useEffect(() => {
+    const anchor = rootRef.current?.parentElement;
+    let resizeObserver: ResizeObserver | null = null;
+
+    if (anchor) {
+      resizeObserver = new ResizeObserver(() => {
+        updatePosition();
+      });
+
+      resizeObserver.observe(anchor);
+    }
+
+    return () => resizeObserver?.disconnect();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // 监听窗口大小变化
+  useEffect(() => {
+    const handleResize = () => {
+      updatePosition();
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div
+      ref={rootRef}
+      className="navmenu-sub__container"
+      style={{
+        paddingTop: `${paddingTop}px`,
+        transform: `translateX(${position}px)`,
+      }}
+      {...props}>
+      {children}
+    </div>
+  );
+}
+
+export default SubContainer;

package/src/Util/index.ts

@@ -313,7 +313,7 @@ export function openWebWallet({
   return { type: 'web' };
 }
 
-export const getFontSize = (size: string) => {
+export const getFontSize = (size: string | number) => {
   // 12px 及以上的 size 有效, 否则返回 inherit
   if (size && Number(size) >= 12) {
     return `${Number(size)}px`;