fix: close peek view when clicking on reference link (#7137)

This commit is contained in:
pengx17
2024-06-06 15:40:22 +00:00
parent 51429c957b
commit 79e1e8dd2f
3 changed files with 23 additions and 11 deletions

View File

@@ -1,6 +1,9 @@
import { useDocMetaHelper } from '@affine/core/hooks/use-block-suite-page-meta'; import { useDocMetaHelper } from '@affine/core/hooks/use-block-suite-page-meta';
import { useJournalHelper } from '@affine/core/hooks/use-journal'; import { useJournalHelper } from '@affine/core/hooks/use-journal';
import { PeekViewService } from '@affine/core/modules/peek-view'; import {
PeekViewService,
useInsidePeekView,
} from '@affine/core/modules/peek-view';
import { WorkbenchLink } from '@affine/core/modules/workbench'; import { WorkbenchLink } from '@affine/core/modules/workbench';
import { useAFFiNEI18N } from '@affine/i18n/hooks'; import { useAFFiNEI18N } from '@affine/i18n/hooks';
import { LinkedPageIcon, TodayIcon } from '@blocksuite/icons'; import { LinkedPageIcon, TodayIcon } from '@blocksuite/icons';
@@ -69,6 +72,7 @@ export function AffinePageReference({
const ref = useRef<HTMLAnchorElement>(null); const ref = useRef<HTMLAnchorElement>(null);
const peekView = useService(PeekViewService).peekView; const peekView = useService(PeekViewService).peekView;
const isInPeekView = useInsidePeekView();
const onClick = useCallback( const onClick = useCallback(
(e: React.MouseEvent) => { (e: React.MouseEvent) => {
@@ -76,11 +80,14 @@ export function AffinePageReference({
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
peekView.open(ref.current); peekView.open(ref.current);
return true; // means this click is handled return false; // means this click is handled
} }
return false; if (isInPeekView) {
peekView.close();
}
return;
}, },
[peekView] [isInPeekView, peekView]
); );
return ( return (

View File

@@ -287,7 +287,7 @@ function PageListItemWrapper({
const handleClick = useCallback( const handleClick = useCallback(
(e: React.MouseEvent) => { (e: React.MouseEvent) => {
if (!selectionState.selectable) { if (!selectionState.selectable) {
return false; return;
} }
stopPropagation(e); stopPropagation(e);
const currentIndex = pageIds.indexOf(pageId); const currentIndex = pageIds.indexOf(pageId);
@@ -297,15 +297,15 @@ function PageListItemWrapper({
setSelectionActive(true); setSelectionActive(true);
setAnchorIndex(currentIndex); setAnchorIndex(currentIndex);
onClick?.(); onClick?.();
return true; return false;
} }
handleShiftClick(currentIndex); handleShiftClick(currentIndex);
return true; return false;
} else { } else {
setAnchorIndex(undefined); setAnchorIndex(undefined);
setRangeIds([]); setRangeIds([]);
onClick?.(); onClick?.();
return false; return;
} }
}, },
[ [

View File

@@ -2,13 +2,18 @@ import { useAppSettingHelper } from '@affine/core/hooks/affine/use-app-setting-h
import { popupWindow } from '@affine/core/utils'; import { popupWindow } from '@affine/core/utils';
import { useLiveData, useService } from '@toeverything/infra'; import { useLiveData, useService } from '@toeverything/infra';
import type { To } from 'history'; import type { To } from 'history';
import { forwardRef, useCallback } from 'react'; import { forwardRef, type MouseEvent, useCallback } from 'react';
import { WorkbenchService } from '../services/workbench'; import { WorkbenchService } from '../services/workbench';
export const WorkbenchLink = forwardRef< export const WorkbenchLink = forwardRef<
HTMLAnchorElement, HTMLAnchorElement,
React.PropsWithChildren<{ to: To } & React.HTMLProps<HTMLAnchorElement>> React.PropsWithChildren<
{
to: To;
onClick?: (e: MouseEvent) => boolean | void; // return false to stop propagation
} & React.HTMLProps<HTMLAnchorElement>
>
>(function WorkbenchLink({ to, onClick, ...other }, ref) { >(function WorkbenchLink({ to, onClick, ...other }, ref) {
const workbench = useService(WorkbenchService).workbench; const workbench = useService(WorkbenchService).workbench;
const { appSettings } = useAppSettingHelper(); const { appSettings } = useAppSettingHelper();
@@ -20,7 +25,7 @@ export const WorkbenchLink = forwardRef<
(event: React.MouseEvent<HTMLAnchorElement>) => { (event: React.MouseEvent<HTMLAnchorElement>) => {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
if (onClick?.(event)) { if (onClick?.(event) === false) {
return; return;
} }