Skip to content

Commit

Permalink
Add optional onPlaceholderIndexChange callback function (#212)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@callaars
callaars authored Aug 13, 2020
1 parent b028ad3 commit b1df511
Show file tree
Hide file tree
Showing 2 changed files with 38 additions and 19 deletions.
37 changes: 19 additions & 18 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,24 +31,25 @@ yarn add react-native-draggable-flatlist

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

| Name | Type | Description |
| :---------------------- | :---------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `data` | `T[]` | Items to be rendered. |
| `horizontal` | `boolean` | Orientation of list. |
| `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`). |
| `renderPlaceholder` | `(params: { item: T, index: number }) => React.ReactNode` | Component to be rendered underneath the hovering component |
| `keyExtractor` | `(item: T, index: number) => string` | Unique key for each item |
| `onDragBegin` | `(index: number) => void` | Called when row becomes active. |
| `onRelease` | `(index: number) => void` | Called when active row touch ends. |
| `onDragEnd` | `(params: { data: T[], from: number, to: number }) => void` | Called after animation has completed. Returns updated ordering of `data` |
| `autoscrollThreshold` | `number` | Distance from edge of container where list begins to autoscroll when dragging. |
| `autoscrollSpeed` | `number` | Determines how fast the list autoscrolls. |
| `onRef` | `(ref: React.RefObject<DraggableFlatList<T>>) => void` | Returns underlying Animated FlatList ref. |
| `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) |
| `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. |
| `layoutInvalidationKey` | `string` | Changing this value forces a remeasure of all item layouts. Useful if item size/ordering updates after initial mount. |
| `onScrollOffsetChange` | `(offset: number) => void` | Called with scroll offset. Stand-in for `onScroll`. |
| `dragItemOverflow` | `boolean` | If true, dragged item follows finger beyond list boundary. |
| Name | Type | Description |
| :------------------------- | :---------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `data` | `T[]` | Items to be rendered. |
| `horizontal` | `boolean` | Orientation of list. |
| `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`). |
| `renderPlaceholder` | `(params: { item: T, index: number }) => React.ReactNode` | Component to be rendered underneath the hovering component |
| `keyExtractor` | `(item: T, index: number) => string` | Unique key for each item |
| `onDragBegin` | `(index: number) => void` | Called when row becomes active. |
| `onRelease` | `(index: number) => void` | Called when active row touch ends. |
| `onDragEnd` | `(params: { data: T[], from: number, to: number }) => void` | Called after animation has completed. Returns updated ordering of `data` |
| `autoscrollThreshold` | `number` | Distance from edge of container where list begins to autoscroll when dragging. |
| `autoscrollSpeed` | `number` | Determines how fast the list autoscrolls. |
| `onRef` | `(ref: React.RefObject<DraggableFlatList<T>>) => void` | Returns underlying Animated FlatList ref. |
| `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) |
| `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. |
| `layoutInvalidationKey` | `string` | Changing this value forces a remeasure of all item layouts. Useful if item size/ordering updates after initial mount. |
| `onScrollOffsetChange` | `(offset: number) => void` | Called with scroll offset. Stand-in for `onScroll`. |
| `onPlaceholderIndexChange` | `(index: number) => void` | Called when the index of the placeholder changes |
| `dragItemOverflow` | `boolean` | If true, dragged item follows finger beyond list boundary. |

## Example

Expand Down
20 changes: 19 additions & 1 deletion src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,7 @@ type Props<T> = Modify<
debug?: boolean;
layoutInvalidationKey?: string;
onScrollOffsetChange?: (scrollOffset: number) => void;
onPlaceholderIndexChange?: (placeholderIndex: number) => void;
dragItemOverflow?: boolean;
} & Partial<DefaultProps>
>;
Expand Down Expand Up @@ -870,6 +871,21 @@ class DraggableFlatList<T> extends React.Component<Props<T>, State> {
);
};

renderOnPlaceholderIndexChange = () => (
<Animated.Code>
{() =>
block([
onChange(
this.spacerIndex,
call([this.spacerIndex], ([spacerIndex]) =>
this.props.onPlaceholderIndexChange!(spacerIndex)
)
)
])
}
</Animated.Code>
);

renderPlaceholder = () => {
const { renderPlaceholder, horizontal } = this.props;
const { activeKey } = this.state;
Expand Down Expand Up @@ -952,7 +968,8 @@ class DraggableFlatList<T> extends React.Component<Props<T>, State> {
horizontal,
activationDistance,
onScrollOffsetChange,
renderPlaceholder
renderPlaceholder,
onPlaceholderIndexChange
} = this.props;

const { hoverComponent } = this.state;
Expand All @@ -976,6 +993,7 @@ class DraggableFlatList<T> extends React.Component<Props<T>, State> {
onLayout={this.onContainerLayout}
onTouchEnd={this.onContainerTouchEnd}
>
{!!onPlaceholderIndexChange && this.renderOnPlaceholderIndexChange()}
{!!renderPlaceholder && this.renderPlaceholder()}
<AnimatedFlatList
{...this.props}
Expand Down

0 comments on commit b1df511

Please sign in to comment.