From b628b9ee7b0093bd5860ca424b4517faccc6b968 Mon Sep 17 00:00:00 2001
From: Ethan Sharabi <1780255+ethanshar@users.noreply.github.com>
Date: Thu, 12 Sep 2024 10:07:04 +0300
Subject: [PATCH] Support overriding backgroundColor for SortableListItem

---
 .../screens/componentScreens/SortableListScreen.tsx  |  1 +
 src/components/sortableList/SortableListContext.ts   | 12 ++++++------
 src/components/sortableList/SortableListItem.tsx     |  4 ++--
 src/components/sortableList/index.tsx                |  3 ++-
 src/components/sortableList/types.ts                 |  7 +++++--
 5 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/demo/src/screens/componentScreens/SortableListScreen.tsx b/demo/src/screens/componentScreens/SortableListScreen.tsx
index a06c55efee..a8b91bc938 100644
--- a/demo/src/screens/componentScreens/SortableListScreen.tsx
+++ b/demo/src/screens/componentScreens/SortableListScreen.tsx
@@ -114,6 +114,7 @@ const SortableListScreen = () => {
         <SortableList
           flexMigration
           data={items}
+          // itemProps={{backgroundColor: 'transparent'}}
           renderItem={renderItem}
           keyExtractor={keyExtractor}
           onOrderChange={onOrderChange}
diff --git a/src/components/sortableList/SortableListContext.ts b/src/components/sortableList/SortableListContext.ts
index 2c587f5356..ba6d9ebce2 100644
--- a/src/components/sortableList/SortableListContext.ts
+++ b/src/components/sortableList/SortableListContext.ts
@@ -1,23 +1,23 @@
 import {createContext} from 'react';
-import {ViewProps} from 'react-native';
+import type {ViewProps, FlatListProps} from 'react-native';
 import {SharedValue} from 'react-native-reanimated';
 import type {Dictionary} from '../../typings/common';
-import {Data, SortableListItemProps} from './types';
+import {Data, OrderChangeInfo, SortableListItemProps, SortableListProps} from './types';
 
 export interface SortableListContextType<ItemT extends SortableListItemProps> {
   data: Data<ItemT>;
   itemsOrder: SharedValue<string[]>;
   lockedIds: SharedValue<Dictionary<boolean>>;
-  onChange: () => void;
+  onChange: (info: OrderChangeInfo) => void;
   itemSize: SharedValue<number>;
-  horizontal?: boolean;
+  horizontal?: FlatListProps<ItemT>['horizontal'];
   onItemLayout: ViewProps['onLayout'];
   enableHaptic?: boolean;
   scale?: number;
-  itemProps?: {margins?: {marginTop?: number; marginBottom?: number; marginLeft?: number; marginRight?: number}};
+  itemProps?: SortableListProps<ItemT>['itemProps'];
 }
 
 // @ts-ignore
-const SortableListContext = createContext<SortableListContextType>({});
+const SortableListContext = createContext<SortableListContextType<SortableListItemProps>>({});
 
 export default SortableListContext;
diff --git a/src/components/sortableList/SortableListItem.tsx b/src/components/sortableList/SortableListItem.tsx
index 01855864fb..d9d42669e9 100644
--- a/src/components/sortableList/SortableListItem.tsx
+++ b/src/components/sortableList/SortableListItem.tsx
@@ -52,7 +52,7 @@ const SortableListItem = (props: Props) => {
   } = useContext(SortableListContext);
   const {getTranslationByIndexChange, getItemIndexById, getIndexByPosition, getIdByItemIndex} = usePresenter();
   const id: string = data[index].id;
-  const locked: boolean = data[index].locked;
+  const locked: boolean = data[index].locked ?? false;
   const initialIndex = useSharedValue<number>(map(data, 'id').indexOf(id));
   const lastSwap = useSharedValue({from: -1, to: -1});
   const currIndex = useSharedValue(initialIndex.value);
@@ -172,7 +172,7 @@ const SortableListItem = (props: Props) => {
       : defaultItemShadow.value;
 
     return {
-      backgroundColor: LIST_ITEM_BACKGROUND, // required for elevation to work in Android
+      backgroundColor: itemProps?.backgroundColor ?? LIST_ITEM_BACKGROUND, // required for elevation to work in Android
       zIndex,
       transform: [horizontal ? {translateX: translation.value} : {translateY: translation.value}, {scale}],
       opacity,
diff --git a/src/components/sortableList/index.tsx b/src/components/sortableList/index.tsx
index bc3be8e479..c748ae6bd2 100644
--- a/src/components/sortableList/index.tsx
+++ b/src/components/sortableList/index.tsx
@@ -84,7 +84,8 @@ const SortableList = <ItemT extends SortableListItemProps>(props: SortableListPr
       enableHaptic,
       scale
     };
-  }, [data]);
+  }, [data, onChange]);
+
   return (
     <GestureHandlerRootView style={flexMigration ? styles.container : undefined}>
       <SortableListContext.Provider value={context}>
diff --git a/src/components/sortableList/types.ts b/src/components/sortableList/types.ts
index 96f59d1d6c..f048089383 100644
--- a/src/components/sortableList/types.ts
+++ b/src/components/sortableList/types.ts
@@ -8,7 +8,7 @@ export interface SortableListItemProps {
 }
 
 // Internal
-export type Data<ItemT extends SortableListItemProps> = FlatListProps<ItemT>['data'];
+export type Data<ItemT extends SortableListItemProps> = ArrayLike<ItemT>;
 export type OrderChangeInfo = {from: number, to: number};
 
 export interface SortableListProps<ItemT extends SortableListItemProps>
@@ -31,7 +31,10 @@ export interface SortableListProps<ItemT extends SortableListItemProps>
   /**
    * Extra props for the item
    */
-  itemProps?: {margins?: {marginTop?: number; marginBottom?: number; marginLeft?: number; marginRight?: number}};
+  itemProps?: {
+    backgroundColor?: string; 
+    margins?: {marginTop?: number; marginBottom?: number; marginLeft?: number; marginRight?: number}
+  };
   /**
    * List forwarded ref.
    */