Skip to content

Commit b1df511

Browse files
callaarscallaars
authored
Add optional onPlaceholderIndexChange callback function (#212)
* Add optional `onSpacerIndexChange` callback function to the props to trigger when the spacer index changes. * Refactor property name and change README.md - Change `onSpacerIndexChange` to `onPlaceholderIndexChange` - Add new `onSpacerIndexChange` to the README.md
1 parent b028ad3 commit b1df511

File tree

2 files changed

+38
-19
lines changed

2 files changed

+38
-19
lines changed

‎README.md‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -31,24 +31,25 @@ yarn add react-native-draggable-flatlist
3131

3232
All props are spread onto underlying [FlatList](https://facebook.github.io/react-native/docs/flatlist)
3333

34-
| Name | Type | Description |
35-
| :---------------------- | :---------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
36-
| `data` | `T[]` | Items to be rendered. |
37-
| `horizontal` | `boolean` | Orientation of list. |
38-
| `renderItem` | `(params: { item: T, index: number, drag: () => void, isActive: boolean}) => JSX.Element` | Call `drag` when the row should become active (i.e. in an `onLongPress` or `onPressIn`). |
39-
| `renderPlaceholder` | `(params: { item: T, index: number }) => React.ReactNode` | Component to be rendered underneath the hovering component |
40-
| `keyExtractor` | `(item: T, index: number) => string` | Unique key for each item |
41-
| `onDragBegin` | `(index: number) => void` | Called when row becomes active. |
42-
| `onRelease` | `(index: number) => void` | Called when active row touch ends. |
43-
| `onDragEnd` | `(params: { data: T[], from: number, to: number }) => void` | Called after animation has completed. Returns updated ordering of `data` |
44-
| `autoscrollThreshold` | `number` | Distance from edge of container where list begins to autoscroll when dragging. |
45-
| `autoscrollSpeed` | `number` | Determines how fast the list autoscrolls. |
46-
| `onRef` | `(ref: React.RefObject<DraggableFlatList<T>>) => void` | Returns underlying Animated FlatList ref. |
47-
| `animationConfig` | `Partial<Animated.SpringConfig>` | Configure list animations. See [reanimated spring config](https://github.com/software-mansion/react-native-reanimated/blob/master/react-native-reanimated.d.ts#L112-L120) |
48-
| `activationDistance` | `number` | Distance a finger must travel before the gesture handler activates. Useful when using a draggable list within a TabNavigator so that the list does not capture navigator gestures. |
49-
| `layoutInvalidationKey` | `string` | Changing this value forces a remeasure of all item layouts. Useful if item size/ordering updates after initial mount. |
50-
| `onScrollOffsetChange` | `(offset: number) => void` | Called with scroll offset. Stand-in for `onScroll`. |
51-
| `dragItemOverflow` | `boolean` | If true, dragged item follows finger beyond list boundary. |
34+
| Name | Type | Description |
35+
| :------------------------- | :---------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
36+
| `data` | `T[]` | Items to be rendered. |
37+
| `horizontal` | `boolean` | Orientation of list. |
38+
| `renderItem` | `(params: { item: T, index: number, drag: () => void, isActive: boolean}) => JSX.Element` | Call `drag` when the row should become active (i.e. in an `onLongPress` or `onPressIn`). |
39+
| `renderPlaceholder` | `(params: { item: T, index: number }) => React.ReactNode` | Component to be rendered underneath the hovering component |
40+
| `keyExtractor` | `(item: T, index: number) => string` | Unique key for each item |
41+
| `onDragBegin` | `(index: number) => void` | Called when row becomes active. |
42+
| `onRelease` | `(index: number) => void` | Called when active row touch ends. |
43+
| `onDragEnd` | `(params: { data: T[], from: number, to: number }) => void` | Called after animation has completed. Returns updated ordering of `data` |
44+
| `autoscrollThreshold` | `number` | Distance from edge of container where list begins to autoscroll when dragging. |
45+
| `autoscrollSpeed` | `number` | Determines how fast the list autoscrolls. |
46+
| `onRef` | `(ref: React.RefObject<DraggableFlatList<T>>) => void` | Returns underlying Animated FlatList ref. |
47+
| `animationConfig` | `Partial<Animated.SpringConfig>` | Configure list animations. See [reanimated spring config](https://github.com/software-mansion/react-native-reanimated/blob/master/react-native-reanimated.d.ts#L112-L120) |
48+
| `activationDistance` | `number` | Distance a finger must travel before the gesture handler activates. Useful when using a draggable list within a TabNavigator so that the list does not capture navigator gestures. |
49+
| `layoutInvalidationKey` | `string` | Changing this value forces a remeasure of all item layouts. Useful if item size/ordering updates after initial mount. |
50+
| `onScrollOffsetChange` | `(offset: number) => void` | Called with scroll offset. Stand-in for `onScroll`. |
51+
| `onPlaceholderIndexChange` | `(index: number) => void` | Called when the index of the placeholder changes |
52+
| `dragItemOverflow` | `boolean` | If true, dragged item follows finger beyond list boundary. |
5253

5354
## Example
5455

‎src/index.tsx‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,7 @@ type Props<T> = Modify<
112112
debug?: boolean;
113113
layoutInvalidationKey?: string;
114114
onScrollOffsetChange?: (scrollOffset: number) => void;
115+
onPlaceholderIndexChange?: (placeholderIndex: number) => void;
115116
dragItemOverflow?: boolean;
116117
} & Partial<DefaultProps>
117118
>;
@@ -870,6 +871,21 @@ class DraggableFlatList<T> extends React.Component<Props<T>, State> {
870871
);
871872
};
872873

874+
renderOnPlaceholderIndexChange = () => (
875+
<Animated.Code>
876+
{() =>
877+
block([
878+
onChange(
879+
this.spacerIndex,
880+
call([this.spacerIndex], ([spacerIndex]) =>
881+
this.props.onPlaceholderIndexChange!(spacerIndex)
882+
)
883+
)
884+
])
885+
}
886+
</Animated.Code>
887+
);
888+
873889
renderPlaceholder = () => {
874890
const { renderPlaceholder, horizontal } = this.props;
875891
const { activeKey } = this.state;
@@ -952,7 +968,8 @@ class DraggableFlatList<T> extends React.Component<Props<T>, State> {
952968
horizontal,
953969
activationDistance,
954970
onScrollOffsetChange,
955-
renderPlaceholder
971+
renderPlaceholder,
972+
onPlaceholderIndexChange
956973
} = this.props;
957974

958975
const { hoverComponent } = this.state;
@@ -976,6 +993,7 @@ class DraggableFlatList<T> extends React.Component<Props<T>, State> {
976993
onLayout={this.onContainerLayout}
977994
onTouchEnd={this.onContainerTouchEnd}
978995
>
996+
{!!onPlaceholderIndexChange && this.renderOnPlaceholderIndexChange()}
979997
{!!renderPlaceholder && this.renderPlaceholder()}
980998
<AnimatedFlatList
981999
{...this.props}

0 commit comments

Comments
 (0)