[ReactNative] use requireNativeComponent to clean up a bunch of boile…

…rplate
facebook · Apr 22, 2015 · 58a550f · 58a550f
1 parent 901c24e
commit 58a550f
Show file tree

Hide file tree

Showing 11 changed files with 77 additions and 134 deletions.
diff --git a/Libraries/Components/ActivityIndicatorIOS/ActivityIndicatorIOS.ios.js b/Libraries/Components/ActivityIndicatorIOS/ActivityIndicatorIOS.ios.js
@@ -15,13 +15,12 @@ var NativeMethodsMixin = require('NativeMethodsMixin');
 var NativeModules = require('NativeModules');
 var PropTypes = require('ReactPropTypes');
 var React = require('React');
-var ReactIOSViewAttributes = require('ReactIOSViewAttributes');
 var StyleSheet = require('StyleSheet');
 var View = require('View');
 
-var createReactIOSNativeComponentClass = require('createReactIOSNativeComponentClass');
 var keyMirror = require('keyMirror');
-var merge = require('merge');
+var requireNativeComponent = require('requireNativeComponent');
+var verifyPropTypes = require('verifyPropTypes');
 
 var SpinnerSize = keyMirror({
   large: null,
@@ -100,14 +99,17 @@ var styles = StyleSheet.create({
   }
 });
 
-var UIActivityIndicatorView = createReactIOSNativeComponentClass({
-  validAttributes: merge(
-    ReactIOSViewAttributes.UIView, {
-    activityIndicatorViewStyle: true, // UIActivityIndicatorViewStyle=UIActivityIndicatorViewStyleWhite
-    animating: true,
-    color: true,
-  }),
-  uiViewClassName: 'UIActivityIndicatorView',
-});
+var UIActivityIndicatorView = requireNativeComponent(
+  'UIActivityIndicatorView',
+  null
+);
+if (__DEV__) {
+  var nativeOnlyProps = {activityIndicatorViewStyle: true};
+  verifyPropTypes(
+    ActivityIndicatorIOS,
+    UIActivityIndicatorView.viewConfig,
+    nativeOnlyProps
+  );
+}
 
 module.exports = ActivityIndicatorIOS;
diff --git a/Libraries/Components/DatePicker/DatePickerIOS.ios.js b/Libraries/Components/DatePicker/DatePickerIOS.ios.js
@@ -16,14 +16,11 @@
 var NativeMethodsMixin = require('NativeMethodsMixin');
 var PropTypes = require('ReactPropTypes');
 var React = require('React');
-var ReactIOSViewAttributes = require('ReactIOSViewAttributes');
 var RCTDatePickerIOSConsts = require('NativeModules').UIManager.RCTDatePicker.Constants;
 var StyleSheet = require('StyleSheet');
 var View = require('View');
 
-var createReactIOSNativeComponentClass =
-  require('createReactIOSNativeComponentClass');
-var merge = require('merge');
+var requireNativeComponent = require('requireNativeComponent');
 
 var DATEPICKER = 'datepicker';
 
@@ -148,18 +145,6 @@ var styles = StyleSheet.create({
   },
 });
 
-var rkDatePickerIOSAttributes = merge(ReactIOSViewAttributes.UIView, {
-  date: true,
-  maximumDate: true,
-  minimumDate: true,
-  mode: true,
-  minuteInterval: true,
-  timeZoneOffsetInMinutes: true,
-});
-
-var RCTDatePickerIOS = createReactIOSNativeComponentClass({
-  validAttributes: rkDatePickerIOSAttributes,
-  uiViewClassName: 'RCTDatePicker',
-});
+var RCTDatePickerIOS = requireNativeComponent('RCTDatePicker', DatePickerIOS);
 
 module.exports = DatePickerIOS;
diff --git a/Libraries/Components/MapView/MapView.js b/Libraries/Components/MapView/MapView.js
@@ -13,6 +13,7 @@
 
 var EdgeInsetsPropType = require('EdgeInsetsPropType');
 var NativeMethodsMixin = require('NativeMethodsMixin');
+var Platform = require('Platform');
 var React = require('React');
 var ReactIOSViewAttributes = require('ReactIOSViewAttributes');
 var View = require('View');
@@ -21,6 +22,7 @@ var createReactIOSNativeComponentClass = require('createReactIOSNativeComponentC
 var deepDiffer = require('deepDiffer');
 var insetsDiffer = require('insetsDiffer');
 var merge = require('merge');
+var requireNativeComponent = require('requireNativeComponent');
 
 type Event = Object;
 type MapRegion = {
@@ -156,46 +158,30 @@ var MapView = React.createClass({
   },
 
   render: function() {
-    return (
-      <RCTMap
-        style={this.props.style}
-        showsUserLocation={this.props.showsUserLocation}
-        zoomEnabled={this.props.zoomEnabled}
-        rotateEnabled={this.props.rotateEnabled}
-        pitchEnabled={this.props.pitchEnabled}
-        scrollEnabled={this.props.scrollEnabled}
-        region={this.props.region}
-        annotations={this.props.annotations}
-        maxDelta={this.props.maxDelta}
-        minDelta={this.props.minDelta}
-        legalLabelInsets={this.props.legalLabelInsets}
-        onChange={this._onChange}
-        onTouchStart={this.props.onTouchStart}
-        onTouchMove={this.props.onTouchMove}
-        onTouchEnd={this.props.onTouchEnd}
-        onTouchCancel={this.props.onTouchCancel}
-      />
-    );
+    return <RCTMap {...this.props} onChange={this._onChange} />;
   },
-
 });
 
-var RCTMap = createReactIOSNativeComponentClass({
-  validAttributes: merge(
-    ReactIOSViewAttributes.UIView, {
-      showsUserLocation: true,
-      zoomEnabled: true,
-      rotateEnabled: true,
-      pitchEnabled: true,
-      scrollEnabled: true,
-      region: {diff: deepDiffer},
-      annotations: {diff: deepDiffer},
-      maxDelta: true,
-      minDelta: true,
-      legalLabelInsets: {diff: insetsDiffer},
-    }
-  ),
-  uiViewClassName: 'RCTMap',
-});
+if (Platform.OS === 'android') {
+  var RCTMap = createReactIOSNativeComponentClass({
+    validAttributes: merge(
+      ReactIOSViewAttributes.UIView, {
+        showsUserLocation: true,
+        zoomEnabled: true,
+        rotateEnabled: true,
+        pitchEnabled: true,
+        scrollEnabled: true,
+        region: {diff: deepDiffer},
+        annotations: {diff: deepDiffer},
+        maxDelta: true,
+        minDelta: true,
+        legalLabelInsets: {diff: insetsDiffer},
+      }
+    ),
+    uiViewClassName: 'RCTMap',
+  });
+} else {
+  var RCTMap = requireNativeComponent('RCTMap', MapView);
+}
 
 module.exports = MapView;
diff --git a/Libraries/Components/SwitchIOS/SwitchIOS.ios.js b/Libraries/Components/SwitchIOS/SwitchIOS.ios.js
@@ -16,11 +16,9 @@
 var NativeMethodsMixin = require('NativeMethodsMixin');
 var PropTypes = require('ReactPropTypes');
 var React = require('React');
-var ReactIOSViewAttributes = require('ReactIOSViewAttributes');
 var StyleSheet = require('StyleSheet');
 
-var createReactIOSNativeComponentClass = require('createReactIOSNativeComponentClass');
-var merge = require('merge');
+var requireNativeComponent = require('requireNativeComponent');
 
 var SWITCH = 'switch';
 
@@ -88,20 +86,16 @@ var SwitchIOS = React.createClass({
 
     // The underlying switch might have changed, but we're controlled,
     // and so want to ensure it represents our value.
-    this.refs[SWITCH].setNativeProps({on: this.props.value});
+    this.refs[SWITCH].setNativeProps({value: this.props.value});
   },
 
   render: function() {
     return (
       <RCTSwitch
+        {...this.props}
         ref={SWITCH}
-        style={[styles.rkSwitch, this.props.style]}
-        enabled={!this.props.disabled}
-        on={this.props.value}
         onChange={this._onChange}
-        onTintColor={this.props.onTintColor}
-        thumbTintColor={this.props.thumbTintColor}
-        tintColor={this.props.tintColor}
+        style={[styles.rkSwitch, this.props.style]}
       />
     );
   }
@@ -114,17 +108,6 @@ var styles = StyleSheet.create({
   },
 });
 
-var rkSwitchAttributes = merge(ReactIOSViewAttributes.UIView, {
-  onTintColor: true,
-  tintColor: true,
-  thumbTintColor: true,
-  on: true,
-  enabled: true,
-});
-
-var RCTSwitch = createReactIOSNativeComponentClass({
-  validAttributes: rkSwitchAttributes,
-  uiViewClassName: 'RCTSwitch',
-});
+var RCTSwitch = requireNativeComponent('RCTSwitch', SwitchIOS);
 
 module.exports = SwitchIOS;
diff --git a/Libraries/Components/TabBarIOS/TabBarIOS.ios.js b/Libraries/Components/TabBarIOS/TabBarIOS.ios.js
@@ -12,12 +12,11 @@
 'use strict';
 
 var React = require('React');
-var ReactIOSViewAttributes = require('ReactIOSViewAttributes');
 var StyleSheet = require('StyleSheet');
 var TabBarItemIOS = require('TabBarItemIOS');
 var View = require('View');
 
-var createReactIOSNativeComponentClass = require('createReactIOSNativeComponentClass');
+var requireNativeComponent = require('requireNativeComponent');
 
 var TabBarIOS = React.createClass({
   statics: {
@@ -43,10 +42,6 @@ var styles = StyleSheet.create({
   }
 });
 
-var config = {
-  validAttributes: ReactIOSViewAttributes.UIView,
-  uiViewClassName: 'RCTTabBar',
-};
-var RCTTabBar = createReactIOSNativeComponentClass(config);
+var RCTTabBar = requireNativeComponent('RCTTabBar', TabBarIOS);
 
 module.exports = TabBarIOS;
diff --git a/Libraries/Components/TabBarIOS/TabBarItemIOS.ios.js b/Libraries/Components/TabBarIOS/TabBarItemIOS.ios.js
@@ -13,13 +13,11 @@
 
 var Image = require('Image');
 var React = require('React');
-var ReactIOSViewAttributes = require('ReactIOSViewAttributes');
 var StaticContainer = require('StaticContainer.react');
 var StyleSheet = require('StyleSheet');
 var View = require('View');
 
-var createReactIOSNativeComponentClass = require('createReactIOSNativeComponentClass');
-var merge = require('merge');
+var requireNativeComponent = require('requireNativeComponent');
 
 var TabBarItemIOS = React.createClass({
   propTypes: {
@@ -121,7 +119,7 @@ var TabBarItemIOS = React.createClass({
         selectedIcon={this.props.selectedIcon && this.props.selectedIcon.uri}
         onPress={this.props.onPress}
         selected={this.props.selected}
-        badgeValue={badge}
+        badge={badge}
         title={this.props.title}
         style={[styles.tab, this.props.style]}>
         {tabContents}
@@ -140,15 +138,6 @@ var styles = StyleSheet.create({
   }
 });
 
-var RCTTabBarItem = createReactIOSNativeComponentClass({
-  validAttributes: merge(ReactIOSViewAttributes.UIView, {
-    title: true,
-    icon: true,
-    selectedIcon: true,
-    selected: true,
-    badgeValue: true,
-  }),
-  uiViewClassName: 'RCTTabBarItem',
-});
+var RCTTabBarItem = requireNativeComponent('RCTTabBarItem', TabBarItemIOS);
 
 module.exports = TabBarItemIOS;
diff --git a/Libraries/Components/View/View.js b/Libraries/Components/View/View.js
@@ -13,12 +13,13 @@
 
 var NativeMethodsMixin = require('NativeMethodsMixin');
 var PropTypes = require('ReactPropTypes');
+var RCTUIManager = require('NativeModules').UIManager;
 var React = require('React');
+var ReactIOSStyleAttributes = require('ReactIOSStyleAttributes');
 var ReactIOSViewAttributes = require('ReactIOSViewAttributes');
 var StyleSheetPropType = require('StyleSheetPropType');
 var ViewStylePropTypes = require('ViewStylePropTypes');
 
-
 var createReactIOSNativeComponentClass = require('createReactIOSNativeComponentClass');
 
 var stylePropType = StyleSheetPropType(ViewStylePropTypes);
@@ -157,17 +158,26 @@ var View = React.createClass({
   },
 });
 
-
 var RCTView = createReactIOSNativeComponentClass({
   validAttributes: ReactIOSViewAttributes.RCTView,
   uiViewClassName: 'RCTView',
 });
 RCTView.propTypes = View.propTypes;
+if (__DEV__) {
+  var viewConfig = RCTUIManager.viewConfigs && RCTUIManager.viewConfigs.RCTView || {};
+  for (var prop in viewConfig.nativeProps) {
+    var viewAny: any = View; // Appease flow
+    if (!viewAny.propTypes[prop] && !ReactIOSStyleAttributes[prop]) {
+      throw new Error(
+        'View is missing propType for native prop `' + prop + '`'
+      );
+    }
+  }
+}
 
 var ViewToExport = RCTView;
 if (__DEV__) {
   ViewToExport = View;
 }
 
-
 module.exports = ViewToExport;
diff --git a/Libraries/Components/WebView/WebView.ios.js b/Libraries/Components/WebView/WebView.ios.js
@@ -19,16 +19,13 @@ var StyleSheet = require('StyleSheet');
 var Text = require('Text');
 var View = require('View');
 
-var createReactIOSNativeComponentClass = require('createReactIOSNativeComponentClass');
+var invariant = require('invariant');
 var keyMirror = require('keyMirror');
-var insetsDiffer = require('insetsDiffer');
-var merge = require('merge');
+var requireNativeComponent = require('requireNativeComponent');
 
 var PropTypes = React.PropTypes;
 var RCTWebViewManager = require('NativeModules').WebViewManager;
 
-var invariant = require('invariant');
-
 var BGWASH = 'rgba(255,255,255,0.8)';
 var RCT_WEBVIEW_REF = 'webview';
 
@@ -213,18 +210,7 @@ var WebView = React.createClass({
   },
 });
 
-var RCTWebView = createReactIOSNativeComponentClass({
-  validAttributes: merge(ReactIOSViewAttributes.UIView, {
-    url: true,
-    html: true,
-    bounces: true,
-    scrollEnabled: true,
-    contentInset: {diff: insetsDiffer},
-    automaticallyAdjustContentInsets: true,
-    shouldInjectAJAXHandler: true
-  }),
-  uiViewClassName: 'RCTWebView',
-});
+var RCTWebView = requireNativeComponent('RCTWebView', WebView);
 
 var styles = StyleSheet.create({
   container: {

diff --git a/Libraries/ReactIOS/verifyPropTypes.js b/Libraries/ReactIOS/verifyPropTypes.js
@@ -23,7 +23,7 @@ function verifyPropTypes(
     return; // This happens for UnimplementedView.
   }
   var nativeProps = viewConfig.nativeProps;
-  for (var prop in viewConfig.nativeProps) {
+  for (var prop in nativeProps) {
     if (!component.propTypes[prop] &&
         !View.propTypes[prop] &&
         !ReactIOSStyleAttributes[prop] &&

diff --git a/React/Views/RCTSwitchManager.m b/React/Views/RCTSwitchManager.m
@@ -42,7 +42,14 @@ - (void)onChange:(RCTSwitch *)sender
 RCT_EXPORT_VIEW_PROPERTY(onTintColor, UIColor);
 RCT_EXPORT_VIEW_PROPERTY(tintColor, UIColor);
 RCT_EXPORT_VIEW_PROPERTY(thumbTintColor, UIColor);
-RCT_EXPORT_VIEW_PROPERTY(on, BOOL);
-RCT_EXPORT_VIEW_PROPERTY(enabled, BOOL);
+RCT_REMAP_VIEW_PROPERTY(value, on, BOOL);
+RCT_CUSTOM_VIEW_PROPERTY(disabled, BOOL, RCTSwitch)
+{
+  if (json) {
+    view.enabled = !([RCTConvert BOOL:json]);
+  } else {
+    view.enabled = defaultView.enabled;
+  }
+}
 
 @end