Merge pull request #36 from aspect-apps/feature/close-drawer-swipping

rodriigovieira · web-flow · commit ee125718d17d · 2020-11-12T14:00:07.000-03:00
Feature/close drawer swipping
diff --git a/example/ios/AwesomeProject.xcodeproj/project.pbxproj b/example/ios/AwesomeProject.xcodeproj/project.pbxproj
@@ -659,6 +659,7 @@
 				DEVELOPMENT_TEAM = YT5JKQN5YD;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = AwesomeProject/Info.plist;
+				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				OTHER_LDFLAGS = (
 					"$(inherited)",
@@ -682,6 +683,7 @@
 				CURRENT_PROJECT_VERSION = 1;
 				DEVELOPMENT_TEAM = YT5JKQN5YD;
 				INFOPLIST_FILE = AwesomeProject/Info.plist;
+				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				OTHER_LDFLAGS = (
 					"$(inherited)",
diff --git a/example/ios/AwesomeProject.xcodeproj/xcshareddata/xcschemes/AwesomeProject.xcscheme b/example/ios/AwesomeProject.xcodeproj/xcshareddata/xcschemes/AwesomeProject.xcscheme
@@ -41,9 +41,9 @@
       </Testables>
    </TestAction>
    <LaunchAction
-      buildConfiguration = "Debug"
-      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
-      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
+      buildConfiguration = "Release"
+      selectedDebuggerIdentifier = ""
+      selectedLauncherIdentifier = "Xcode.IDEFoundation.Launcher.PosixSpawn"
       launchStyle = "0"
       useCustomWorkingDirectory = "NO"
       ignoresPersistentStateOnLaunch = "NO"
diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
@@ -296,12 +296,12 @@ PODS:
     - React-Core (= 0.63.3)
     - React-cxxreact (= 0.63.3)
     - React-jsi (= 0.63.3)
-  - ReactNativeNavigation (7.2.0):
+  - ReactNativeNavigation (7.3.0):
     - React-Core
     - React-RCTImage
     - React-RCTText
-    - ReactNativeNavigation/Core (= 7.2.0)
-  - ReactNativeNavigation/Core (7.2.0):
+    - ReactNativeNavigation/Core (= 7.3.0)
+  - ReactNativeNavigation/Core (7.3.0):
     - React-Core
     - React-RCTImage
     - React-RCTText
@@ -467,7 +467,7 @@ SPEC CHECKSUMS:
   React-RCTText: 65a6de06a7389098ce24340d1d3556015c38f746
   React-RCTVibration: 8e9fb25724a0805107fc1acc9075e26f814df454
   ReactCommon: 4167844018c9ed375cc01a843e9ee564399e53c3
-  ReactNativeNavigation: 2f6571c37eaeb7d472fe8a3779d49d7aae32e75a
+  ReactNativeNavigation: c2dcda2b86e32090c443182206c915107d03106f
   Yoga: 7d13633d129fd179e01b8953d38d47be90db185a
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 
diff --git a/example/package-lock.json b/example/package-lock.json
diff --git a/example/src/pages/HomePage.js b/example/src/pages/HomePage.js
@@ -6,7 +6,7 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {RNNDrawer} from 'react-native-navigation-drawer-extension';
+import { RNNDrawer, SideMenuView } from 'react-native-navigation-drawer-extension';
 
 const HomePage = (props) => {
   const onPress = () => {
@@ -26,15 +26,29 @@ const HomePage = (props) => {
   };
 
   return (
-    <SafeAreaView>
-      <View style={styles.mainContainer}>
-        <Text style={styles.headlineText}>HomePage View</Text>
+    <SideMenuView
+      style={{ flex: 1 }}
+      left={() => RNNDrawer.showDrawer({
+        component: {
+          name: 'CustomDrawer',
+          passProps: {
+            direction: 'left',
+            parentComponentId: props.componentId,
+          },
+        },
+      }
+      )}
+    >
+      <SafeAreaView>
+        <View style={styles.mainContainer}>
+          <Text style={styles.headlineText}>HomePage View</Text>
 
-        <TouchableOpacity style={styles.buttonContainer} onPress={onPress}>
-          <Text style={styles.buttonText}>Open Drawer</Text>
-        </TouchableOpacity>
-      </View>
-    </SafeAreaView>
+          <TouchableOpacity style={styles.buttonContainer} onPress={onPress}>
+            <Text style={styles.buttonText}>Open Drawer</Text>
+          </TouchableOpacity>
+        </View>
+      </SafeAreaView>
+    </SideMenuView>
   );
 };
 
diff --git a/lib/RNNDrawer.d.ts b/lib/RNNDrawer.d.ts
@@ -4,61 +4,58 @@
  */
 import * as React from 'react';
 import { Layout } from 'react-native-navigation';
-
-type DirectionType = "left" | "right" | "top" | "bottom";
-
 declare interface RNNDrawerOptions {
     /**
      * Id of parent component of the drawer.
      * This field is necessary in order to be able
      * to push screens inside the drawer
      */
     parentComponentId: string;
-
+    /**
+     * Direction to open the collage,
+     * one of: ["left", "right", "top", "bottom"]
+     * If not provided, drawer  might have
+     * a weird effect when closing
+     */
+    direction: DirectionType;
     /**
      * Time in milliseconds to execute the drawer opening animation
      */
     animationOpenTime?: number;
-
     /**
      * Time in milliseconds to execute the drawer closing animation
      */
     animationCloseTime?: number;
-
-    /**
-     * Direction to open the collage,
-     * one of: ["left", "right", "top", "bottom"]
-     */
-    direction?: DirectionType;
-
     /**
      * Whether the drawer be dismissed when a click is registered outside
      */
     dismissWhenTouchOutside?: boolean;
-
     /**
      * Opacity of the screen outside the drawer
      */
     fadeOpacity?: number;
-
     /**
      * Width of drawer in relation to the screen (0 to 1)
      */
     drawerScreenWidth?: number;
-
     /**
      * Height of drawer in relation to the screen (0 to 1)
      */
     drawerScreenHeight?: number;
 }
-
+declare enum DirectionType {
+    left = "left",
+    right = "right",
+    bottom = "bottom",
+    top = "top"
+}
 declare class RNNDrawer {
     /**
-     * Generates the drawer component to
-     * be used with react-native-navigation
-     * 
-     * @param component
-     */
+    * Generates the drawer component to
+    * be used with react-native-navigation
+    *
+    * @param component
+    */
     static create(Component: React.ComponentType): any;
     /**
      * Shows a drawer component
diff --git a/lib/RNNDrawer.js b/lib/RNNDrawer.js
@@ -45,6 +45,12 @@ var DirectionType;
 var RNNDrawer = /** @class */ (function () {
     function RNNDrawer() {
     }
+    /**
+    * Generates the drawer component to
+    * be used with react-native-navigation
+    *
+    * @param component
+    */
     RNNDrawer.create = function (Component) {
         var WrappedDrawer = /** @class */ (function (_super) {
             __extends(WrappedDrawer, _super);
@@ -59,6 +65,30 @@ var RNNDrawer = /** @class */ (function () {
                 var _this = _super.call(this, props) || this;
                 _this.screenWidth = react_native_1.Dimensions.get('window').width;
                 _this.screenHeight = react_native_1.Dimensions.get('window').height;
+                _this.panResponder = react_native_1.PanResponder.create({
+                    onStartShouldSetPanResponder: function (_evt, _gestureState) { return false; },
+                    onStartShouldSetPanResponderCapture: function (_evt, _gestureState) { return false; },
+                    onMoveShouldSetPanResponder: function (_evt, _gestureState) {
+                        var dx = _gestureState.dx;
+                        return Math.abs(dx) > 5;
+                    },
+                    onMoveShouldSetPanResponderCapture: function (_evt, _gestureState) { return false; },
+                    onPanResponderGrant: function (_evt, _gestureState) {
+                        events_1.dispatch('SWIPE_START');
+                    },
+                    onPanResponderRelease: function (_evt, gestureState) {
+                        var vx = gestureState.vx;
+                        // Emit this event when the gesture ends
+                        events_1.dispatch('SWIPE_END', vx > 0 ? 'right' : 'left');
+                    },
+                    onPanResponderTerminationRequest: function (_evt, _gestureState) { return false; },
+                    onShouldBlockNativeResponder: function (_evt, _gestureState) { return false; },
+                    onPanResponderMove: function (_evt, _gestureState) {
+                        var moveX = _gestureState.moveX;
+                        var direction = _this.props.direction || 'left';
+                        events_1.dispatch('SWIPE_MOVE', { value: moveX, direction: direction });
+                    },
+                });
                 /*
                  * We need to convert the pushed drawer width
                  * to a number as it can either be a string ('20%')
@@ -276,7 +306,7 @@ var RNNDrawer = /** @class */ (function () {
                 var animatedValue = direction === DirectionType.left || direction === DirectionType.right
                     ? { marginLeft: sideMenuOpenValue }
                     : { marginTop: sideMenuOpenValue };
-                return (React.createElement(react_native_1.View, { style: sideMenuContainerStyle },
+                return (React.createElement(react_native_1.View, __assign({ style: sideMenuContainerStyle }, this.panResponder.panHandlers),
                     React.createElement(react_native_1.TouchableWithoutFeedback, { onPress: this.touchedOutside },
                         React.createElement(react_native_1.Animated.View, { style: [
                                 sideMenuOverlayStyle,
diff --git a/src/RNNDrawer.tsx b/src/RNNDrawer.tsx
