mirror of
https://github.com/toeverything/AFFiNE.git
synced 2024-09-19 23:47:57 +03:00
fix: better transition (#4267)
This commit is contained in:
parent
2813ad36b8
commit
0c4277e5b9
@ -13,6 +13,7 @@ import { useAtom, useAtomValue, useSetAtom } from 'jotai';
|
||||
import type { ReactElement } from 'react';
|
||||
import {
|
||||
lazy,
|
||||
startTransition,
|
||||
Suspense,
|
||||
useCallback,
|
||||
useEffect,
|
||||
@ -223,13 +224,14 @@ export const AllWorkspaceModals = (): ReactElement => {
|
||||
);
|
||||
|
||||
const { jumpToSubPath } = useNavigateHelper();
|
||||
const workspaces = useAtomValue(rootWorkspacesMetadataAtom);
|
||||
const workspaces = useAtomValue(rootWorkspacesMetadataAtom, {
|
||||
delay: 0,
|
||||
});
|
||||
const setWorkspaces = useSetAtom(rootWorkspacesMetadataAtom);
|
||||
const [currentWorkspaceId, setCurrentWorkspaceId] = useAtom(
|
||||
currentWorkspaceIdAtom
|
||||
);
|
||||
const setCurrentPageId = useSetAtom(currentPageIdAtom);
|
||||
const [isPending, startTransition] = useTransition();
|
||||
const [, startCloseTransition] = useTransition();
|
||||
const [, setOpenSettingModalAtom] = useAtom(openSettingModalAtom);
|
||||
|
||||
@ -250,7 +252,6 @@ export const AllWorkspaceModals = (): ReactElement => {
|
||||
<>
|
||||
<Suspense>
|
||||
<WorkspaceListModal
|
||||
disabled={isPending}
|
||||
workspaces={workspaces}
|
||||
currentWorkspaceId={currentWorkspaceId}
|
||||
open={
|
||||
|
@ -14,9 +14,9 @@ import {
|
||||
restrictToParentElement,
|
||||
restrictToVerticalAxis,
|
||||
} from '@dnd-kit/modifiers';
|
||||
import { SortableContext, useSortable } from '@dnd-kit/sortable';
|
||||
import { arrayMove, SortableContext, useSortable } from '@dnd-kit/sortable';
|
||||
import type { CSSProperties } from 'react';
|
||||
import { useMemo } from 'react';
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
|
||||
import { WorkspaceCard } from '../../components/card/workspace-card';
|
||||
import { workspaceItemStyle } from './index.css';
|
||||
@ -35,18 +35,20 @@ interface SortableWorkspaceItemProps extends Omit<WorkspaceListProps, 'items'> {
|
||||
}
|
||||
|
||||
const SortableWorkspaceItem = (props: SortableWorkspaceItemProps) => {
|
||||
const { setNodeRef, attributes, listeners, transform } = useSortable({
|
||||
id: props.item.id,
|
||||
});
|
||||
const { setNodeRef, attributes, listeners, transform, transition } =
|
||||
useSortable({
|
||||
id: props.item.id,
|
||||
});
|
||||
const style: CSSProperties = useMemo(
|
||||
() => ({
|
||||
transform: transform
|
||||
? `translate3d(${transform.x}px, ${transform.y}px, 0)`
|
||||
: undefined,
|
||||
transition,
|
||||
pointerEvents: props.disabled ? 'none' : undefined,
|
||||
opacity: props.disabled ? 0.6 : undefined,
|
||||
}),
|
||||
[props.disabled, transform]
|
||||
[props.disabled, transform, transition]
|
||||
);
|
||||
return (
|
||||
<div
|
||||
@ -77,14 +79,33 @@ export const WorkspaceList = (props: WorkspaceListProps) => {
|
||||
},
|
||||
})
|
||||
);
|
||||
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 (
|
||||
<DndContext
|
||||
sensors={sensors}
|
||||
onDragEnd={props.onDragEnd}
|
||||
modifiers={modifiers}
|
||||
>
|
||||
<SortableContext items={props.items}>
|
||||
{props.items.map(item => (
|
||||
<DndContext sensors={sensors} onDragEnd={onDragEnd} modifiers={modifiers}>
|
||||
<SortableContext items={optimisticList}>
|
||||
{optimisticList.map(item => (
|
||||
<SortableWorkspaceItem {...props} item={item} key={item.id} />
|
||||
))}
|
||||
</SortableContext>
|
||||
|
Loading…
Reference in New Issue
Block a user