add some procs

Author: computerjazz

src/index.tsx

@@ -7,7 +7,15 @@ import {
   GestureHandlerStateChangeNativeEvent
 } from "react-native-gesture-handler";
 import Animated from "react-native-reanimated";
-import { springFill } from "./procs";
+import {
+  springFill,
+  getOpenPct,
+  getLeftActive,
+  getMaxTranslate,
+  getMinTranslate,
+  getIsActive,
+  getOnPanEvent
+} from "./procs";
 const {
   event,
   cond,
@@ -134,25 +142,21 @@ class SwipeableItem<T> extends React.PureComponent<Props<T>> {
       ? this.props.snapPointsRight![this.props.snapPointsRight!.length - 1]
       : 0
   );
-  percentOpenLeft = cond(
+
+  percentOpenLeft = getOpenPct(
     this.swipingLeft,
-    divide(abs(this.animState.position), this.leftWidth)
+    this.animState.position,
+    this.leftWidth
   );
-  percentOpenRight = cond(
+  percentOpenRight = getOpenPct(
     this.swipingRight,
-    divide(abs(this.animState.position), this.rightWidth)
-  );
-  isSwiping = or(this.swipingLeft, this.swipingRight);
-
-  leftActive = or(
-    this.swipingLeft,
-    and(not(this.isSwiping), lessThan(this.panX, 0))
+    this.animState.position,
+    this.rightWidth
   );
 
-  isActive = or(
-    eq(this.gestureState, GestureState.ACTIVE),
-    eq(this.gestureState, GestureState.BEGAN)
-  );
+  isSwiping = or(this.swipingLeft, this.swipingRight);
+  leftActive = getLeftActive(this.swipingLeft, this.isSwiping, this.panX);
+  isActive = getIsActive(this.gestureState);
 
   onSwipeLeftChange = ([isSwiping]: readonly number[]) => {
     if (isSwiping) this.setState({ swipeDirection: OpenDirection.LEFT });
@@ -269,16 +273,15 @@ class SwipeableItem<T> extends React.PureComponent<Props<T>> {
     this.props.onChange({ open: OpenDirection.NONE, snapPoint: 0 });
   };
 
-  maxTranslate = cond(
+  maxTranslate = getMaxTranslate(
     this.hasRight,
-    add(this.rightWidth, this.props.overSwipe),
-    0
+    this.rightWidth,
+    this.props.overSwipe
   );
-
-  minTranslate = cond(
+  minTranslate = getMinTranslate(
     this.hasLeft,
-    multiply(-1, add(this.leftWidth, this.props.overSwipe)),
-    0
+    this.leftWidth,
+    this.props.overSwipe
   );
 
   onHandlerStateChange = event([
@@ -296,13 +299,12 @@ class SwipeableItem<T> extends React.PureComponent<Props<T>> {
           set(this.panX, translationX),
           set(this.velocity, velocityX),
           set(this.tempTranslate, add(translationX, this.prevTranslate)),
-          cond(
-            and(
-              eq(this.gestureState, GestureState.ACTIVE),
-              lessOrEq(this.tempTranslate, this.maxTranslate),
-              greaterOrEq(this.tempTranslate, this.minTranslate)
-            ),
-            set(this.animState.position, this.tempTranslate)
+          getOnPanEvent(
+            this.gestureState,
+            this.tempTranslate,
+            this.maxTranslate,
+            this.minTranslate,
+            this.animState.position
           )
         ])
     }

src/procs.tsx

@@ -1,6 +1,23 @@
 import Animated from "react-native-reanimated";
-
-let { proc, spring, Value } = Animated;
+import { State as GestureState } from "react-native-gesture-handler";
+const {
+  cond,
+  divide,
+  abs,
+  or,
+  and,
+  not,
+  add,
+  eq,
+  set,
+  lessThan,
+  lessOrEq,
+  greaterOrEq,
+  multiply,
+  proc,
+  spring,
+  Value
+} = Animated;
 
 if (!proc) {
   console.warn("Use reanimated > 1.3 for optimal perf");
@@ -46,6 +63,63 @@ const betterSpring = proc(
     )
 );
 
+export const getOpenPct = proc(
+  (
+    isSwiping: Animated.Node<number>,
+    pos: Animated.Node<number>,
+    width: Animated.Node<number>
+  ) => cond(isSwiping, divide(abs(pos), width), 0)
+);
+
+export const getLeftActive = proc(
+  (
+    swipingLeft: Animated.Node<number>,
+    isSwiping: Animated.Node<number>,
+    panX: Animated.Node<number>
+  ) => or(swipingLeft, and(not(isSwiping), lessThan(panX, 0)))
+);
+
+export const getMaxTranslate = proc(
+  (
+    hasRight: Animated.Node<number>,
+    rightWidth: Animated.Node<number>,
+    overSwipe: number
+  ) => cond(hasRight, add(rightWidth, overSwipe), 0)
+);
+
+export const getMinTranslate = proc(
+  (
+    hasLeft: Animated.Node<number>,
+    leftWidth: Animated.Node<number>,
+    overSwipe: number
+  ) => cond(hasLeft, multiply(-1, add(leftWidth, overSwipe)), 0)
+);
+
+export const getIsActive = proc((gestureState: Animated.Node<GestureState>) =>
+  or(
+    eq(gestureState, GestureState.ACTIVE),
+    eq(gestureState, GestureState.BEGAN)
+  )
+);
+
+export const getOnPanEvent = proc(
+  (
+    gestureState: Animated.Node<GestureState>,
+    tempTranslate: Animated.Node<number>,
+    maxTranslate: Animated.Node<number>,
+    minTranslate: Animated.Node<number>,
+    pos: Animated.Value<number>
+  ) =>
+    cond(
+      and(
+        eq(gestureState, GestureState.ACTIVE),
+        lessOrEq(tempTranslate, maxTranslate),
+        greaterOrEq(tempTranslate, minTranslate)
+      ),
+      set(pos, tempTranslate)
+    )
+);
+
 export function springFill(
   clock: Animated.Clock,
   state: Animated.SpringState,