toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-12-23 21:55:02 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #8 from toeverything/fix/kanban-reorder-card

Browse Source 
Fix(kanban): kanban reorder
This commit is contained in:
mitsuhatu 2022-08-01 17:09:35 +08:00 committed by GitHub
commit 090cba0671
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 43 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/helper.ts
View File

@ -6,6 +6,7 @@ import type { DndableItems } from './type';
import type {
KanbanCard,
KanbanGroup,
RecastItem,
} from '@toeverything/components/editor-core';
import { isEqual } from '@toeverything/utils';
@ -33,15 +34,44 @@ const findContainer = (id: string, items: DndableItems) => {
);
};
type FindMoveInfo = (params: {
id: string;
activeContainer: string;
overContainer: string;
kanban: KanbanGroup[];
}) => {
targetCard: RecastItem;
targetGroup: KanbanGroup | null;
};
const findMoveInfo: FindMoveInfo = ({
id,
activeContainer,
overContainer,
kanban,
}) => {
const activeGroup = kanban.find(group => group.id === activeContainer);
const overGroup = kanban.find(group => group.id === overContainer);
const activityCard = activeGroup.items.find(item => item.id === id);
return {
targetCard: activityCard.block,
targetGroup: overGroup,
};
};
/**
* Find the sibling node after the dragging of the moved node ends
* @param cards
* @param currentCardId
*/
const findSibling = (cards: KanbanCard[], currentCardId: string) => {
const findSibling = (
cards: KanbanCard[],
currentCardId: string
): [string, string, number] => {
const index = cards.findIndex(card => card.id === currentCardId);
return [cards[index - 1]?.id ?? null, cards[index + 1]?.id ?? null];
return [cards[index - 1]?.id ?? null, cards[index + 1]?.id ?? null, index];
};
/**
@ -84,4 +114,5 @@ export {
findSibling,
pickIdFromCards,
shouldUpdate,
findMoveInfo,
};

19
libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/wrapper/use-dndable.ts
View File

@ -11,6 +11,7 @@ import {
findSibling,
pickIdFromCards,
shouldUpdate,
findMoveInfo,
} from '../helper';
import type {
CollisionDetection,
@ -19,11 +20,13 @@ import type {
DragEndEvent,
} from '@dnd-kit/core';
import type { DndableItems, UseDndableRes } from '../type';
import { useKanban } from '@toeverything/components/editor-core';
export const useDndable = (
dndableItems: DndableItems,
dndableContainerIds: string[]
): UseDndableRes => {
const { kanban, moveCard } = useKanban();
const [items, setItems] = useState(dndableItems);
const [containerIds, setContainerIds] = useState(dndableContainerIds);
const [active, setActive] = useState(null);
@ -259,16 +262,14 @@ export const useDndable = (
).filter(Boolean),
};
const activeItems = items[activeContainer];
const activeItem = activeItems.find(
item => item.id === activeId
);
const [beforeId, afterId] = findSibling(
items[overContainer],
activeId
);
const { targetCard } = findMoveInfo({
id: activeId,
activeContainer,
overContainer,
kanban,
});
activeItem?.moveTo(overContainer, beforeId, afterId);
moveCard(targetCard, null, overIndex);
return data;
});