add renderPlaceholder prop (#208)

* add renderPlaceholder

* fix placeholder pos logic

* readme typo

* cleanup

* cleanup

* cleanup

Author: computerjazz

README.md

@@ -36,6 +36,7 @@ All props are spread onto underlying [FlatList](https://facebook.github.io/react
 | `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.                                                                                                                                                 |

src/index.tsx

@@ -104,6 +104,7 @@ type Props<T> = Modify<
     onRelease?: (index: number) => void;
     onDragEnd?: (params: DragEndParams<T>) => void;
     renderItem: (params: RenderItemParams<T>) => React.ReactNode;
+    renderPlaceholder?: (params: { item: T; index: number }) => React.ReactNode;
     animationConfig: Partial<Animated.SpringConfig>;
     activationDistance?: number;
     debug?: boolean;
@@ -180,6 +181,9 @@ class DraggableFlatList<T> extends React.Component<Props<T>, State> {
   hoverMid = add(this.hoverAnim, divide(this.activeCellSize, 2));
   hoverOffset = add(this.hoverAnim, this.scrollOffset);
 
+  placeholderOffset = new Value(0);
+  placeholderPos = sub(this.placeholderOffset, this.scrollOffset);
+
   hoverTo = new Value(0);
   hoverClock = new Clock();
   hoverAnimState = {
@@ -411,7 +415,6 @@ class DraggableFlatList<T> extends React.Component<Props<T>, State> {
     );
     const onHasMoved = startClock(clock);
     const onChangeSpacerIndex = cond(clockRunning(clock), stopClock(clock));
-
     const onFinished = stopClock(clock);
 
     const prevTrans = new Value(0);
@@ -442,7 +445,8 @@ class DraggableFlatList<T> extends React.Component<Props<T>, State> {
       onHasMoved,
       onChangeSpacerIndex,
       onFinished,
-      this.isPressedIn.native
+      this.isPressedIn.native,
+      this.placeholderOffset
     );
 
     const transform = this.props.horizontal
@@ -854,6 +858,30 @@ class DraggableFlatList<T> extends React.Component<Props<T>, State> {
     );
   };
 
+  renderPlaceholder = () => {
+    const { renderPlaceholder, horizontal } = this.props;
+    const { activeKey } = this.state;
+    if (!activeKey || !renderPlaceholder) return null;
+    const activeIndex = this.keyToIndex.get(activeKey);
+    if (activeIndex === undefined) return null;
+    const activeItem = this.props.data[activeIndex];
+    const translateKey = horizontal ? "translateX" : "translateY";
+    const sizeKey = horizontal ? "width" : "height";
+    const style = {
+      ...StyleSheet.absoluteFillObject,
+      [sizeKey]: this.activeCellSize,
+      transform: [
+        { [translateKey]: this.placeholderPos }
+      ] as Animated.AnimatedTransform
+    };
+
+    return (
+      <Animated.View style={style}>
+        {renderPlaceholder({ item: activeItem, index: activeIndex })}
+      </Animated.View>
+    );
+  };
+
   CellRendererComponent = (cellProps: any) => {
     const { item, index, children, onLayout } = cellProps;
     const { horizontal } = this.props;
@@ -911,8 +939,10 @@ class DraggableFlatList<T> extends React.Component<Props<T>, State> {
       debug,
       horizontal,
       activationDistance,
-      onScrollOffsetChange
+      onScrollOffsetChange,
+      renderPlaceholder
     } = this.props;
+
     const { hoverComponent } = this.state;
     let dynamicProps = {};
     if (activationDistance) {
@@ -934,6 +964,7 @@ class DraggableFlatList<T> extends React.Component<Props<T>, State> {
           onLayout={this.onContainerLayout}
           onTouchEnd={this.onContainerTouchEnd}
         >
+          {!!renderPlaceholder && this.renderPlaceholder()}
           <AnimatedFlatList
             {...this.props}
             CellRendererComponent={this.CellRendererComponent}

src/procs.tsx

@@ -100,7 +100,8 @@ export const setupCell = (proc as RetypedProc)(
     onHasMoved: Animated.Node<number>,
     onChangeSpacerIndex: Animated.Node<number>,
     onFinished: Animated.Node<number>,
-    isPressedIn: Animated.Node<number>
+    isPressedIn: Animated.Node<number>,
+    placeholderOffset: Animated.Value<number>
   ) =>
     block([
       set(isAfterActive, getIsAfterActive(currentIndex, activeIndex)),
@@ -209,6 +210,13 @@ export const setupCell = (proc as RetypedProc)(
       ]),
       runSpring,
       cond(finished, [onFinished, set(time, 0), set(finished, 0)]),
+      cond(
+        eq(spacerIndex, currentIndex),
+        set(
+          placeholderOffset,
+          cond(isAfterActive, add(sub(offset, activeCellSize), size), offset)
+        )
+      ),
       position
     ])
 );