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

This commit is contained in:
Qi
2023-09-16 03:29:55 +08:00
committed by GitHub
parent c41c3c81c8
commit 4577fb7e1a
18 changed files with 59 additions and 133 deletions
@@ -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 (
<div ref={ref}>
<MenuSub
items={
<>
<ExportToPdfMenuItem
className={transitionStyle}
></ExportToPdfMenuItem>
<ExportToHtmlMenuItem
className={transitionStyle}
></ExportToHtmlMenuItem>
<ExportToPngMenuItem
className={transitionStyle}
></ExportToPngMenuItem>
<ExportToMarkdownMenuItem
className={transitionStyle}
></ExportToMarkdownMenuItem>
</>
}
triggerOptions={{
className: transitionStyle,
preFix: (
<MenuIcon>
<ExportIcon />
</MenuIcon>
),
['data-testid' as string]: 'export-menu',
}}
portalOptions={{
container: ref.current,
}}
>
{t.Export()}
</MenuSub>
</div>
<MenuSub
items={
<>
<ExportToPdfMenuItem
className={transitionStyle}
></ExportToPdfMenuItem>
<ExportToHtmlMenuItem
className={transitionStyle}
></ExportToHtmlMenuItem>
<ExportToPngMenuItem
className={transitionStyle}
></ExportToPngMenuItem>
<ExportToMarkdownMenuItem
className={transitionStyle}
></ExportToMarkdownMenuItem>
</>
}
triggerOptions={{
className: transitionStyle,
preFix: (
<MenuIcon>
<ExportIcon />
</MenuIcon>
),
['data-testid' as string]: 'export-menu',
}}
>
{t.Export()}
</MenuSub>
);
};
@@ -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<Collection>();
const onChange = useCallback(
@@ -140,12 +139,9 @@ export const CollectionList = ({
[closeUpdateCollectionModal, setting]
);
return (
<FlexWrapper alignItems="center" ref={ref}>
<FlexWrapper alignItems="center">
{setting.savedCollections.length > 0 && (
<Menu
portalOptions={{
container: ref.current,
}}
items={
<div style={{ minWidth: 150 }}>
<MenuItem
@@ -203,9 +199,6 @@ export const CollectionList = ({
onChange={onChange}
/>
}
portalOptions={{
container: ref.current,
}}
>
<Button
className={styles.filterMenuTrigger}