diff --git a/src/components/sortableList/SortableList.api.json b/src/components/sortableList/SortableList.api.json index b3102dac4b..096f56a285 100644 --- a/src/components/sortableList/SortableList.api.json +++ b/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": [ diff --git a/src/components/sortableList/SortableListContext.ts b/src/components/sortableList/SortableListContext.ts index 61e87cd449..2fb5a00cd5 100644 --- a/src/components/sortableList/SortableListContext.ts +++ b/src/components/sortableList/SortableListContext.ts @@ -12,6 +12,7 @@ export interface SortableListContextType { onItemLayout: ViewProps['onLayout']; enableHaptic?: boolean; scale?: number; + itemProps?: {margins?: {marginTop?: number; marginBottom?: number; marginLeft?: number; marginRight?: number}}; } // @ts-ignore diff --git a/src/components/sortableList/SortableListItem.tsx b/src/components/sortableList/SortableListItem.tsx index da508ea765..1574f3b471 100644 --- a/src/components/sortableList/SortableListItem.tsx +++ b/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 }; }); diff --git a/src/components/sortableList/index.tsx b/src/components/sortableList/index.tsx index 3f6c4397df..aa9cf79104 100644 --- a/src/components/sortableList/index.tsx +++ b/src/components/sortableList/index.tsx @@ -22,7 +22,7 @@ function generateLockedIds(data: SortableLi const SortableList = (props: SortableListProps) => { const themeProps = useThemeProps(props, 'SortableList'); - const {data, onOrderChange, enableHaptic, scale, ...others} = themeProps; + const {data, onOrderChange, enableHaptic, scale, itemProps, ...others} = themeProps; const itemsOrder = useSharedValue(generateItemsOrder(data)); const lockedIds = useSharedValue>(generateLockedIds(data)); @@ -49,7 +49,7 @@ const SortableList = (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 = (props: SortableListPr lockedIds, onChange, itemHeight, + itemProps, onItemLayout, enableHaptic, scale diff --git a/src/components/sortableList/types.ts b/src/components/sortableList/types.ts index d489276d5a..fcef0ca2bf 100644 --- a/src/components/sortableList/types.ts +++ b/src/components/sortableList/types.ts @@ -26,4 +26,8 @@ export interface SortableListProps * (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}}; }