mirror of
https://github.com/toeverything/AFFiNE.git
synced 2024-09-21 08:28:58 +03:00
fix: dnd workspace list will cause page to reload (#1848)
This commit is contained in:
parent
ea06df4386
commit
d4b2b9ab44
@ -29,6 +29,7 @@ import {
|
||||
} from './styles';
|
||||
|
||||
interface WorkspaceModalProps {
|
||||
disabled?: boolean;
|
||||
user: AccessTokenMessage | null;
|
||||
workspaces: AllWorkspace[];
|
||||
currentWorkspaceId: AllWorkspace['id'] | null;
|
||||
@ -43,6 +44,7 @@ interface WorkspaceModalProps {
|
||||
}
|
||||
|
||||
export const WorkspaceListModal = ({
|
||||
disabled,
|
||||
open,
|
||||
onClose,
|
||||
workspaces,
|
||||
@ -96,6 +98,7 @@ export const WorkspaceListModal = ({
|
||||
|
||||
<StyledModalContent>
|
||||
<WorkspaceList
|
||||
disabled={disabled}
|
||||
items={workspaces}
|
||||
currentWorkspaceId={currentWorkspaceId}
|
||||
onClick={onClickWorkspace}
|
||||
|
@ -4,7 +4,7 @@ import { useAtom, useAtomValue, useSetAtom } from 'jotai';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { useRouter } from 'next/router';
|
||||
import type React from 'react';
|
||||
import { useCallback } from 'react';
|
||||
import { useCallback, useTransition } from 'react';
|
||||
|
||||
import {
|
||||
currentWorkspaceIdAtom,
|
||||
@ -45,10 +45,12 @@ export function Modals() {
|
||||
const currentWorkspaceId = useAtomValue(currentWorkspaceIdAtom);
|
||||
const [, setCurrentWorkspace] = useCurrentWorkspace();
|
||||
const { createLocalWorkspace } = useWorkspacesHelper();
|
||||
const [transitioning, transition] = useTransition();
|
||||
|
||||
return (
|
||||
<>
|
||||
<WorkspaceListModal
|
||||
disabled={transitioning}
|
||||
user={user}
|
||||
workspaces={workspaces}
|
||||
currentWorkspaceId={currentWorkspaceId}
|
||||
@ -60,8 +62,10 @@ export function Modals() {
|
||||
(activeId, overId) => {
|
||||
const oldIndex = workspaces.findIndex(w => w.id === activeId);
|
||||
const newIndex = workspaces.findIndex(w => w.id === overId);
|
||||
transition(() =>
|
||||
setWorkspaces(workspaces =>
|
||||
arrayMove(workspaces, oldIndex, newIndex)
|
||||
)
|
||||
);
|
||||
},
|
||||
[setWorkspaces, workspaces]
|
||||
|
@ -12,6 +12,7 @@ import type { FC } from 'react';
|
||||
import { WorkspaceCard } from '../workspace-card';
|
||||
|
||||
export type WorkspaceListProps = {
|
||||
disabled?: boolean;
|
||||
currentWorkspaceId: string | null;
|
||||
items: (AffineWorkspace | LocalWorkspace)[];
|
||||
onClick: (workspace: AffineWorkspace | LocalWorkspace) => void;
|
||||
@ -27,11 +28,13 @@ const SortableWorkspaceItem: FC<
|
||||
const { setNodeRef, attributes, listeners, transform } = useSortable({
|
||||
id: props.item.id,
|
||||
});
|
||||
const style = transform
|
||||
? {
|
||||
transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
|
||||
}
|
||||
: undefined;
|
||||
const style: React.CSSProperties = {
|
||||
transform: transform
|
||||
? `translate3d(${transform.x}px, ${transform.y}px, 0)`
|
||||
: undefined,
|
||||
pointerEvents: props.disabled ? 'none' : undefined,
|
||||
opacity: props.disabled ? 0.6 : undefined,
|
||||
};
|
||||
return (
|
||||
<div
|
||||
data-testid="draggable-item"
|
||||
|
Loading…
Reference in New Issue
Block a user