Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-17 06:16:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(core): support sidebar page item dnd (#5132)

Browse Source 
Added the ability to drag page items from the `all pages` view to the sidebar, including `favourites,` `collection` and `trash`. Page items in `favourites` and `collection` can also be dragged between each other. However, linked subpages cannot be dragged.

Additionally, an operation menu and ‘add’ button have been provided for the sidebar’s page items, enabling the addition of a subpage, renaming, deletion or removal from the sidebar.

On the code front, the `useSidebarDrag` hooks have been implemented for consolidating drag events. The functions `getDragItemId` and `getDropItemId` have been created, and they accept type and ID to obtain itemId.

https://github.com/toeverything/AFFiNE/assets/102217452/d06bac18-3c28-41c9-a7d4-72de955d7b11
This commit is contained in:
JimmFly
2023-12-12 16:04:57 +00:00
parent b782b3fb1b
commit f4a52c031f
34 changed files with 1191 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
packages/frontend/core/src/pages/workspace/trash-page.tsx
View File

@@ -1,5 +1,6 @@
import { toast } from '@affine/component';
import {
currentCollectionAtom,
TrashOperationCell,
VirtualizedPageList,
} from '@affine/component/page-list';
@@ -8,7 +9,10 @@ import { assertExists } from '@blocksuite/global/utils';
import { DeleteIcon } from '@blocksuite/icons';
import type { PageMeta } from '@blocksuite/store';
import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
import { getCurrentStore } from '@toeverything/infra/atom';
import { useCallback } from 'react';
import { type LoaderFunction } from 'react-router-dom';
import { NIL } from 'uuid';
import { usePageHelper } from '../../components/blocksuite/block-suite-page-list/utils';
import { Header } from '../../components/pure/header';
@@ -41,23 +45,34 @@ const TrashHeader = () => {
);
};
export const loader: LoaderFunction = async () => {
// to fix the bug that the trash page list is not updated when route from collection to trash
// but it's not a good solution, the page will jitter when collection and trash are switched between each other.
// TODO: fix this bug
const rootStore = getCurrentStore();
rootStore.set(currentCollectionAtom, NIL);
return null;
};
export const TrashPage = () => {
const [currentWorkspace] = useCurrentWorkspace();
// todo(himself65): refactor to plugin
const blockSuiteWorkspace = currentWorkspace.blockSuiteWorkspace;
assertExists(blockSuiteWorkspace);
const pageMetas = useBlockSuitePageMeta(currentWorkspace.blockSuiteWorkspace);
const pageMetas = useBlockSuitePageMeta(blockSuiteWorkspace);
const filteredPageMetas = useFilteredPageMetas(
'trash',
pageMetas,
currentWorkspace.blockSuiteWorkspace
blockSuiteWorkspace
);
const { restoreFromTrash, permanentlyDeletePage } =
useBlockSuiteMetaHelper(blockSuiteWorkspace);
const { isPreferredEdgeless } = usePageHelper(
currentWorkspace.blockSuiteWorkspace
);
const { isPreferredEdgeless } = usePageHelper(blockSuiteWorkspace);
const t = useAFFiNEI18N();
const pageOperationsRenderer = useCallback(
(page: PageMeta) => {
const onRestorePage = () => {
@@ -81,6 +96,7 @@ export const TrashPage = () => {
},
[permanentlyDeletePage, restoreFromTrash, t]
);
return (
<div className={styles.root}>
<TrashHeader />