From 0c175ada313eb58b17a29774020638984cf71b90 Mon Sep 17 00:00:00 2001 From: pengx17 Date: Tue, 30 Apr 2024 14:57:38 +0000 Subject: [PATCH] fix: remove dnd for workspace list (#6754) fix TOV-399 --- .../src/components/workspace-list/index.tsx | 82 ++----------------- .../workspace-list/index.tsx | 27 ------ .../e2e/local-first-workspace-list.spec.ts | 2 +- 3 files changed, 8 insertions(+), 103 deletions(-) diff --git a/packages/frontend/component/src/components/workspace-list/index.tsx b/packages/frontend/component/src/components/workspace-list/index.tsx index 12dca6b368..e84c1cb8f2 100644 --- a/packages/frontend/component/src/components/workspace-list/index.tsx +++ b/packages/frontend/component/src/components/workspace-list/index.tsx @@ -1,13 +1,5 @@ -import type { DragEndEvent } from '@dnd-kit/core'; -import { DndContext, MouseSensor, useSensor, useSensors } from '@dnd-kit/core'; -import { - restrictToParentElement, - restrictToVerticalAxis, -} from '@dnd-kit/modifiers'; -import { arrayMove, SortableContext, useSortable } from '@dnd-kit/sortable'; import type { WorkspaceMetadata } from '@toeverything/infra'; -import type { CSSProperties } from 'react'; -import { Suspense, useCallback, useEffect, useMemo, useState } from 'react'; +import { Suspense } from 'react'; import { WorkspaceCard, @@ -23,7 +15,6 @@ export interface WorkspaceListProps { onClick: (workspace: WorkspaceMetadata) => void; onSettingClick: (workspace: WorkspaceMetadata) => void; onEnableCloudClick?: (meta: WorkspaceMetadata) => void; - onDragEnd: (event: DragEndEvent) => void; useIsWorkspaceOwner: ( workspaceMetadata: WorkspaceMetadata ) => boolean | undefined; @@ -40,7 +31,6 @@ interface SortableWorkspaceItemProps extends Omit { } const SortableWorkspaceItem = ({ - disabled, item, openingId, useIsWorkspaceOwner, @@ -51,33 +41,11 @@ const SortableWorkspaceItem = ({ onSettingClick, onEnableCloudClick, }: SortableWorkspaceItemProps) => { - const { setNodeRef, attributes, listeners, transform, transition } = - useSortable({ - id: item.id, - }); - const style: CSSProperties = useMemo( - () => ({ - transform: transform - ? `translate3d(${transform.x}px, ${transform.y}px, 0)` - : undefined, - transition, - pointerEvents: disabled ? 'none' : undefined, - opacity: disabled ? 0.6 : undefined, - }), - [disabled, transform, transition] - ); const isOwner = useIsWorkspaceOwner?.(item); const avatar = useWorkspaceAvatar?.(item); const name = useWorkspaceName?.(item); return ( -
+
{ - const sensors = useSensors( - useSensor(MouseSensor, { - activationConstraint: { - distance: 8, - }, - }) - ); const workspaceList = props.items; - const [optimisticList, setOptimisticList] = useState(workspaceList); - useEffect(() => { - setOptimisticList(workspaceList); - }, [workspaceList]); - - const onDragEnd = useCallback( - (event: DragEndEvent) => { - const { active, over } = event; - if (active.id !== over?.id) { - setOptimisticList(workspaceList => { - const oldIndex = workspaceList.findIndex(w => w.id === active.id); - const newIndex = workspaceList.findIndex(w => w.id === over?.id); - const newList = arrayMove(workspaceList, oldIndex, newIndex); - return newList; - }); - props.onDragEnd(event); - } - }, - [props] - ); - - return ( - - - {optimisticList.map(item => ( - } key={item.id}> - - - ))} - - - ); + return workspaceList.map(item => ( + } key={item.id}> + + + )); }; diff --git a/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/workspace-list/index.tsx b/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/workspace-list/index.tsx index 871b3965ff..58cfb286db 100644 --- a/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/workspace-list/index.tsx +++ b/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/workspace-list/index.tsx @@ -11,7 +11,6 @@ import { AuthService } from '@affine/core/modules/cloud'; import { WorkspaceFlavour } from '@affine/env/workspace'; import { useAFFiNEI18N } from '@affine/i18n/hooks'; import { CloudWorkspaceIcon, LocalWorkspaceIcon } from '@blocksuite/icons'; -import type { DragEndEvent } from '@dnd-kit/core'; import type { WorkspaceMetadata } from '@toeverything/infra'; import { GlobalContextService, @@ -46,7 +45,6 @@ interface WorkspaceModalProps { onClickEnableCloud?: (meta: WorkspaceMetadata) => void; onNewWorkspace: () => void; onAddWorkspace: () => void; - onDragEnd: (event: DragEndEvent) => void; } const CloudWorkSpaceList = ({ @@ -55,7 +53,6 @@ const CloudWorkSpaceList = ({ onClickWorkspace, onClickWorkspaceSetting, currentWorkspaceId, - onDragEnd, }: WorkspaceModalProps) => { const t = useAFFiNEI18N(); if (workspaces.length === 0) { @@ -77,7 +74,6 @@ const CloudWorkSpaceList = ({ currentWorkspaceId={currentWorkspaceId} onClick={onClickWorkspace} onSettingClick={onClickWorkspaceSetting} - onDragEnd={onDragEnd} useIsWorkspaceOwner={useIsWorkspaceOwner} useWorkspaceName={useWorkspaceName} useWorkspaceAvatar={useWorkspaceAvatar} @@ -94,7 +90,6 @@ const LocalWorkspaces = ({ onClickEnableCloud, openingId, currentWorkspaceId, - onDragEnd, }: WorkspaceModalProps) => { const t = useAFFiNEI18N(); if (workspaces.length === 0) { @@ -118,7 +113,6 @@ const LocalWorkspaces = ({ onClick={onClickWorkspace} onSettingClick={onClickWorkspaceSetting} onEnableCloudClick={onClickEnableCloud} - onDragEnd={onDragEnd} useIsWorkspaceOwner={useIsWorkspaceOwner} useWorkspaceName={useWorkspaceName} useWorkspaceAvatar={useWorkspaceAvatar} @@ -190,15 +184,6 @@ export const AFFiNEWorkspaceList = ({ [confirmEnableCloud, workspacesService] ); - const onMoveWorkspace = useCallback((_activeId: string, _overId: string) => { - // TODO: order - // const oldIndex = workspaces.findIndex(w => w.id === activeId); - // const newIndex = workspaces.findIndex(w => w.id === overId); - // startTransition(() => { - // setWorkspaces(workspaces => arrayMove(workspaces, oldIndex, newIndex)); - // }); - }, []); - const onClickWorkspace = useCallback( (workspaceMetadata: WorkspaceMetadata) => { jumpToSubPath(workspaceMetadata.id, WorkspaceSubPath.ALL); @@ -207,16 +192,6 @@ export const AFFiNEWorkspaceList = ({ [jumpToSubPath, onEventEnd] ); - const onDragEnd = useCallback( - (event: DragEndEvent) => { - const { active, over } = event; - if (active.id !== over?.id) { - onMoveWorkspace(active.id as string, over?.id as string); - } - }, - [onMoveWorkspace] - ); - const onNewWorkspace = useCallback(() => { setOpenCreateWorkspaceModal('new'); onEventEnd?.(); @@ -241,7 +216,6 @@ export const AFFiNEWorkspaceList = ({ onNewWorkspace={onNewWorkspace} onAddWorkspace={onAddWorkspace} currentWorkspaceId={currentWorkspaceId} - onDragEnd={onDragEnd} /> {localWorkspaces.length > 0 && cloudWorkspaces.length > 0 ? ( @@ -256,7 +230,6 @@ export const AFFiNEWorkspaceList = ({ onNewWorkspace={onNewWorkspace} onAddWorkspace={onAddWorkspace} currentWorkspaceId={currentWorkspaceId} - onDragEnd={onDragEnd} /> ); diff --git a/tests/affine-local/e2e/local-first-workspace-list.spec.ts b/tests/affine-local/e2e/local-first-workspace-list.spec.ts index 57653d9af0..6366379738 100644 --- a/tests/affine-local/e2e/local-first-workspace-list.spec.ts +++ b/tests/affine-local/e2e/local-first-workspace-list.spec.ts @@ -60,7 +60,7 @@ test('create one workspace in the workspace list', async ({ expect(currentWorkspace.meta.flavour).toContain('local'); }); -test('create multi workspace in the workspace list', async ({ +test.skip('create multi workspace in the workspace list', async ({ page, workspace, }) => {