Skip to content

Commit

Permalink
Add sideMenu.openGestureMode option (#4348)
Browse files Browse the repository at this point in the history
Until now controlling drawers touch gestures was impossible, drawers received gesture opening touch from the entire screen and that causes collisions with other gestures (which are implemented on the javascript side).

This commit adding modes for how sideMenu drawers gestures will receive opening touch.
```
{
  sideMenu: {
    openGestureMode: 'entireScreen' | 'bezel'
  }
}
```

- `entireScreen`: drawer gesture will trigger drawer opening from the entire screen
- `bezel`: drawer gesture will trigger drawer opening only from the center screen bezel frame

The default didn't change.
  • Loading branch information
yogevbd authored Nov 27, 2018
1 parent e32d8d2 commit 0a4bf2a
Show file tree
Hide file tree
Showing 13 changed files with 93 additions and 3 deletions.
3 changes: 2 additions & 1 deletion docs/docs/styling.md
Original file line number Diff line number Diff line change
Expand Up @@ -199,7 +199,8 @@ Navigation.mergeOptions(this.props.componentId, {
shouldStretchDrawer: false, // defaults to true, when false sideMenu contents not stretched when opened past the width
animationVelocity: 2500, // defaults to 840, high number is a faster sideMenu open/close animation
animationType: 'parallax' // defaults to none if not provided, options are 'parallax', 'door', 'slide', or 'slide-and-scale'
}
},
openGestureMode: 'entireScreen' | 'bezel'
}
bottomTabs: {
barStyle: 'default' | 'black',
Expand Down
16 changes: 16 additions & 0 deletions lib/ios/RCTConvert+SideMenuOpenGestureMode.h
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
#import <React/RCTConvert.h>
#import "MMDrawerController.h"

@interface RCTConvert (SideMenuOpenGestureMode)

@end

@implementation RCTConvert (SideMenuOpenGestureMode)

RCT_ENUM_CONVERTER(MMOpenDrawerGestureMode,
(@{@"entireScreen": @(MMOpenDrawerGestureModeAll),
@"bezel": @(MMOpenDrawerGestureModeNone),
}), MMOpenDrawerGestureModeAll, integerValue)

@end

1 change: 0 additions & 1 deletion lib/ios/RNNSideMenuController.m
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ - (instancetype)initWithLayoutInfo:(RNNLayoutInfo *)layoutInfo childViewControll

self.layoutInfo = layoutInfo;

self.openDrawerGestureModeMask = MMOpenDrawerGestureModeAll;
self.closeDrawerGestureModeMask = MMCloseDrawerGestureModeAll;

[self.presenter applyOptionsOnInit:self.resolveOptions];
Expand Down
2 changes: 2 additions & 0 deletions lib/ios/RNNSideMenuOptions.h
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
#import "RNNOptions.h"
#import "RNNSideMenuSideOptions.h"
#import "SideMenuOpenMode.h"

@interface RNNSideMenuOptions : RNNOptions

@property (nonatomic, strong) RNNSideMenuSideOptions* left;
@property (nonatomic, strong) RNNSideMenuSideOptions* right;

@property (nonatomic, strong) Text* animationType;
@property (nonatomic, strong) SideMenuOpenMode* openGestureMode;

@end
4 changes: 3 additions & 1 deletion lib/ios/RNNSideMenuOptions.m
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
#import "RNNSideMenuOptions.h"
#import "RNNSideMenuController.h"
#import "SideMenuOpenGestureModeParser.h"

@implementation RNNSideMenuOptions

Expand All @@ -9,7 +10,8 @@ - (instancetype)initWithDict:(NSDictionary *)dict {
self.left = [[RNNSideMenuSideOptions alloc] initWithDict:dict[@"left"]];
self.right = [[RNNSideMenuSideOptions alloc] initWithDict:dict[@"right"]];
self.animationType = [TextParser parse:dict key:@"animationType"];

self.openGestureMode = [SideMenuOpenGestureModeParser parse:dict key:@"openGestureMode"];

return self;
}

Expand Down
2 changes: 2 additions & 0 deletions lib/ios/RNNSideMenuPresenter.m
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,8 @@ - (void)applyOptionsOnInit:(RNNNavigationOptions *)initialOptions {
if (initialOptions.sideMenu.right.width.hasValue) {
[sideMenuController side:MMDrawerSideRight width:initialOptions.sideMenu.right.width.get];
}

[sideMenuController setOpenDrawerGestureModeMask:[initialOptions.sideMenu.openGestureMode getWithDefaultValue:MMOpenDrawerGestureModeAll]];
}

- (void)mergeOptions:(RNNNavigationOptions *)newOptions currentOptions:(RNNNavigationOptions *)currentOptions defaultOptions:(RNNNavigationOptions *)defaultOptions {
Expand Down
18 changes: 18 additions & 0 deletions lib/ios/ReactNativeNavigation.xcodeproj/project.pbxproj
Original file line number Diff line number Diff line change
Expand Up @@ -222,6 +222,10 @@
50CE8503217C6C9B00084EBF /* RNNSideMenuPresenterTest.m in Sources */ = {isa = PBXBuildFile; fileRef = 50CE8502217C6C9B00084EBF /* RNNSideMenuPresenterTest.m */; };
50D031342005149000386B3D /* RNNOverlayManager.h in Headers */ = {isa = PBXBuildFile; fileRef = 50D031322005149000386B3D /* RNNOverlayManager.h */; };
50D031352005149000386B3D /* RNNOverlayManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 50D031332005149000386B3D /* RNNOverlayManager.m */; };
50E02BD821A6EE0F00A43942 /* SideMenuOpenMode.h in Headers */ = {isa = PBXBuildFile; fileRef = 50E02BD621A6EE0F00A43942 /* SideMenuOpenMode.h */; };
50E02BD921A6EE0F00A43942 /* SideMenuOpenMode.m in Sources */ = {isa = PBXBuildFile; fileRef = 50E02BD721A6EE0F00A43942 /* SideMenuOpenMode.m */; };
50E02BDC21A6EE7900A43942 /* SideMenuOpenGestureModeParser.m in Sources */ = {isa = PBXBuildFile; fileRef = 50E02BDA21A6EE7900A43942 /* SideMenuOpenGestureModeParser.m */; };
50E02BDD21A6EE7900A43942 /* SideMenuOpenGestureModeParser.h in Headers */ = {isa = PBXBuildFile; fileRef = 50E02BDB21A6EE7900A43942 /* SideMenuOpenGestureModeParser.h */; };
50EB4ED72068EBE000D6ED34 /* RNNBackgroundOptions.h in Headers */ = {isa = PBXBuildFile; fileRef = 50EB4ED52068EBE000D6ED34 /* RNNBackgroundOptions.h */; };
50EB4ED82068EBE000D6ED34 /* RNNBackgroundOptions.m in Sources */ = {isa = PBXBuildFile; fileRef = 50EB4ED62068EBE000D6ED34 /* RNNBackgroundOptions.m */; };
50EB93421FE14A3E00BD8EEE /* RNNBottomTabOptions.m in Sources */ = {isa = PBXBuildFile; fileRef = 50EB93401FE14A3E00BD8EEE /* RNNBottomTabOptions.m */; };
Expand Down Expand Up @@ -537,6 +541,11 @@
50CE8502217C6C9B00084EBF /* RNNSideMenuPresenterTest.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNSideMenuPresenterTest.m; sourceTree = "<group>"; };
50D031322005149000386B3D /* RNNOverlayManager.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNOverlayManager.h; sourceTree = "<group>"; };
50D031332005149000386B3D /* RNNOverlayManager.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNOverlayManager.m; sourceTree = "<group>"; };
50E02BD521A6E54B00A43942 /* RCTConvert+SideMenuOpenGestureMode.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = "RCTConvert+SideMenuOpenGestureMode.h"; sourceTree = "<group>"; };
50E02BD621A6EE0F00A43942 /* SideMenuOpenMode.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = SideMenuOpenMode.h; sourceTree = "<group>"; };
50E02BD721A6EE0F00A43942 /* SideMenuOpenMode.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = SideMenuOpenMode.m; sourceTree = "<group>"; };
50E02BDA21A6EE7900A43942 /* SideMenuOpenGestureModeParser.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = SideMenuOpenGestureModeParser.m; sourceTree = "<group>"; };
50E02BDB21A6EE7900A43942 /* SideMenuOpenGestureModeParser.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = SideMenuOpenGestureModeParser.h; sourceTree = "<group>"; };
50EB4ED52068EBE000D6ED34 /* RNNBackgroundOptions.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNBackgroundOptions.h; sourceTree = "<group>"; };
50EB4ED62068EBE000D6ED34 /* RNNBackgroundOptions.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNBackgroundOptions.m; sourceTree = "<group>"; };
50EB933F1FE14A3E00BD8EEE /* RNNBottomTabOptions.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNBottomTabOptions.h; sourceTree = "<group>"; };
Expand Down Expand Up @@ -679,6 +688,7 @@
5038A3BF216E1E66009280BC /* RNNFontAttributesCreator.h */,
5038A3C0216E1E66009280BC /* RNNFontAttributesCreator.m */,
505EDD48214FDA800071C7DE /* RCTConvert+Modal.h */,
50E02BD521A6E54B00A43942 /* RCTConvert+SideMenuOpenGestureMode.h */,
5038A3BB216E1490009280BC /* RNNTabBarItemCreator.h */,
5038A3BC216E1490009280BC /* RNNTabBarItemCreator.m */,
5053CE7D2175FB1900D0386B /* RNNDefaultOptionsHelper.h */,
Expand Down Expand Up @@ -803,6 +813,8 @@
5012241521736667000F5F98 /* Color.m */,
5012241821736678000F5F98 /* Image.h */,
5012241921736678000F5F98 /* Image.m */,
50E02BD621A6EE0F00A43942 /* SideMenuOpenMode.h */,
50E02BD721A6EE0F00A43942 /* SideMenuOpenMode.m */,
50495940216F5E5D006D2B81 /* NullBool.h */,
50495941216F5E5D006D2B81 /* NullBool.m */,
50495948216F5FE6006D2B81 /* NullText.h */,
Expand Down Expand Up @@ -834,6 +846,8 @@
5049594D216F6277006D2B81 /* NumberParser.m */,
50495954216F6B3D006D2B81 /* DictionaryParser.h */,
50495955216F6B3D006D2B81 /* DictionaryParser.m */,
50E02BDB21A6EE7900A43942 /* SideMenuOpenGestureModeParser.h */,
50E02BDA21A6EE7900A43942 /* SideMenuOpenGestureModeParser.m */,
5012241C217366D4000F5F98 /* ColorParser.h */,
5012241D217366D4000F5F98 /* ColorParser.m */,
50122428217372B3000F5F98 /* ImageParser.h */,
Expand Down Expand Up @@ -1172,6 +1186,7 @@
5012242A217372B3000F5F98 /* ImageParser.h in Headers */,
50CB3B691FDE911400AA153B /* RNNSideMenuOptions.h in Headers */,
5012240A21735959000F5F98 /* RNNSideMenuPresenter.h in Headers */,
50E02BDD21A6EE7900A43942 /* SideMenuOpenGestureModeParser.h in Headers */,
263905BD1E4C6F440023D7D3 /* RCCDrawerProtocol.h in Headers */,
5038A3B5216DF602009280BC /* UINavigationController+RNNOptions.h in Headers */,
5038A3C1216E1E66009280BC /* RNNFontAttributesCreator.h in Headers */,
Expand Down Expand Up @@ -1257,6 +1272,7 @@
503955972174864E00B0A663 /* NullDouble.h in Headers */,
263905C81E4C6F440023D7D3 /* SidebarFlipboardAnimation.h in Headers */,
7BEF0D1C1E43771B003E96B0 /* RNNLayoutNode.h in Headers */,
50E02BD821A6EE0F00A43942 /* SideMenuOpenMode.h in Headers */,
507F43C91FF4F9CC00D9425B /* RNNTopTabOptions.h in Headers */,
E8A5CD521F464F0400E89D0D /* RNNAnimator.h in Headers */,
50451D0D2042F70900695F00 /* RNNTransition.h in Headers */,
Expand Down Expand Up @@ -1424,6 +1440,7 @@
263905E71E4CAC950023D7D3 /* RNNSideMenuChildVC.m in Sources */,
50495957216F6B3D006D2B81 /* DictionaryParser.m in Sources */,
390AD478200F499D00A8250D /* RNNSwizzles.m in Sources */,
50E02BD921A6EE0F00A43942 /* SideMenuOpenMode.m in Sources */,
7BA500751E2544B9001B9E1B /* ReactNativeNavigation.m in Sources */,
5038A3BA216DFCFD009280BC /* UITabBarController+RNNOptions.m in Sources */,
263905B21E4C6F440023D7D3 /* MMDrawerController.m in Sources */,
Expand All @@ -1443,6 +1460,7 @@
50395594217485B000B0A663 /* Double.m in Sources */,
504AFE751FFFF0540076E904 /* RNNTopTabsOptions.m in Sources */,
50175CD2207A2AA1004FE91B /* RNNComponentOptions.m in Sources */,
50E02BDC21A6EE7900A43942 /* SideMenuOpenGestureModeParser.m in Sources */,
7BEF0D1D1E43771B003E96B0 /* RNNLayoutNode.m in Sources */,
7BA500781E254908001B9E1B /* RNNSplashScreen.m in Sources */,
5038A3B6216DF602009280BC /* UINavigationController+RNNOptions.m in Sources */,
Expand Down
14 changes: 14 additions & 0 deletions lib/ios/ReactNativeNavigationTests/RNNSideMenuPresenterTest.m
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,20 @@ - (void)testApplyOptionsOnInitShouldSetWidthOptions {
[self.bindedViewController verify];
}

- (void)testApplyOptionsOnInitShouldSetDefaultDrawerGestureMode {
[[self.bindedViewController expect] setOpenDrawerGestureModeMask:MMOpenDrawerGestureModeAll];
[self.uut applyOptionsOnInit:self.options];
[self.bindedViewController verify];
}

- (void)testApplyOptionsOnInitShouldSetBezelDrawerGestureMode {
self.options.sideMenu.openGestureMode = [[SideMenuOpenMode alloc] initWithValue:@(MMOpenDrawerGestureModeNone)];
[[self.bindedViewController expect] setOpenDrawerGestureModeMask:MMOpenDrawerGestureModeNone];
[self.uut applyOptionsOnInit:self.options];
[self.bindedViewController verify];
}




@end
8 changes: 8 additions & 0 deletions lib/ios/SideMenuOpenGestureModeParser.h
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
#import <Foundation/Foundation.h>
#import "SideMenuOpenMode.h"

@interface SideMenuOpenGestureModeParser : NSObject

+ (SideMenuOpenMode *)parse:(NSDictionary *)json key:(NSString *)key;

@end
10 changes: 10 additions & 0 deletions lib/ios/SideMenuOpenGestureModeParser.m
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
#import "SideMenuOpenGestureModeParser.h"
#import "RCTConvert+SideMenuOpenGestureMode.h"

@implementation SideMenuOpenGestureModeParser

+ (SideMenuOpenMode *)parse:(NSDictionary *)json key:(NSString *)key {
return json[key] ? [[SideMenuOpenMode alloc] initWithValue:@([RCTConvert MMOpenDrawerGestureMode:json[key]])] : [[SideMenuOpenMode alloc] initWithValue:nil];
}

@end
7 changes: 7 additions & 0 deletions lib/ios/SideMenuOpenMode.h
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
#import "IntNumber.h"

@interface SideMenuOpenMode : IntNumber



@end
5 changes: 5 additions & 0 deletions lib/ios/SideMenuOpenMode.m
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
#import "SideMenuOpenMode.h"

@implementation SideMenuOpenMode

@end
6 changes: 6 additions & 0 deletions lib/src/interfaces/Options.ts
Original file line number Diff line number Diff line change
Expand Up @@ -521,6 +521,12 @@ export interface OptionsSideMenu {
* Configure the right side menu
*/
right?: SideMenuSide;
/**
* Configure how a user is allowed to open a drawer using gestures
* #### (iOS specific)
* @default 'entireScreen'
*/
openGestureMode?: 'entireScreen' | 'bezel';
}

export interface OptionsOverlay {
Expand Down

1 comment on commit 0a4bf2a

@pkyeck
Copy link

@pkyeck pkyeck commented on 0a4bf2a Jan 21, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@yogevbd this should work with the latest master, right? I'm asking b/c it isn't working for me :(

Navigation.setRoot({
    root: {
      sideMenu: {
        id: 'sideMenu',
        // TODO: not working right now. why? I don't know :(
        openGestureMode: 'bezel',
        left: {
          stack: {
            children: [
              {
                component: {
                  name: MENU_SIDE,
                },
              },
            ],
          },
        },
        center: {
          stack: {
            children: [
              {
                component: {
                  name: SCREEN_DASHBOARD,
                },
              },
            ],
          },
        },
      },
    },
  });

Please sign in to comment.