toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2025-01-03 20:41:49 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat(core): add shortcut for multi select docs (#6318)

Browse Source 
close TOV-701
In All Doc, `Shift + Click` has been added to activate the multiple selection state.
This commit is contained in:
JimmFly 2024-03-29 01:40:23 +00:00
parent 0ce6401a6f
commit 1a873ecf3c
No known key found for this signature in database
GPG Key ID: 14A6F56854E1BED7
10 changed files with 63 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/frontend/core/src/components/page-list/collections/collection-list-item.css.ts
View File

@ -106,6 +106,7 @@ export const titleCell = style({
maxWidth: 'calc(100% - 64px)',
flex: 1,
whiteSpace: 'nowrap',
userSelect: 'none',
});
export const titleCellMain = style({
overflow: 'hidden',

21
packages/frontend/core/src/components/page-list/collections/collection-list-item.tsx
View File

@ -5,6 +5,7 @@ import type { PropsWithChildren } from 'react';
import { useCallback, useMemo } from 'react';
import { Link } from 'react-router-dom';
import { selectionStateAtom, useAtom } from '../scoped-atoms';
import type {
CollectionListItemProps,
DraggableTitleCellData,
@ -172,14 +173,28 @@ function CollectionListItemWrapper({
children,
draggable,
}: collectionListWrapperProps) {
const [selectionState, setSelectionActive] = useAtom(selectionStateAtom);
const handleClick = useCallback(
(e: React.MouseEvent) => {
if (onClick) {
if (!selectionState.selectable) {
return;
}
if (e.shiftKey) {
stopPropagation(e);
onClick();
setSelectionActive(true);
onClick?.();
return;
}
if (selectionState.selectionActive) {
return onClick?.();
}
},
[onClick]
[
onClick,
selectionState.selectable,
selectionState.selectionActive,
setSelectionActive,
]
);
const commonProps = useMemo(

1
packages/frontend/core/src/components/page-list/docs/page-list-item.css.ts
View File

@ -106,6 +106,7 @@ export const titleCell = style({
maxWidth: 'calc(100% - 64px)',
flex: 1,
whiteSpace: 'nowrap',
userSelect: 'none',
});
export const titleCellMain = style({
overflow: 'hidden',

19
packages/frontend/core/src/components/page-list/docs/page-list-item.tsx
View File

@ -6,6 +6,7 @@ import type { PropsWithChildren } from 'react';
import { useCallback, useMemo } from 'react';
import { WorkbenchLink } from '../../../modules/workbench/view/workbench-link';
import { selectionStateAtom, useAtom } from '../scoped-atoms';
import type { DraggableTitleCellData, PageListItemProps } from '../types';
import { usePageDisplayProperties } from '../use-page-display-properties';
import { ColWrapper, formatDate, stopPropagation } from '../utils';
@ -237,14 +238,22 @@ function PageListItemWrapper({
children,
draggable,
}: PageListWrapperProps) {
const [selectionState, setSelectionActive] = useAtom(selectionStateAtom);
const handleClick = useCallback(
(e: React.MouseEvent) => {
if (onClick) {
stopPropagation(e);
onClick();
if (!selectionState.selectable) {
return false;
}
stopPropagation(e);
if (e.shiftKey) {
setSelectionActive(true);
onClick?.();
return true;
}
onClick?.();
return false;
},
[onClick]
[onClick, selectionState.selectable, setSelectionActive]
);
const commonProps = useMemo(
@ -255,7 +264,7 @@ function PageListItemWrapper({
className: styles.root,
'data-clickable': !!onClick || !!to,
'data-dragging': isDragging,
onClick: handleClick,
onClick: onClick ? handleClick : undefined,
}),
[pageId, draggable, onClick, to, isDragging, handleClick]
);

1
packages/frontend/core/src/components/page-list/group-definitions.css.ts
View File

@ -25,6 +25,7 @@ export const pageCount = style({
fontSize: cssVar('fontBase'),
lineHeight: '1.6em',
color: cssVar('textSecondaryColor'),
marginRight: '12px',
});
export const favouritedIcon = style({

3
packages/frontend/core/src/components/page-list/list.tsx
View File

@ -67,6 +67,7 @@ const useItemSelectionStateEffect = () => {
return;
}
setSelectionActive(false);
selectionState.onSelectedIdsChange?.([]);
};
const escHandler = (e: KeyboardEvent) => {
@ -75,6 +76,7 @@ const useItemSelectionStateEffect = () => {
}
if (e.key === 'Escape') {
setSelectionActive(false);
selectionState.onSelectedIdsChange?.([]);
}
};
@ -88,6 +90,7 @@ const useItemSelectionStateEffect = () => {
}
return;
}, [
selectionState,
selectionState.selectable,
selectionState.selectionActive,
setSelectionActive,

6
packages/frontend/core/src/components/page-list/page-group.tsx
View File

@ -329,7 +329,7 @@ function pageMetaToListItemProp(
createDate: new Date(item.createDate),
updatedDate: item.updatedDate ? new Date(item.updatedDate) : undefined,
to: props.rowAsLink && !props.selectable ? `/${item.id}` : undefined,
onClick: props.selectable ? toggleSelection : undefined,
onClick: toggleSelection,
icon: (
<UnifiedPageIcon
id={item.id}
@ -378,7 +378,7 @@ function collectionMetaToListItemProp(
props.rowAsLink && !props.selectable
? `/collection/${item.id}`
: undefined,
onClick: props.selectable ? toggleSelection : undefined,
onClick: toggleSelection,
icon: <ViewLayersIcon />,
operations: props.operationsRenderer?.(item),
selectable: props.selectable,
@ -412,7 +412,7 @@ function tagMetaToListItemProp(
tagId: item.id,
title: item.title,
to: props.rowAsLink && !props.selectable ? `/tag/${item.id}` : undefined,
onClick: props.selectable ? toggleSelection : undefined,
onClick: toggleSelection,
color: item.color,
pageCount: item.pageCount,
operations: props.operationsRenderer?.(item),

1
packages/frontend/core/src/components/page-list/tags/tag-list-item.css.ts
View File

@ -105,6 +105,7 @@ export const titleCell = style({
maxWidth: 'calc(100% - 64px)',
flex: 1,
whiteSpace: 'nowrap',
userSelect: 'none',
});
export const titleCellMain = style({
overflow: 'hidden',

21
packages/frontend/core/src/components/page-list/tags/tag-list-item.tsx
View File

@ -5,6 +5,7 @@ import type { PropsWithChildren } from 'react';
import { useCallback, useMemo } from 'react';
import { Link } from 'react-router-dom';
import { selectionStateAtom, useAtom } from '../scoped-atoms';
import type { DraggableTitleCellData, TagListItemProps } from '../types';
import { ColWrapper, stopPropagation } from '../utils';
import * as styles from './tag-list-item.css';
@ -165,14 +166,28 @@ function TagListItemWrapper({
children,
draggable,
}: TagListWrapperProps) {
const [selectionState, setSelectionActive] = useAtom(selectionStateAtom);
const handleClick = useCallback(
(e: React.MouseEvent) => {
if (onClick) {
if (!selectionState.selectable) {
return;
}
if (e.shiftKey) {
stopPropagation(e);
onClick();
setSelectionActive(true);
onClick?.();
return;
}
if (selectionState.selectionActive) {
return onClick?.();
}
},
[onClick]
[
onClick,
selectionState.selectable,
selectionState.selectionActive,
setSelectionActive,
]
);
const commonProps = useMemo(

4
packages/frontend/core/src/modules/workbench/view/workbench-link.tsx
View File

@ -20,6 +20,9 @@ export const WorkbenchLink = ({
(event: React.MouseEvent<HTMLAnchorElement>) => {
event.preventDefault();
event.stopPropagation();
if (onClick?.(event)) {
return;
}
if (event.ctrlKey || event.metaKey) {
if (appSettings.enableMultiView && environment.isDesktop) {
@ -34,7 +37,6 @@ export const WorkbenchLink = ({
} else {
workbench.open(to);
}
onClick?.(event);
},
[appSettings.enableMultiView, basename, onClick, to, workbench]
);