@amazon-devices/react-native-gesture-handler 2.0.9000000000 → 4.0.0-rn-83

package/lib/module/components/Swipeable.js

@@ -1,7 +1,5 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+"use strict";
+
 // Similarily to the DrawerLayout component this deserves to be put in a
 // separate repo. Although, keeping it here for the time being will allow us to
 // move faster and fix possible issues quicker
@@ -12,249 +10,274 @@ import { Animated, StyleSheet, View, I18nManager } from 'react-native';
 import { PanGestureHandler } from '../handlers/PanGestureHandler';
 import { TapGestureHandler } from '../handlers/TapGestureHandler';
 import { State } from '../State';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const DRAG_TOSS = 0.05;
 
 // Animated.AnimatedInterpolation has been converted to a generic type
 // in @types/react-native 0.70. This way we can maintain compatibility
 // with all versions of @types/react-native
 
+/**
+ * @deprecated use Reanimated version of Swipeable instead
+ *
+ * This component allows for implementing swipeable rows or similar interaction.
+ */
+
 export default class Swipeable extends Component {
-  constructor(_props) {
-    super(_props);
-    _defineProperty(this, "onGestureEvent", void 0);
-    _defineProperty(this, "transX", void 0);
-    _defineProperty(this, "showLeftAction", void 0);
-    _defineProperty(this, "leftActionTranslate", void 0);
-    _defineProperty(this, "showRightAction", void 0);
-    _defineProperty(this, "rightActionTranslate", void 0);
-    _defineProperty(this, "updateAnimatedEvent", (props, state) => {
-      const {
-        friction,
-        overshootFriction
-      } = props;
-      const {
-        dragX,
-        rowTranslation,
-        leftWidth = 0,
-        rowWidth = 0
-      } = state;
-      const {
-        rightOffset = rowWidth
-      } = state;
-      const rightWidth = Math.max(0, rowWidth - rightOffset);
-      const {
-        overshootLeft = leftWidth > 0,
-        overshootRight = rightWidth > 0
-      } = props;
-      const transX = Animated.add(rowTranslation, dragX.interpolate({
-        inputRange: [0, friction],
-        outputRange: [0, 1]
-      })).interpolate({
-        inputRange: [-rightWidth - 1, -rightWidth, leftWidth, leftWidth + 1],
-        outputRange: [-rightWidth - (overshootRight ? 1 / overshootFriction : 0), -rightWidth, leftWidth, leftWidth + (overshootLeft ? 1 / overshootFriction : 0)]
-      });
-      this.transX = transX;
-      this.showLeftAction = leftWidth > 0 ? transX.interpolate({
-        inputRange: [-1, 0, leftWidth],
-        outputRange: [0, 0, 1]
-      }) : new Animated.Value(0);
-      this.leftActionTranslate = this.showLeftAction.interpolate({
-        inputRange: [0, Number.MIN_VALUE],
-        outputRange: [-10000, 0],
-        extrapolate: 'clamp'
-      });
-      this.showRightAction = rightWidth > 0 ? transX.interpolate({
-        inputRange: [-rightWidth, 0, 1],
-        outputRange: [1, 0, 0]
-      }) : new Animated.Value(0);
-      this.rightActionTranslate = this.showRightAction.interpolate({
-        inputRange: [0, Number.MIN_VALUE],
-        outputRange: [-10000, 0],
-        extrapolate: 'clamp'
-      });
-    });
-    _defineProperty(this, "onTapHandlerStateChange", ({
-      nativeEvent
-    }) => {
-      if (nativeEvent.oldState === State.ACTIVE) {
-        this.close();
+  static defaultProps = {
+    friction: 1,
+    overshootFriction: 1,
+    useNativeAnimations: true
+  };
+  constructor(props) {
+    super(props);
+    const dragX = new Animated.Value(0);
+    this.state = {
+      dragX,
+      rowTranslation: new Animated.Value(0),
+      rowState: 0,
+      leftWidth: undefined,
+      rightOffset: undefined,
+      rowWidth: undefined
+    };
+    this.updateAnimatedEvent(props, this.state);
+    this.onGestureEvent = Animated.event([{
+      nativeEvent: {
+        translationX: dragX
       }
+    }], {
+      useNativeDriver: props.useNativeAnimations
     });
-    _defineProperty(this, "onHandlerStateChange", ev => {
-      if (ev.nativeEvent.oldState === State.ACTIVE) {
-        this.handleRelease(ev);
-      }
+  }
+  shouldComponentUpdate(props, state) {
+    if (this.props.friction !== props.friction || this.props.overshootLeft !== props.overshootLeft || this.props.overshootRight !== props.overshootRight || this.props.overshootFriction !== props.overshootFriction || this.state.leftWidth !== state.leftWidth || this.state.rightOffset !== state.rightOffset || this.state.rowWidth !== state.rowWidth) {
+      this.updateAnimatedEvent(props, state);
+    }
+    return true;
+  }
+  updateAnimatedEvent = (props, state) => {
+    const {
+      friction,
+      overshootFriction
+    } = props;
+    const {
+      dragX,
+      rowTranslation,
+      leftWidth = 0,
+      rowWidth = 0
+    } = state;
+    const {
+      rightOffset = rowWidth
+    } = state;
+    const rightWidth = Math.max(0, rowWidth - rightOffset);
+    const {
+      overshootLeft = leftWidth > 0,
+      overshootRight = rightWidth > 0
+    } = props;
+    const transX = Animated.add(rowTranslation, dragX.interpolate({
+      inputRange: [0, friction],
+      outputRange: [0, 1]
+    })).interpolate({
+      inputRange: [-rightWidth - 1, -rightWidth, leftWidth, leftWidth + 1],
+      outputRange: [-rightWidth - (overshootRight ? 1 / overshootFriction : 0), -rightWidth, leftWidth, leftWidth + (overshootLeft ? 1 / overshootFriction : 0)]
     });
-    _defineProperty(this, "handleRelease", ev => {
+    this.transX = transX;
+    this.showLeftAction = leftWidth > 0 ? transX.interpolate({
+      inputRange: [-1, 0, leftWidth],
+      outputRange: [0, 0, 1]
+    }) : new Animated.Value(0);
+    this.leftActionTranslate = this.showLeftAction.interpolate({
+      inputRange: [0, Number.MIN_VALUE],
+      outputRange: [-10000, 0],
+      extrapolate: 'clamp'
+    });
+    this.showRightAction = rightWidth > 0 ? transX.interpolate({
+      inputRange: [-rightWidth, 0, 1],
+      outputRange: [1, 0, 0]
+    }) : new Animated.Value(0);
+    this.rightActionTranslate = this.showRightAction.interpolate({
+      inputRange: [0, Number.MIN_VALUE],
+      outputRange: [-10000, 0],
+      extrapolate: 'clamp'
+    });
+  };
+  onTapHandlerStateChange = ({
+    nativeEvent
+  }) => {
+    if (nativeEvent.oldState === State.ACTIVE) {
+      this.close();
+    }
+  };
+  onHandlerStateChange = ev => {
+    if (ev.nativeEvent.oldState === State.ACTIVE) {
+      this.handleRelease(ev);
+    }
+    if (ev.nativeEvent.state === State.ACTIVE) {
       const {
         velocityX,
         translationX: dragX
       } = ev.nativeEvent;
       const {
-        leftWidth = 0,
-        rowWidth = 0,
         rowState
       } = this.state;
       const {
-        rightOffset = rowWidth
-      } = this.state;
-      const rightWidth = rowWidth - rightOffset;
-      const {
-        friction,
-        leftThreshold = leftWidth / 2,
-        rightThreshold = rightWidth / 2
+        friction
       } = this.props;
-      const startOffsetX = this.currentOffset() + dragX / friction;
       const translationX = (dragX + DRAG_TOSS * velocityX) / friction;
-      let toValue = 0;
+      const direction = rowState === -1 ? 'right' : rowState === 1 ? 'left' : translationX > 0 ? 'left' : 'right';
       if (rowState === 0) {
-        if (translationX > leftThreshold) {
-          toValue = leftWidth;
-        } else if (translationX < -rightThreshold) {
-          toValue = -rightWidth;
-        }
-      } else if (rowState === 1) {
-        // swiped to left
-        if (translationX > -leftThreshold) {
-          toValue = leftWidth;
-        }
+        this.props.onSwipeableOpenStartDrag?.(direction);
       } else {
-        // swiped to right
-        if (translationX < rightThreshold) {
-          toValue = -rightWidth;
-        }
+        this.props.onSwipeableCloseStartDrag?.(direction);
       }
-      this.animateRow(startOffsetX, toValue, velocityX / friction);
-    });
-    _defineProperty(this, "animateRow", (fromValue, toValue, velocityX) => {
-      const {
-        dragX,
-        rowTranslation
-      } = this.state;
-      dragX.setValue(0);
-      rowTranslation.setValue(fromValue);
-      this.setState({
-        rowState: Math.sign(toValue)
-      });
-      Animated.spring(rowTranslation, {
-        restSpeedThreshold: 1.7,
-        restDisplacementThreshold: 0.4,
-        velocity: velocityX,
-        bounciness: 0,
-        toValue,
-        useNativeDriver: this.props.useNativeAnimations,
-        ...this.props.animationOptions
-      }).start(({
-        finished
-      }) => {
-        if (finished) {
-          if (toValue > 0) {
-            var _this$props$onSwipeab, _this$props, _this$props$onSwipeab2, _this$props2;
-            (_this$props$onSwipeab = (_this$props = this.props).onSwipeableLeftOpen) === null || _this$props$onSwipeab === void 0 || _this$props$onSwipeab.call(_this$props);
-            (_this$props$onSwipeab2 = (_this$props2 = this.props).onSwipeableOpen) === null || _this$props$onSwipeab2 === void 0 || _this$props$onSwipeab2.call(_this$props2, 'left', this);
-          } else if (toValue < 0) {
-            var _this$props$onSwipeab3, _this$props3, _this$props$onSwipeab4, _this$props4;
-            (_this$props$onSwipeab3 = (_this$props3 = this.props).onSwipeableRightOpen) === null || _this$props$onSwipeab3 === void 0 || _this$props$onSwipeab3.call(_this$props3);
-            (_this$props$onSwipeab4 = (_this$props4 = this.props).onSwipeableOpen) === null || _this$props$onSwipeab4 === void 0 || _this$props$onSwipeab4.call(_this$props4, 'right', this);
-          } else {
-            var _this$props$onSwipeab5, _this$props5;
-            const closingDirection = fromValue > 0 ? 'left' : 'right';
-            (_this$props$onSwipeab5 = (_this$props5 = this.props).onSwipeableClose) === null || _this$props$onSwipeab5 === void 0 || _this$props$onSwipeab5.call(_this$props5, closingDirection, this);
-          }
-        }
-      });
-      if (toValue > 0) {
-        var _this$props$onSwipeab6, _this$props6, _this$props$onSwipeab7, _this$props7;
-        (_this$props$onSwipeab6 = (_this$props6 = this.props).onSwipeableLeftWillOpen) === null || _this$props$onSwipeab6 === void 0 || _this$props$onSwipeab6.call(_this$props6);
-        (_this$props$onSwipeab7 = (_this$props7 = this.props).onSwipeableWillOpen) === null || _this$props$onSwipeab7 === void 0 || _this$props$onSwipeab7.call(_this$props7, 'left');
-      } else if (toValue < 0) {
-        var _this$props$onSwipeab8, _this$props8, _this$props$onSwipeab9, _this$props9;
-        (_this$props$onSwipeab8 = (_this$props8 = this.props).onSwipeableRightWillOpen) === null || _this$props$onSwipeab8 === void 0 || _this$props$onSwipeab8.call(_this$props8);
-        (_this$props$onSwipeab9 = (_this$props9 = this.props).onSwipeableWillOpen) === null || _this$props$onSwipeab9 === void 0 || _this$props$onSwipeab9.call(_this$props9, 'right');
-      } else {
-        var _this$props$onSwipeab10, _this$props10;
-        const closingDirection = fromValue > 0 ? 'left' : 'right';
-        (_this$props$onSwipeab10 = (_this$props10 = this.props).onSwipeableWillClose) === null || _this$props$onSwipeab10 === void 0 || _this$props$onSwipeab10.call(_this$props10, closingDirection);
+    }
+  };
+  handleRelease = ev => {
+    const {
+      velocityX,
+      translationX: dragX
+    } = ev.nativeEvent;
+    const {
+      leftWidth = 0,
+      rowWidth = 0,
+      rowState
+    } = this.state;
+    const {
+      rightOffset = rowWidth
+    } = this.state;
+    const rightWidth = rowWidth - rightOffset;
+    const {
+      friction,
+      leftThreshold = leftWidth / 2,
+      rightThreshold = rightWidth / 2
+    } = this.props;
+    const startOffsetX = this.currentOffset() + dragX / friction;
+    const translationX = (dragX + DRAG_TOSS * velocityX) / friction;
+    let toValue = 0;
+    if (rowState === 0) {
+      if (translationX > leftThreshold) {
+        toValue = leftWidth;
+      } else if (translationX < -rightThreshold) {
+        toValue = -rightWidth;
       }
+    } else if (rowState === 1) {
+      // Swiped to left
+      if (translationX > -leftThreshold) {
+        toValue = leftWidth;
+      }
+    } else {
+      // Swiped to right
+      if (translationX < rightThreshold) {
+        toValue = -rightWidth;
+      }
+    }
+    this.animateRow(startOffsetX, toValue, velocityX / friction);
+  };
+  animateRow = (fromValue, toValue, velocityX) => {
+    const {
+      dragX,
+      rowTranslation
+    } = this.state;
+    dragX.setValue(0);
+    rowTranslation.setValue(fromValue);
+    this.setState({
+      rowState: Math.sign(toValue)
     });
-    _defineProperty(this, "onRowLayout", ({
-      nativeEvent
+    Animated.spring(rowTranslation, {
+      restSpeedThreshold: 1.7,
+      restDisplacementThreshold: 0.4,
+      velocity: velocityX,
+      bounciness: 0,
+      toValue,
+      useNativeDriver: this.props.useNativeAnimations,
+      ...this.props.animationOptions
+    }).start(({
+      finished
     }) => {
-      this.setState({
-        rowWidth: nativeEvent.layout.width
-      });
-    });
-    _defineProperty(this, "currentOffset", () => {
-      const {
-        leftWidth = 0,
-        rowWidth = 0,
-        rowState
-      } = this.state;
-      const {
-        rightOffset = rowWidth
-      } = this.state;
-      const rightWidth = rowWidth - rightOffset;
-      if (rowState === 1) {
-        return leftWidth;
-      } else if (rowState === -1) {
-        return -rightWidth;
+      if (finished) {
+        if (toValue > 0) {
+          this.props.onSwipeableLeftOpen?.();
+          this.props.onSwipeableOpen?.('left', this);
+        } else if (toValue < 0) {
+          this.props.onSwipeableRightOpen?.();
+          this.props.onSwipeableOpen?.('right', this);
+        } else {
+          const closingDirection = fromValue > 0 ? 'left' : 'right';
+          this.props.onSwipeableClose?.(closingDirection, this);
+        }
       }
-      return 0;
-    });
-    _defineProperty(this, "close", () => {
-      this.animateRow(this.currentOffset(), 0);
-    });
-    _defineProperty(this, "openLeft", () => {
-      const {
-        leftWidth = 0
-      } = this.state;
-      this.animateRow(this.currentOffset(), leftWidth);
-    });
-    _defineProperty(this, "openRight", () => {
-      const {
-        rowWidth = 0
-      } = this.state;
-      const {
-        rightOffset = rowWidth
-      } = this.state;
-      const rightWidth = rowWidth - rightOffset;
-      this.animateRow(this.currentOffset(), -rightWidth);
     });
-    _defineProperty(this, "reset", () => {
-      const {
-        dragX,
-        rowTranslation
-      } = this.state;
-      dragX.setValue(0);
-      rowTranslation.setValue(0);
-      this.setState({
-        rowState: 0
-      });
-    });
-    const _dragX = new Animated.Value(0);
-    this.state = {
-      dragX: _dragX,
-      rowTranslation: new Animated.Value(0),
-      rowState: 0,
-      leftWidth: undefined,
-      rightOffset: undefined,
-      rowWidth: undefined
-    };
-    this.updateAnimatedEvent(_props, this.state);
-    this.onGestureEvent = Animated.event([{
-      nativeEvent: {
-        translationX: _dragX
-      }
-    }], {
-      useNativeDriver: _props.useNativeAnimations
+    if (toValue > 0) {
+      this.props.onSwipeableLeftWillOpen?.();
+      this.props.onSwipeableWillOpen?.('left');
+    } else if (toValue < 0) {
+      this.props.onSwipeableRightWillOpen?.();
+      this.props.onSwipeableWillOpen?.('right');
+    } else {
+      const closingDirection = fromValue > 0 ? 'left' : 'right';
+      this.props.onSwipeableWillClose?.(closingDirection);
+    }
+  };
+  onRowLayout = ({
+    nativeEvent
+  }) => {
+    this.setState({
+      rowWidth: nativeEvent.layout.width
     });
-  }
-  shouldComponentUpdate(props, state) {
-    if (this.props.friction !== props.friction || this.props.overshootLeft !== props.overshootLeft || this.props.overshootRight !== props.overshootRight || this.props.overshootFriction !== props.overshootFriction || this.state.leftWidth !== state.leftWidth || this.state.rightOffset !== state.rightOffset || this.state.rowWidth !== state.rowWidth) {
-      this.updateAnimatedEvent(props, state);
+  };
+  currentOffset = () => {
+    const {
+      leftWidth = 0,
+      rowWidth = 0,
+      rowState
+    } = this.state;
+    const {
+      rightOffset = rowWidth
+    } = this.state;
+    const rightWidth = rowWidth - rightOffset;
+    if (rowState === 1) {
+      return leftWidth;
+    } else if (rowState === -1) {
+      return -rightWidth;
     }
-    return true;
-  }
+    return 0;
+  };
+  close = () => {
+    this.animateRow(this.currentOffset(), 0);
+  };
+
+  // eslint-disable-next-line @eslint-react/no-unused-class-component-members
+  openLeft = () => {
+    const {
+      leftWidth = 0
+    } = this.state;
+    this.animateRow(this.currentOffset(), leftWidth);
+  };
+
+  // eslint-disable-next-line @eslint-react/no-unused-class-component-members
+  openRight = () => {
+    const {
+      rowWidth = 0
+    } = this.state;
+    const {
+      rightOffset = rowWidth
+    } = this.state;
+    const rightWidth = rowWidth - rightOffset;
+    this.animateRow(this.currentOffset(), -rightWidth);
+  };
+
+  // eslint-disable-next-line @eslint-react/no-unused-class-component-members
+  reset = () => {
+    const {
+      dragX,
+      rowTranslation
+    } = this.state;
+    dragX.setValue(0);
+    rowTranslation.setValue(0);
+    this.setState({
+      rowState: 0
+    });
+  };
   render() {
     const {
       rowState
@@ -266,62 +289,65 @@ export default class Swipeable extends Component {
       dragOffsetFromLeftEdge = 10,
       dragOffsetFromRightEdge = 10
     } = this.props;
-    const left = renderLeftActions && /*#__PURE__*/React.createElement(Animated.View, {
+    const left = renderLeftActions && /*#__PURE__*/_jsxs(Animated.View, {
       style: [styles.leftActions,
-      // all those and below parameters can have ! since they are all
+      // All those and below parameters can have ! since they are all
       // asigned in constructor in `updateAnimatedEvent` but TS cannot spot
       // it for some reason
       {
         transform: [{
           translateX: this.leftActionTranslate
         }]
-      }]
-    }, renderLeftActions(this.showLeftAction, this.transX, this), /*#__PURE__*/React.createElement(View, {
-      onLayout: ({
-        nativeEvent
-      }) => this.setState({
-        leftWidth: nativeEvent.layout.x
-      })
-    }));
-    const right = renderRightActions && /*#__PURE__*/React.createElement(Animated.View, {
+      }],
+      children: [renderLeftActions(this.showLeftAction, this.transX, this), /*#__PURE__*/_jsx(View, {
+        onLayout: ({
+          nativeEvent
+        }) => this.setState({
+          leftWidth: nativeEvent.layout.x
+        })
+      })]
+    });
+    const right = renderRightActions && /*#__PURE__*/_jsxs(Animated.View, {
       style: [styles.rightActions, {
         transform: [{
           translateX: this.rightActionTranslate
         }]
-      }]
-    }, renderRightActions(this.showRightAction, this.transX, this), /*#__PURE__*/React.createElement(View, {
-      onLayout: ({
-        nativeEvent
-      }) => this.setState({
-        rightOffset: nativeEvent.layout.x
-      })
-    }));
-    return /*#__PURE__*/React.createElement(PanGestureHandler, _extends({
-      activeOffsetX: [-dragOffsetFromRightEdge, dragOffsetFromLeftEdge]
-    }, this.props, {
+      }],
+      children: [renderRightActions(this.showRightAction, this.transX, this), /*#__PURE__*/_jsx(View, {
+        onLayout: ({
+          nativeEvent
+        }) => this.setState({
+          rightOffset: nativeEvent.layout.x
+        })
+      })]
+    });
+    return /*#__PURE__*/_jsx(PanGestureHandler, {
+      activeOffsetX: [-dragOffsetFromRightEdge, dragOffsetFromLeftEdge],
+      touchAction: "pan-y",
+      ...this.props,
       onGestureEvent: this.onGestureEvent,
-      onHandlerStateChange: this.onHandlerStateChange
-    }), /*#__PURE__*/React.createElement(Animated.View, {
-      onLayout: this.onRowLayout,
-      style: [styles.container, this.props.containerStyle]
-    }, left, right, /*#__PURE__*/React.createElement(TapGestureHandler, {
-      enabled: rowState !== 0,
-      onHandlerStateChange: this.onTapHandlerStateChange
-    }, /*#__PURE__*/React.createElement(Animated.View, {
-      pointerEvents: rowState === 0 ? 'auto' : 'box-only',
-      style: [{
-        transform: [{
-          translateX: this.transX
-        }]
-      }, this.props.childrenContainerStyle]
-    }, children))));
+      onHandlerStateChange: this.onHandlerStateChange,
+      children: /*#__PURE__*/_jsxs(Animated.View, {
+        onLayout: this.onRowLayout,
+        style: [styles.container, this.props.containerStyle],
+        children: [left, right, /*#__PURE__*/_jsx(TapGestureHandler, {
+          enabled: rowState !== 0,
+          touchAction: "pan-y",
+          onHandlerStateChange: this.onTapHandlerStateChange,
+          children: /*#__PURE__*/_jsx(Animated.View, {
+            pointerEvents: rowState === 0 ? 'auto' : 'box-only',
+            style: [{
+              transform: [{
+                translateX: this.transX
+              }]
+            }, this.props.childrenContainerStyle],
+            children: children
+          })
+        })]
+      })
+    });
   }
 }
-_defineProperty(Swipeable, "defaultProps", {
-  friction: 1,
-  overshootFriction: 1,
-  useNativeAnimations: true
-});
 const styles = StyleSheet.create({
   container: {
     overflow: 'hidden'