react-native-reorderable-list 0.4.0 → 0.5.1

package/src/components/ReorderableListItem.tsx

@@ -0,0 +1,108 @@
+import React, {useCallback, useMemo} from 'react';
+
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+
+import {useReorderableDragEnd, useReorderableDragStart} from '../hooks';
+import type {ReorderableListItemProps} from '../types';
+
+const scaleDefaultConfig = {
+  enabled: true,
+  valueEnd: 1,
+  valueStart: 1.025,
+  easingStart: Easing.in(Easing.ease),
+  easingEnd: Easing.out(Easing.ease),
+  duration: 200,
+};
+
+const opacityDefaultConfig = {
+  enabled: true,
+  valueEnd: 1,
+  valueStart: 0.75,
+  easingStart: Easing.in(Easing.ease),
+  easingEnd: Easing.out(Easing.ease),
+  duration: 200,
+};
+
+export const ReorderableListItem: React.FC<ReorderableListItemProps> = ({
+  scaleAnimationConfig = scaleDefaultConfig,
+  opacityAnimationConfig = opacityDefaultConfig,
+  ...rest
+}) => {
+  const scaleConfigWithDefaults = useMemo(
+    () => ({
+      ...scaleDefaultConfig,
+      ...scaleAnimationConfig,
+    }),
+    [scaleAnimationConfig],
+  );
+  const opacityConfigWithDefaults = useMemo(
+    () => ({
+      ...opacityDefaultConfig,
+      ...opacityAnimationConfig,
+    }),
+    [opacityAnimationConfig],
+  );
+  const scale = useSharedValue(
+    scaleConfigWithDefaults.enabled ? scaleConfigWithDefaults.valueEnd : 1,
+  );
+  const opacity = useSharedValue(
+    opacityConfigWithDefaults.enabled ? opacityConfigWithDefaults.valueEnd : 1,
+  );
+
+  useReorderableDragStart(
+    useCallback(() => {
+      'worklet';
+      if (scaleConfigWithDefaults.enabled) {
+        scale.value = withTiming(scaleConfigWithDefaults.valueStart, {
+          easing: scaleConfigWithDefaults.easingStart,
+          duration: scaleConfigWithDefaults.duration,
+        });
+      }
+
+      if (opacityConfigWithDefaults.enabled) {
+        opacity.value = withTiming(opacityConfigWithDefaults.valueStart, {
+          easing: opacityConfigWithDefaults.easingStart,
+          duration: opacityConfigWithDefaults.duration,
+        });
+      }
+    }, [opacity, scale, opacityConfigWithDefaults, scaleConfigWithDefaults]),
+  );
+
+  useReorderableDragEnd(
+    useCallback(() => {
+      'worklet';
+      if (scaleConfigWithDefaults.enabled) {
+        scale.value = withTiming(scaleConfigWithDefaults.valueEnd, {
+          easing: scaleConfigWithDefaults.easingEnd,
+          duration: scaleConfigWithDefaults.duration,
+        });
+      }
+
+      if (opacityConfigWithDefaults.enabled) {
+        opacity.value = withTiming(opacityConfigWithDefaults.valueEnd, {
+          easing: opacityConfigWithDefaults.easingEnd,
+          duration: opacityConfigWithDefaults.duration,
+        });
+      }
+    }, [opacity, scale, opacityConfigWithDefaults, scaleConfigWithDefaults]),
+  );
+
+  const animatedStyle = useAnimatedStyle(
+    () => ({
+      transform: [
+        {
+          scale: scale.value,
+        },
+      ],
+      opacity: opacity.value,
+    }),
+    [scale, opacity],
+  );
+
+  return <Animated.View {...rest} style={[animatedStyle, rest.style]} />;
+};

package/src/components/index.ts

@@ -0,0 +1,3 @@
+export * from './ReorderableList';
+export * from './ReorderableListCell';
+export * from './ReorderableListItem';

package/src/contexts/ReorderableCellContext.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import type {SharedValue} from 'react-native-reanimated';
+
+interface ReorderableCellContextData {
+  index: number;
+  dragHandler: () => void;
+  draggedIndex: SharedValue<number>;
+  releasedIndex: SharedValue<number>;
+}
+
+export const ReorderableCellContext = React.createContext<
+  ReorderableCellContextData | undefined
+>(undefined);

package/src/contexts/ReorderableListContext.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import type {SharedValue} from 'react-native-reanimated';
+
+interface ReorderableListContextData {
+  currentIndex: SharedValue<number>;
+  draggedHeight: SharedValue<number>;
+}
+
+export const ReorderableListContext = React.createContext<
+  ReorderableListContextData | undefined
+>(undefined);

package/src/contexts/index.ts

@@ -0,0 +1,2 @@
+export * from './ReorderableCellContext';
+export * from './ReorderableListContext';

package/src/hooks/index.ts

@@ -0,0 +1,4 @@
+export * from './useReorderableDrag';
+export * from './useReorderableDragStart';
+export * from './useReorderableDragEnd';
+export * from './useContext';

package/src/hooks/useContext.ts

@@ -0,0 +1,11 @@
+import {useContext as useReactContext} from 'react';
+
+export const useContext = <T>(context: React.Context<T | undefined>) => {
+  const value = useReactContext(context);
+
+  if (value !== undefined) {
+    return value;
+  }
+
+  throw 'Please consume ReorderableList context within its provider.';
+};

package/src/hooks/useReorderableDrag.ts

@@ -0,0 +1,7 @@
+import {useContext} from './useContext';
+import {ReorderableCellContext} from '../contexts';
+
+export const useReorderableDrag = () => {
+  const {dragHandler} = useContext(ReorderableCellContext);
+  return dragHandler;
+};

package/src/hooks/useReorderableDragEnd.ts

@@ -0,0 +1,21 @@
+import {useAnimatedReaction} from 'react-native-reanimated';
+
+import {useContext} from './useContext';
+import {ReorderableCellContext, ReorderableListContext} from '../contexts';
+
+export const useReorderableDragEnd = (
+  onEnd: (from: number, to: number) => void,
+) => {
+  const {currentIndex} = useContext(ReorderableListContext);
+  const {releasedIndex, index} = useContext(ReorderableCellContext);
+
+  useAnimatedReaction(
+    () => releasedIndex.value === index,
+    newValue => {
+      if (newValue) {
+        onEnd(index, currentIndex.value);
+      }
+    },
+    [onEnd],
+  );
+};

package/src/hooks/useReorderableDragStart.ts

@@ -0,0 +1,18 @@
+import {useAnimatedReaction} from 'react-native-reanimated';
+
+import {useContext} from './useContext';
+import {ReorderableCellContext} from '../contexts';
+
+export const useReorderableDragStart = (onStart: (index: number) => void) => {
+  const {draggedIndex, index} = useContext(ReorderableCellContext);
+
+  useAnimatedReaction(
+    () => draggedIndex.value === index,
+    newValue => {
+      if (newValue && onStart) {
+        onStart(index);
+      }
+    },
+    [onStart],
+  );
+};

package/src/index.ts

@@ -0,0 +1,26 @@
+import {ReorderableList, ReorderableListItem} from './components';
+import {
+  useReorderableDrag,
+  useReorderableDragEnd,
+  useReorderableDragStart,
+} from './hooks';
+import type {
+  ReorderableListItemConfig,
+  ReorderableListItemProps,
+  ReorderableListProps,
+  ReorderableListReorderEvent,
+} from './types';
+import {reorderItems} from './utils';
+
+export {
+  useReorderableDrag,
+  useReorderableDragStart,
+  useReorderableDragEnd,
+  ReorderableListProps,
+  ReorderableListReorderEvent,
+  ReorderableListItem,
+  ReorderableListItemConfig,
+  ReorderableListItemProps,
+  reorderItems,
+};
+export default ReorderableList;

package/src/types/index.ts

@@ -0,0 +1,2 @@
+export * from './props';
+export * from './misc';

package/src/types/misc.ts

@@ -0,0 +1,6 @@
+export enum ReorderableListState {
+  IDLE = 0,
+  DRAGGING,
+  RELEASING,
+  AUTO_SCROLL,
+}

package/src/types/props.ts

@@ -0,0 +1,101 @@
+import type {FlatListProps, NativeScrollEvent, ViewProps} from 'react-native';
+
+import {EasingFunction} from 'react-native-reanimated';
+
+export interface ReorderableListReorderEvent {
+  /**
+   * Index of the dragged item.
+   */
+  from: number;
+  /**
+   * Index where the dragged item was released.
+   */
+  to: number;
+}
+
+type OmittedProps =
+  | 'horizontal'
+  | 'onScroll'
+  | 'scrollEventThrottle'
+  | 'removeClippedSubviews'
+  | 'CellRendererComponent'
+  | 'numColumns';
+
+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.
+   * 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;
+  /**
+   * Scales the autoscroll spreed at which the list scrolls when an item is dragged to the scroll areas. Default: `1`.
+   */
+  autoscrollSpeedScale?: number;
+  /**
+   * Delay in between autoscroll triggers. Can be used to tune the autoscroll smoothness.
+   * Default Android: `0`.
+   * Default iOS: `100`.
+   */
+  autoscrollDelay?: number;
+  /**
+   * Specifies the fraction of an item's size at which it will shift when a dragged item crosses over it.
+   * For example, a value of 0.2 means the item shifts when the dragged item passes 20% of its height (vertical list). Default is `0.2`.
+   */
+  dragReorderThreshold?: number;
+  /**
+   * Duration of the animations in milliseconds.
+   * Be aware that users won't be able to drag a new item until the dragged item is released and
+   * its animation to its new position ends.
+   * Default: `200`.
+   */
+  animationDuration?: number;
+  /**
+   * Event fired after an item is released and the list is reordered.
+   */
+  onReorder: (event: ReorderableListReorderEvent) => void;
+  /**
+   * Event fired at most once per frame during scrolling. Needs to be a `worklet`. See [Reanimated docs](https://docs.swmansion.com/react-native-reanimated) for further info.
+   */
+  onScroll?: (event: NativeScrollEvent) => void;
+}
+
+export interface ReorderableListItemConfig {
+  /**
+   * Value of the animated style on drag end.
+   */
+  enabled?: boolean;
+  /**
+   * Value of the animated style on drag end.
+   */
+  valueEnd?: number;
+  /**
+   * Value of the animated style on drag start.
+   */
+  valueStart?: number;
+  /**
+   * Easing function for the animation to the end value. Default: `Easing.in(Easing.ease)`.
+   */
+  easingEnd?: EasingFunction;
+  /**
+   * Easing function for the animation to the start value. Default: `Easing.out(Easing.ease)`.
+   */
+  easingStart?: EasingFunction;
+  /**
+   * Duration of the animations in milliseconds. Default: `200`.
+   */
+  duration?: number;
+}
+
+export interface ReorderableListItemProps extends ViewProps {
+  /**
+   * Config for the `opacity` animation. Enabled by default with custom default options.
+   */
+  opacityAnimationConfig?: ReorderableListItemConfig;
+  /**
+   * Config for the `scale` animation. Enabled by default with custom default options.
+   */
+  scaleAnimationConfig?: ReorderableListItemConfig;
+}

package/src/utils.ts

@@ -0,0 +1,15 @@
+/**
+ * Moves an item in an array to a new index.
+ *
+ * @template T - The type of elements in the array.
+ * @param data - The array of items.
+ * @param from - The index of the item to move.
+ * @param to - The index to move the item to.
+ *
+ * @returns A new array with the two items swapped.
+ */
+export const reorderItems = <T>(data: T[], from: number, to: number): T[] => {
+  const newData = [...data];
+  newData.splice(to, 0, newData.splice(from, 1)[0]);
+  return newData;
+};

package/dist/components/ReorderableList.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import { FlatListProps } from 'react-native';
-import { ReorderableListProps } from '../types/props';
-declare const _default: <T>(props: ReorderableListProps<T> & {
-    ref?: React.ForwardedRef<FlatListProps<T>> | undefined;
-}) => React.ReactElement;
-export default _default;