fix: remove useRef in menu & tooltip (#4369)

2026-02-12 12:28:42 +00:00 · 2023-09-16 03:29:55 +08:00
parent c41c3c81c8
commit 4577fb7e1a
18 changed files with 59 additions and 133 deletions
--- a/apps/core/src/components/affine/create-workspace-modal/index.tsx
+++ b/apps/core/src/components/affine/create-workspace-modal/index.tsx
@@ -11,7 +11,7 @@ import type {
 } from '@toeverything/infra/type';
 import { useSetAtom } from 'jotai';
 import type { KeyboardEvent } from 'react';
-import { useEffect, useRef } from 'react';
+import { useEffect } from 'react';
 import { useLayoutEffect } from 'react';
 import { useCallback, useState } from 'react';

@@ -122,7 +122,6 @@ const SetDBLocationContent = ({
  onConfirmLocation,
 }: SetDBLocationContentProps) => {
  const t = useAFFiNEI18N();
-  const ref = useRef(null);
  const defaultDBLocation = useDefaultDBLocation();
  const [opening, setOpening] = useState(false);

@@ -164,9 +163,6 @@ const SetDBLocationContent = ({
          content={t['com.affine.setDBLocation.tooltip.defaultLocation']({
            location: defaultDBLocation,
          })}
-          portalOptions={{
-            container: ref.current,
-          }}
        >
          <Button
            data-testid="create-workspace-default-location-button"
@@ -176,7 +172,6 @@ const SetDBLocationContent = ({
            }}
            icon={<HelpIcon />}
            iconPosition="end"
-            ref={ref}
          >
            {t['com.affine.setDBLocation.button.defaultLocation']()}
          </Button>
--- a/apps/core/src/components/affine/language-menu/index.tsx
+++ b/apps/core/src/components/affine/language-menu/index.tsx
@@ -2,7 +2,7 @@ import { LOCALES } from '@affine/i18n';
 import { useI18N } from '@affine/i18n';
 import { Menu, MenuItem, MenuTrigger } from '@toeverything/components/menu';
 import type { ReactElement } from 'react';
-import { useCallback, useMemo, useRef } from 'react';
+import { useCallback, useMemo } from 'react';

 // Fixme: keyboard focus should be supported by Menu component
 const LanguageMenuContent = ({
@@ -32,7 +32,6 @@ const LanguageMenuContent = ({

 export const LanguageMenu = () => {
  const i18n = useI18N();
-  const ref = useRef(null);
  const currentLanguage = useMemo(
    () => LOCALES.find(item => item.tag === i18n.language),
    [i18n.language]
@@ -53,9 +52,6 @@ export const LanguageMenu = () => {
          />
        ) as ReactElement
      }
-      portalOptions={{
-        container: ref.current,
-      }}
      contentOptions={{
        style: {
          background: 'var(--affine-white)',
@@ -64,7 +60,6 @@ export const LanguageMenu = () => {
      }}
    >
      <MenuTrigger
-        ref={ref}
        data-testid="language-menu-button"
        style={{ textTransform: 'capitalize', fontWeight: 600 }}
        block={true}
--- a/apps/core/src/components/affine/setting-modal/general-setting/appearance/date-format-setting.tsx
+++ b/apps/core/src/components/affine/setting-modal/general-setting/appearance/date-format-setting.tsx
@@ -1,6 +1,6 @@
 import { Menu, MenuItem, MenuTrigger } from '@toeverything/components/menu';
 import dayjs from 'dayjs';
-import { useCallback, useRef } from 'react';
+import { useCallback } from 'react';

 import {
  dateFormatOptions,
@@ -35,7 +35,6 @@ const DateFormatMenuContent = ({
 };

 export const DateFormatSetting = () => {
-  const ref = useRef(null);
  const [appearanceSettings, setAppSettings] = useAppSetting();
  const handleSelect = useCallback(
    (option: DateFormats) => {
@@ -52,9 +51,8 @@ export const DateFormatSetting = () => {
          currentOption={appearanceSettings.dateFormat}
        />
      }
-      portalOptions={{ container: ref.current }}
    >
-      <MenuTrigger ref={ref} data-testid="date-format-menu-trigger" block>
+      <MenuTrigger data-testid="date-format-menu-trigger" block>
        {dayjs(new Date()).format(appearanceSettings.dateFormat)}
      </MenuTrigger>
    </Menu>
--- a/apps/core/src/components/affine/setting-modal/setting-sidebar/index.tsx
+++ b/apps/core/src/components/affine/setting-modal/setting-sidebar/index.tsx
@@ -14,13 +14,7 @@ import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-
 import { useStaticBlockSuiteWorkspace } from '@toeverything/infra/__internal__/react';
 import clsx from 'clsx';
 import { useAtom, useAtomValue } from 'jotai/react';
-import {
-  type ReactElement,
-  Suspense,
-  useCallback,
-  useMemo,
-  useRef,
-} from 'react';
+import { type ReactElement, Suspense, useCallback, useMemo } from 'react';

 import { authAtom } from '../../../../atoms';
 import { useCurrentLoginStatus } from '../../../../hooks/affine/use-current-login-status';
@@ -225,7 +219,6 @@ const WorkspaceListItem = ({
  const workspace = useStaticBlockSuiteWorkspace(meta.id);
  const [workspaceAvatar] = useBlockSuiteWorkspaceAvatarUrl(workspace);
  const [workspaceName] = useBlockSuiteWorkspaceName(workspace);
-  const ref = useRef(null);

  return (
    <div
@@ -233,7 +226,6 @@ const WorkspaceListItem = ({
      title={workspaceName}
      onClick={onClick}
      data-testid="workspace-list-item"
-      ref={ref}
    >
      <Avatar
        size={14}
@@ -246,13 +238,7 @@ const WorkspaceListItem = ({
      />
      <span className="setting-name">{workspaceName}</span>
      {isCurrent ? (
-        <Tooltip
-          content="Current"
-          side="top"
-          portalOptions={{
-            container: ref.current,
-          }}
-        >
+        <Tooltip content="Current" side="top">
          <div
            className={currentWorkspaceLabel}
            data-testid="current-workspace-label"
--- a/apps/core/src/components/blocksuite/block-suite-header-title/operation-menu.tsx
+++ b/apps/core/src/components/blocksuite/block-suite-header-title/operation-menu.tsx
@@ -212,9 +212,6 @@ export const PageMenu = ({ rename, pageId }: PageMenuProps) => {
      <FlexWrapper alignItems="center" justifyContent="center" ref={ref}>
        <Menu
          items={EditMenu}
-          portalOptions={{
-            container: ref.current,
-          }}
          contentOptions={{
            align: 'center',
          }}
--- a/apps/core/src/components/blocksuite/block-suite-mode-switch/index.tsx
+++ b/apps/core/src/components/blocksuite/block-suite-mode-switch/index.tsx
@@ -4,7 +4,7 @@ import { Tooltip } from '@toeverything/components/tooltip';
 import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
 import { useAtom } from 'jotai';
 import type { CSSProperties } from 'react';
-import { useEffect, useRef } from 'react';
+import { useEffect } from 'react';

 import { pageSettingFamily } from '../../../atoms';
 import type { BlockSuiteWorkspace } from '../../../shared';
@@ -40,7 +40,6 @@ export const EditorModeSwitch = ({
    meta => meta.id === pageId
  );
  const t = useAFFiNEI18N();
-  const ref = useRef(null);
  assertExists(pageMeta);
  const { trash } = pageMeta;
  useEffect(() => {
@@ -71,17 +70,11 @@ export const EditorModeSwitch = ({
  }, [setSetting, t, trash]);

  return (
-    <Tooltip
-      content={<TooltipContent />}
-      portalOptions={{
-        container: ref.current,
-      }}
-    >
+    <Tooltip content={<TooltipContent />}>
      <StyledEditorModeSwitch
        style={style}
        switchLeft={currentMode === 'page'}
        showAlone={trash}
-        ref={ref}
      >
        <PageSwitchItem
          data-testid="switch-page-mode-button"
--- a/apps/core/src/components/pure/workspace-slider-bar/collections/page.tsx
+++ b/apps/core/src/components/pure/workspace-slider-bar/collections/page.tsx
@@ -151,7 +151,6 @@ export const Page = ({
  workspace: Workspace;
  allPageMeta: Record<string, PageMeta>;
 }) => {
-  const ref = React.useRef(null);
  const [collapsed, setCollapsed] = React.useState(true);
  const params = useParams();
  const { jumpToPage } = useNavigateHelper();
@@ -176,7 +175,6 @@ export const Page = ({
        active={active}
        collapsed={referencesToRender.length > 0 ? collapsed : undefined}
        onCollapsedChange={setCollapsed}
-        ref={ref}
        postfix={
          <Menu
            items={
@@ -189,9 +187,6 @@ export const Page = ({
                workspace={workspace}
              />
            }
-            portalOptions={{
-              container: ref.current,
-            }}
          >
            <IconButton
              data-testid="collection-page-options"
--- a/apps/core/src/components/pure/workspace-slider-bar/workspace-card/index.tsx
+++ b/apps/core/src/components/pure/workspace-slider-bar/workspace-card/index.tsx
@@ -16,7 +16,6 @@ import {
  type MouseEvent,
  useCallback,
  useMemo,
-  useState,
 } from 'react';

 import { useDatasourceSync } from '../../../../hooks/use-datasource-sync';
@@ -88,7 +87,6 @@ const WorkspaceStatus = ({
    currentWorkspace.blockSuiteWorkspace
  );
  const setIsHovered = useSetAtom(hoverAtom);
-  const [container, setContainer] = useState<HTMLDivElement | null>(null);
  const content = useMemo(() => {
    if (currentWorkspace.flavour === WorkspaceFlavour.LOCAL) {
      return 'Saved locally';
@@ -130,17 +128,11 @@ const WorkspaceStatus = ({
  );
  return (
    <div style={{ display: 'flex' }}>
-      <Tooltip
-        content={content}
-        portalOptions={{
-          container,
-        }}
-      >
+      <Tooltip content={content}>
        <StyledWorkspaceStatus
          onMouseEnter={() => {
            setIsHovered(true);
          }}
-          ref={setContainer}
          onMouseLeave={() => setIsHovered(false)}
          onClick={handleClick}
        >