toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-12-24 19:02:28 +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 { import type {
KanbanCard, KanbanCard,
KanbanGroup, KanbanGroup,
RecastItem,
} from '@toeverything/components/editor-core'; } from '@toeverything/components/editor-core';
import { isEqual } from '@toeverything/utils'; 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 * Find the sibling node after the dragging of the moved node ends
* @param cards * @param cards
* @param currentCardId * @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); 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, findSibling,
pickIdFromCards, pickIdFromCards,
shouldUpdate, 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, findSibling,
pickIdFromCards, pickIdFromCards,
shouldUpdate, shouldUpdate,
findMoveInfo,
} from '../helper'; } from '../helper';
import type { import type {
CollisionDetection, CollisionDetection,
@ -19,11 +20,13 @@ import type {
DragEndEvent, DragEndEvent,
} from '@dnd-kit/core'; } from '@dnd-kit/core';
import type { DndableItems, UseDndableRes } from '../type'; import type { DndableItems, UseDndableRes } from '../type';
import { useKanban } from '@toeverything/components/editor-core';
export const useDndable = ( export const useDndable = (
dndableItems: DndableItems, dndableItems: DndableItems,
dndableContainerIds: string[] dndableContainerIds: string[]
): UseDndableRes => { ): UseDndableRes => {
const { kanban, moveCard } = useKanban();
const [items, setItems] = useState(dndableItems); const [items, setItems] = useState(dndableItems);
const [containerIds, setContainerIds] = useState(dndableContainerIds); const [containerIds, setContainerIds] = useState(dndableContainerIds);
const [active, setActive] = useState(null); const [active, setActive] = useState(null);
@ -259,16 +262,14 @@ export const useDndable = (
).filter(Boolean), ).filter(Boolean),
}; };
const activeItems = items[activeContainer]; const { targetCard } = findMoveInfo({
const activeItem = activeItems.find( id: activeId,
item => item.id === activeId activeContainer,
); overContainer,
const [beforeId, afterId] = findSibling( kanban,
items[overContainer], });
activeId
);
activeItem?.moveTo(overContainer, beforeId, afterId); moveCard(targetCard, null, overIndex);
return data; return data;
}); });