diff --git a/src/components/sortableList/SortableListItem.tsx b/src/components/sortableList/SortableListItem.tsx index d9d42669e9..373883fb31 100644 --- a/src/components/sortableList/SortableListItem.tsx +++ b/src/components/sortableList/SortableListItem.tsx @@ -48,7 +48,9 @@ const SortableListItem = (props: Props) => { lockedIds, onChange, enableHaptic, - scale: propsScale = 1 + scale: propsScale = 1, + onDragStart, + onDragEnd } = useContext(SortableListContext); const {getTranslationByIndexChange, getItemIndexById, getIndexByPosition, getIdByItemIndex} = usePresenter(); const id: string = data[index].id; @@ -106,6 +108,7 @@ const SortableListItem = (props: Props) => { lastSwap.value = {...lastSwap.value, from: currIndex.value}; tempTranslation.value = translation.value; tempItemsOrder.value = itemsOrder.value; + runOnJS(onDragStart)(); }) .onTouchesMove(() => { if (enableHaptic && !isDragging.value) { @@ -156,6 +159,7 @@ const SortableListItem = (props: Props) => { runOnJS(onChange)({...lastSwap.value}); } }); + runOnJS(onDragEnd)(); }) .onFinalize(() => { if (isDragging.value) { diff --git a/src/components/sortableList/index.tsx b/src/components/sortableList/index.tsx index 27c3beb72e..a82b3e166b 100644 --- a/src/components/sortableList/index.tsx +++ b/src/components/sortableList/index.tsx @@ -27,7 +27,7 @@ function generateLockedIds(data: SortableLi const SortableList = (props: SortableListProps) => { const themeProps = useThemeProps(props, 'SortableList'); - const {data, onOrderChange, enableHaptic, scale, itemProps, horizontal, listRef, flexMigration, ...others} = + const {data, onOrderChange, enableHaptic, scale, itemProps, horizontal, listRef, flexMigration, onDragStart, onDragEnd, ...others} = themeProps; const itemsOrder = useSharedValue(generateItemsOrder(data)); @@ -82,7 +82,9 @@ const SortableList = (props: SortableListPr itemProps, onItemLayout, enableHaptic, - scale + scale, + onDragStart, + onDragEnd }; }, [data, onChange]); diff --git a/src/components/sortableList/types.ts b/src/components/sortableList/types.ts index f048089383..67c93f47b6 100644 --- a/src/components/sortableList/types.ts +++ b/src/components/sortableList/types.ts @@ -43,4 +43,12 @@ export interface SortableListProps * Temporary migration flag for enabling flex on the container of the list (like it should be by default) */ flexMigration?: boolean; + /** + * A callback triggered when the user starts dragging an item. + */ + onDragStart?: () => void; + /** + * A callback triggered when the user finishes dragging an item. + */ + onDragEnd?: () => void; }