From 58a550fa0625f31108e06f32ebb2958e2ffefcf0 Mon Sep 17 00:00:00 2001 From: Spencer Ahrens Date: Tue, 21 Apr 2015 21:07:17 -0700 Subject: [PATCH] [ReactNative] use requireNativeComponent to clean up a bunch of boilerplate --- .../ActivityIndicatorIOS.ios.js | 26 ++++---- .../DatePicker/DatePickerIOS.ios.js | 19 +----- Libraries/Components/MapView/MapView.js | 62 +++++++------------ .../Components/SwitchIOS/SwitchIOS.ios.js | 27 ++------ .../Components/TabBarIOS/TabBarIOS.ios.js | 9 +-- .../Components/TabBarIOS/TabBarItemIOS.ios.js | 17 +---- Libraries/Components/View/View.js | 16 ++++- Libraries/Components/WebView/WebView.ios.js | 20 +----- Libraries/ReactIOS/verifyPropTypes.js | 2 +- React/Views/RCTSwitchManager.m | 11 +++- React/Views/RCTTabBarItemManager.m | 2 +- 11 files changed, 77 insertions(+), 134 deletions(-) diff --git a/Libraries/Components/ActivityIndicatorIOS/ActivityIndicatorIOS.ios.js b/Libraries/Components/ActivityIndicatorIOS/ActivityIndicatorIOS.ios.js index f2bcbfd51..3a44020a6 100644 --- 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 index 9bd0a2ac4..41fc9b877 100644 --- 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 index 2f02b1b9d..e38dd9564 100644 --- 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 ( - - ); + return ; }, - }); -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 index 702227947..5a56e36b7 100644 --- 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 ( ); } @@ -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 index 05ac37c74..4163b2d78 100644 --- 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 index 86b38a8cd..32945c434 100644 --- 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 index 0fdfa1fc8..0da57f554 100644 --- 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 index 6257c12b7..c4e4fbcd3 100644 --- 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 index 032e572ec..ab1d61728 100644 --- 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 index eb0d626e6..c60d83e81 100644 --- a/React/Views/RCTSwitchManager.m +++ b/React/Views/RCTSwitchManager.m @@ -42,7 +42,14 @@ RCT_EXPORT_MODULE() 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 diff --git a/React/Views/RCTTabBarItemManager.m b/React/Views/RCTTabBarItemManager.m index 8bbe782b7..cdfa8669c 100644 --- a/React/Views/RCTTabBarItemManager.m +++ b/React/Views/RCTTabBarItemManager.m @@ -24,7 +24,7 @@ RCT_EXPORT_MODULE() RCT_EXPORT_VIEW_PROPERTY(selected, BOOL); RCT_EXPORT_VIEW_PROPERTY(icon, NSString); RCT_REMAP_VIEW_PROPERTY(selectedIcon, barItem.selectedImage, UIImage); -RCT_REMAP_VIEW_PROPERTY(badgeValue, barItem.badgeValue, NSString); +RCT_REMAP_VIEW_PROPERTY(badge, barItem.badgeValue, NSString); RCT_CUSTOM_VIEW_PROPERTY(title, NSString, RCTTabBarItem) { view.barItem.title = json ? [RCTConvert NSString:json] : defaultView.barItem.title;