Added mechanism for directly mapping JS event handlers to blocks

Summary: Currently, the system for mapping JS event handlers to blocks is quite clean on the JS side, but is clunky on the native side. The event property is passed as a boolean, which can then be checked by the native side, and if true, the native side is supposed to send an event via the event dispatcher. This diff adds the facility to declare the property as a block instead. This means that the event side can simply call the block, and it will automatically send the event. Because the blocks for bubbling and direct events are named differently, we can also use this to generate the event registration data and get rid of the arrays of event names. The name of the event is inferred from the property name, which means that the property for an event called "load" must be called `onLoad` or the mapping won't work. This can be optionally remapped to a different property name on the view itself if necessary, e.g. RCT_REMAP_VIEW_PROPERTY(onLoad, loadEventBlock, RCTDirectEventBlock) If you don't want to use this mechanism then for now it is still possible to declare the property as a BOOL instead and use the old mechanism (this approach is now deprecated however, and may eventually be removed altogether).
facebook · Sep 2, 2015 · 8488398 · 8488398
1 parent 4379aa0
commit 8488398
Show file tree

Hide file tree

Showing 46 changed files with 552 additions and 512 deletions.
diff --git a/Libraries/Components/MapView/MapView.js b/Libraries/Components/MapView/MapView.js
@@ -277,7 +277,9 @@ if (Platform.OS === 'android') {
     uiViewClassName: 'RCTMap',
   });
 } else {
-  var RCTMap = requireNativeComponent('RCTMap', MapView);
+  var RCTMap = requireNativeComponent('RCTMap', MapView, {
+    nativeOnly: {onChange: true, onPress: true}
+  });
 }
 
 module.exports = MapView;
diff --git a/Libraries/Components/SliderIOS/SliderIOS.ios.js b/Libraries/Components/SliderIOS/SliderIOS.ios.js
@@ -107,6 +107,8 @@ var styles = StyleSheet.create({
   },
 });
 
-var RCTSlider = requireNativeComponent('RCTSlider', SliderIOS);
+var RCTSlider = requireNativeComponent('RCTSlider', SliderIOS, {
+  nativeOnly: { onChange: true },
+});
 
 module.exports = SliderIOS;
diff --git a/Libraries/Components/SwitchIOS/SwitchIOS.ios.js b/Libraries/Components/SwitchIOS/SwitchIOS.ios.js
@@ -108,6 +108,8 @@ var styles = StyleSheet.create({
   },
 });
 
-var RCTSwitch = requireNativeComponent('RCTSwitch', SwitchIOS);
+var RCTSwitch = requireNativeComponent('RCTSwitch', SwitchIOS, {
+  nativeOnly: { onChange: true }
+});
 
 module.exports = SwitchIOS;
diff --git a/Libraries/Components/WebView/WebView.ios.js b/Libraries/Components/WebView/WebView.ios.js
@@ -226,7 +226,13 @@ var WebView = React.createClass({
   },
 });
 
-var RCTWebView = requireNativeComponent('RCTWebView', WebView);
+var RCTWebView = requireNativeComponent('RCTWebView', WebView, {
+  nativeOnly: {
+    onLoadingStart: true,
+    onLoadingError: true,
+    onLoadingFinish: true,
+  },
+});
 
 var styles = StyleSheet.create({
   container: {

diff --git a/Libraries/Image/RCTImageView.m b/Libraries/Image/RCTImageView.m
@@ -21,11 +21,11 @@
 
 @interface RCTImageView ()
 
-@property (nonatomic, assign) BOOL onLoadStart;
-@property (nonatomic, assign) BOOL onProgress;
-@property (nonatomic, assign) BOOL onError;
-@property (nonatomic, assign) BOOL onLoad;
-@property (nonatomic, assign) BOOL onLoadEnd;
+@property (nonatomic, copy) RCTDirectEventBlock onLoadStart;
+@property (nonatomic, copy) RCTDirectEventBlock onProgress;
+@property (nonatomic, copy) RCTDirectEventBlock onError;
+@property (nonatomic, copy) RCTDirectEventBlock onLoad;
+@property (nonatomic, copy) RCTDirectEventBlock onLoadEnd;
 
 @end
 
@@ -116,19 +116,16 @@ - (void)reloadImage
   if (_src && !CGSizeEqualToSize(self.frame.size, CGSizeZero)) {
 
     if (_onLoadStart) {
-      NSDictionary *event = @{ @"target": self.reactTag };
-      [_bridge.eventDispatcher sendInputEventWithName:@"loadStart" body:event];
+      _onLoadStart(nil);
     }
 
     RCTImageLoaderProgressBlock progressHandler = nil;
     if (_onProgress) {
       progressHandler = ^(int64_t loaded, int64_t total) {
-        NSDictionary *event = @{
-          @"target": self.reactTag,
+        _onProgress(@{
           @"loaded": @((double)loaded),
           @"total": @((double)total),
-        };
-        [_bridge.eventDispatcher sendInputEventWithName:@"progress" body:event];
+        });
       };
     }
 
@@ -147,21 +144,15 @@ - (void)reloadImage
       }
       if (error) {
         if (_onError) {
-          NSDictionary *event = @{
-            @"target": self.reactTag,
-            @"error": error.localizedDescription,
-          };
-          [_bridge.eventDispatcher sendInputEventWithName:@"error" body:event];
+          _onError(@{ @"error": error.localizedDescription });
         }
       } else {
         if (_onLoad) {
-          NSDictionary *event = @{ @"target": self.reactTag };
-          [_bridge.eventDispatcher sendInputEventWithName:@"load" body:event];
+          _onLoad(nil);
         }
       }
       if (_onLoadEnd) {
-        NSDictionary *event = @{ @"target": self.reactTag };
-        [_bridge.eventDispatcher sendInputEventWithName:@"loadEnd" body:event];
+         _onLoadEnd(nil);
       }
     }];
   } else {

diff --git a/Libraries/Image/RCTImageViewManager.m b/Libraries/Image/RCTImageViewManager.m
@@ -27,11 +27,11 @@ - (UIView *)view
 RCT_REMAP_VIEW_PROPERTY(defaultImageSrc, defaultImage, UIImage)
 RCT_REMAP_VIEW_PROPERTY(resizeMode, contentMode, UIViewContentMode)
 RCT_EXPORT_VIEW_PROPERTY(src, NSString)
-RCT_EXPORT_VIEW_PROPERTY(onLoadStart, BOOL)
-RCT_EXPORT_VIEW_PROPERTY(onProgress, BOOL)
-RCT_EXPORT_VIEW_PROPERTY(onError, BOOL)
-RCT_EXPORT_VIEW_PROPERTY(onLoad, BOOL)
-RCT_EXPORT_VIEW_PROPERTY(onLoadEnd, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(onLoadStart, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onProgress, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onError, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onLoad, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onLoadEnd, RCTDirectEventBlock)
 RCT_CUSTOM_VIEW_PROPERTY(tintColor, UIColor, RCTImageView)
 {
   if (json) {
@@ -43,15 +43,4 @@ - (UIView *)view
   }
 }
 
-- (NSArray *)customDirectEventTypes
-{
-  return @[
-    @"loadStart",
-    @"progress",
-    @"error",
-    @"load",
-    @"loadEnd",
-  ];
-}
-
 @end
diff --git a/React/Modules/RCTUIManager.m b/React/Modules/RCTUIManager.m
@@ -455,6 +455,9 @@ - (RCTViewManagerUIBlock)uiBlockWithLayoutUpdateForRootView:(RCTShadowView *)roo
     [frames addObject:[NSValue valueWithCGRect:shadowView.frame]];
     [areNew addObject:@(shadowView.isNewView)];
     [parentsAreNew addObject:@(shadowView.superview.isNewView)];
+
+    // TODO (#8214142): this can be greatly simplified by sending the layout
+    // event directly from the shadow thread, which may be better anyway.
     id event = (id)kCFNull;
     if (shadowView.onLayout) {
       event = @{
@@ -1128,67 +1131,68 @@ static void RCTMeasureLayout(RCTShadowView *view,
   }];
 }
 
-- (NSDictionary *)bubblingEventsConfig
+- (NSDictionary *)constantsToExport
 {
-  NSMutableDictionary *customBubblingEventTypesConfigs = [NSMutableDictionary new];
-  for (RCTComponentData *componentData in _componentDataByName.allValues) {
-    RCTViewManager *manager = componentData.manager;
-    if (RCTClassOverridesInstanceMethod([manager class], @selector(customBubblingEventTypes))) {
-      NSArray *events = [manager customBubblingEventTypes];
-      if (RCT_DEBUG) {
-        RCTAssert(!events || [events isKindOfClass:[NSArray class]],
-                  @"customBubblingEventTypes must return an array, but %@ returned %@",
-                  [manager class], [events class]);
-      }
-      for (NSString *eventName in events) {
-        NSString *topName = RCTNormalizeInputEventName(eventName);
-        if (!customBubblingEventTypesConfigs[topName]) {
-          NSString *bubbleName = [topName stringByReplacingCharactersInRange:(NSRange){0, 3} withString:@"on"];
-          customBubblingEventTypesConfigs[topName] = @{
-            @"phasedRegistrationNames": @{
-              @"bubbled": bubbleName,
-              @"captured": [bubbleName stringByAppendingString:@"Capture"],
-            }
-          };
-        }
-      }
-    }
-  };
+  NSMutableDictionary *allJSConstants = [NSMutableDictionary new];
+  NSMutableDictionary *directEvents = [NSMutableDictionary new];
+  NSMutableDictionary *bubblingEvents = [NSMutableDictionary new];
 
-  return customBubblingEventTypesConfigs;
-}
+  [_componentDataByName enumerateKeysAndObjectsUsingBlock:
+   ^(NSString *name, RCTComponentData *componentData, __unused BOOL *stop) {
 
-- (NSDictionary *)directEventsConfig
-{
-  NSMutableDictionary *customDirectEventTypes = [NSMutableDictionary new];
-  for (RCTComponentData *componentData in _componentDataByName.allValues) {
-    RCTViewManager *manager = componentData.manager;
-    if (RCTClassOverridesInstanceMethod([manager class], @selector(customDirectEventTypes))) {
-      NSArray *events = [manager customDirectEventTypes];
-      if (RCT_DEBUG) {
-        RCTAssert(!events || [events isKindOfClass:[NSArray class]],
-                  @"customDirectEventTypes must return an array, but %@ returned %@",
-                  [manager class], [events class]);
-      }
-      for (NSString *eventName in events) {
-        NSString *topName = RCTNormalizeInputEventName(eventName);
-        if (!customDirectEventTypes[topName]) {
-          customDirectEventTypes[topName] = @{
-            @"registrationName": [topName stringByReplacingCharactersInRange:(NSRange){0, 3} withString:@"on"],
-          };
-        }
-      }
-    }
-  };
+     RCTViewManager *manager = componentData.manager;
+     NSMutableDictionary *constantsNamespace =
+     [NSMutableDictionary dictionaryWithDictionary:allJSConstants[name]];
 
-  return customDirectEventTypes;
-}
+     // Add custom constants
+     // TODO: should these be inherited?
+     NSDictionary *constants = RCTClassOverridesInstanceMethod([manager class], @selector(constantsToExport)) ? [manager constantsToExport] : nil;
+     if (constants.count) {
+       RCTAssert(constantsNamespace[@"Constants"] == nil , @"Cannot redefine Constants in namespace: %@", name);
+       // add an additional 'Constants' namespace for each class
+       constantsNamespace[@"Constants"] = constants;
+     }
+
+     // Add native props
+     NSDictionary *viewConfig = [componentData viewConfig];
+     constantsNamespace[@"NativeProps"] = viewConfig[@"propTypes"];
+
+     // Add direct events
+     for (NSString *eventName in viewConfig[@"directEvents"]) {
+       if (!directEvents[eventName]) {
+         directEvents[eventName] = @{
+           @"registrationName": [eventName stringByReplacingCharactersInRange:(NSRange){0, 3} withString:@"on"],
+         };
+       }
+       if (RCT_DEBUG && bubblingEvents[eventName]) {
+         RCTLogError(@"Component '%@' re-registered bubbling event '%@' as a "
+                     "direct event", componentData.name, eventName);
+       }
+     }
+
+     // Add bubbling events
+     for (NSString *eventName in viewConfig[@"bubblingEvents"]) {
+       if (!bubblingEvents[eventName]) {
+         NSString *bubbleName = [eventName stringByReplacingCharactersInRange:(NSRange){0, 3} withString:@"on"];
+         bubblingEvents[eventName] = @{
+           @"phasedRegistrationNames": @{
+             @"bubbled": bubbleName,
+             @"captured": [bubbleName stringByAppendingString:@"Capture"],
+           }
+         };
+       }
+       if (RCT_DEBUG && directEvents[eventName]) {
+         RCTLogError(@"Component '%@' re-registered direct event '%@' as a "
+                     "bubbling event", componentData.name, eventName);
+       }
+     }
+
+     allJSConstants[name] = [constantsNamespace copy];
+  }];
 
-- (NSDictionary *)constantsToExport
-{
-  NSMutableDictionary *allJSConstants = [@{
-    @"customBubblingEventTypes": [self bubblingEventsConfig],
-    @"customDirectEventTypes": [self directEventsConfig],
+  [allJSConstants addEntriesFromDictionary:@{
+    @"customBubblingEventTypes": bubblingEvents,
+    @"customDirectEventTypes": directEvents,
     @"Dimensions": @{
       @"window": @{
         @"width": @(RCTScreenSize().width),
@@ -1200,28 +1204,8 @@ - (NSDictionary *)constantsToExport
         @"height": @(RCTScreenSize().height),
       },
     },
-  } mutableCopy];
-
-  [_componentDataByName enumerateKeysAndObjectsUsingBlock:
-   ^(NSString *name, RCTComponentData *componentData, __unused BOOL *stop) {
-    RCTViewManager *manager = componentData.manager;
-    NSMutableDictionary *constantsNamespace =
-     [NSMutableDictionary dictionaryWithDictionary:allJSConstants[name]];
-
-    // Add custom constants
-    // TODO: should these be inherited?
-    NSDictionary *constants = RCTClassOverridesInstanceMethod([manager class], @selector(constantsToExport)) ? [manager constantsToExport] : nil;
-    if (constants.count) {
-      RCTAssert(constantsNamespace[@"Constants"] == nil , @"Cannot redefine Constants in namespace: %@", name);
-      // add an additional 'Constants' namespace for each class
-      constantsNamespace[@"Constants"] = constants;
-    }
-
-    // Add native props
-    constantsNamespace[@"NativeProps"] = [componentData viewConfig];
-
-    allJSConstants[name] = [constantsNamespace copy];
   }];
+
   return allJSConstants;
 }
 

diff --git a/React/React.xcodeproj/project.pbxproj b/React/React.xcodeproj/project.pbxproj
@@ -10,6 +10,7 @@
 		000E6CEB1AB0E980000CDF4D /* RCTSourceCode.m in Sources */ = {isa = PBXBuildFile; fileRef = 000E6CEA1AB0E980000CDF4D /* RCTSourceCode.m */; };
 		131B6AF41AF1093D00FFC3E0 /* RCTSegmentedControl.m in Sources */ = {isa = PBXBuildFile; fileRef = 131B6AF11AF1093D00FFC3E0 /* RCTSegmentedControl.m */; };
 		131B6AF51AF1093D00FFC3E0 /* RCTSegmentedControlManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 131B6AF31AF1093D00FFC3E0 /* RCTSegmentedControlManager.m */; };
+		133CAE8E1B8E5CFD00F6AD92 /* RCTDatePicker.m in Sources */ = {isa = PBXBuildFile; fileRef = 133CAE8D1B8E5CFD00F6AD92 /* RCTDatePicker.m */; };
 		13456E931ADAD2DE009F94A7 /* RCTConvert+CoreLocation.m in Sources */ = {isa = PBXBuildFile; fileRef = 13456E921ADAD2DE009F94A7 /* RCTConvert+CoreLocation.m */; };
 		13456E961ADAD482009F94A7 /* RCTConvert+MapKit.m in Sources */ = {isa = PBXBuildFile; fileRef = 13456E951ADAD482009F94A7 /* RCTConvert+MapKit.m */; };
 		134FCB361A6D42D900051CC8 /* RCTSparseArray.m in Sources */ = {isa = PBXBuildFile; fileRef = 83BEE46D1A6D19BC00B5863B /* RCTSparseArray.m */; };
@@ -104,6 +105,8 @@
 		131B6AF11AF1093D00FFC3E0 /* RCTSegmentedControl.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTSegmentedControl.m; sourceTree = "<group>"; };
 		131B6AF21AF1093D00FFC3E0 /* RCTSegmentedControlManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTSegmentedControlManager.h; sourceTree = "<group>"; };
 		131B6AF31AF1093D00FFC3E0 /* RCTSegmentedControlManager.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTSegmentedControlManager.m; sourceTree = "<group>"; };
+		133CAE8C1B8E5CFD00F6AD92 /* RCTDatePicker.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTDatePicker.h; sourceTree = "<group>"; };
+		133CAE8D1B8E5CFD00F6AD92 /* RCTDatePicker.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTDatePicker.m; sourceTree = "<group>"; };
 		13442BF21AA90E0B0037E5B0 /* RCTAnimationType.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTAnimationType.h; sourceTree = "<group>"; };
 		13442BF31AA90E0B0037E5B0 /* RCTPointerEvents.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTPointerEvents.h; sourceTree = "<group>"; };
 		13442BF41AA90E0B0037E5B0 /* RCTViewControllerProtocol.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTViewControllerProtocol.h; sourceTree = "<group>"; };
@@ -345,6 +348,8 @@
 				13456E921ADAD2DE009F94A7 /* RCTConvert+CoreLocation.m */,
 				13456E941ADAD482009F94A7 /* RCTConvert+MapKit.h */,
 				13456E951ADAD482009F94A7 /* RCTConvert+MapKit.m */,
+				133CAE8C1B8E5CFD00F6AD92 /* RCTDatePicker.h */,
+				133CAE8D1B8E5CFD00F6AD92 /* RCTDatePicker.m */,
 				58C571C01AA56C1900CDF9C8 /* RCTDatePickerManager.h */,
 				58C571BF1AA56C1900CDF9C8 /* RCTDatePickerManager.m */,
 				14435CE11AAC4AE100FC20F4 /* RCTMap.h */,
@@ -597,6 +602,7 @@
 				13456E961ADAD482009F94A7 /* RCTConvert+MapKit.m in Sources */,
 				13723B501A82FD3C00F88898 /* RCTStatusBarManager.m in Sources */,
 				000E6CEB1AB0E980000CDF4D /* RCTSourceCode.m in Sources */,
+				133CAE8E1B8E5CFD00F6AD92 /* RCTDatePicker.m in Sources */,
 				14C2CA761B3AC64F00E6CBB2 /* RCTFrameUpdate.m in Sources */,
 				13B07FEF1A69327A00A75B9A /* RCTAlertManager.m in Sources */,
 				83CBBACC1A6023D300E9B192 /* RCTConvert.m in Sources */,

diff --git a/React/Views/RCTComponent.h b/React/Views/RCTComponent.h
@@ -9,6 +9,13 @@
 
 #import <CoreGraphics/CoreGraphics.h>
 
+/**
+ * These block types can be used for mapping input event handlers from JS to view
+ * properties. Unlike JS method callbacks, these can be called multiple times.
+ */
+typedef void (^RCTDirectEventBlock)(NSDictionary *body);
+typedef void (^RCTBubblingEventBlock)(NSDictionary *body);
+
 /**
  * Logical node in a tree of application components. Both `ShadowView` and
  * `UIView` conforms to this. Allows us to write utilities that reason about