fix(ui): optimize resize observer and update toolbar item structure o…

…f Ribbon (#4644)
dream-num · Feb 14, 2025 · 8e88ffd · 8e88ffd
1 parent 0a0aafe
commit 8e88ffd
Showing 1 changed file with 22 additions and 20 deletions.
diff --git a/packages/ui/src/views/components/ribbon/Ribbon.tsx b/packages/ui/src/views/components/ribbon/Ribbon.tsx
@@ -19,7 +19,7 @@ import type { IMenuSchema } from '../../../services/menu/menu-manager.service';
 import { LocaleService } from '@univerjs/core';
 import { clsx } from '@univerjs/design';
 import { MoreFunctionSingle } from '@univerjs/icons';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { IMenuManagerService } from '../../../services/menu/menu-manager.service';
 import { MenuManagerPosition, RibbonPosition } from '../../../services/menu/types';
 import { useDependency } from '../../../utils/di';
@@ -69,24 +69,26 @@ export function Ribbon(props: IRibbonProps) {
     // resize observer
     useEffect(() => {
         const observer = new ResizeObserver((entries) => {
-            const toolbar = entries[0].target;
-            const toolbarWidth = toolbar.clientWidth;
-            const toolbarItems = Object.values(toolbarItemRefs.current);
-            const collapsedIds: string[] = [];
-            let totalWidth = 0;
-
-            const allGroups = ribbon.find((group) => group.key === activatedTab)?.children ?? [];
-
-            for (const { el, key } of toolbarItems) {
-                if (!el) continue;
-
-                totalWidth += el?.getBoundingClientRect().width + 8;
-                if (totalWidth > toolbarWidth - 32 - 8 * (allGroups.length - 1)) {
-                    collapsedIds.push(key);
+            requestAnimationFrame(() => {
+                const toolbar = entries[0].target;
+                const toolbarWidth = toolbar.clientWidth;
+                const toolbarItems = Object.values(toolbarItemRefs.current);
+                const collapsedIds: string[] = [];
+                let totalWidth = 0;
+
+                const allGroups = ribbon.find((group) => group.key === activatedTab)?.children ?? [];
+
+                for (const { el, key } of toolbarItems) {
+                    if (!el) continue;
+
+                    totalWidth += el?.getBoundingClientRect().width + 8;
+                    if (totalWidth > toolbarWidth - 32 - 8 * (allGroups.length - 1)) {
+                        collapsedIds.push(key);
+                    }
                 }
-            }
 
-            setCollapsedIds(collapsedIds);
+                setCollapsedIds(collapsedIds);
+            });
         });
 
         if (toolbarRef.current) {
@@ -241,9 +243,9 @@ export function Ribbon(props: IRibbonProps) {
                 aria-hidden
                 ref={toolbarRef}
                 className={`
-                  univer-absolute univer-left-0 univer-right-0 univer-top-[-99999px] univer-mx-auto univer-box-border
-                  univer-flex univer-h-full univer-flex-1 univer-items-center univer-justify-center univer-gap-1
-                  univer-overflow-hidden univer-px-4 univer-opacity-0
+                  univer-invisible univer-absolute univer-left-0 univer-right-0 univer-top-[-99999px] univer-mx-auto
+                  univer-box-border univer-flex univer-h-full univer-flex-1 univer-items-center univer-justify-center
+                  univer-gap-1 univer-overflow-hidden univer-px-4
                 `}
             >
                 {fakeToolbarContent}