@react-native-oh-tpl/react-native-gesture-handler 2.12.1-0.0.1 → 2.12.6-2

package/lib/module/components/DrawerLayout.js

@@ -1,551 +0,0 @@
-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; }
-
-// This component is based on RN's DrawerLayoutAndroid API
-//
-// It perhaps deserves to be put in a separate repo, but since it relies on
-// react-native-gesture-handler library which isn't very popular at the moment I
-// 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';
-import { Animated, StyleSheet, View, Keyboard, StatusBar, I18nManager } from 'react-native';
-import { PanGestureHandler } from '../handlers/PanGestureHandler';
-import { TapGestureHandler } from '../handlers/TapGestureHandler';
-import { State } from '../State';
-const DRAG_TOSS = 0.05;
-const IDLE = 'Idle';
-const DRAGGING = 'Dragging';
-const SETTLING = 'Settling';
-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 {
-        drawerPosition,
-        drawerWidth,
-        drawerType
-      } = props;
-      const {
-        dragX: dragXValue,
-        touchX: touchXValue,
-        drawerTranslation,
-        containerWidth
-      } = 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
-        // reverse events coming from gesture handler in a way they emulate
-        // left-side drawer gestures. E.g. dragX is simply -dragX, and touchX is
-        // 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
-      // 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
-      // dots. The touch gesture starts at '*' and moves left, touch path is indicated by
-      // an arrow pointing left
-      // 1) +---------------+ 2) +---------------+ 3) +---------------+ 4) +---------------+
-      //    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXX|.........|
-      //    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXX|.........|
-      //    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXX|.........|
-      //    |XXXXXXXX|......|    |XXXXXXXX|.<-*..|    |XXXXXXXX|<--*..|    |XXXXX|<-----*..|
-      //    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXX|.........|
-      //    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXX|.........|
-      //    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXX|.........|
-      //    +---------------+    +---------------+    +---------------+    +---------------+
-      //
-      // For the above to work properly we define animated value that will keep
-      // start position of the gesture. Then we use that value to calculate how
-      // much we need to subtract from the dragX. If the gesture started on the
-      // greyed out area we take the distance from the edge of the drawer to the
-      // start position. Otherwise we don't subtract at all and the drawer be
-      // pulled back as soon as you start the pan.
-      //
-      // 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({
-          inputRange: [drawerWidth - 1, drawerWidth, drawerWidth + 1],
-          outputRange: [0, 0, 1]
-        });
-        translationX = Animated.add(dragX, dragOffsetFromOnStartPosition); // TODO: as above
-      }
-
-      this.openValue = Animated.add(translationX, drawerTranslation).interpolate({
-        inputRange: [0, drawerWidth],
-        outputRange: [0, 1],
-        extrapolate: 'clamp'
-      });
-      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.onGestureEvent = Animated.event([{
-        nativeEvent: {
-          translationX: dragXValue,
-          x: touchXValue
-        }
-      }], gestureOptions);
-    });
-
-    _defineProperty(this, "handleContainerLayout", ({
-      nativeEvent
-    }) => {
-      this.setState({
-        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);
-    });
-
-    _defineProperty(this, "openingHandlerStateChange", ({
-      nativeEvent
-    }) => {
-      if (nativeEvent.oldState === State.ACTIVE) {
-        this.handleRelease({
-          nativeEvent
-        });
-      } else if (nativeEvent.state === State.ACTIVE) {
-        this.emitStateChanged(DRAGGING, false);
-        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
-    }) => {
-      if (this.drawerShown && nativeEvent.oldState === State.ACTIVE && this.props.drawerLockMode !== 'locked-open') {
-        this.closeDrawer();
-      }
-    });
-
-    _defineProperty(this, "handleRelease", ({
-      nativeEvent
-    }) => {
-      const {
-        drawerWidth,
-        drawerPosition,
-        drawerType
-      } = this.props;
-      const {
-        containerWidth
-      } = this.state;
-      let {
-        translationX: dragX,
-        velocityX,
-        x: touchX
-      } = nativeEvent;
-
-      if (drawerPosition !== 'left') {
-        // See description in _updateAnimatedEvent about why events are flipped
-        // for right-side drawer
-        dragX = -dragX;
-        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({
-        accessibilityViewIsModal: showing
-      });
-      (_this$pointerEventsVi = this.pointerEventsView.current) === null || _this$pointerEventsVi === void 0 ? void 0 : _this$pointerEventsVi.setNativeProps({
-        pointerEvents: showing ? 'auto' : 'none'
-      });
-      const {
-        drawerPosition,
-        minSwipeDistance,
-        edgeWidth
-      } = this.props;
-      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
-      // 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({
-        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
-          // event from native driver to JS before we can start animating. Without
-          // it, it is more noticable that the frame is dropped.
-          if (fromValue < toValue && velocity > 0) {
-            nextFramePosition = Math.min(fromValue + velocity / 60.0, toValue);
-          } else if (fromValue > toValue && velocity < 0) {
-            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,
-        toValue,
-        useNativeDriver: this.props.useNativeAnimations,
-        speed: speed !== null && speed !== void 0 ? speed : undefined
-      }).start(({
-        finished
-      }) => {
-        if (finished) {
-          this.emitStateChanged(IDLE, willShow);
-          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
-            this.setState({
-              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);
-          } 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);
-          }
-        }
-      });
-    });
-
-    _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.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.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
-      };
-      return /*#__PURE__*/React.createElement(TapGestureHandler, {
-        onHandlerStateChange: this.onTapHandlerStateChange
-      }, /*#__PURE__*/React.createElement(Animated.View, {
-        pointerEvents: this.drawerShown ? 'auto' : 'none',
-        ref: this.pointerEventsView,
-        style: [styles.overlay, dynamicOverlayStyles]
-      }));
-    });
-
-    _defineProperty(this, "renderDrawer", () => {
-      const {
-        drawerBackgroundColor,
-        drawerWidth,
-        drawerPosition,
-        drawerType,
-        drawerContainerStyle,
-        contentContainerStyle
-      } = 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
-      // 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,
-        width: drawerWidth
-      };
-      const openValue = this.openValue;
-      invariant(openValue, 'should be set');
-      let containerStyles;
-
-      if (containerSlide) {
-        const containerTranslateX = openValue.interpolate({
-          inputRange: [0, 1],
-          outputRange: fromLeft ? [0, drawerWidth] : [0, -drawerWidth],
-          extrapolate: 'clamp'
-        });
-        containerStyles = {
-          transform: [{
-            translateX: containerTranslateX
-          }]
-        };
-      }
-
-      let drawerTranslateX = 0;
-
-      if (drawerSlide) {
-        const closedDrawerOffset = fromLeft ? -drawerWidth : drawerWidth;
-
-        if (this.state.drawerState !== IDLE) {
-          drawerTranslateX = openValue.interpolate({
-            inputRange: [0, 1],
-            outputRange: [closedDrawerOffset, 0],
-            extrapolate: 'clamp'
-          });
-        } else {
-          drawerTranslateX = this.state.drawerOpened ? 0 : closedDrawerOffset;
-        }
-      }
-
-      const drawerStyles = {
-        transform: [{
-          translateX: drawerTranslateX
-        }],
-        flexDirection: reverseContentDirection ? 'row-reverse' : 'row'
-      };
-      return /*#__PURE__*/React.createElement(Animated.View, {
-        style: styles.main,
-        onLayout: this.handleContainerLayout
-      }, /*#__PURE__*/React.createElement(Animated.View, {
-        style: [drawerType === 'front' ? styles.containerOnBack : styles.containerInFront, containerStyles, contentContainerStyle],
-        importantForAccessibility: this.drawerShown ? 'no-hide-descendants' : 'yes'
-      }, typeof this.props.children === 'function' ? this.props.children(this.openValue) : this.props.children, this.renderOverlay()), /*#__PURE__*/React.createElement(Animated.View, {
-        pointerEvents: "box-none",
-        ref: this.accessibilityIsModalView,
-        accessibilityViewIsModal: this.drawerShown,
-        style: [styles.drawerContainer, drawerStyles, drawerContainerStyle]
-      }, /*#__PURE__*/React.createElement(View, {
-        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);
-    });
-
-    const _dragX = new Animated.Value(0);
-
-    const _touchX = new Animated.Value(0);
-
-    const _drawerTranslation = new Animated.Value(0);
-
-    this.state = {
-      dragX: _dragX,
-      touchX: _touchX,
-      drawerTranslation: _drawerTranslation,
-      containerWidth: 0,
-      drawerState: IDLE,
-      drawerOpened: false
-    };
-    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,
-      drawerLockMode,
-      edgeWidth,
-      minSwipeDistance
-    } = this.props;
-    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
-    // 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
-    } : {
-      right: 0,
-      width: this.drawerShown ? undefined : edgeWidth
-    };
-    return /*#__PURE__*/React.createElement(PanGestureHandler // @ts-ignore could be fixed in handler types
-    , {
-      userSelect: this.props.userSelect,
-      activeCursor: this.props.activeCursor,
-      ref: this.setPanGestureRef,
-      hitSlop: hitSlop,
-      activeOffsetX: gestureOrientation * minSwipeDistance,
-      failOffsetY: [-15, 15],
-      onGestureEvent: this.onGestureEvent,
-      onHandlerStateChange: this.openingHandlerStateChange,
-      enableTrackpadTwoFingerGesture: this.props.enableTrackpadTwoFingerGesture,
-      enabled: drawerLockMode !== 'locked-closed' && drawerLockMode !== 'locked-open'
-    }, this.renderDrawer());
-  }
-
-}
-
-_defineProperty(DrawerLayout, "defaultProps", {
-  drawerWidth: 200,
-  drawerPosition: 'left',
-  useNativeAnimations: true,
-  drawerType: 'front',
-  edgeWidth: 20,
-  minSwipeDistance: 3,
-  overlayColor: 'rgba(0, 0, 0, 0.7)',
-  drawerLockMode: 'unlocked',
-  enableTrackpadTwoFingerGesture: false
-});
-
-_defineProperty(DrawerLayout, "positions", {
-  Left: 'left',
-  Right: 'right'
-});
-
-const styles = StyleSheet.create({
-  drawerContainer: { ...StyleSheet.absoluteFillObject,
-    zIndex: 1001,
-    flexDirection: 'row'
-  },
-  containerInFront: { ...StyleSheet.absoluteFillObject,
-    zIndex: 1002
-  },
-  containerOnBack: { ...StyleSheet.absoluteFillObject
-  },
-  main: {
-    flex: 1,
-    zIndex: 0,
-    overflow: 'hidden'
-  },
-  overlay: { ...StyleSheet.absoluteFillObject,
-    zIndex: 1000
-  }
-});
-//# sourceMappingURL=DrawerLayout.js.map

package/lib/module/components/DrawerLayout.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["DrawerLayout.tsx"],"names":["React","Component","invariant","Animated","StyleSheet","View","Keyboard","StatusBar","I18nManager","PanGestureHandler","TapGestureHandler","State","DRAG_TOSS","IDLE","DRAGGING","SETTLING","DrawerLayout","constructor","props","createRef","state","drawerPosition","drawerWidth","drawerType","dragX","dragXValue","touchX","touchXValue","drawerTranslation","containerWidth","multiply","Value","add","setValue","translationX","startPositionX","dragOffsetFromOnStartPosition","interpolate","inputRange","outputRange","openValue","extrapolate","gestureOptions","useNativeDriver","useNativeAnimations","onDrawerSlide","listener","ev","Math","floor","abs","nativeEvent","position","onGestureEvent","event","x","setState","layout","width","newState","drawerWillShow","onDrawerStateChanged","oldState","ACTIVE","handleRelease","emitStateChanged","drawerState","keyboardDismissMode","dismiss","hideStatusBar","setHidden","statusBarAnimation","drawerShown","drawerLockMode","closeDrawer","velocityX","gestureStartX","dragOffsetBasedOnStart","startOffsetX","projOffsetX","shouldOpen","animateDrawer","showing","accessibilityIsModalView","current","setNativeProps","accessibilityViewIsModal","pointerEventsView","pointerEvents","minSwipeDistance","edgeWidth","fromLeft","gestureOrientation","hitSlop","left","undefined","right","panGestureHandler","activeOffsetX","fromValue","toValue","velocity","speed","nextFramePosition","min","max","willShow","updateShowing","spring","bounciness","start","finished","drawerOpened","onDrawerOpen","onDrawerClose","options","forceUpdate","overlayOpacity","dynamicOverlayStyles","opacity","backgroundColor","overlayColor","onTapHandlerStateChange","styles","overlay","drawerBackgroundColor","drawerContainerStyle","contentContainerStyle","drawerSlide","containerSlide","reverseContentDirection","isRTL","dynamicDrawerStyles","containerStyles","containerTranslateX","transform","translateX","drawerTranslateX","closedDrawerOffset","drawerStyles","flexDirection","main","handleContainerLayout","containerOnBack","containerInFront","children","renderOverlay","drawerContainer","renderNavigationView","ref","onGestureRef","updateAnimatedEvent","shouldComponentUpdate","render","userSelect","activeCursor","setPanGestureRef","openingHandlerStateChange","enableTrackpadTwoFingerGesture","renderDrawer","Left","Right","create","absoluteFillObject","zIndex","flex","overflow"],"mappings":"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","sourcesContent":["// This component is based on RN's DrawerLayoutAndroid API\r\n//\r\n// It perhaps deserves to be put in a separate repo, but since it relies on\r\n// react-native-gesture-handler library which isn't very popular at the moment I\r\n// decided to keep it here for the time being. It will allow us to move faster\r\n// and fix issues that may arise in gesture handler library that could be found\r\n// when using the drawer component\r\n\r\nimport * as React from 'react';\r\nimport { Component } from 'react';\r\nimport invariant from 'invariant';\r\nimport {\r\n  Animated,\r\n  StyleSheet,\r\n  View,\r\n  Keyboard,\r\n  StatusBar,\r\n  I18nManager,\r\n  StatusBarAnimation,\r\n  StyleProp,\r\n  ViewStyle,\r\n  LayoutChangeEvent,\r\n  NativeSyntheticEvent,\r\n} from 'react-native';\r\n\r\nimport {\r\n  GestureEvent,\r\n  HandlerStateChangeEvent,\r\n  UserSelect,\r\n  ActiveCursor,\r\n} from '../handlers/gestureHandlerCommon';\r\nimport {\r\n  PanGestureHandler,\r\n  PanGestureHandlerEventPayload,\r\n} from '../handlers/PanGestureHandler';\r\nimport {\r\n  TapGestureHandler,\r\n  TapGestureHandlerEventPayload,\r\n} from '../handlers/TapGestureHandler';\r\nimport { State } from '../State';\r\n\r\nconst DRAG_TOSS = 0.05;\r\n\r\nconst IDLE: DrawerState = 'Idle';\r\nconst DRAGGING: DrawerState = 'Dragging';\r\nconst SETTLING: DrawerState = 'Settling';\r\n\r\nexport type DrawerPosition = 'left' | 'right';\r\n\r\nexport type DrawerState = 'Idle' | 'Dragging' | 'Settling';\r\n\r\nexport type DrawerType = 'front' | 'back' | 'slide';\r\n\r\nexport type DrawerLockMode = 'unlocked' | 'locked-closed' | 'locked-open';\r\n\r\nexport type DrawerKeyboardDismissMode = 'none' | 'on-drag';\r\n\r\n// Animated.AnimatedInterpolation has been converted to a generic type\r\n// in @types/react-native 0.70. This way we can maintain compatibility\r\n// with all versions of @types/react-native`\r\ntype AnimatedInterpolation = ReturnType<Animated.Value['interpolate']>;\r\nexport interface DrawerLayoutProps {\r\n  /**\r\n   * This attribute is present in the standard implementation already and is one\r\n   * of the required params. Gesture handler version of DrawerLayout make it\r\n   * possible for the function passed as `renderNavigationView` to take an\r\n   * Animated value as a parameter that indicates the progress of drawer\r\n   * opening/closing animation (progress value is 0 when closed and 1 when\r\n   * opened). This can be used by the drawer component to animated its children\r\n   * while the drawer is opening or closing.\r\n   */\r\n  renderNavigationView: (\r\n    progressAnimatedValue: Animated.Value\r\n  ) => React.ReactNode;\r\n\r\n  drawerPosition?: DrawerPosition;\r\n\r\n  drawerWidth?: number;\r\n\r\n  drawerBackgroundColor?: string;\r\n\r\n  drawerLockMode?: DrawerLockMode;\r\n\r\n  keyboardDismissMode?: DrawerKeyboardDismissMode;\r\n\r\n  /**\r\n   * Called when the drawer is closed.\r\n   */\r\n  onDrawerClose?: () => void;\r\n\r\n  /**\r\n   * Called when the drawer is opened.\r\n   */\r\n  onDrawerOpen?: () => void;\r\n\r\n  /**\r\n   * Called when the status of the drawer changes.\r\n   */\r\n  onDrawerStateChanged?: (\r\n    newState: DrawerState,\r\n    drawerWillShow: boolean\r\n  ) => void;\r\n  useNativeAnimations?: boolean;\r\n\r\n  drawerType?: DrawerType;\r\n\r\n  /**\r\n   * Defines how far from the edge of the content view the gesture should\r\n   * activate.\r\n   */\r\n  edgeWidth?: number;\r\n\r\n  minSwipeDistance?: number;\r\n\r\n  /**\r\n   * When set to true Drawer component will use\r\n   * {@link https://reactnative.dev/docs/statusbar StatusBar} API to hide the OS\r\n   * status bar whenever the drawer is pulled or when its in an \"open\" state.\r\n   */\r\n  hideStatusBar?: boolean;\r\n\r\n  /**\r\n   * @default 'slide'\r\n   *\r\n   * Can be used when hideStatusBar is set to true and will select the animation\r\n   * used for hiding/showing the status bar. See\r\n   * {@link https://reactnative.dev/docs/statusbar StatusBar} documentation for\r\n   * more details\r\n   */\r\n  statusBarAnimation?: StatusBarAnimation;\r\n\r\n  /**\r\n   * @default black\r\n   *\r\n   * Color of a semi-transparent overlay to be displayed on top of the content\r\n   * view when drawer gets open. A solid color should be used as the opacity is\r\n   * added by the Drawer itself and the opacity of the overlay is animated (from\r\n   * 0% to 70%).\r\n   */\r\n  overlayColor?: string;\r\n\r\n  contentContainerStyle?: StyleProp<ViewStyle>;\r\n\r\n  drawerContainerStyle?: StyleProp<ViewStyle>;\r\n\r\n  /**\r\n   * Enables two-finger gestures on supported devices, for example iPads with\r\n   * trackpads. If not enabled the gesture will require click + drag, with\r\n   * `enableTrackpadTwoFingerGesture` swiping with two fingers will also trigger\r\n   * the gesture.\r\n   */\r\n  enableTrackpadTwoFingerGesture?: boolean;\r\n\r\n  onDrawerSlide?: (position: number) => void;\r\n\r\n  onGestureRef?: (ref: PanGestureHandler) => void;\r\n\r\n  // implicit `children` prop has been removed in @types/react^18.0.0\r\n  children?:\r\n    | React.ReactNode\r\n    | ((openValue?: AnimatedInterpolation) => React.ReactNode);\r\n\r\n  /**\r\n   * @default 'none'\r\n   * Defines which userSelect property should be used.\r\n   * Values: 'none'|'text'|'auto'\r\n   */\r\n  userSelect?: UserSelect;\r\n\r\n  /**\r\n   * @default 'auto'\r\n   * Defines which cursor property should be used when gesture activates.\r\n   * Values: see CSS cursor values\r\n   */\r\n  activeCursor?: ActiveCursor;\r\n}\r\n\r\nexport type DrawerLayoutState = {\r\n  dragX: Animated.Value;\r\n  touchX: Animated.Value;\r\n  drawerTranslation: Animated.Value;\r\n  containerWidth: number;\r\n  drawerState: DrawerState;\r\n  drawerOpened: boolean;\r\n};\r\n\r\nexport type DrawerMovementOption = {\r\n  velocity?: number;\r\n  speed?: number;\r\n};\r\nexport default class DrawerLayout extends Component<\r\n  DrawerLayoutProps,\r\n  DrawerLayoutState\r\n> {\r\n  static defaultProps = {\r\n    drawerWidth: 200,\r\n    drawerPosition: 'left',\r\n    useNativeAnimations: true,\r\n    drawerType: 'front',\r\n    edgeWidth: 20,\r\n    minSwipeDistance: 3,\r\n    overlayColor: 'rgba(0, 0, 0, 0.7)',\r\n    drawerLockMode: 'unlocked',\r\n    enableTrackpadTwoFingerGesture: false,\r\n  };\r\n\r\n  constructor(props: DrawerLayoutProps) {\r\n    super(props);\r\n\r\n    const dragX = new Animated.Value(0);\r\n    const touchX = new Animated.Value(0);\r\n    const drawerTranslation = new Animated.Value(0);\r\n\r\n    this.state = {\r\n      dragX,\r\n      touchX,\r\n      drawerTranslation,\r\n      containerWidth: 0,\r\n      drawerState: IDLE,\r\n      drawerOpened: false,\r\n    };\r\n\r\n    this.updateAnimatedEvent(props, this.state);\r\n  }\r\n\r\n  shouldComponentUpdate(props: DrawerLayoutProps, state: DrawerLayoutState) {\r\n    if (\r\n      this.props.drawerPosition !== props.drawerPosition ||\r\n      this.props.drawerWidth !== props.drawerWidth ||\r\n      this.props.drawerType !== props.drawerType ||\r\n      this.state.containerWidth !== state.containerWidth\r\n    ) {\r\n      this.updateAnimatedEvent(props, state);\r\n    }\r\n\r\n    return true;\r\n  }\r\n\r\n  private openValue?: AnimatedInterpolation;\r\n  private onGestureEvent?: (\r\n    event: GestureEvent<PanGestureHandlerEventPayload>\r\n  ) => void;\r\n  private accessibilityIsModalView = React.createRef<View>();\r\n  private pointerEventsView = React.createRef<View>();\r\n  private panGestureHandler = React.createRef<PanGestureHandler | null>();\r\n  private drawerShown = false;\r\n\r\n  static positions = {\r\n    Left: 'left',\r\n    Right: 'right',\r\n  };\r\n\r\n  private updateAnimatedEvent = (\r\n    props: DrawerLayoutProps,\r\n    state: DrawerLayoutState\r\n  ) => {\r\n    // Event definition is based on\r\n    const { drawerPosition, drawerWidth, drawerType } = props;\r\n    const {\r\n      dragX: dragXValue,\r\n      touchX: touchXValue,\r\n      drawerTranslation,\r\n      containerWidth,\r\n    } = state;\r\n\r\n    let dragX = dragXValue;\r\n    let touchX = touchXValue;\r\n\r\n    if (drawerPosition !== 'left') {\r\n      // Most of the code is written in a way to handle left-side drawer. In\r\n      // order to handle right-side drawer the only thing we need to do is to\r\n      // reverse events coming from gesture handler in a way they emulate\r\n      // left-side drawer gestures. E.g. dragX is simply -dragX, and touchX is\r\n      // calulcated by subtracing real touchX from the width of the container\r\n      // (such that when touch happens at the right edge the value is simply 0)\r\n      dragX = Animated.multiply(\r\n        new Animated.Value(-1),\r\n        dragXValue\r\n      ) as Animated.Value; // TODO(TS): (for all \"as\" in this file) make sure we can map this\r\n      touchX = Animated.add(\r\n        new Animated.Value(containerWidth),\r\n        Animated.multiply(new Animated.Value(-1), touchXValue)\r\n      ) as Animated.Value; // TODO(TS): make sure we can map this;\r\n      touchXValue.setValue(containerWidth);\r\n    } else {\r\n      touchXValue.setValue(0);\r\n    }\r\n\r\n    // While closing the drawer when user starts gesture outside of its area (in greyed\r\n    // out part of the window), we want the drawer to follow only once finger reaches the\r\n    // edge of the drawer.\r\n    // E.g. on the diagram below drawer is illustrate by X signs and the greyed out area by\r\n    // dots. The touch gesture starts at '*' and moves left, touch path is indicated by\r\n    // an arrow pointing left\r\n    // 1) +---------------+ 2) +---------------+ 3) +---------------+ 4) +---------------+\r\n    //    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXX|.........|\r\n    //    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXX|.........|\r\n    //    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXX|.........|\r\n    //    |XXXXXXXX|......|    |XXXXXXXX|.<-*..|    |XXXXXXXX|<--*..|    |XXXXX|<-----*..|\r\n    //    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXX|.........|\r\n    //    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXX|.........|\r\n    //    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXX|.........|\r\n    //    +---------------+    +---------------+    +---------------+    +---------------+\r\n    //\r\n    // For the above to work properly we define animated value that will keep\r\n    // start position of the gesture. Then we use that value to calculate how\r\n    // much we need to subtract from the dragX. If the gesture started on the\r\n    // greyed out area we take the distance from the edge of the drawer to the\r\n    // start position. Otherwise we don't subtract at all and the drawer be\r\n    // pulled back as soon as you start the pan.\r\n    //\r\n    // This is used only when drawerType is \"front\"\r\n    //\r\n    let translationX = dragX;\r\n    if (drawerType === 'front') {\r\n      const startPositionX = Animated.add(\r\n        touchX,\r\n        Animated.multiply(new Animated.Value(-1), dragX)\r\n      );\r\n\r\n      const dragOffsetFromOnStartPosition = startPositionX.interpolate({\r\n        inputRange: [drawerWidth! - 1, drawerWidth!, drawerWidth! + 1],\r\n        outputRange: [0, 0, 1],\r\n      });\r\n      translationX = Animated.add(\r\n        dragX,\r\n        dragOffsetFromOnStartPosition\r\n      ) as Animated.Value; // TODO: as above\r\n    }\r\n\r\n    this.openValue = Animated.add(translationX, drawerTranslation).interpolate({\r\n      inputRange: [0, drawerWidth!],\r\n      outputRange: [0, 1],\r\n      extrapolate: 'clamp',\r\n    });\r\n\r\n    const gestureOptions: {\r\n      useNativeDriver: boolean;\r\n      // TODO: make sure it is correct\r\n      listener?: (\r\n        ev: NativeSyntheticEvent<PanGestureHandlerEventPayload>\r\n      ) => void;\r\n    } = {\r\n      useNativeDriver: props.useNativeAnimations!,\r\n    };\r\n\r\n    if (this.props.onDrawerSlide) {\r\n      gestureOptions.listener = (ev) => {\r\n        const translationX = Math.floor(Math.abs(ev.nativeEvent.translationX));\r\n        const position = translationX / this.state.containerWidth;\r\n\r\n        this.props.onDrawerSlide?.(position);\r\n      };\r\n    }\r\n\r\n    this.onGestureEvent = Animated.event(\r\n      [{ nativeEvent: { translationX: dragXValue, x: touchXValue } }],\r\n      gestureOptions\r\n    );\r\n  };\r\n\r\n  private handleContainerLayout = ({ nativeEvent }: LayoutChangeEvent) => {\r\n    this.setState({ containerWidth: nativeEvent.layout.width });\r\n  };\r\n\r\n  private emitStateChanged = (\r\n    newState: DrawerState,\r\n    drawerWillShow: boolean\r\n  ) => {\r\n    this.props.onDrawerStateChanged?.(newState, drawerWillShow);\r\n  };\r\n\r\n  private openingHandlerStateChange = ({\r\n    nativeEvent,\r\n  }: HandlerStateChangeEvent<PanGestureHandlerEventPayload>) => {\r\n    if (nativeEvent.oldState === State.ACTIVE) {\r\n      this.handleRelease({ nativeEvent });\r\n    } else if (nativeEvent.state === State.ACTIVE) {\r\n      this.emitStateChanged(DRAGGING, false);\r\n      this.setState({ drawerState: DRAGGING });\r\n      if (this.props.keyboardDismissMode === 'on-drag') {\r\n        Keyboard.dismiss();\r\n      }\r\n      if (this.props.hideStatusBar) {\r\n        StatusBar.setHidden(true, this.props.statusBarAnimation || 'slide');\r\n      }\r\n    }\r\n  };\r\n\r\n  private onTapHandlerStateChange = ({\r\n    nativeEvent,\r\n  }: HandlerStateChangeEvent<TapGestureHandlerEventPayload>) => {\r\n    if (\r\n      this.drawerShown &&\r\n      nativeEvent.oldState === State.ACTIVE &&\r\n      this.props.drawerLockMode !== 'locked-open'\r\n    ) {\r\n      this.closeDrawer();\r\n    }\r\n  };\r\n\r\n  private handleRelease = ({\r\n    nativeEvent,\r\n  }: HandlerStateChangeEvent<PanGestureHandlerEventPayload>) => {\r\n    const { drawerWidth, drawerPosition, drawerType } = this.props;\r\n    const { containerWidth } = this.state;\r\n    let { translationX: dragX, velocityX, x: touchX } = nativeEvent;\r\n\r\n    if (drawerPosition !== 'left') {\r\n      // See description in _updateAnimatedEvent about why events are flipped\r\n      // for right-side drawer\r\n      dragX = -dragX;\r\n      touchX = containerWidth - touchX;\r\n      velocityX = -velocityX;\r\n    }\r\n\r\n    const gestureStartX = touchX - dragX;\r\n    let dragOffsetBasedOnStart = 0;\r\n\r\n    if (drawerType === 'front') {\r\n      dragOffsetBasedOnStart =\r\n        gestureStartX > drawerWidth! ? gestureStartX - drawerWidth! : 0;\r\n    }\r\n\r\n    const startOffsetX =\r\n      dragX + dragOffsetBasedOnStart + (this.drawerShown ? drawerWidth! : 0);\r\n    const projOffsetX = startOffsetX + DRAG_TOSS * velocityX;\r\n\r\n    const shouldOpen = projOffsetX > drawerWidth! / 2;\r\n\r\n    if (shouldOpen) {\r\n      this.animateDrawer(startOffsetX, drawerWidth!, velocityX);\r\n    } else {\r\n      this.animateDrawer(startOffsetX, 0, velocityX);\r\n    }\r\n  };\r\n\r\n  private updateShowing = (showing: boolean) => {\r\n    this.drawerShown = showing;\r\n    this.accessibilityIsModalView.current?.setNativeProps({\r\n      accessibilityViewIsModal: showing,\r\n    });\r\n    this.pointerEventsView.current?.setNativeProps({\r\n      pointerEvents: showing ? 'auto' : 'none',\r\n    });\r\n    const { drawerPosition, minSwipeDistance, edgeWidth } = this.props;\r\n    const fromLeft = drawerPosition === 'left';\r\n    // gestureOrientation is 1 if the expected gesture is from left to right and\r\n    // -1 otherwise e.g. when drawer is on the left and is closed we expect left\r\n    // to right gesture, thus orientation will be 1.\r\n    const gestureOrientation =\r\n      (fromLeft ? 1 : -1) * (this.drawerShown ? -1 : 1);\r\n    // When drawer is closed we want the hitSlop to be horizontally shorter than\r\n    // the container size by the value of SLOP. This will make it only activate\r\n    // when gesture happens not further than SLOP away from the edge\r\n    const hitSlop = fromLeft\r\n      ? { left: 0, width: showing ? undefined : edgeWidth }\r\n      : { right: 0, width: showing ? undefined : edgeWidth };\r\n    // @ts-ignore internal API, maybe could be fixed in handler types\r\n    this.panGestureHandler.current?.setNativeProps({\r\n      hitSlop,\r\n      activeOffsetX: gestureOrientation * minSwipeDistance!,\r\n    });\r\n  };\r\n\r\n  private animateDrawer = (\r\n    fromValue: number | null | undefined,\r\n    toValue: number,\r\n    velocity: number,\r\n    speed?: number\r\n  ) => {\r\n    this.state.dragX.setValue(0);\r\n    this.state.touchX.setValue(\r\n      this.props.drawerPosition === 'left' ? 0 : this.state.containerWidth\r\n    );\r\n\r\n    if (fromValue != null) {\r\n      let nextFramePosition = fromValue;\r\n      if (this.props.useNativeAnimations) {\r\n        // When using native driver, we predict the next position of the\r\n        // animation because it takes one frame of a roundtrip to pass RELEASE\r\n        // event from native driver to JS before we can start animating. Without\r\n        // it, it is more noticable that the frame is dropped.\r\n        if (fromValue < toValue && velocity > 0) {\r\n          nextFramePosition = Math.min(fromValue + velocity / 60.0, toValue);\r\n        } else if (fromValue > toValue && velocity < 0) {\r\n          nextFramePosition = Math.max(fromValue + velocity / 60.0, toValue);\r\n        }\r\n      }\r\n      this.state.drawerTranslation.setValue(nextFramePosition);\r\n    }\r\n\r\n    const willShow = toValue !== 0;\r\n    this.updateShowing(willShow);\r\n    this.emitStateChanged(SETTLING, willShow);\r\n    this.setState({ drawerState: SETTLING });\r\n    if (this.props.hideStatusBar) {\r\n      StatusBar.setHidden(willShow, this.props.statusBarAnimation || 'slide');\r\n    }\r\n    Animated.spring(this.state.drawerTranslation, {\r\n      velocity,\r\n      bounciness: 0,\r\n      toValue,\r\n      useNativeDriver: this.props.useNativeAnimations!,\r\n      speed: speed ?? undefined,\r\n    }).start(({ finished }) => {\r\n      if (finished) {\r\n        this.emitStateChanged(IDLE, willShow);\r\n        this.setState({ drawerOpened: willShow });\r\n        if (this.state.drawerState !== DRAGGING) {\r\n          // it's possilbe that user started drag while the drawer\r\n          // was settling, don't override state in this case\r\n          this.setState({ drawerState: IDLE });\r\n        }\r\n        if (willShow) {\r\n          this.props.onDrawerOpen?.();\r\n        } else {\r\n          this.props.onDrawerClose?.();\r\n        }\r\n      }\r\n    });\r\n  };\r\n\r\n  openDrawer = (options: DrawerMovementOption = {}) => {\r\n    this.animateDrawer(\r\n      // TODO: decide if it should be null or undefined is the proper value\r\n      undefined,\r\n      this.props.drawerWidth!,\r\n      options.velocity ? options.velocity : 0,\r\n      options.speed\r\n    );\r\n\r\n    // We need to force the update, otherwise the overlay is not rerendered and\r\n    // it would not be clickable\r\n    this.forceUpdate();\r\n  };\r\n\r\n  closeDrawer = (options: DrawerMovementOption = {}) => {\r\n    // TODO: decide if it should be null or undefined is the proper value\r\n    this.animateDrawer(\r\n      undefined,\r\n      0,\r\n      options.velocity ? options.velocity : 0,\r\n      options.speed\r\n    );\r\n\r\n    // We need to force the update, otherwise the overlay is not rerendered and\r\n    // it would be still clickable\r\n    this.forceUpdate();\r\n  };\r\n\r\n  private renderOverlay = () => {\r\n    /* Overlay styles */\r\n    invariant(this.openValue, 'should be set');\r\n    let overlayOpacity;\r\n\r\n    if (this.state.drawerState !== IDLE) {\r\n      overlayOpacity = this.openValue;\r\n    } else {\r\n      overlayOpacity = this.state.drawerOpened ? 1 : 0;\r\n    }\r\n\r\n    const dynamicOverlayStyles = {\r\n      opacity: overlayOpacity,\r\n      backgroundColor: this.props.overlayColor,\r\n    };\r\n\r\n    return (\r\n      <TapGestureHandler onHandlerStateChange={this.onTapHandlerStateChange}>\r\n        <Animated.View\r\n          pointerEvents={this.drawerShown ? 'auto' : 'none'}\r\n          ref={this.pointerEventsView}\r\n          style={[styles.overlay, dynamicOverlayStyles]}\r\n        />\r\n      </TapGestureHandler>\r\n    );\r\n  };\r\n\r\n  private renderDrawer = () => {\r\n    const {\r\n      drawerBackgroundColor,\r\n      drawerWidth,\r\n      drawerPosition,\r\n      drawerType,\r\n      drawerContainerStyle,\r\n      contentContainerStyle,\r\n    } = this.props;\r\n\r\n    const fromLeft = drawerPosition === 'left';\r\n    const drawerSlide = drawerType !== 'back';\r\n    const containerSlide = drawerType !== 'front';\r\n\r\n    // we rely on row and row-reverse flex directions to position the drawer\r\n    // properly. Apparently for RTL these are flipped which requires us to use\r\n    // the opposite setting for the drawer to appear from left or right\r\n    // according to the drawerPosition prop\r\n    const reverseContentDirection = I18nManager.isRTL ? fromLeft : !fromLeft;\r\n\r\n    const dynamicDrawerStyles = {\r\n      backgroundColor: drawerBackgroundColor,\r\n      width: drawerWidth,\r\n    };\r\n    const openValue = this.openValue;\r\n    invariant(openValue, 'should be set');\r\n\r\n    let containerStyles;\r\n    if (containerSlide) {\r\n      const containerTranslateX = openValue.interpolate({\r\n        inputRange: [0, 1],\r\n        outputRange: fromLeft ? [0, drawerWidth!] : [0, -drawerWidth!],\r\n        extrapolate: 'clamp',\r\n      });\r\n      containerStyles = {\r\n        transform: [{ translateX: containerTranslateX }],\r\n      };\r\n    }\r\n\r\n    let drawerTranslateX: number | AnimatedInterpolation = 0;\r\n    if (drawerSlide) {\r\n      const closedDrawerOffset = fromLeft ? -drawerWidth! : drawerWidth!;\r\n      if (this.state.drawerState !== IDLE) {\r\n        drawerTranslateX = openValue.interpolate({\r\n          inputRange: [0, 1],\r\n          outputRange: [closedDrawerOffset, 0],\r\n          extrapolate: 'clamp',\r\n        });\r\n      } else {\r\n        drawerTranslateX = this.state.drawerOpened ? 0 : closedDrawerOffset;\r\n      }\r\n    }\r\n    const drawerStyles: {\r\n      transform: { translateX: number | AnimatedInterpolation }[];\r\n      flexDirection: 'row-reverse' | 'row';\r\n    } = {\r\n      transform: [{ translateX: drawerTranslateX }],\r\n      flexDirection: reverseContentDirection ? 'row-reverse' : 'row',\r\n    };\r\n\r\n    return (\r\n      <Animated.View style={styles.main} onLayout={this.handleContainerLayout}>\r\n        <Animated.View\r\n          style={[\r\n            drawerType === 'front'\r\n              ? styles.containerOnBack\r\n              : styles.containerInFront,\r\n            containerStyles,\r\n            contentContainerStyle,\r\n          ]}\r\n          importantForAccessibility={\r\n            this.drawerShown ? 'no-hide-descendants' : 'yes'\r\n          }>\r\n          {typeof this.props.children === 'function'\r\n            ? this.props.children(this.openValue)\r\n            : this.props.children}\r\n          {this.renderOverlay()}\r\n        </Animated.View>\r\n        <Animated.View\r\n          pointerEvents=\"box-none\"\r\n          ref={this.accessibilityIsModalView}\r\n          accessibilityViewIsModal={this.drawerShown}\r\n          style={[styles.drawerContainer, drawerStyles, drawerContainerStyle]}>\r\n          <View style={dynamicDrawerStyles}>\r\n            {this.props.renderNavigationView(this.openValue as Animated.Value)}\r\n          </View>\r\n        </Animated.View>\r\n      </Animated.View>\r\n    );\r\n  };\r\n\r\n  private setPanGestureRef = (ref: PanGestureHandler) => {\r\n    // TODO(TS): make sure it is OK taken from\r\n    // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065#issuecomment-596081842\r\n    (\r\n      this.panGestureHandler as React.MutableRefObject<PanGestureHandler>\r\n    ).current = ref;\r\n    this.props.onGestureRef?.(ref);\r\n  };\r\n\r\n  render() {\r\n    const { drawerPosition, drawerLockMode, edgeWidth, minSwipeDistance } =\r\n      this.props;\r\n\r\n    const fromLeft = drawerPosition === 'left';\r\n\r\n    // gestureOrientation is 1 if the expected gesture is from left to right and\r\n    // -1 otherwise e.g. when drawer is on the left and is closed we expect left\r\n    // to right gesture, thus orientation will be 1.\r\n    const gestureOrientation =\r\n      (fromLeft ? 1 : -1) * (this.drawerShown ? -1 : 1);\r\n\r\n    // When drawer is closed we want the hitSlop to be horizontally shorter than\r\n    // the container size by the value of SLOP. This will make it only activate\r\n    // when gesture happens not further than SLOP away from the edge\r\n    const hitSlop = fromLeft\r\n      ? { left: 0, width: this.drawerShown ? undefined : edgeWidth }\r\n      : { right: 0, width: this.drawerShown ? undefined : edgeWidth };\r\n\r\n    return (\r\n      <PanGestureHandler\r\n        // @ts-ignore could be fixed in handler types\r\n        userSelect={this.props.userSelect}\r\n        activeCursor={this.props.activeCursor}\r\n        ref={this.setPanGestureRef}\r\n        hitSlop={hitSlop}\r\n        activeOffsetX={gestureOrientation * minSwipeDistance!}\r\n        failOffsetY={[-15, 15]}\r\n        onGestureEvent={this.onGestureEvent}\r\n        onHandlerStateChange={this.openingHandlerStateChange}\r\n        enableTrackpadTwoFingerGesture={\r\n          this.props.enableTrackpadTwoFingerGesture\r\n        }\r\n        enabled={\r\n          drawerLockMode !== 'locked-closed' && drawerLockMode !== 'locked-open'\r\n        }>\r\n        {this.renderDrawer()}\r\n      </PanGestureHandler>\r\n    );\r\n  }\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n  drawerContainer: {\r\n    ...StyleSheet.absoluteFillObject,\r\n    zIndex: 1001,\r\n    flexDirection: 'row',\r\n  },\r\n  containerInFront: {\r\n    ...StyleSheet.absoluteFillObject,\r\n    zIndex: 1002,\r\n  },\r\n  containerOnBack: {\r\n    ...StyleSheet.absoluteFillObject,\r\n  },\r\n  main: {\r\n    flex: 1,\r\n    zIndex: 0,\r\n    overflow: 'hidden',\r\n  },\r\n  overlay: {\r\n    ...StyleSheet.absoluteFillObject,\r\n    zIndex: 1000,\r\n  },\r\n});\r\n"]}