From 4577fb7e1acc5d07b4438fdf17f00611edbc24f1 Mon Sep 17 00:00:00 2001 From: Qi <474021214@qq.com> Date: Sat, 16 Sep 2023 03:29:55 +0800 Subject: [PATCH] fix: remove useRef in menu & tooltip (#4369) --- apps/core/package.json | 2 +- .../affine/create-workspace-modal/index.tsx | 7 +- .../components/affine/language-menu/index.tsx | 7 +- .../appearance/date-format-setting.tsx | 6 +- .../setting-modal/setting-sidebar/index.tsx | 18 +---- .../operation-menu.tsx | 3 - .../block-suite-mode-switch/index.tsx | 11 +--- .../workspace-slider-bar/collections/page.tsx | 5 -- .../workspace-card/index.tsx | 10 +-- .../sidebar-header/sidebar-switch.tsx | 6 -- .../page-list/operation-menu-items/export.tsx | 66 +++++++++---------- .../page-list/view/collection-list.tsx | 11 +--- .../setting-components/storage-progess.tsx | 14 ++-- plugins/copilot/package.json | 2 +- plugins/hello-world/package.json | 2 +- plugins/image-preview/package.json | 2 +- plugins/outline/package.json | 2 +- yarn.lock | 18 ++--- 18 files changed, 59 insertions(+), 133 deletions(-) diff --git a/apps/core/package.json b/apps/core/package.json index 2cb3f68c95..d2a34e0ec6 100644 --- a/apps/core/package.json +++ b/apps/core/package.json @@ -39,7 +39,7 @@ "@mui/material": "^5.14.7", "@radix-ui/react-select": "^1.2.2", "@react-hookz/web": "^23.1.0", - "@toeverything/components": "^0.0.41", + "@toeverything/components": "^0.0.42", "async-call-rpc": "^6.3.1", "cmdk": "^0.2.0", "css-spring": "^4.1.0", diff --git a/apps/core/src/components/affine/create-workspace-modal/index.tsx b/apps/core/src/components/affine/create-workspace-modal/index.tsx index 4ffc2a7f07..c2afe6aab3 100644 --- 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, - }} > diff --git a/apps/core/src/components/affine/language-menu/index.tsx b/apps/core/src/components/affine/language-menu/index.tsx index 83e1a1b817..83c2ee6e56 100644 --- 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 = () => { }} > { - 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 }} > - + {dayjs(new Date()).format(appearanceSettings.dateFormat)} diff --git a/apps/core/src/components/affine/setting-modal/setting-sidebar/index.tsx b/apps/core/src/components/affine/setting-modal/setting-sidebar/index.tsx index 461415cabb..5db43e1b72 100644 --- 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 (
{workspaceName} {isCurrent ? ( - +
{ 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 ( - } - portalOptions={{ - container: ref.current, - }} - > + }> ; }) => { - 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={ } - portalOptions={{ - container: ref.current, - }} > (null); const content = useMemo(() => { if (currentWorkspace.flavour === WorkspaceFlavour.LOCAL) { return 'Saved locally'; @@ -130,17 +128,11 @@ const WorkspaceStatus = ({ ); return (
- + { setIsHovered(true); }} - ref={setContainer} onMouseLeave={() => setIsHovered(false)} onClick={handleClick} > diff --git a/packages/component/src/components/app-sidebar/sidebar-header/sidebar-switch.tsx b/packages/component/src/components/app-sidebar/sidebar-header/sidebar-switch.tsx index a03e93eed9..e4210e65ad 100644 --- a/packages/component/src/components/app-sidebar/sidebar-header/sidebar-switch.tsx +++ b/packages/component/src/components/app-sidebar/sidebar-header/sidebar-switch.tsx @@ -3,7 +3,6 @@ import { SidebarIcon } from '@blocksuite/icons'; import { IconButton } from '@toeverything/components/button'; import { Tooltip } from '@toeverything/components/tooltip'; import { useAtom } from 'jotai'; -import { useRef } from 'react'; import { appSidebarOpenAtom } from '../index.jotai'; import * as styles from './sidebar-switch.css'; @@ -11,7 +10,6 @@ import * as styles from './sidebar-switch.css'; export const SidebarSwitch = ({ show }: { show: boolean }) => { const [open, setOpen] = useAtom(appSidebarOpenAtom); const t = useAFFiNEI18N(); - const ref = useRef(null); const tooltipContent = open ? t['com.affine.sidebarSwitch.collapse']() : t['com.affine.sidebarSwitch.expand'](); @@ -22,9 +20,6 @@ export const SidebarSwitch = ({ show }: { show: boolean }) => { { zIndex: 1, }} onClick={() => setOpen(open => !open)} - ref={ref} > diff --git a/packages/component/src/components/page-list/operation-menu-items/export.tsx b/packages/component/src/components/page-list/operation-menu-items/export.tsx index 4546ed926a..8452a6c671 100644 --- a/packages/component/src/components/page-list/operation-menu-items/export.tsx +++ b/packages/component/src/components/page-list/operation-menu-items/export.tsx @@ -10,7 +10,7 @@ import { } from '@blocksuite/icons'; import { MenuIcon, MenuItem, MenuSub } from '@toeverything/components/menu'; import { useSetAtom } from 'jotai'; -import { useCallback, useRef } from 'react'; +import { useCallback } from 'react'; import { getContentParser } from './get-content-parser'; import { transitionStyle } from './index.css'; @@ -248,42 +248,36 @@ export const ExportToMarkdownMenuItem = ({ // fixme: refactor this file, export function may should be passed by 'props', this file is just a ui component export const Export = () => { - const ref = useRef(null); const t = useAFFiNEI18N(); return ( -
- - - - - - - } - triggerOptions={{ - className: transitionStyle, - preFix: ( - - - - ), - ['data-testid' as string]: 'export-menu', - }} - portalOptions={{ - container: ref.current, - }} - > - {t.Export()} - -
+ + + + + + + } + triggerOptions={{ + className: transitionStyle, + preFix: ( + + + + ), + ['data-testid' as string]: 'export-menu', + }} + > + {t.Export()} + ); }; diff --git a/packages/component/src/components/page-list/view/collection-list.tsx b/packages/component/src/components/page-list/view/collection-list.tsx index a280125299..8750aac39b 100644 --- a/packages/component/src/components/page-list/view/collection-list.tsx +++ b/packages/component/src/components/page-list/view/collection-list.tsx @@ -9,7 +9,7 @@ import { Menu, MenuIcon, MenuItem } from '@toeverything/components/menu'; import { Tooltip } from '@toeverything/components/tooltip'; import clsx from 'clsx'; import type { MouseEvent } from 'react'; -import { useCallback, useRef, useState } from 'react'; +import { useCallback, useState } from 'react'; import { CreateFilterMenu } from '../filter/vars'; import type { useCollectionManager } from '../use-collection-manager'; @@ -110,7 +110,6 @@ export const CollectionList = ({ getPageInfo: GetPageInfoById; propertiesMeta: PropertiesMeta; }) => { - const ref = useRef(null); const t = useAFFiNEI18N(); const [collection, setCollection] = useState(); const onChange = useCallback( @@ -140,12 +139,9 @@ export const CollectionList = ({ [closeUpdateCollectionModal, setting] ); return ( - + {setting.savedCollections.length > 0 && ( } - portalOptions={{ - container: ref.current, - }} >
- -
+ + -
+
{percent > 80 ? ( diff --git a/plugins/copilot/package.json b/plugins/copilot/package.json index 4868f9ef61..189876d097 100644 --- a/plugins/copilot/package.json +++ b/plugins/copilot/package.json @@ -16,7 +16,7 @@ "dependencies": { "@affine/component": "workspace:*", "@affine/sdk": "workspace:*", - "@toeverything/components": "^0.0.41", + "@toeverything/components": "^0.0.42", "idb": "^7.1.1", "langchain": "^0.0.138", "marked": "^7.0.5", diff --git a/plugins/hello-world/package.json b/plugins/hello-world/package.json index 12d78a8c1c..0a61bbcfe4 100644 --- a/plugins/hello-world/package.json +++ b/plugins/hello-world/package.json @@ -18,7 +18,7 @@ "@affine/component": "workspace:*", "@affine/sdk": "workspace:*", "@blocksuite/icons": "^2.1.33", - "@toeverything/components": "^0.0.41" + "@toeverything/components": "^0.0.42" }, "devDependencies": { "@affine/plugin-cli": "workspace:*" diff --git a/plugins/image-preview/package.json b/plugins/image-preview/package.json index 6ae2889ba1..221854210c 100644 --- a/plugins/image-preview/package.json +++ b/plugins/image-preview/package.json @@ -17,7 +17,7 @@ "@affine/component": "workspace:*", "@affine/sdk": "workspace:*", "@blocksuite/icons": "^2.1.33", - "@toeverything/components": "^0.0.41", + "@toeverything/components": "^0.0.42", "@toeverything/theme": "^0.7.15", "clsx": "^2.0.0", "foxact": "^0.2.20", diff --git a/plugins/outline/package.json b/plugins/outline/package.json index 6fd73a5bac..9992ad8125 100644 --- a/plugins/outline/package.json +++ b/plugins/outline/package.json @@ -18,7 +18,7 @@ "@affine/component": "workspace:*", "@affine/sdk": "workspace:*", "@blocksuite/icons": "^2.1.33", - "@toeverything/components": "^0.0.41" + "@toeverything/components": "^0.0.42" }, "devDependencies": { "@affine/plugin-cli": "workspace:*", diff --git a/yarn.lock b/yarn.lock index 04869cab66..4540a1120f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -231,7 +231,7 @@ __metadata: "@affine/component": "workspace:*" "@affine/plugin-cli": "workspace:*" "@affine/sdk": "workspace:*" - "@toeverything/components": ^0.0.41 + "@toeverything/components": ^0.0.42 "@types/marked": ^5.0.1 idb: ^7.1.1 jotai: ^2.4.1 @@ -282,7 +282,7 @@ __metadata: "@sentry/webpack-plugin": ^2.7.0 "@svgr/webpack": ^8.1.0 "@swc/core": ^1.3.81 - "@toeverything/components": ^0.0.41 + "@toeverything/components": ^0.0.42 "@types/lodash-es": ^4.17.9 "@types/webpack-env": ^1.18.1 async-call-rpc: ^6.3.1 @@ -458,7 +458,7 @@ __metadata: "@affine/plugin-cli": "workspace:*" "@affine/sdk": "workspace:*" "@blocksuite/icons": ^2.1.33 - "@toeverything/components": ^0.0.41 + "@toeverything/components": ^0.0.42 languageName: unknown linkType: soft @@ -484,7 +484,7 @@ __metadata: "@affine/plugin-cli": "workspace:*" "@affine/sdk": "workspace:*" "@blocksuite/icons": ^2.1.33 - "@toeverything/components": ^0.0.41 + "@toeverything/components": ^0.0.42 "@toeverything/theme": ^0.7.15 clsx: ^2.0.0 foxact: ^0.2.20 @@ -580,7 +580,7 @@ __metadata: "@affine/plugin-cli": "workspace:*" "@affine/sdk": "workspace:*" "@blocksuite/icons": ^2.1.33 - "@toeverything/components": ^0.0.41 + "@toeverything/components": ^0.0.42 jotai: ^2.4.1 react: 18.2.0 react-dom: 18.2.0 @@ -12509,9 +12509,9 @@ __metadata: languageName: node linkType: hard -"@toeverything/components@npm:^0.0.41": - version: 0.0.41 - resolution: "@toeverything/components@npm:0.0.41" +"@toeverything/components@npm:^0.0.42": + version: 0.0.42 + resolution: "@toeverything/components@npm:0.0.42" dependencies: "@blocksuite/icons": ^2.1.33 "@radix-ui/react-dialog": ^1.0.4 @@ -12523,7 +12523,7 @@ __metadata: clsx: ^2 react: ^18 react-dom: ^18 - checksum: 15ee1cba8ea7880c9aae9fb18f8f8c44a183b64972e29e852d55e097a74ec994c1b2d22d6708746055e741112decffed1db14c345f5300733969bac69ddecf87 + checksum: 140097386e9e4130d1ad8e60ebc65ede0d68f041bef7058d06488d228009d3d58e9e1af6af2911b4a22d27efd36996a9f9e195ed49b92ba3c21aedb81ba54d87 languageName: node linkType: hard