Constrain dragged item to list edges (#211)

* v2.3.3

* constrain drag to list boundaries

* add min

* rename prop

* rename prop

* update README

Author: computerjazz

README.md

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

src/index.tsx

@@ -46,6 +46,7 @@ const {
   stopClock,
   spring,
   defined,
+  min,
   max,
   debug
 } = Animated;
@@ -67,7 +68,8 @@ const defaultProps = {
   autoscrollSpeed: 100,
   animationConfig: defaultAnimationConfig as Animated.SpringConfig,
   scrollEnabled: true,
-  activationDistance: 0
+  activationDistance: 0,
+  dragItemOverflow: false
 };
 
 type DefaultProps = Readonly<typeof defaultProps>;
@@ -110,6 +112,7 @@ type Props<T> = Modify<
     debug?: boolean;
     layoutInvalidationKey?: string;
     onScrollOffsetChange?: (scrollOffset: number) => void;
+    dragItemOverflow?: boolean;
   } & Partial<DefaultProps>
 >;
 
@@ -177,7 +180,16 @@ class DraggableFlatList<T> extends React.Component<Props<T>, State> {
     add(this.scrollOffset, this.containerSize, scrollPositionTolerance),
     this.scrollViewSize
   );
-  hoverAnim = sub(this.touchAbsolute, this.touchCellOffset);
+
+  hoverAnimUnconstrained = sub(this.touchAbsolute, this.touchCellOffset);
+  hoverAnimConstrained = min(
+    sub(this.containerSize, this.activeCellSize),
+    max(0, this.hoverAnimUnconstrained)
+  );
+
+  hoverAnim = this.props.dragItemOverflow
+    ? this.hoverAnimUnconstrained
+    : this.hoverAnimConstrained;
   hoverMid = add(this.hoverAnim, divide(this.activeCellSize, 2));
   hoverOffset = add(this.hoverAnim, this.scrollOffset);