Swapy slotItemMap, slots changing during onSwap Event and slotItemMap not appropriately updating when new Items are added dynamically
I am currently facing problem with Swapy when swapping items. Currently I have allItems which is updated with routeMap and items which is actually used for slottedItems. Whenever my allItems change (dynamic), I use setItems to update items and instead of using utils.dynamicSwapy, I am executing the dynamicSwapy myself. However with my current code, when I log event.newSlotItemMap.asArray, there is issue with how item is swapped.
For example, given that I have
[
{ slot: '1', item: '1'},
{ slot: '2', item: '2'},
{ slot: '3', item: '3'},
{ slot: '4', item: '4'},
]
when I first swap 1 and 2 by dragging 1, i get
[
{ slot: '1', item: '2'},
{ slot: '2', item: '1'},
{ slot: '3', item: '3'},
{ slot: '4', item: '4'},
],
then if I drag item 1 one more time and swap with item 3, I get,
[
{ slot: '2', item: '2'},
{ slot: '1', item: '3'},
{ slot: '3', item: '1'},
{ slot: '4', item: '4'},
]
then when I drag item 1 and swap with item 4, I get,
[
{ slot: '3', item: '3'},
{ slot: '2', item: '2'},
{ slot: '1', item: '4'},
{ slot: '4', item: '1'},
]
so as you can see below, I am setting slotItemMap myself.
Another problem is when new items are added and I try swapping, my slotItemMap suddenly loses the newly added Item.
For example, if I have
[
{ slot: '1', item: '1'},
{ slot: '2', item: '2'},
{ slot: '3', item: '3'},
{ slot: '4', item: '4'},
]
and I add 2 new items, after adding and updating swapy my slotItemMap is
[
{ slot: '1', item: '1'},
{ slot: '2', item: '2'},
{ slot: '3', item: '3'},
{ slot: '4', item: '4'},
{ slot: '5', item: '5'},
{ slot: '6', item: '6'},
]
then if I grab item 5 and swap with item 4 I am left with
[
{ slot: '1', item: '1'},
{ slot: '2', item: '2'},
{ slot: '3', item: '3'},
{ slot: '4', item: '5'},
]
and the two items disappear
what might be the issue here?
```
const slots = utils
.initSlotItemMap(allItems, 'stringId')
.map((mapItem) => mapItem.slot);
const newItems = Array.from(event.newSlotItemMap.asMap.values());
const newSlotItemMap = slots.map((slot, index) => ({
slot,
item: newItems[index],
}));
setSlotItemMap(newSlotItemMap);
```
```
useEffect(() => {
setItems(allItems);
const currentOdsIdList = routeMap.get(route.journeyIndex)?.odsIdList ?? [];
const slots = utils
.initSlotItemMap(
addStringIdsMap(
route.taskList
.concat(undispatched)
.filter((item) => currentOdsIdList.includes(item.odsId)),
),
'stringId',
)
.map((data) => data.slot);
const items = utils
.initSlotItemMap(allItems, 'stringId')
.map((data) => data.item);
const newSlotMap = slots.map((slot, index) => {
return {
slot,
item: items[index],
};
});
setSlotItemMap(newSlotMap);
if (allItems.length !== slotItemMap.length) {
requestAnimationFrame(() => swapyRef.current?.update());
}
}, [allItems, routeMap]);
```
0 条评论