Feat/ SortableList - add ItemMargin prop (#2561)

* add ItemMargin prop

* move height calculation

* renaming

* Prettify

---------

Co-authored-by: M-i-k-e-l <[email protected]>

Author: lidord-wix

src/components/sortableList/SortableList.api.json

@@ -30,6 +30,11 @@
       "type": "number",
       "default": "1",
       "description": "Scale the item once dragged."
+    },
+    {
+      "name": "itemProps",
+      "type": "{margins?: {marginTop?: number; marginBottom?: number; marginLeft?: number; marginRight?: number}}",
+      "description": "Extra props for the item."
     }
   ],
   "snippet": [

src/components/sortableList/SortableListContext.ts

@@ -12,6 +12,7 @@ export interface SortableListContextType<ItemT extends SortableListItemProps> {
   onItemLayout: ViewProps['onLayout'];
   enableHaptic?: boolean;
   scale?: number;
+  itemProps?: {margins?: {marginTop?: number; marginBottom?: number; marginLeft?: number; marginRight?: number}};
 }
 
 // @ts-ignore

src/components/sortableList/SortableListItem.tsx

@@ -39,6 +39,7 @@ const SortableListItem = (props: Props) => {
   const {
     data,
     itemHeight,
+    itemProps,
     onItemLayout,
     itemsOrder,
     lockedIds,
@@ -167,6 +168,7 @@ const SortableListItem = (props: Props) => {
       zIndex,
       transform: [{translateY: translateY.value}, {scale}],
       opacity,
+      ...itemProps?.margins,
       ...shadow
     };
   });

src/components/sortableList/index.tsx

@@ -22,7 +22,7 @@ function generateLockedIds<ItemT extends SortableListItemProps>(data: SortableLi
 
 const SortableList = <ItemT extends SortableListItemProps>(props: SortableListProps<ItemT>) => {
   const themeProps = useThemeProps(props, 'SortableList');
-  const {data, onOrderChange, enableHaptic, scale, ...others} = themeProps;
+  const {data, onOrderChange, enableHaptic, scale, itemProps, ...others} = themeProps;
 
   const itemsOrder = useSharedValue<string[]>(generateItemsOrder(data));
   const lockedIds = useSharedValue<Dictionary<boolean>>(generateLockedIds(data));
@@ -49,7 +49,7 @@ const SortableList = <ItemT extends SortableListItemProps>(props: SortableListPr
     const newHeight = Math.round(event.nativeEvent.layout.height);
     // Check validity for tests
     if (newHeight) {
-      itemHeight.value = newHeight;
+      itemHeight.value = newHeight + (itemProps?.margins?.marginTop ?? 0) + (itemProps?.margins?.marginBottom ?? 0);
     }
   }, []);
 
@@ -60,6 +60,7 @@ const SortableList = <ItemT extends SortableListItemProps>(props: SortableListPr
       lockedIds,
       onChange,
       itemHeight,
+      itemProps,
       onItemLayout,
       enableHaptic,
       scale

src/components/sortableList/types.ts

@@ -26,4 +26,8 @@ export interface SortableListProps<ItemT extends SortableListItemProps>
    * (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;
+  /**
+   * Extra props for the item
+   */
+  itemProps?: {margins?: {marginTop?: number; marginBottom?: number; marginLeft?: number; marginRight?: number}};
 }