SortableList - support dynamic data (#2057)

* SortableList - support items change

* disableHaptic to enableHaptic

* ItemId to ItemWithId

* Add note about Android's haptic feedback

* Send data via context

Author: M-i-k-e-l

demo/src/screens/componentScreens/SortableListScreen.tsx

@@ -1,37 +1,69 @@
 import _ from 'lodash';
-import React, {useCallback} from 'react';
+import React, {useCallback, useState, useRef} from 'react';
 import {StyleSheet} from 'react-native';
-import {SortableList, View, TouchableOpacity, Text, Icon, Assets, Colors} from 'react-native-ui-lib';
+import {SortableList, View, TouchableOpacity, Text, Icon, Assets, Colors, Button} from 'react-native-ui-lib';
 import {renderHeader} from '../ExampleScreenPresenter';
 
 interface Item {
   originalIndex: number;
+  id: string;
 }
 
 const data = _.times(30, index => {
   return {
-    originalIndex: index
+    originalIndex: index,
+    id: `${index}`
   };
 });
 
 const SortableListScreen = () => {
+  const [items, setItems] = useState<Item[]>(data);
+  const [selectedItems, setSelectedItems] = useState<Item[]>([]);
+  const [removedItems, setRemovedItems] = useState<Item[]>([]);
+  const orderedItems = useRef<Item[]>(data);
+
+  const toggleItemSelection = useCallback((item: Item) => {
+    if (selectedItems.includes(item)) {
+      setSelectedItems(selectedItems.filter(selectedItem => ![item.id].includes(selectedItem.id)));
+    } else {
+      setSelectedItems(selectedItems.concat(item));
+    }
+  }, [selectedItems, setSelectedItems]);
+
+  const addItem = useCallback(() => {
+    if (removedItems.length > 0) {
+      orderedItems.current = orderedItems.current.concat(removedItems[0]);
+      setItems(orderedItems.current);
+      setRemovedItems(removedItems.slice(1));
+    }
+  }, [removedItems, setItems, setRemovedItems]);
+
+  const removeSelectedItems = useCallback(() => {
+    setRemovedItems(removedItems.concat(selectedItems));
+    setSelectedItems([]);
+    orderedItems.current = orderedItems.current.filter(item => !selectedItems.includes(item));
+    setItems(orderedItems.current);
+  }, [setRemovedItems, removedItems, selectedItems, setItems, setSelectedItems]);
+
   const keyExtractor = useCallback((item: Item) => {
-    return `${item.originalIndex}`;
+    return `${item.id}`;
   }, []);
 
   const onOrderChange = useCallback((newData: Item[]) => {
     console.log('New order:', newData);
+    orderedItems.current = newData;
   }, []);
 
   const renderItem = useCallback(({item, index: _index}: {item: Item; index: number}) => {
+    const isSelected = selectedItems.includes(item);
     return (
       <TouchableOpacity
-        style={styles.itemContainer}
-        onPress={() => console.log('Original index is', item.originalIndex)}
+        style={[styles.itemContainer, isSelected && styles.selectedItemContainer]}
+        onPress={() => toggleItemSelection(item)}
         // overriding the BG color to anything other than white will cause Android's elevation to fail
         // backgroundColor={Colors.red30}
         centerV
-        marginH-page
+        paddingH-page
       >
         <View flex row spread centerV>
           <Icon source={Assets.icons.demo.drag} tintColor={Colors.$iconDisabled}/>
@@ -42,13 +74,17 @@ const SortableListScreen = () => {
         </View>
       </TouchableOpacity>
     );
-  }, []);
+  }, [selectedItems, toggleItemSelection]);
 
   return (
     <View flex bg-$backgroundDefault>
       {renderHeader('Sortable List', {'margin-10': true})}
+      <View row center marginB-s2>
+        <Button label="Add Item" size={Button.sizes.xSmall} disabled={removedItems.length === 0} onPress={addItem}/>
+        <Button label="Remove Items" size={Button.sizes.xSmall} disabled={selectedItems.length === 0} marginL-s3 onPress={removeSelectedItems}/>
+      </View>
       <View flex useSafeArea>
-        <SortableList data={data} renderItem={renderItem} keyExtractor={keyExtractor} onOrderChange={onOrderChange}/>
+        <SortableList data={items} renderItem={renderItem} keyExtractor={keyExtractor} onOrderChange={onOrderChange}/>
       </View>
     </View>
   );
@@ -60,5 +96,9 @@ const styles = StyleSheet.create({
     height: 52,
     borderColor: Colors.$outlineDefault,
     borderBottomWidth: 1
+  },
+  selectedItemContainer: {
+    borderLeftColor: Colors.$outlinePrimary,
+    borderLeftWidth: 5
   }
 });

src/components/sortableList/SortableList.api.json

@@ -8,8 +8,8 @@
   "props": [
     {
       "name": "data",
-      "type": "ItemT[]",
-      "description": "The initial data of the list, do not update the data.",
+      "type": "ItemT[] (ItemT extends {id: string})",
+      "description": "The data of the list, with an id prop as unique identifier.",
       "required": true
     },
     {
@@ -19,9 +19,9 @@
       "required": true
     },
     {
-      "name": "disableHaptic",
+      "name": "enableHaptic",
       "type": "boolean",
-      "description": "Whether to disable the haptic feedback."
+      "description": "Whether to enable the haptic feedback.\n(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)"
     }
   ],
   "snippet": [

src/components/sortableList/SortableListContext.ts

@@ -3,11 +3,12 @@ import {ViewProps} from 'react-native';
 import {SharedValue} from 'react-native-reanimated';
 
 interface SortableListContextType {
-  itemsOrder: SharedValue<number[]>;
+  data: any
+  itemsOrder: SharedValue<string[]>;
   onChange: () => void;
   itemHeight: SharedValue<number>;
   onItemLayout: ViewProps['onLayout'];
-  disableHaptic?: boolean;
+  enableHaptic?: boolean;
 }
 
 // @ts-ignore

src/components/sortableList/SortableListItem.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
+import {map} from 'lodash';
 import React, {PropsWithChildren, useCallback, useContext} from 'react';
 import {
   useSharedValue,
@@ -12,16 +13,13 @@ import {
 import {GestureDetector, GestureUpdateEvent, PanGestureHandlerEventPayload} from 'react-native-gesture-handler';
 import View from '../view';
 import {Shadows, Colors} from '../../style';
+import {useDidUpdate} from 'hooks';
 import SortableListContext from './SortableListContext';
 import usePresenter from './usePresenter';
 import useDragAfterLongPressGesture from './useDragAfterLongPressGesture';
 
 export interface SortableListItemProps {
   index: number;
-  /**
-   * Whether to disable the haptic feedback
-   */
-  disableHaptic?: boolean;
 }
 
 type Props = PropsWithChildren<SortableListItemProps>;
@@ -32,21 +30,49 @@ const animationConfig = {
 };
 
 const SortableListItem = (props: Props) => {
-  const {children, index, disableHaptic} = props;
+  const {children, index} = props;
 
-  const {itemHeight, onItemLayout, itemsOrder, onChange} = useContext(SortableListContext);
+  const {data, itemHeight, onItemLayout, itemsOrder, onChange, enableHaptic} =
+    useContext(SortableListContext);
   const {getTranslationByIndexChange, getItemIndexById, getIndexByPosition, getIdByItemIndex} = usePresenter();
-  const translateY = useSharedValue(0);
-  const tempTranslateY = useSharedValue(0);
-  const tempItemsOrder = useSharedValue(itemsOrder.value);
-
-  useAnimatedReaction(() => itemsOrder.value.indexOf(index),
-    (newIndex, oldIndex) => {
-      if (oldIndex !== null && oldIndex !== undefined && newIndex !== undefined && newIndex !== oldIndex) {
-        const translation = getTranslationByIndexChange(newIndex, oldIndex, itemHeight.value);
-        translateY.value = withTiming(translateY.value + translation, animationConfig);
-      } else if (newIndex === index) {
-        translateY.value = withTiming(0, animationConfig);
+  const id: string = data[index].id;
+  const initialIndex = useSharedValue<number>(map(data, 'id').indexOf(id));
+  const translateY = useSharedValue<number>(0);
+  const tempTranslateY = useSharedValue<number>(0);
+  const tempItemsOrder = useSharedValue<string[]>(itemsOrder.value);
+  const dataManuallyChanged = useSharedValue<boolean>(false);
+
+  useDidUpdate(() => {
+    dataManuallyChanged.value = true;
+    initialIndex.value = map(data, 'id').indexOf(id);
+  }, [data]);
+
+  useAnimatedReaction(() => itemsOrder.value,
+    (currItemsOrder, prevItemsOrder) => {
+      // Note: Unfortunately itemsOrder sharedValue is being initialized on each render
+      // Therefore I added this extra check here that compares current and previous values
+      // See open issue: https://github.com/software-mansion/react-native-reanimated/issues/3224
+      if (prevItemsOrder === null || currItemsOrder.join(',') === prevItemsOrder.join(',')) {
+        return;
+      } else {
+        const newIndex = getItemIndexById(currItemsOrder, id);
+        const oldIndex = getItemIndexById(prevItemsOrder, id);
+
+        /* In case the order of the item has returned back to its initial index we reset its position */
+        if (newIndex === initialIndex.value) {
+          /* Reset without an animation when the change is due to manual data change */
+          if (dataManuallyChanged.value) {
+            translateY.value = 0;
+            dataManuallyChanged.value = false;
+            /* Reset with an animation when the change id due to user reordering */
+          } else {
+            translateY.value = withTiming(0, animationConfig);
+          }
+          /* Handle an order change, animate item to its new position  */
+        } else if (newIndex !== oldIndex) {
+          const translation = getTranslationByIndexChange(newIndex, oldIndex, itemHeight.value);
+          translateY.value = withTiming(translateY.value + translation, animationConfig);
+        }
       }
     });
 
@@ -61,39 +87,39 @@ const SortableListItem = (props: Props) => {
     translateY.value = tempTranslateY.value + event.translationY;
 
     // Swapping items
-    const oldOrder = getItemIndexById(itemsOrder.value, index);
-    const newOrder = getIndexByPosition(translateY.value, itemHeight.value) + index;
+    const newIndex = getIndexByPosition(translateY.value, itemHeight.value) + initialIndex.value;
+    const oldIndex = getItemIndexById(itemsOrder.value, id);
 
-    if (oldOrder !== newOrder) {
-      const itemIdToSwap = getIdByItemIndex(itemsOrder.value, newOrder);
+    if (newIndex !== oldIndex) {
+      const itemIdToSwap = getIdByItemIndex(itemsOrder.value, newIndex);
 
       if (itemIdToSwap !== undefined) {
         const newItemsOrder = [...itemsOrder.value];
-        newItemsOrder[newOrder] = index;
-        newItemsOrder[oldOrder] = itemIdToSwap;
+        newItemsOrder[newIndex] = id;
+        newItemsOrder[oldIndex] = itemIdToSwap;
         itemsOrder.value = newItemsOrder;
       }
     }
   }, []);
 
   const onDragEnd = useCallback(() => {
     'worklet';
-    const translation = getTranslationByIndexChange(getItemIndexById(itemsOrder.value, index),
-      getItemIndexById(tempItemsOrder.value, index),
+    const translation = getTranslationByIndexChange(getItemIndexById(itemsOrder.value, id),
+      getItemIndexById(tempItemsOrder.value, id),
       itemHeight.value);
 
-    translateY.value = withTiming(tempTranslateY.value + translation, animationConfig);
-
-    if (tempItemsOrder.value.toString() !== itemsOrder.value.toString()) {
-      runOnJS(onChange)();
-    }
+    translateY.value = withTiming(tempTranslateY.value + translation, animationConfig, () => {
+      if (tempItemsOrder.value.toString() !== itemsOrder.value.toString()) {
+        runOnJS(onChange)();
+      }
+    });
   }, []);
 
   const {dragAfterLongPressGesture, isFloating} = useDragAfterLongPressGesture({
     onDragStart,
     onDragUpdate,
     onDragEnd,
-    hapticComponentName: disableHaptic ? null : 'SortableList'
+    hapticComponentName: enableHaptic ? 'SortableList' : null
   });
 
   const draggedAnimatedStyle = useAnimatedStyle(() => {
@@ -129,4 +155,4 @@ const SortableListItem = (props: Props) => {
   );
 };
 
-export default SortableListItem;
+export default React.memo(SortableListItem);

src/components/sortableList/index.tsx

@@ -1,15 +1,18 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import {map} from 'lodash';
+import {map, mapKeys} from 'lodash';
 import React, {useMemo, useCallback} from 'react';
 import {FlatList, FlatListProps, LayoutChangeEvent} from 'react-native';
 import {useSharedValue} from 'react-native-reanimated';
 import {GestureHandlerRootView} from 'react-native-gesture-handler';
 import SortableListContext from './SortableListContext';
-import SortableListItem, {SortableListItemProps} from './SortableListItem';
+import SortableListItem from './SortableListItem';
+import {useDidUpdate} from 'hooks';
 
-export interface SortableListProps<ItemT>
-  extends Omit<FlatListProps<ItemT>, 'extraData' | 'data'>,
-    Pick<SortableListItemProps, 'disableHaptic'> {
+interface ItemWithId {
+  id: string;
+}
+
+export interface SortableListProps<ItemT extends ItemWithId> extends Omit<FlatListProps<ItemT>, 'extraData' | 'data'> {
   /**
    * The data of the list, do not update the data.
    */
@@ -18,19 +21,33 @@ export interface SortableListProps<ItemT>
    * A callback to get the new order (or swapped items).
    */
   onOrderChange: (data: ItemT[] /* 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)
+   */
+  enableHaptic?: boolean;
 }
 
-const SortableList = <ItemT extends unknown>(props: SortableListProps<ItemT>) => {
-  const {data, onOrderChange, disableHaptic, ...others} = props;
+function generateItemsOrder<ItemT extends ItemWithId>(data: SortableListProps<ItemT>['data']) {
+  return map(data, item => item.id);
+}
+
+const SortableList = <ItemT extends ItemWithId>(props: SortableListProps<ItemT>) => {
+  const {data, onOrderChange, enableHaptic, ...others} = props;
 
-  const itemsOrder = useSharedValue<number[]>(map(props.data, (_v, i) => i));
-  const itemHeight = useSharedValue<number>(1);
+  const itemsOrder = useSharedValue<string[]>(generateItemsOrder(data));
+  const itemHeight = useSharedValue<number>(52);
+
+  useDidUpdate(() => {
+    itemsOrder.value = generateItemsOrder(data);
+  }, [data]);
 
   const onChange = useCallback(() => {
     const newData: ItemT[] = [];
+    const dataByIds = mapKeys(data, 'id');
     if (data?.length) {
-      itemsOrder.value.forEach(itemIndex => {
-        newData.push(data[itemIndex]);
+      itemsOrder.value.forEach(itemId => {
+        newData.push(dataByIds[itemId]);
       });
     }
 
@@ -45,13 +62,14 @@ const SortableList = <ItemT extends unknown>(props: SortableListProps<ItemT>) =>
 
   const context = useMemo(() => {
     return {
+      data,
       itemsOrder,
       onChange,
       itemHeight,
       onItemLayout,
-      disableHaptic
+      enableHaptic
     };
-  }, []);
+  }, [data]);
 
   return (
     <GestureHandlerRootView>

src/components/sortableList/useDragAfterLongPressGesture.ts

@@ -38,6 +38,7 @@ const useDragAfterLongPressGesture = (props: Props) => {
           isDragging.value = true;
           stateManager.activate();
           if (hapticComponentName) {
+            // TODO: this should be changed IMO since Android does not support this type - consulting UX
             runOnJS(HapticService.triggerHaptic)(HapticType.selection, hapticComponentName);
           }
         } else {

src/components/sortableList/usePresenter.ts

@@ -5,7 +5,7 @@ export const animationConfig = {
   duration: 350
 };
 
-export type ItemsOrder = number[];
+type ItemsOrder = string[];
 
 const usePresenter = () => {
   return {
@@ -21,7 +21,7 @@ const usePresenter = () => {
       'worklet';
       return Math.round(positionY / itemHeight);
     },
-    getItemIndexById: (itemsOrder: ItemsOrder, itemId: number) => {
+    getItemIndexById: (itemsOrder: ItemsOrder, itemId: string) => {
       'worklet';
       return itemsOrder.indexOf(itemId);
     },