toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-12-22 16:51:34 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: pinboard operation menu disappear inexplicably when hover to menu from button, fixed #1898 (#1922)

Browse Source
This commit is contained in:
Qi 2023-04-13 20:58:22 +08:00 committed by GitHub
parent 7d64815aca
commit 6571ec2df6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
apps/web/src/components/affine/pinboard/pinboard-render/OperationButton.tsx
View File

@ -8,7 +8,7 @@ import {
} from '@blocksuite/icons'; } from '@blocksuite/icons';
import type { PageMeta } from '@blocksuite/store'; import type { PageMeta } from '@blocksuite/store';
import { useTheme } from '@mui/material'; import { useTheme } from '@mui/material';
import { useMemo, useState } from 'react'; import { useMemo, useRef, useState } from 'react';
import { useMetaHelper } from '../../../../hooks/affine/use-meta-helper'; import { useMetaHelper } from '../../../../hooks/affine/use-meta-helper';
import type { BlockSuiteWorkspace } from '../../../../shared'; import type { BlockSuiteWorkspace } from '../../../../shared';
@ -44,6 +44,7 @@ export const OperationButton = ({
} = useTheme(); } = useTheme();
const { t } = useTranslation(); const { t } = useTranslation();
const timer = useRef<ReturnType<typeof setTimeout>>();
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null); const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const [operationMenuOpen, setOperationMenuOpen] = useState(false); const [operationMenuOpen, setOperationMenuOpen] = useState(false);
const [pinboardMenuOpen, setPinboardMenuOpen] = useState(false); const [pinboardMenuOpen, setPinboardMenuOpen] = useState(false);
@ -58,7 +59,20 @@ export const OperationButton = ({
setPinboardMenuOpen(false); setPinboardMenuOpen(false);
}} }}
> >
<div> <div
onClick={e => {
e.stopPropagation();
}}
onMouseLeave={() => {
timer.current = setTimeout(() => {
setOperationMenuOpen(false);
setPinboardMenuOpen(false);
}, 150);
}}
onMouseEnter={() => {
clearTimeout(timer.current);
}}
>
<StyledOperationButton <StyledOperationButton
data-testid="pinboard-operation-button" data-testid="pinboard-operation-button"
ref={ref => setAnchorEl(ref)} ref={ref => setAnchorEl(ref)}