react-native-gesture-handler 2.22.1 → 2.23.0

package/lib/module/components/DrawerLayout.js

@@ -1,5 +1,6 @@
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
+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); }
 // This component is based on RN's DrawerLayoutAndroid API
 //
 // It perhaps deserves to be put in a separate repo, but since it relies on
@@ -7,6 +8,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 // decided to keep it here for the time being. It will allow us to move faster
 // and fix issues that may arise in gesture handler library that could be found
 // when using the drawer component
+
 import * as React from 'react';
 import { Component } from 'react';
 import invariant from 'invariant';
@@ -18,22 +20,55 @@ const DRAG_TOSS = 0.05;
 const IDLE = 'Idle';
 const DRAGGING = 'Dragging';
 const SETTLING = 'Settling';
+
+/**
+ * @deprecated DrawerLayout is deprecated. Use Reanimated version of DrawerLayout instead.
+ */
+
+/**
+ * @deprecated DrawerLayout is deprecated. Use Reanimated version of DrawerLayout instead.
+ */
+
+/**
+ * @deprecated DrawerLayout is deprecated. Use Reanimated version of DrawerLayout instead.
+ */
+
+/**
+ * @deprecated DrawerLayout is deprecated. Use Reanimated version of DrawerLayout instead.
+ */
+
+/**
+ * @deprecated DrawerLayout is deprecated. Use Reanimated version of DrawerLayout instead.
+ */
+
+// 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 DrawerLayout is deprecated. Use Reanimated version of DrawerLayout instead.
+ */
+
+/**
+ * @deprecated DrawerLayout is deprecated. Use Reanimated version of DrawerLayout instead.
+ */
+
+/**
+ * @deprecated DrawerLayout is deprecated. Use Reanimated version of DrawerLayout instead.
+ */
+
+/**
+ * @deprecated use Reanimated version of DrawerLayout instead
+ */
 export default class DrawerLayout extends Component {
   constructor(_props) {
     super(_props);
-
     _defineProperty(this, "openValue", void 0);
-
     _defineProperty(this, "onGestureEvent", void 0);
-
     _defineProperty(this, "accessibilityIsModalView", /*#__PURE__*/React.createRef());
-
     _defineProperty(this, "pointerEventsView", /*#__PURE__*/React.createRef());
-
     _defineProperty(this, "panGestureHandler", /*#__PURE__*/React.createRef());
-
     _defineProperty(this, "drawerShown", false);
-
     _defineProperty(this, "updateAnimatedEvent", (props, state) => {
       // Event definition is based on
       const {
@@ -49,7 +84,6 @@ export default class DrawerLayout extends Component {
       } = state;
       let dragX = dragXValue;
       let touchX = touchXValue;
-
       if (drawerPosition !== 'left') {
         // Most of the code is written in a way to handle left-side drawer. In
         // order to handle right-side drawer the only thing we need to do is to
@@ -58,13 +92,13 @@ export default class DrawerLayout extends Component {
         // calulcated by subtracing real touchX from the width of the container
         // (such that when touch happens at the right edge the value is simply 0)
         dragX = Animated.multiply(new Animated.Value(-1), dragXValue); // TODO(TS): (for all "as" in this file) make sure we can map this
-
         touchX = Animated.add(new Animated.Value(containerWidth), Animated.multiply(new Animated.Value(-1), touchXValue)); // TODO(TS): make sure we can map this;
-
         touchXValue.setValue(containerWidth);
       } else {
         touchXValue.setValue(0);
-      } // While closing the drawer when user starts gesture outside of its area (in greyed
+      }
+
+      // While closing the drawer when user starts gesture outside of its area (in greyed
       // out part of the window), we want the drawer to follow only once finger reaches the
       // edge of the drawer.
       // E.g. on the diagram below drawer is illustrate by X signs and the greyed out area by
@@ -89,10 +123,7 @@ export default class DrawerLayout extends Component {
       //
       // This is used only when drawerType is "front"
       //
-
-
       let translationX = dragX;
-
       if (drawerType === 'front') {
         const startPositionX = Animated.add(touchX, Animated.multiply(new Animated.Value(-1), dragX));
         const dragOffsetFromOnStartPosition = startPositionX.interpolate({
@@ -101,7 +132,6 @@ export default class DrawerLayout extends Component {
         });
         translationX = Animated.add(dragX, dragOffsetFromOnStartPosition); // TODO: as above
       }
-
       this.openValue = Animated.add(translationX, drawerTranslation).interpolate({
         inputRange: [0, drawerWidth],
         outputRange: [0, 1],
@@ -110,17 +140,14 @@ export default class DrawerLayout extends Component {
       const gestureOptions = {
         useNativeDriver: props.useNativeAnimations
       };
-
       if (this.props.onDrawerSlide) {
         gestureOptions.listener = ev => {
           var _this$props$onDrawerS, _this$props;
-
           const translationX = Math.floor(Math.abs(ev.nativeEvent.translationX));
           const position = translationX / this.state.containerWidth;
-          (_this$props$onDrawerS = (_this$props = this.props).onDrawerSlide) === null || _this$props$onDrawerS === void 0 ? void 0 : _this$props$onDrawerS.call(_this$props, position);
+          (_this$props$onDrawerS = (_this$props = this.props).onDrawerSlide) === null || _this$props$onDrawerS === void 0 || _this$props$onDrawerS.call(_this$props, position);
         };
       }
-
       this.onGestureEvent = Animated.event([{
         nativeEvent: {
           translationX: dragXValue,
@@ -128,7 +155,6 @@ export default class DrawerLayout extends Component {
         }
       }], gestureOptions);
     });
-
     _defineProperty(this, "handleContainerLayout", ({
       nativeEvent
     }) => {
@@ -136,13 +162,10 @@ export default class DrawerLayout extends Component {
         containerWidth: nativeEvent.layout.width
       });
     });
-
     _defineProperty(this, "emitStateChanged", (newState, drawerWillShow) => {
       var _this$props$onDrawerS2, _this$props2;
-
-      (_this$props$onDrawerS2 = (_this$props2 = this.props).onDrawerStateChanged) === null || _this$props$onDrawerS2 === void 0 ? void 0 : _this$props$onDrawerS2.call(_this$props2, newState, drawerWillShow);
+      (_this$props$onDrawerS2 = (_this$props2 = this.props).onDrawerStateChanged) === null || _this$props$onDrawerS2 === void 0 || _this$props$onDrawerS2.call(_this$props2, newState, drawerWillShow);
     });
-
     _defineProperty(this, "openingHandlerStateChange", ({
       nativeEvent
     }) => {
@@ -155,17 +178,14 @@ export default class DrawerLayout extends Component {
         this.setState({
           drawerState: DRAGGING
         });
-
         if (this.props.keyboardDismissMode === 'on-drag') {
           Keyboard.dismiss();
         }
-
         if (this.props.hideStatusBar) {
           StatusBar.setHidden(true, this.props.statusBarAnimation || 'slide');
         }
       }
     });
-
     _defineProperty(this, "onTapHandlerStateChange", ({
       nativeEvent
     }) => {
@@ -173,7 +193,6 @@ export default class DrawerLayout extends Component {
         this.closeDrawer();
       }
     });
-
     _defineProperty(this, "handleRelease", ({
       nativeEvent
     }) => {
@@ -190,7 +209,6 @@ export default class DrawerLayout extends Component {
         velocityX,
         x: touchX
       } = nativeEvent;
-
       if (drawerPosition !== 'left') {
         // See description in _updateAnimatedEvent about why events are flipped
         // for right-side drawer
@@ -198,33 +216,27 @@ export default class DrawerLayout extends Component {
         touchX = containerWidth - touchX;
         velocityX = -velocityX;
       }
-
       const gestureStartX = touchX - dragX;
       let dragOffsetBasedOnStart = 0;
-
       if (drawerType === 'front') {
         dragOffsetBasedOnStart = gestureStartX > drawerWidth ? gestureStartX - drawerWidth : 0;
       }
-
       const startOffsetX = dragX + dragOffsetBasedOnStart + (this.drawerShown ? drawerWidth : 0);
       const projOffsetX = startOffsetX + DRAG_TOSS * velocityX;
       const shouldOpen = projOffsetX > drawerWidth / 2;
-
       if (shouldOpen) {
         this.animateDrawer(startOffsetX, drawerWidth, velocityX);
       } else {
         this.animateDrawer(startOffsetX, 0, velocityX);
       }
     });
-
     _defineProperty(this, "updateShowing", showing => {
       var _this$accessibilityIs, _this$pointerEventsVi, _this$panGestureHandl;
-
       this.drawerShown = showing;
-      (_this$accessibilityIs = this.accessibilityIsModalView.current) === null || _this$accessibilityIs === void 0 ? void 0 : _this$accessibilityIs.setNativeProps({
+      (_this$accessibilityIs = this.accessibilityIsModalView.current) === null || _this$accessibilityIs === void 0 || _this$accessibilityIs.setNativeProps({
         accessibilityViewIsModal: showing
       });
-      (_this$pointerEventsVi = this.pointerEventsView.current) === null || _this$pointerEventsVi === void 0 ? void 0 : _this$pointerEventsVi.setNativeProps({
+      (_this$pointerEventsVi = this.pointerEventsView.current) === null || _this$pointerEventsVi === void 0 || _this$pointerEventsVi.setNativeProps({
         pointerEvents: showing ? 'auto' : 'none'
       });
       const {
@@ -232,35 +244,32 @@ export default class DrawerLayout extends Component {
         minSwipeDistance,
         edgeWidth
       } = this.props;
-      const fromLeft = drawerPosition === 'left'; // gestureOrientation is 1 if the expected gesture is from left to right and
+      const fromLeft = drawerPosition === 'left';
+      // gestureOrientation is 1 if the expected gesture is from left to right and
       // -1 otherwise e.g. when drawer is on the left and is closed we expect left
       // to right gesture, thus orientation will be 1.
-
-      const gestureOrientation = (fromLeft ? 1 : -1) * (this.drawerShown ? -1 : 1); // When drawer is closed we want the hitSlop to be horizontally shorter than
+      const gestureOrientation = (fromLeft ? 1 : -1) * (this.drawerShown ? -1 : 1);
+      // When drawer is closed we want the hitSlop to be horizontally shorter than
       // the container size by the value of SLOP. This will make it only activate
       // when gesture happens not further than SLOP away from the edge
-
       const hitSlop = fromLeft ? {
         left: 0,
         width: showing ? undefined : edgeWidth
       } : {
         right: 0,
         width: showing ? undefined : edgeWidth
-      }; // @ts-ignore internal API, maybe could be fixed in handler types
-
-      (_this$panGestureHandl = this.panGestureHandler.current) === null || _this$panGestureHandl === void 0 ? void 0 : _this$panGestureHandl.setNativeProps({
+      };
+      // @ts-ignore internal API, maybe could be fixed in handler types
+      (_this$panGestureHandl = this.panGestureHandler.current) === null || _this$panGestureHandl === void 0 || _this$panGestureHandl.setNativeProps({
         hitSlop,
         activeOffsetX: gestureOrientation * minSwipeDistance
       });
     });
-
     _defineProperty(this, "animateDrawer", (fromValue, toValue, velocity, speed) => {
       this.state.dragX.setValue(0);
       this.state.touchX.setValue(this.props.drawerPosition === 'left' ? 0 : this.state.containerWidth);
-
       if (fromValue != null) {
         let nextFramePosition = fromValue;
-
         if (this.props.useNativeAnimations) {
           // When using native driver, we predict the next position of the
           // animation because it takes one frame of a roundtrip to pass RELEASE
@@ -272,21 +281,17 @@ export default class DrawerLayout extends Component {
             nextFramePosition = Math.max(fromValue + velocity / 60.0, toValue);
           }
         }
-
         this.state.drawerTranslation.setValue(nextFramePosition);
       }
-
       const willShow = toValue !== 0;
       this.updateShowing(willShow);
       this.emitStateChanged(SETTLING, willShow);
       this.setState({
         drawerState: SETTLING
       });
-
       if (this.props.hideStatusBar) {
         StatusBar.setHidden(willShow, this.props.statusBarAnimation || 'slide');
       }
-
       Animated.spring(this.state.drawerTranslation, {
         velocity,
         bounciness: 0,
@@ -301,7 +306,6 @@ export default class DrawerLayout extends Component {
           this.setState({
             drawerOpened: willShow
           });
-
           if (this.state.drawerState !== DRAGGING) {
             // It's possilbe that user started drag while the drawer
             // was settling, don't override state in this case
@@ -309,47 +313,42 @@ export default class DrawerLayout extends Component {
               drawerState: IDLE
             });
           }
-
           if (willShow) {
             var _this$props$onDrawerO, _this$props3;
-
-            (_this$props$onDrawerO = (_this$props3 = this.props).onDrawerOpen) === null || _this$props$onDrawerO === void 0 ? void 0 : _this$props$onDrawerO.call(_this$props3);
+            (_this$props$onDrawerO = (_this$props3 = this.props).onDrawerOpen) === null || _this$props$onDrawerO === void 0 || _this$props$onDrawerO.call(_this$props3);
           } else {
             var _this$props$onDrawerC, _this$props4;
-
-            (_this$props$onDrawerC = (_this$props4 = this.props).onDrawerClose) === null || _this$props$onDrawerC === void 0 ? void 0 : _this$props$onDrawerC.call(_this$props4);
+            (_this$props$onDrawerC = (_this$props4 = this.props).onDrawerClose) === null || _this$props$onDrawerC === void 0 || _this$props$onDrawerC.call(_this$props4);
           }
         }
       });
     });
-
     _defineProperty(this, "openDrawer", (options = {}) => {
-      this.animateDrawer( // TODO: decide if it should be null or undefined is the proper value
-      undefined, this.props.drawerWidth, options.velocity ? options.velocity : 0, options.speed); // We need to force the update, otherwise the overlay is not rerendered and
-      // it would not be clickable
+      this.animateDrawer(
+      // TODO: decide if it should be null or undefined is the proper value
+      undefined, this.props.drawerWidth, options.velocity ? options.velocity : 0, options.speed);
 
+      // We need to force the update, otherwise the overlay is not rerendered and
+      // it would not be clickable
       this.forceUpdate();
     });
-
     _defineProperty(this, "closeDrawer", (options = {}) => {
       // TODO: decide if it should be null or undefined is the proper value
-      this.animateDrawer(undefined, 0, options.velocity ? options.velocity : 0, options.speed); // We need to force the update, otherwise the overlay is not rerendered and
-      // it would be still clickable
+      this.animateDrawer(undefined, 0, options.velocity ? options.velocity : 0, options.speed);
 
+      // We need to force the update, otherwise the overlay is not rerendered and
+      // it would be still clickable
       this.forceUpdate();
     });
-
     _defineProperty(this, "renderOverlay", () => {
       /* Overlay styles */
       invariant(this.openValue, 'should be set');
       let overlayOpacity;
-
       if (this.state.drawerState !== IDLE) {
         overlayOpacity = this.openValue;
       } else {
         overlayOpacity = this.state.drawerOpened ? 1 : 0;
       }
-
       const dynamicOverlayStyles = {
         opacity: overlayOpacity,
         backgroundColor: this.props.overlayColor
@@ -362,7 +361,6 @@ export default class DrawerLayout extends Component {
         style: [styles.overlay, dynamicOverlayStyles]
       }));
     });
-
     _defineProperty(this, "renderDrawer", () => {
       const {
         drawerBackgroundColor,
@@ -374,11 +372,12 @@ export default class DrawerLayout extends Component {
       } = this.props;
       const fromLeft = drawerPosition === 'left';
       const drawerSlide = drawerType !== 'back';
-      const containerSlide = drawerType !== 'front'; // We rely on row and row-reverse flex directions to position the drawer
+      const containerSlide = drawerType !== 'front';
+
+      // We rely on row and row-reverse flex directions to position the drawer
       // properly. Apparently for RTL these are flipped which requires us to use
       // the opposite setting for the drawer to appear from left or right
       // according to the drawerPosition prop
-
       const reverseContentDirection = I18nManager.isRTL ? fromLeft : !fromLeft;
       const dynamicDrawerStyles = {
         backgroundColor: drawerBackgroundColor,
@@ -387,7 +386,6 @@ export default class DrawerLayout extends Component {
       const openValue = this.openValue;
       invariant(openValue, 'should be set');
       let containerStyles;
-
       if (containerSlide) {
         const containerTranslateX = openValue.interpolate({
           inputRange: [0, 1],
@@ -400,12 +398,9 @@ export default class DrawerLayout extends Component {
           }]
         };
       }
-
       let drawerTranslateX = 0;
-
       if (drawerSlide) {
         const closedDrawerOffset = fromLeft ? -drawerWidth : drawerWidth;
-
         if (this.state.drawerState !== IDLE) {
           drawerTranslateX = openValue.interpolate({
             inputRange: [0, 1],
@@ -416,7 +411,6 @@ export default class DrawerLayout extends Component {
           drawerTranslateX = this.state.drawerOpened ? 0 : closedDrawerOffset;
         }
       }
-
       const drawerStyles = {
         transform: [{
           translateX: drawerTranslateX
@@ -438,22 +432,16 @@ export default class DrawerLayout extends Component {
         style: dynamicDrawerStyles
       }, this.props.renderNavigationView(this.openValue))));
     });
-
     _defineProperty(this, "setPanGestureRef", ref => {
       var _this$props$onGesture, _this$props5;
-
       // TODO(TS): make sure it is OK taken from
       // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065#issuecomment-596081842
       this.panGestureHandler.current = ref;
-      (_this$props$onGesture = (_this$props5 = this.props).onGestureRef) === null || _this$props$onGesture === void 0 ? void 0 : _this$props$onGesture.call(_this$props5, ref);
+      (_this$props$onGesture = (_this$props5 = this.props).onGestureRef) === null || _this$props$onGesture === void 0 || _this$props$onGesture.call(_this$props5, ref);
     });
-
     const _dragX = new Animated.Value(0);
-
     const _touchX = new Animated.Value(0);
-
     const _drawerTranslation = new Animated.Value(0);
-
     this.state = {
       dragX: _dragX,
       touchX: _touchX,
@@ -464,15 +452,12 @@ export default class DrawerLayout extends Component {
     };
     this.updateAnimatedEvent(_props, this.state);
   }
-
   shouldComponentUpdate(props, state) {
     if (this.props.drawerPosition !== props.drawerPosition || this.props.drawerWidth !== props.drawerWidth || this.props.drawerType !== props.drawerType || this.state.containerWidth !== state.containerWidth) {
       this.updateAnimatedEvent(props, state);
     }
-
     return true;
   }
-
   render() {
     const {
       drawerPosition,
@@ -480,14 +465,16 @@ export default class DrawerLayout extends Component {
       edgeWidth,
       minSwipeDistance
     } = this.props;
-    const fromLeft = drawerPosition === 'left'; // gestureOrientation is 1 if the expected gesture is from left to right and
+    const fromLeft = drawerPosition === 'left';
+
+    // gestureOrientation is 1 if the expected gesture is from left to right and
     // -1 otherwise e.g. when drawer is on the left and is closed we expect left
     // to right gesture, thus orientation will be 1.
+    const gestureOrientation = (fromLeft ? 1 : -1) * (this.drawerShown ? -1 : 1);
 
-    const gestureOrientation = (fromLeft ? 1 : -1) * (this.drawerShown ? -1 : 1); // When drawer is closed we want the hitSlop to be horizontally shorter than
+    // When drawer is closed we want the hitSlop to be horizontally shorter than
     // the container size by the value of SLOP. This will make it only activate
     // when gesture happens not further than SLOP away from the edge
-
     const hitSlop = fromLeft ? {
       left: 0,
       width: this.drawerShown ? undefined : edgeWidth
@@ -495,7 +482,8 @@ export default class DrawerLayout extends Component {
       right: 0,
       width: this.drawerShown ? undefined : edgeWidth
     };
-    return /*#__PURE__*/React.createElement(PanGestureHandler // @ts-ignore could be fixed in handler types
+    return /*#__PURE__*/React.createElement(PanGestureHandler
+    // @ts-ignore could be fixed in handler types
     , {
       userSelect: this.props.userSelect,
       activeCursor: this.props.activeCursor,
@@ -511,9 +499,7 @@ export default class DrawerLayout extends Component {
       enabled: drawerLockMode !== 'locked-closed' && drawerLockMode !== 'locked-open'
     }, this.renderDrawer());
   }
-
 }
-
 _defineProperty(DrawerLayout, "defaultProps", {
   drawerWidth: 200,
   drawerPosition: 'left',
@@ -525,28 +511,30 @@ _defineProperty(DrawerLayout, "defaultProps", {
   drawerLockMode: 'unlocked',
   enableTrackpadTwoFingerGesture: false
 });
-
 _defineProperty(DrawerLayout, "positions", {
   Left: 'left',
   Right: 'right'
 });
-
 const styles = StyleSheet.create({
-  drawerContainer: { ...StyleSheet.absoluteFillObject,
+  drawerContainer: {
+    ...StyleSheet.absoluteFillObject,
     zIndex: 1001,
     flexDirection: 'row'
   },
-  containerInFront: { ...StyleSheet.absoluteFillObject,
+  containerInFront: {
+    ...StyleSheet.absoluteFillObject,
     zIndex: 1002
   },
-  containerOnBack: { ...StyleSheet.absoluteFillObject
+  containerOnBack: {
+    ...StyleSheet.absoluteFillObject
   },
   main: {
     flex: 1,
     zIndex: 0,
     overflow: 'hidden'
   },
-  overlay: { ...StyleSheet.absoluteFillObject,
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
     zIndex: 1000
   }
 });