SortableList - Pass from and to indexes of changed item (#3153)

* on change sents from and to index of the change item

* updated api

* updated tests

* changed type of swap object

* changed from to to info object

* changed api description

Author: nitzanyiz

src/components/sortableList/SortableList.api.json

@@ -16,8 +16,8 @@
     },
     {
       "name": "onOrderChange",
-      "type": "(data: ItemT[]) => void",
-      "description": "A callback to get the new order (or swapped items).",
+      "type": "(data: ItemT[], info: OrderChangeInfo) => void",
+      "description": "A callback to get the new order (or swapped items) and info about the change (from and to indices).",
       "required": true
     },
     {

src/components/sortableList/SortableListItem.tsx

@@ -54,6 +54,7 @@ const SortableListItem = (props: Props) => {
   const id: string = data[index].id;
   const locked: boolean = data[index].locked;
   const initialIndex = useSharedValue<number>(map(data, 'id').indexOf(id));
+  const lastSwap = useSharedValue({from: -1, to: -1});
   const currIndex = useSharedValue(initialIndex.value);
   const translation = useSharedValue<number>(0);
 
@@ -102,6 +103,7 @@ const SortableListItem = (props: Props) => {
     .onStart(() => {
       isDragging.value = true;
       translation.value = getTranslationByIndexChange(currIndex.value, initialIndex.value, itemSize.value);
+      lastSwap.value = {...lastSwap.value, from: currIndex.value};
       tempTranslation.value = translation.value;
       tempItemsOrder.value = itemsOrder.value;
     })
@@ -140,6 +142,7 @@ const SortableListItem = (props: Props) => {
           newItemsOrder[newIndex] = id;
           newItemsOrder[oldIndex] = itemIdToSwap;
           itemsOrder.value = newItemsOrder;
+          lastSwap.value = {...lastSwap.value, to: newIndex};
         }
       }
     })
@@ -150,7 +153,7 @@ const SortableListItem = (props: Props) => {
 
       translation.value = withTiming(tempTranslation.value + _translation, animationConfig, () => {
         if (tempItemsOrder.value.toString() !== itemsOrder.value.toString()) {
-          runOnJS(onChange)();
+          runOnJS(onChange)({...lastSwap.value});
         }
       });
     })

src/components/sortableList/__tests__/index.spec.tsx

@@ -53,7 +53,7 @@ describe('SortableList', () => {
       {id: '1', text: '1'},
       {id: '3', text: '3'},
       {id: '4', text: '4'}
-    ]);
+    ], {from: 1, to: 2});
   });
 
   it('SortableList onOrderChange is called - up', async () => {
@@ -72,6 +72,6 @@ describe('SortableList', () => {
       {id: '1', text: '1'},
       {id: '2', text: '2'},
       {id: '3', text: '3'}
-    ]);
+    ], {from: 4, to: 1});
   });
 });

src/components/sortableList/index.tsx

@@ -8,7 +8,7 @@ import {LogService} from 'services';
 import SortableListContext from './SortableListContext';
 import SortableListItem, {DEFAULT_LIST_ITEM_SIZE} from './SortableListItem';
 import {useDidUpdate, useThemeProps} from 'hooks';
-import {SortableListProps, SortableListItemProps} from './types';
+import type {SortableListProps, SortableListItemProps, OrderChangeInfo} from './types';
 import type {Dictionary} from '../../typings/common';
 
 export {SortableListProps, SortableListItemProps};
@@ -46,7 +46,7 @@ const SortableList = <ItemT extends SortableListItemProps>(props: SortableListPr
     itemsOrder.value = generateItemsOrder(data);
   }, [data]);
 
-  const onChange = useCallback(() => {
+  const onChange = useCallback((info: OrderChangeInfo) => {
     const newData: ItemT[] = [];
     const dataByIds = mapKeys(data, 'id');
     if (data?.length) {
@@ -55,7 +55,7 @@ const SortableList = <ItemT extends SortableListItemProps>(props: SortableListPr
       });
     }
 
-    onOrderChange?.(newData);
+    onOrderChange?.(newData, info);
   }, [onOrderChange, data]);
 
   const onItemLayout = useCallback((event: LayoutChangeEvent) => {

src/components/sortableList/types.ts

@@ -9,6 +9,7 @@ export interface SortableListItemProps {
 
 // Internal
 export type Data<ItemT extends SortableListItemProps> = FlatListProps<ItemT>['data'];
+export type OrderChangeInfo = {from: number, to: number};
 
 export interface SortableListProps<ItemT extends SortableListItemProps>
   extends Omit<FlatListProps<ItemT>, 'extraData' | 'data'>,
@@ -21,7 +22,7 @@ export interface SortableListProps<ItemT extends SortableListItemProps>
   /**
    * A callback to get the new order (or swapped items).
    */
-  onOrderChange: (data: ItemT[] /* TODO: add more data? */) => void;
+  onOrderChange: (data: ItemT[], info: OrderChangeInfo /* TODO: add more data? */) => void;
   /**
    * Whether to enable the haptic feedback
    * (please note that react-native-haptic-feedback does not support the specific haptic type on Android starting on an unknown version, you can use 1.8.2 for it to work properly)