mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-11 20:08:37 +00:00
fix: remove useRef in menu & tooltip (#4369)
This commit is contained in:
@@ -39,7 +39,7 @@
|
|||||||
"@mui/material": "^5.14.7",
|
"@mui/material": "^5.14.7",
|
||||||
"@radix-ui/react-select": "^1.2.2",
|
"@radix-ui/react-select": "^1.2.2",
|
||||||
"@react-hookz/web": "^23.1.0",
|
"@react-hookz/web": "^23.1.0",
|
||||||
"@toeverything/components": "^0.0.41",
|
"@toeverything/components": "^0.0.42",
|
||||||
"async-call-rpc": "^6.3.1",
|
"async-call-rpc": "^6.3.1",
|
||||||
"cmdk": "^0.2.0",
|
"cmdk": "^0.2.0",
|
||||||
"css-spring": "^4.1.0",
|
"css-spring": "^4.1.0",
|
||||||
|
|||||||
@@ -11,7 +11,7 @@ import type {
|
|||||||
} from '@toeverything/infra/type';
|
} from '@toeverything/infra/type';
|
||||||
import { useSetAtom } from 'jotai';
|
import { useSetAtom } from 'jotai';
|
||||||
import type { KeyboardEvent } from 'react';
|
import type { KeyboardEvent } from 'react';
|
||||||
import { useEffect, useRef } from 'react';
|
import { useEffect } from 'react';
|
||||||
import { useLayoutEffect } from 'react';
|
import { useLayoutEffect } from 'react';
|
||||||
import { useCallback, useState } from 'react';
|
import { useCallback, useState } from 'react';
|
||||||
|
|
||||||
@@ -122,7 +122,6 @@ const SetDBLocationContent = ({
|
|||||||
onConfirmLocation,
|
onConfirmLocation,
|
||||||
}: SetDBLocationContentProps) => {
|
}: SetDBLocationContentProps) => {
|
||||||
const t = useAFFiNEI18N();
|
const t = useAFFiNEI18N();
|
||||||
const ref = useRef(null);
|
|
||||||
const defaultDBLocation = useDefaultDBLocation();
|
const defaultDBLocation = useDefaultDBLocation();
|
||||||
const [opening, setOpening] = useState(false);
|
const [opening, setOpening] = useState(false);
|
||||||
|
|
||||||
@@ -164,9 +163,6 @@ const SetDBLocationContent = ({
|
|||||||
content={t['com.affine.setDBLocation.tooltip.defaultLocation']({
|
content={t['com.affine.setDBLocation.tooltip.defaultLocation']({
|
||||||
location: defaultDBLocation,
|
location: defaultDBLocation,
|
||||||
})}
|
})}
|
||||||
portalOptions={{
|
|
||||||
container: ref.current,
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<Button
|
<Button
|
||||||
data-testid="create-workspace-default-location-button"
|
data-testid="create-workspace-default-location-button"
|
||||||
@@ -176,7 +172,6 @@ const SetDBLocationContent = ({
|
|||||||
}}
|
}}
|
||||||
icon={<HelpIcon />}
|
icon={<HelpIcon />}
|
||||||
iconPosition="end"
|
iconPosition="end"
|
||||||
ref={ref}
|
|
||||||
>
|
>
|
||||||
{t['com.affine.setDBLocation.button.defaultLocation']()}
|
{t['com.affine.setDBLocation.button.defaultLocation']()}
|
||||||
</Button>
|
</Button>
|
||||||
|
|||||||
@@ -2,7 +2,7 @@ import { LOCALES } from '@affine/i18n';
|
|||||||
import { useI18N } from '@affine/i18n';
|
import { useI18N } from '@affine/i18n';
|
||||||
import { Menu, MenuItem, MenuTrigger } from '@toeverything/components/menu';
|
import { Menu, MenuItem, MenuTrigger } from '@toeverything/components/menu';
|
||||||
import type { ReactElement } from 'react';
|
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
|
// Fixme: keyboard focus should be supported by Menu component
|
||||||
const LanguageMenuContent = ({
|
const LanguageMenuContent = ({
|
||||||
@@ -32,7 +32,6 @@ const LanguageMenuContent = ({
|
|||||||
|
|
||||||
export const LanguageMenu = () => {
|
export const LanguageMenu = () => {
|
||||||
const i18n = useI18N();
|
const i18n = useI18N();
|
||||||
const ref = useRef(null);
|
|
||||||
const currentLanguage = useMemo(
|
const currentLanguage = useMemo(
|
||||||
() => LOCALES.find(item => item.tag === i18n.language),
|
() => LOCALES.find(item => item.tag === i18n.language),
|
||||||
[i18n.language]
|
[i18n.language]
|
||||||
@@ -53,9 +52,6 @@ export const LanguageMenu = () => {
|
|||||||
/>
|
/>
|
||||||
) as ReactElement
|
) as ReactElement
|
||||||
}
|
}
|
||||||
portalOptions={{
|
|
||||||
container: ref.current,
|
|
||||||
}}
|
|
||||||
contentOptions={{
|
contentOptions={{
|
||||||
style: {
|
style: {
|
||||||
background: 'var(--affine-white)',
|
background: 'var(--affine-white)',
|
||||||
@@ -64,7 +60,6 @@ export const LanguageMenu = () => {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<MenuTrigger
|
<MenuTrigger
|
||||||
ref={ref}
|
|
||||||
data-testid="language-menu-button"
|
data-testid="language-menu-button"
|
||||||
style={{ textTransform: 'capitalize', fontWeight: 600 }}
|
style={{ textTransform: 'capitalize', fontWeight: 600 }}
|
||||||
block={true}
|
block={true}
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import { Menu, MenuItem, MenuTrigger } from '@toeverything/components/menu';
|
import { Menu, MenuItem, MenuTrigger } from '@toeverything/components/menu';
|
||||||
import dayjs from 'dayjs';
|
import dayjs from 'dayjs';
|
||||||
import { useCallback, useRef } from 'react';
|
import { useCallback } from 'react';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
dateFormatOptions,
|
dateFormatOptions,
|
||||||
@@ -35,7 +35,6 @@ const DateFormatMenuContent = ({
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const DateFormatSetting = () => {
|
export const DateFormatSetting = () => {
|
||||||
const ref = useRef(null);
|
|
||||||
const [appearanceSettings, setAppSettings] = useAppSetting();
|
const [appearanceSettings, setAppSettings] = useAppSetting();
|
||||||
const handleSelect = useCallback(
|
const handleSelect = useCallback(
|
||||||
(option: DateFormats) => {
|
(option: DateFormats) => {
|
||||||
@@ -52,9 +51,8 @@ export const DateFormatSetting = () => {
|
|||||||
currentOption={appearanceSettings.dateFormat}
|
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)}
|
{dayjs(new Date()).format(appearanceSettings.dateFormat)}
|
||||||
</MenuTrigger>
|
</MenuTrigger>
|
||||||
</Menu>
|
</Menu>
|
||||||
|
|||||||
@@ -14,13 +14,7 @@ import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-
|
|||||||
import { useStaticBlockSuiteWorkspace } from '@toeverything/infra/__internal__/react';
|
import { useStaticBlockSuiteWorkspace } from '@toeverything/infra/__internal__/react';
|
||||||
import clsx from 'clsx';
|
import clsx from 'clsx';
|
||||||
import { useAtom, useAtomValue } from 'jotai/react';
|
import { useAtom, useAtomValue } from 'jotai/react';
|
||||||
import {
|
import { type ReactElement, Suspense, useCallback, useMemo } from 'react';
|
||||||
type ReactElement,
|
|
||||||
Suspense,
|
|
||||||
useCallback,
|
|
||||||
useMemo,
|
|
||||||
useRef,
|
|
||||||
} from 'react';
|
|
||||||
|
|
||||||
import { authAtom } from '../../../../atoms';
|
import { authAtom } from '../../../../atoms';
|
||||||
import { useCurrentLoginStatus } from '../../../../hooks/affine/use-current-login-status';
|
import { useCurrentLoginStatus } from '../../../../hooks/affine/use-current-login-status';
|
||||||
@@ -225,7 +219,6 @@ const WorkspaceListItem = ({
|
|||||||
const workspace = useStaticBlockSuiteWorkspace(meta.id);
|
const workspace = useStaticBlockSuiteWorkspace(meta.id);
|
||||||
const [workspaceAvatar] = useBlockSuiteWorkspaceAvatarUrl(workspace);
|
const [workspaceAvatar] = useBlockSuiteWorkspaceAvatarUrl(workspace);
|
||||||
const [workspaceName] = useBlockSuiteWorkspaceName(workspace);
|
const [workspaceName] = useBlockSuiteWorkspaceName(workspace);
|
||||||
const ref = useRef(null);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
@@ -233,7 +226,6 @@ const WorkspaceListItem = ({
|
|||||||
title={workspaceName}
|
title={workspaceName}
|
||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
data-testid="workspace-list-item"
|
data-testid="workspace-list-item"
|
||||||
ref={ref}
|
|
||||||
>
|
>
|
||||||
<Avatar
|
<Avatar
|
||||||
size={14}
|
size={14}
|
||||||
@@ -246,13 +238,7 @@ const WorkspaceListItem = ({
|
|||||||
/>
|
/>
|
||||||
<span className="setting-name">{workspaceName}</span>
|
<span className="setting-name">{workspaceName}</span>
|
||||||
{isCurrent ? (
|
{isCurrent ? (
|
||||||
<Tooltip
|
<Tooltip content="Current" side="top">
|
||||||
content="Current"
|
|
||||||
side="top"
|
|
||||||
portalOptions={{
|
|
||||||
container: ref.current,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
<div
|
||||||
className={currentWorkspaceLabel}
|
className={currentWorkspaceLabel}
|
||||||
data-testid="current-workspace-label"
|
data-testid="current-workspace-label"
|
||||||
|
|||||||
@@ -212,9 +212,6 @@ export const PageMenu = ({ rename, pageId }: PageMenuProps) => {
|
|||||||
<FlexWrapper alignItems="center" justifyContent="center" ref={ref}>
|
<FlexWrapper alignItems="center" justifyContent="center" ref={ref}>
|
||||||
<Menu
|
<Menu
|
||||||
items={EditMenu}
|
items={EditMenu}
|
||||||
portalOptions={{
|
|
||||||
container: ref.current,
|
|
||||||
}}
|
|
||||||
contentOptions={{
|
contentOptions={{
|
||||||
align: 'center',
|
align: 'center',
|
||||||
}}
|
}}
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ import { Tooltip } from '@toeverything/components/tooltip';
|
|||||||
import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
|
import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
|
||||||
import { useAtom } from 'jotai';
|
import { useAtom } from 'jotai';
|
||||||
import type { CSSProperties } from 'react';
|
import type { CSSProperties } from 'react';
|
||||||
import { useEffect, useRef } from 'react';
|
import { useEffect } from 'react';
|
||||||
|
|
||||||
import { pageSettingFamily } from '../../../atoms';
|
import { pageSettingFamily } from '../../../atoms';
|
||||||
import type { BlockSuiteWorkspace } from '../../../shared';
|
import type { BlockSuiteWorkspace } from '../../../shared';
|
||||||
@@ -40,7 +40,6 @@ export const EditorModeSwitch = ({
|
|||||||
meta => meta.id === pageId
|
meta => meta.id === pageId
|
||||||
);
|
);
|
||||||
const t = useAFFiNEI18N();
|
const t = useAFFiNEI18N();
|
||||||
const ref = useRef(null);
|
|
||||||
assertExists(pageMeta);
|
assertExists(pageMeta);
|
||||||
const { trash } = pageMeta;
|
const { trash } = pageMeta;
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -71,17 +70,11 @@ export const EditorModeSwitch = ({
|
|||||||
}, [setSetting, t, trash]);
|
}, [setSetting, t, trash]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Tooltip
|
<Tooltip content={<TooltipContent />}>
|
||||||
content={<TooltipContent />}
|
|
||||||
portalOptions={{
|
|
||||||
container: ref.current,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<StyledEditorModeSwitch
|
<StyledEditorModeSwitch
|
||||||
style={style}
|
style={style}
|
||||||
switchLeft={currentMode === 'page'}
|
switchLeft={currentMode === 'page'}
|
||||||
showAlone={trash}
|
showAlone={trash}
|
||||||
ref={ref}
|
|
||||||
>
|
>
|
||||||
<PageSwitchItem
|
<PageSwitchItem
|
||||||
data-testid="switch-page-mode-button"
|
data-testid="switch-page-mode-button"
|
||||||
|
|||||||
@@ -151,7 +151,6 @@ export const Page = ({
|
|||||||
workspace: Workspace;
|
workspace: Workspace;
|
||||||
allPageMeta: Record<string, PageMeta>;
|
allPageMeta: Record<string, PageMeta>;
|
||||||
}) => {
|
}) => {
|
||||||
const ref = React.useRef(null);
|
|
||||||
const [collapsed, setCollapsed] = React.useState(true);
|
const [collapsed, setCollapsed] = React.useState(true);
|
||||||
const params = useParams();
|
const params = useParams();
|
||||||
const { jumpToPage } = useNavigateHelper();
|
const { jumpToPage } = useNavigateHelper();
|
||||||
@@ -176,7 +175,6 @@ export const Page = ({
|
|||||||
active={active}
|
active={active}
|
||||||
collapsed={referencesToRender.length > 0 ? collapsed : undefined}
|
collapsed={referencesToRender.length > 0 ? collapsed : undefined}
|
||||||
onCollapsedChange={setCollapsed}
|
onCollapsedChange={setCollapsed}
|
||||||
ref={ref}
|
|
||||||
postfix={
|
postfix={
|
||||||
<Menu
|
<Menu
|
||||||
items={
|
items={
|
||||||
@@ -189,9 +187,6 @@ export const Page = ({
|
|||||||
workspace={workspace}
|
workspace={workspace}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
portalOptions={{
|
|
||||||
container: ref.current,
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<IconButton
|
<IconButton
|
||||||
data-testid="collection-page-options"
|
data-testid="collection-page-options"
|
||||||
|
|||||||
@@ -16,7 +16,6 @@ import {
|
|||||||
type MouseEvent,
|
type MouseEvent,
|
||||||
useCallback,
|
useCallback,
|
||||||
useMemo,
|
useMemo,
|
||||||
useState,
|
|
||||||
} from 'react';
|
} from 'react';
|
||||||
|
|
||||||
import { useDatasourceSync } from '../../../../hooks/use-datasource-sync';
|
import { useDatasourceSync } from '../../../../hooks/use-datasource-sync';
|
||||||
@@ -88,7 +87,6 @@ const WorkspaceStatus = ({
|
|||||||
currentWorkspace.blockSuiteWorkspace
|
currentWorkspace.blockSuiteWorkspace
|
||||||
);
|
);
|
||||||
const setIsHovered = useSetAtom(hoverAtom);
|
const setIsHovered = useSetAtom(hoverAtom);
|
||||||
const [container, setContainer] = useState<HTMLDivElement | null>(null);
|
|
||||||
const content = useMemo(() => {
|
const content = useMemo(() => {
|
||||||
if (currentWorkspace.flavour === WorkspaceFlavour.LOCAL) {
|
if (currentWorkspace.flavour === WorkspaceFlavour.LOCAL) {
|
||||||
return 'Saved locally';
|
return 'Saved locally';
|
||||||
@@ -130,17 +128,11 @@ const WorkspaceStatus = ({
|
|||||||
);
|
);
|
||||||
return (
|
return (
|
||||||
<div style={{ display: 'flex' }}>
|
<div style={{ display: 'flex' }}>
|
||||||
<Tooltip
|
<Tooltip content={content}>
|
||||||
content={content}
|
|
||||||
portalOptions={{
|
|
||||||
container,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<StyledWorkspaceStatus
|
<StyledWorkspaceStatus
|
||||||
onMouseEnter={() => {
|
onMouseEnter={() => {
|
||||||
setIsHovered(true);
|
setIsHovered(true);
|
||||||
}}
|
}}
|
||||||
ref={setContainer}
|
|
||||||
onMouseLeave={() => setIsHovered(false)}
|
onMouseLeave={() => setIsHovered(false)}
|
||||||
onClick={handleClick}
|
onClick={handleClick}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -3,7 +3,6 @@ import { SidebarIcon } from '@blocksuite/icons';
|
|||||||
import { IconButton } from '@toeverything/components/button';
|
import { IconButton } from '@toeverything/components/button';
|
||||||
import { Tooltip } from '@toeverything/components/tooltip';
|
import { Tooltip } from '@toeverything/components/tooltip';
|
||||||
import { useAtom } from 'jotai';
|
import { useAtom } from 'jotai';
|
||||||
import { useRef } from 'react';
|
|
||||||
|
|
||||||
import { appSidebarOpenAtom } from '../index.jotai';
|
import { appSidebarOpenAtom } from '../index.jotai';
|
||||||
import * as styles from './sidebar-switch.css';
|
import * as styles from './sidebar-switch.css';
|
||||||
@@ -11,7 +10,6 @@ import * as styles from './sidebar-switch.css';
|
|||||||
export const SidebarSwitch = ({ show }: { show: boolean }) => {
|
export const SidebarSwitch = ({ show }: { show: boolean }) => {
|
||||||
const [open, setOpen] = useAtom(appSidebarOpenAtom);
|
const [open, setOpen] = useAtom(appSidebarOpenAtom);
|
||||||
const t = useAFFiNEI18N();
|
const t = useAFFiNEI18N();
|
||||||
const ref = useRef(null);
|
|
||||||
const tooltipContent = open
|
const tooltipContent = open
|
||||||
? t['com.affine.sidebarSwitch.collapse']()
|
? t['com.affine.sidebarSwitch.collapse']()
|
||||||
: t['com.affine.sidebarSwitch.expand']();
|
: t['com.affine.sidebarSwitch.expand']();
|
||||||
@@ -22,9 +20,6 @@ export const SidebarSwitch = ({ show }: { show: boolean }) => {
|
|||||||
<Tooltip
|
<Tooltip
|
||||||
content={tooltipContent + ' ' + collapseKeyboardShortcuts}
|
content={tooltipContent + ' ' + collapseKeyboardShortcuts}
|
||||||
side={open ? 'bottom' : 'right'}
|
side={open ? 'bottom' : 'right'}
|
||||||
portalOptions={{
|
|
||||||
container: ref.current,
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<IconButton
|
<IconButton
|
||||||
className={styles.sidebarSwitch}
|
className={styles.sidebarSwitch}
|
||||||
@@ -35,7 +30,6 @@ export const SidebarSwitch = ({ show }: { show: boolean }) => {
|
|||||||
zIndex: 1,
|
zIndex: 1,
|
||||||
}}
|
}}
|
||||||
onClick={() => setOpen(open => !open)}
|
onClick={() => setOpen(open => !open)}
|
||||||
ref={ref}
|
|
||||||
>
|
>
|
||||||
<SidebarIcon />
|
<SidebarIcon />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
|
|||||||
@@ -10,7 +10,7 @@ import {
|
|||||||
} from '@blocksuite/icons';
|
} from '@blocksuite/icons';
|
||||||
import { MenuIcon, MenuItem, MenuSub } from '@toeverything/components/menu';
|
import { MenuIcon, MenuItem, MenuSub } from '@toeverything/components/menu';
|
||||||
import { useSetAtom } from 'jotai';
|
import { useSetAtom } from 'jotai';
|
||||||
import { useCallback, useRef } from 'react';
|
import { useCallback } from 'react';
|
||||||
|
|
||||||
import { getContentParser } from './get-content-parser';
|
import { getContentParser } from './get-content-parser';
|
||||||
import { transitionStyle } from './index.css';
|
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
|
// fixme: refactor this file, export function may should be passed by 'props', this file is just a ui component
|
||||||
export const Export = () => {
|
export const Export = () => {
|
||||||
const ref = useRef(null);
|
|
||||||
const t = useAFFiNEI18N();
|
const t = useAFFiNEI18N();
|
||||||
return (
|
return (
|
||||||
<div ref={ref}>
|
<MenuSub
|
||||||
<MenuSub
|
items={
|
||||||
items={
|
<>
|
||||||
<>
|
<ExportToPdfMenuItem
|
||||||
<ExportToPdfMenuItem
|
className={transitionStyle}
|
||||||
className={transitionStyle}
|
></ExportToPdfMenuItem>
|
||||||
></ExportToPdfMenuItem>
|
<ExportToHtmlMenuItem
|
||||||
<ExportToHtmlMenuItem
|
className={transitionStyle}
|
||||||
className={transitionStyle}
|
></ExportToHtmlMenuItem>
|
||||||
></ExportToHtmlMenuItem>
|
<ExportToPngMenuItem
|
||||||
<ExportToPngMenuItem
|
className={transitionStyle}
|
||||||
className={transitionStyle}
|
></ExportToPngMenuItem>
|
||||||
></ExportToPngMenuItem>
|
<ExportToMarkdownMenuItem
|
||||||
<ExportToMarkdownMenuItem
|
className={transitionStyle}
|
||||||
className={transitionStyle}
|
></ExportToMarkdownMenuItem>
|
||||||
></ExportToMarkdownMenuItem>
|
</>
|
||||||
</>
|
}
|
||||||
}
|
triggerOptions={{
|
||||||
triggerOptions={{
|
className: transitionStyle,
|
||||||
className: transitionStyle,
|
preFix: (
|
||||||
preFix: (
|
<MenuIcon>
|
||||||
<MenuIcon>
|
<ExportIcon />
|
||||||
<ExportIcon />
|
</MenuIcon>
|
||||||
</MenuIcon>
|
),
|
||||||
),
|
['data-testid' as string]: 'export-menu',
|
||||||
['data-testid' as string]: 'export-menu',
|
}}
|
||||||
}}
|
>
|
||||||
portalOptions={{
|
{t.Export()}
|
||||||
container: ref.current,
|
</MenuSub>
|
||||||
}}
|
|
||||||
>
|
|
||||||
{t.Export()}
|
|
||||||
</MenuSub>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ import { Menu, MenuIcon, MenuItem } from '@toeverything/components/menu';
|
|||||||
import { Tooltip } from '@toeverything/components/tooltip';
|
import { Tooltip } from '@toeverything/components/tooltip';
|
||||||
import clsx from 'clsx';
|
import clsx from 'clsx';
|
||||||
import type { MouseEvent } from 'react';
|
import type { MouseEvent } from 'react';
|
||||||
import { useCallback, useRef, useState } from 'react';
|
import { useCallback, useState } from 'react';
|
||||||
|
|
||||||
import { CreateFilterMenu } from '../filter/vars';
|
import { CreateFilterMenu } from '../filter/vars';
|
||||||
import type { useCollectionManager } from '../use-collection-manager';
|
import type { useCollectionManager } from '../use-collection-manager';
|
||||||
@@ -110,7 +110,6 @@ export const CollectionList = ({
|
|||||||
getPageInfo: GetPageInfoById;
|
getPageInfo: GetPageInfoById;
|
||||||
propertiesMeta: PropertiesMeta;
|
propertiesMeta: PropertiesMeta;
|
||||||
}) => {
|
}) => {
|
||||||
const ref = useRef(null);
|
|
||||||
const t = useAFFiNEI18N();
|
const t = useAFFiNEI18N();
|
||||||
const [collection, setCollection] = useState<Collection>();
|
const [collection, setCollection] = useState<Collection>();
|
||||||
const onChange = useCallback(
|
const onChange = useCallback(
|
||||||
@@ -140,12 +139,9 @@ export const CollectionList = ({
|
|||||||
[closeUpdateCollectionModal, setting]
|
[closeUpdateCollectionModal, setting]
|
||||||
);
|
);
|
||||||
return (
|
return (
|
||||||
<FlexWrapper alignItems="center" ref={ref}>
|
<FlexWrapper alignItems="center">
|
||||||
{setting.savedCollections.length > 0 && (
|
{setting.savedCollections.length > 0 && (
|
||||||
<Menu
|
<Menu
|
||||||
portalOptions={{
|
|
||||||
container: ref.current,
|
|
||||||
}}
|
|
||||||
items={
|
items={
|
||||||
<div style={{ minWidth: 150 }}>
|
<div style={{ minWidth: 150 }}>
|
||||||
<MenuItem
|
<MenuItem
|
||||||
@@ -203,9 +199,6 @@ export const CollectionList = ({
|
|||||||
onChange={onChange}
|
onChange={onChange}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
portalOptions={{
|
|
||||||
container: ref.current,
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<Button
|
<Button
|
||||||
className={styles.filterMenuTrigger}
|
className={styles.filterMenuTrigger}
|
||||||
|
|||||||
@@ -2,7 +2,7 @@ import { useAFFiNEI18N } from '@affine/i18n/hooks';
|
|||||||
import { Button } from '@toeverything/components/button';
|
import { Button } from '@toeverything/components/button';
|
||||||
import { Tooltip } from '@toeverything/components/tooltip';
|
import { Tooltip } from '@toeverything/components/tooltip';
|
||||||
import clsx from 'clsx';
|
import clsx from 'clsx';
|
||||||
import { useMemo, useRef } from 'react';
|
import { useMemo } from 'react';
|
||||||
|
|
||||||
import * as styles from './share.css';
|
import * as styles from './share.css';
|
||||||
|
|
||||||
@@ -26,7 +26,6 @@ export const StorageProgress = ({
|
|||||||
onUpgrade,
|
onUpgrade,
|
||||||
}: StorageProgressProgress) => {
|
}: StorageProgressProgress) => {
|
||||||
const t = useAFFiNEI18N();
|
const t = useAFFiNEI18N();
|
||||||
const ref = useRef(null);
|
|
||||||
const percent = useMemo(
|
const percent = useMemo(
|
||||||
() => Math.round((value / upperLimit) * 100),
|
() => Math.round((value / upperLimit) * 100),
|
||||||
[upperLimit, value]
|
[upperLimit, value]
|
||||||
@@ -57,17 +56,12 @@ export const StorageProgress = ({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Tooltip
|
<Tooltip content={t['com.affine.storage.disabled.hint']()}>
|
||||||
content={t['com.affine.storage.disabled.hint']()}
|
<span tabIndex={0}>
|
||||||
portalOptions={{
|
|
||||||
container: ref.current,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div ref={ref}>
|
|
||||||
<Button disabled onClick={onUpgrade}>
|
<Button disabled onClick={onUpgrade}>
|
||||||
{t['com.affine.storage.upgrade']()}
|
{t['com.affine.storage.upgrade']()}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</span>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</div>
|
</div>
|
||||||
{percent > 80 ? (
|
{percent > 80 ? (
|
||||||
|
|||||||
@@ -16,7 +16,7 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@affine/component": "workspace:*",
|
"@affine/component": "workspace:*",
|
||||||
"@affine/sdk": "workspace:*",
|
"@affine/sdk": "workspace:*",
|
||||||
"@toeverything/components": "^0.0.41",
|
"@toeverything/components": "^0.0.42",
|
||||||
"idb": "^7.1.1",
|
"idb": "^7.1.1",
|
||||||
"langchain": "^0.0.138",
|
"langchain": "^0.0.138",
|
||||||
"marked": "^7.0.5",
|
"marked": "^7.0.5",
|
||||||
|
|||||||
@@ -18,7 +18,7 @@
|
|||||||
"@affine/component": "workspace:*",
|
"@affine/component": "workspace:*",
|
||||||
"@affine/sdk": "workspace:*",
|
"@affine/sdk": "workspace:*",
|
||||||
"@blocksuite/icons": "^2.1.33",
|
"@blocksuite/icons": "^2.1.33",
|
||||||
"@toeverything/components": "^0.0.41"
|
"@toeverything/components": "^0.0.42"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@affine/plugin-cli": "workspace:*"
|
"@affine/plugin-cli": "workspace:*"
|
||||||
|
|||||||
@@ -17,7 +17,7 @@
|
|||||||
"@affine/component": "workspace:*",
|
"@affine/component": "workspace:*",
|
||||||
"@affine/sdk": "workspace:*",
|
"@affine/sdk": "workspace:*",
|
||||||
"@blocksuite/icons": "^2.1.33",
|
"@blocksuite/icons": "^2.1.33",
|
||||||
"@toeverything/components": "^0.0.41",
|
"@toeverything/components": "^0.0.42",
|
||||||
"@toeverything/theme": "^0.7.15",
|
"@toeverything/theme": "^0.7.15",
|
||||||
"clsx": "^2.0.0",
|
"clsx": "^2.0.0",
|
||||||
"foxact": "^0.2.20",
|
"foxact": "^0.2.20",
|
||||||
|
|||||||
@@ -18,7 +18,7 @@
|
|||||||
"@affine/component": "workspace:*",
|
"@affine/component": "workspace:*",
|
||||||
"@affine/sdk": "workspace:*",
|
"@affine/sdk": "workspace:*",
|
||||||
"@blocksuite/icons": "^2.1.33",
|
"@blocksuite/icons": "^2.1.33",
|
||||||
"@toeverything/components": "^0.0.41"
|
"@toeverything/components": "^0.0.42"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@affine/plugin-cli": "workspace:*",
|
"@affine/plugin-cli": "workspace:*",
|
||||||
|
|||||||
18
yarn.lock
18
yarn.lock
@@ -231,7 +231,7 @@ __metadata:
|
|||||||
"@affine/component": "workspace:*"
|
"@affine/component": "workspace:*"
|
||||||
"@affine/plugin-cli": "workspace:*"
|
"@affine/plugin-cli": "workspace:*"
|
||||||
"@affine/sdk": "workspace:*"
|
"@affine/sdk": "workspace:*"
|
||||||
"@toeverything/components": ^0.0.41
|
"@toeverything/components": ^0.0.42
|
||||||
"@types/marked": ^5.0.1
|
"@types/marked": ^5.0.1
|
||||||
idb: ^7.1.1
|
idb: ^7.1.1
|
||||||
jotai: ^2.4.1
|
jotai: ^2.4.1
|
||||||
@@ -282,7 +282,7 @@ __metadata:
|
|||||||
"@sentry/webpack-plugin": ^2.7.0
|
"@sentry/webpack-plugin": ^2.7.0
|
||||||
"@svgr/webpack": ^8.1.0
|
"@svgr/webpack": ^8.1.0
|
||||||
"@swc/core": ^1.3.81
|
"@swc/core": ^1.3.81
|
||||||
"@toeverything/components": ^0.0.41
|
"@toeverything/components": ^0.0.42
|
||||||
"@types/lodash-es": ^4.17.9
|
"@types/lodash-es": ^4.17.9
|
||||||
"@types/webpack-env": ^1.18.1
|
"@types/webpack-env": ^1.18.1
|
||||||
async-call-rpc: ^6.3.1
|
async-call-rpc: ^6.3.1
|
||||||
@@ -458,7 +458,7 @@ __metadata:
|
|||||||
"@affine/plugin-cli": "workspace:*"
|
"@affine/plugin-cli": "workspace:*"
|
||||||
"@affine/sdk": "workspace:*"
|
"@affine/sdk": "workspace:*"
|
||||||
"@blocksuite/icons": ^2.1.33
|
"@blocksuite/icons": ^2.1.33
|
||||||
"@toeverything/components": ^0.0.41
|
"@toeverything/components": ^0.0.42
|
||||||
languageName: unknown
|
languageName: unknown
|
||||||
linkType: soft
|
linkType: soft
|
||||||
|
|
||||||
@@ -484,7 +484,7 @@ __metadata:
|
|||||||
"@affine/plugin-cli": "workspace:*"
|
"@affine/plugin-cli": "workspace:*"
|
||||||
"@affine/sdk": "workspace:*"
|
"@affine/sdk": "workspace:*"
|
||||||
"@blocksuite/icons": ^2.1.33
|
"@blocksuite/icons": ^2.1.33
|
||||||
"@toeverything/components": ^0.0.41
|
"@toeverything/components": ^0.0.42
|
||||||
"@toeverything/theme": ^0.7.15
|
"@toeverything/theme": ^0.7.15
|
||||||
clsx: ^2.0.0
|
clsx: ^2.0.0
|
||||||
foxact: ^0.2.20
|
foxact: ^0.2.20
|
||||||
@@ -580,7 +580,7 @@ __metadata:
|
|||||||
"@affine/plugin-cli": "workspace:*"
|
"@affine/plugin-cli": "workspace:*"
|
||||||
"@affine/sdk": "workspace:*"
|
"@affine/sdk": "workspace:*"
|
||||||
"@blocksuite/icons": ^2.1.33
|
"@blocksuite/icons": ^2.1.33
|
||||||
"@toeverything/components": ^0.0.41
|
"@toeverything/components": ^0.0.42
|
||||||
jotai: ^2.4.1
|
jotai: ^2.4.1
|
||||||
react: 18.2.0
|
react: 18.2.0
|
||||||
react-dom: 18.2.0
|
react-dom: 18.2.0
|
||||||
@@ -12509,9 +12509,9 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"@toeverything/components@npm:^0.0.41":
|
"@toeverything/components@npm:^0.0.42":
|
||||||
version: 0.0.41
|
version: 0.0.42
|
||||||
resolution: "@toeverything/components@npm:0.0.41"
|
resolution: "@toeverything/components@npm:0.0.42"
|
||||||
dependencies:
|
dependencies:
|
||||||
"@blocksuite/icons": ^2.1.33
|
"@blocksuite/icons": ^2.1.33
|
||||||
"@radix-ui/react-dialog": ^1.0.4
|
"@radix-ui/react-dialog": ^1.0.4
|
||||||
@@ -12523,7 +12523,7 @@ __metadata:
|
|||||||
clsx: ^2
|
clsx: ^2
|
||||||
react: ^18
|
react: ^18
|
||||||
react-dom: ^18
|
react-dom: ^18
|
||||||
checksum: 15ee1cba8ea7880c9aae9fb18f8f8c44a183b64972e29e852d55e097a74ec994c1b2d22d6708746055e741112decffed1db14c345f5300733969bac69ddecf87
|
checksum: 140097386e9e4130d1ad8e60ebc65ede0d68f041bef7058d06488d228009d3d58e9e1af6af2911b4a22d27efd36996a9f9e195ed49b92ba3c21aedb81ba54d87
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user