react-native-reorderable-list 0.9.0 → 0.11.0

package/src/types/props.ts

@@ -1,7 +1,26 @@
-import type {FlatListProps, ScrollViewProps} from 'react-native';
+import type {
+  FlatListProps,
+  MatrixTransform,
+  PerspectiveTransform,
+  RotateTransform,
+  RotateXTransform,
+  RotateYTransform,
+  RotateZTransform,
+  ScaleTransform,
+  ScaleXTransform,
+  ScaleYTransform,
+  ScrollViewProps,
+  SkewXTransform,
+  SkewYTransform,
+  TranslateXTransform,
+  TranslateYTransform,
+  ViewStyle,
+} from 'react-native';
 
 import {SharedValue, useAnimatedScrollHandler} from 'react-native-reanimated';
 
+import {MaximumOneOf, SharedValueOrType} from './misc';
+
 export interface ReorderableListReorderEvent {
   /**
    * Index of the dragged item.
@@ -20,6 +39,13 @@ export interface ReorderableListDragStartEvent {
   index: number;
 }
 
+export interface ReorderableListIndexChangeEvent {
+  /**
+   * Index of the dragged item.
+   */
+  index: number;
+}
+
 export interface ReorderableListDragEndEvent {
   /**
    * Index of the dragged item.
@@ -43,11 +69,16 @@ export interface ReorderableListProps<T>
   extends Omit<FlatListProps<T>, OmittedProps> {
   data: T[];
   /**
-   * Threshold  at the extremety of the list which triggers autoscroll when an item is dragged to it.
+   * Threshold at the extremety of the list which triggers autoscroll when an item is dragged to it.
    * A value of 0.1 means that 10% of the area at the top and 10% at the bottom of the list will trigger autoscroll
    * when an item is dragged to it. Min value: `0`. Max value: `0.4`. Default: `0.1`.
    */
   autoscrollThreshold?: number;
+  /**
+   * Amount by which the threshold is offset at the extremety of the list.
+   * For example, setting `{top: 50}` will make the autoscroll trigger 50 pixels earlier at the top.
+   */
+  autoscrollThresholdOffset?: {top?: number; bottom?: number};
   /**
    * Scales the autoscroll spreed at which the list scrolls when an item is dragged to the scroll areas. Default: `1`.
    */
@@ -71,7 +102,7 @@ export interface ReorderableListProps<T>
    */
   animationDuration?: number;
   /**
-   * Allows passing an object with shared values that can animate a cell by using the `onDragStart` and `onDragEnd` events.
+   * Allows passing an object with values and/or shared values that can animate a cell, for example by using the `onDragStart` and `onDragEnd` events. Supports view style properties. Override opacity and/or transform to disable the default animation, e.g. `{opacity: 1, transform: []}`.
    */
   cellAnimations?: ReorderableListCellAnimations;
   /**
@@ -83,7 +114,7 @@ export interface ReorderableListProps<T>
    */
   panEnabled?: boolean;
   /**
-   * Duration in milliseconds of a long press on the list before pan gestures, necessary for dragging, are allowed to activate.
+   * Duration in milliseconds of the long press on the list before the pan gesture for dragging is allowed to activate.
    */
   panActivateAfterLongPress?: number;
   /**
@@ -102,17 +133,48 @@ export interface ReorderableListProps<T>
    * Event fired when the dragged item is released. Needs to be a `worklet`. See [Reanimated docs](https://docs.swmansion.com/react-native-reanimated) for further info.
    */
   onDragEnd?: (event: ReorderableListDragEndEvent) => void;
+  /**
+   * Event fired when the index of the dragged item changes. Needs to be a `worklet`. See [Reanimated docs](https://docs.swmansion.com/react-native-reanimated) for further info.
+   */
+  onIndexChange?: (event: ReorderableListIndexChangeEvent) => void;
 }
 
-export interface ReorderableListCellAnimations {
+export type Transforms = PerspectiveTransform &
+  RotateTransform &
+  RotateXTransform &
+  RotateYTransform &
+  RotateZTransform &
+  ScaleTransform &
+  ScaleXTransform &
+  ScaleYTransform &
+  TranslateXTransform &
+  TranslateYTransform &
+  SkewXTransform &
+  SkewYTransform &
+  MatrixTransform;
+
+export type ReorderableListCellAnimatedStyles = Omit<
+  {
+    [StyleKey in keyof ViewStyle]?:
+      | SharedValue<ViewStyle[StyleKey]>
+      | ViewStyle[StyleKey];
+  },
+  // omit custom type and type with JSDoc
+  'transform' | 'opacity'
+>;
+
+export interface ReorderableListCellAnimations
+  extends ReorderableListCellAnimatedStyles {
   /**
-   * Shared value to animate the opacity of a dragged item. Set to false to disable default opacity animations.
+   * Transform animations for a dragged item.
+   * Disable default animation by overriding transform, e.g. `[]` or `[{ scale: customSharedValue }]`.
    */
-  opacity?: SharedValue<number> | false;
+  transform?: Readonly<MaximumOneOf<SharedValueOrType<Transforms>>[]>;
   /**
-   * Shared value to animate the scale of a dragged item. Set to false to disable default scale animations.
+   * Shared value to animate the opacity of a dragged item.
+   * Disable default animation by overriding opacity, e.g `1`.
    */
-  scale?: SharedValue<number> | false;
+  opacity?: SharedValue<number> | number;
 }
 
 export interface ScrollViewContainerProps