From 77e38b26c56450a085b2b6215d2fc07ee75f10e8 Mon Sep 17 00:00:00 2001 From: Nick Lockwood Date: Sun, 26 Apr 2015 02:22:34 -0700 Subject: [PATCH] Improved RCTActivityIndicatorView and fixed some flow errors --- Examples/UIExplorer/UIExplorerList.js | 2 +- .../ActivityIndicatorIOS.ios.js | 41 +++++++------------ .../Components/TabBarIOS/TabBarItemIOS.ios.js | 5 ++- Libraries/ReactIOS/ReactIOSMount.js | 4 +- React/React.xcodeproj/project.pbxproj | 12 +++--- ...er.h => RCTActivityIndicatorViewManager.h} | 8 +++- ...er.m => RCTActivityIndicatorViewManager.m} | 30 +++++--------- 7 files changed, 46 insertions(+), 56 deletions(-) rename React/Views/{RCTUIActivityIndicatorViewManager.h => RCTActivityIndicatorViewManager.h} (64%) rename React/Views/{RCTUIActivityIndicatorViewManager.m => RCTActivityIndicatorViewManager.m} (52%) diff --git a/Examples/UIExplorer/UIExplorerList.js b/Examples/UIExplorer/UIExplorerList.js index 73010617732..df3c9bc7dec 100644 --- a/Examples/UIExplorer/UIExplorerList.js +++ b/Examples/UIExplorer/UIExplorerList.js @@ -11,7 +11,7 @@ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. * - * @flow + * --flow disabled-- */ 'use strict'; diff --git a/Libraries/Components/ActivityIndicatorIOS/ActivityIndicatorIOS.ios.js b/Libraries/Components/ActivityIndicatorIOS/ActivityIndicatorIOS.ios.js index 3a44020a663..a3f1fe6be8c 100644 --- a/Libraries/Components/ActivityIndicatorIOS/ActivityIndicatorIOS.ios.js +++ b/Libraries/Components/ActivityIndicatorIOS/ActivityIndicatorIOS.ios.js @@ -18,21 +18,16 @@ var React = require('React'); var StyleSheet = require('StyleSheet'); var View = require('View'); -var keyMirror = require('keyMirror'); var requireNativeComponent = require('requireNativeComponent'); var verifyPropTypes = require('verifyPropTypes'); -var SpinnerSize = keyMirror({ - large: null, - small: null, -}); - var GRAY = '#999999'; type DefaultProps = { animating: boolean; - size: 'small' | 'large'; color: string; + hidesWhenStopped: boolean; + size: 'small' | 'large'; }; var ActivityIndicatorIOS = React.createClass({ @@ -47,7 +42,10 @@ var ActivityIndicatorIOS = React.createClass({ * The foreground color of the spinner (default is gray). */ color: PropTypes.string, - + /** + * Whether the indicator should hide when not animating (true by default). + */ + hidesWhenStopped: PropTypes.bool, /** * Size of the indicator. Small has a height of 20, large has a height of 36. */ @@ -60,27 +58,18 @@ var ActivityIndicatorIOS = React.createClass({ getDefaultProps: function(): DefaultProps { return { animating: true, - size: SpinnerSize.small, color: GRAY, + hidesWhenStopped: true, + size: 'small', }; }, render: function() { - var style = styles.sizeSmall; - var NativeConstants = NativeModules.UIManager.UIActivityIndicatorView.Constants; - var activityIndicatorViewStyle = NativeConstants.StyleWhite; - if (this.props.size === 'large') { - style = styles.sizeLarge; - activityIndicatorViewStyle = NativeConstants.StyleWhiteLarge; - } + var {style, ...props} = this.props; + var sizeStyle = (this.props.size === 'large') ? styles.sizeLarge : styles.sizeSmall; return ( - - + + ); } @@ -99,15 +88,15 @@ var styles = StyleSheet.create({ } }); -var UIActivityIndicatorView = requireNativeComponent( - 'UIActivityIndicatorView', +var RCTActivityIndicatorView = requireNativeComponent( + 'RCTActivityIndicatorView', null ); if (__DEV__) { var nativeOnlyProps = {activityIndicatorViewStyle: true}; verifyPropTypes( ActivityIndicatorIOS, - UIActivityIndicatorView.viewConfig, + RCTActivityIndicatorView.viewConfig, nativeOnlyProps ); } diff --git a/Libraries/Components/TabBarIOS/TabBarItemIOS.ios.js b/Libraries/Components/TabBarIOS/TabBarItemIOS.ios.js index 32945c43434..bb2a8e991b7 100644 --- a/Libraries/Components/TabBarIOS/TabBarItemIOS.ios.js +++ b/Libraries/Components/TabBarIOS/TabBarItemIOS.ios.js @@ -66,6 +66,9 @@ var TabBarItemIOS = React.createClass({ * blank content, you probably forgot to add a selected one. */ selected: React.PropTypes.bool, + /** + * React style object. + */ style: View.propTypes.style, /** * Text that appears under the icon. It is ignored when a system icon @@ -86,7 +89,7 @@ var TabBarItemIOS = React.createClass({ } }, - componentWillReceiveProps: function(nextProps: { selected: boolean }) { + componentWillReceiveProps: function(nextProps: { selected: any /* workaround for flow bug */ }) { if (this.state.hasBeenSelected || nextProps.selected) { this.setState({hasBeenSelected: true}); } diff --git a/Libraries/ReactIOS/ReactIOSMount.js b/Libraries/ReactIOS/ReactIOSMount.js index 730031672f2..9b1428fdd6d 100644 --- a/Libraries/ReactIOS/ReactIOSMount.js +++ b/Libraries/ReactIOS/ReactIOSMount.js @@ -191,10 +191,10 @@ var ReactIOSMount = { * that has been rendered and unmounting it. There should just be one child * component at this time. */ - unmountComponentAtNode: function(containerTag: number): bool { + unmountComponentAtNode: function(containerTag: number): boolean { if (!ReactIOSTagHandles.reactTagIsNativeTopRootID(containerTag)) { console.error('You cannot render into anything but a top root'); - return; + return false; } var containerID = ReactIOSTagHandles.tagToRootNodeID[containerTag]; diff --git a/React/React.xcodeproj/project.pbxproj b/React/React.xcodeproj/project.pbxproj index 3364cce76fb..fce2aae428a 100644 --- a/React/React.xcodeproj/project.pbxproj +++ b/React/React.xcodeproj/project.pbxproj @@ -33,7 +33,7 @@ 13B0801D1A69489C00A75B9A /* RCTNavItemManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B080131A69489C00A75B9A /* RCTNavItemManager.m */; }; 13B0801E1A69489C00A75B9A /* RCTTextField.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B080151A69489C00A75B9A /* RCTTextField.m */; }; 13B0801F1A69489C00A75B9A /* RCTTextFieldManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B080171A69489C00A75B9A /* RCTTextFieldManager.m */; }; - 13B080201A69489C00A75B9A /* RCTUIActivityIndicatorViewManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B080191A69489C00A75B9A /* RCTUIActivityIndicatorViewManager.m */; }; + 13B080201A69489C00A75B9A /* RCTActivityIndicatorViewManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B080191A69489C00A75B9A /* RCTActivityIndicatorViewManager.m */; }; 13B080261A694A8400A75B9A /* RCTWrapperViewController.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B080241A694A8400A75B9A /* RCTWrapperViewController.m */; }; 13C156051AB1A2840079392D /* RCTWebView.m in Sources */ = {isa = PBXBuildFile; fileRef = 13C156021AB1A2840079392D /* RCTWebView.m */; }; 13C156061AB1A2840079392D /* RCTWebViewManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 13C156041AB1A2840079392D /* RCTWebViewManager.m */; }; @@ -136,8 +136,8 @@ 13B080151A69489C00A75B9A /* RCTTextField.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTTextField.m; sourceTree = ""; }; 13B080161A69489C00A75B9A /* RCTTextFieldManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTTextFieldManager.h; sourceTree = ""; }; 13B080171A69489C00A75B9A /* RCTTextFieldManager.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTTextFieldManager.m; sourceTree = ""; }; - 13B080181A69489C00A75B9A /* RCTUIActivityIndicatorViewManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTUIActivityIndicatorViewManager.h; sourceTree = ""; }; - 13B080191A69489C00A75B9A /* RCTUIActivityIndicatorViewManager.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTUIActivityIndicatorViewManager.m; sourceTree = ""; }; + 13B080181A69489C00A75B9A /* RCTActivityIndicatorViewManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTActivityIndicatorViewManager.h; sourceTree = ""; }; + 13B080191A69489C00A75B9A /* RCTActivityIndicatorViewManager.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTActivityIndicatorViewManager.m; sourceTree = ""; }; 13B080231A694A8400A75B9A /* RCTWrapperViewController.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTWrapperViewController.h; sourceTree = ""; }; 13B080241A694A8400A75B9A /* RCTWrapperViewController.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTWrapperViewController.m; sourceTree = ""; }; 13C156011AB1A2840079392D /* RCTWebView.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTWebView.h; sourceTree = ""; }; @@ -317,8 +317,8 @@ 13B080151A69489C00A75B9A /* RCTTextField.m */, 13B080161A69489C00A75B9A /* RCTTextFieldManager.h */, 13B080171A69489C00A75B9A /* RCTTextFieldManager.m */, - 13B080181A69489C00A75B9A /* RCTUIActivityIndicatorViewManager.h */, - 13B080191A69489C00A75B9A /* RCTUIActivityIndicatorViewManager.m */, + 13B080181A69489C00A75B9A /* RCTActivityIndicatorViewManager.h */, + 13B080191A69489C00A75B9A /* RCTActivityIndicatorViewManager.m */, 13E0674F1A70F44B002CDEE1 /* RCTView.h */, 13E067501A70F44B002CDEE1 /* RCTView.m */, 13442BF41AA90E0B0037E5B0 /* RCTViewControllerProtocol.h */, @@ -499,7 +499,7 @@ 14F4D38B1AE1B7E40049C042 /* RCTProfile.m in Sources */, 14F3620D1AABD06A001CE568 /* RCTSwitch.m in Sources */, 14F3620E1AABD06A001CE568 /* RCTSwitchManager.m in Sources */, - 13B080201A69489C00A75B9A /* RCTUIActivityIndicatorViewManager.m in Sources */, + 13B080201A69489C00A75B9A /* RCTActivityIndicatorViewManager.m in Sources */, 13E067561A70F44B002CDEE1 /* RCTViewManager.m in Sources */, 58C571C11AA56C1900CDF9C8 /* RCTDatePickerManager.m in Sources */, 13B080061A6947C200A75B9A /* RCTScrollViewManager.m in Sources */, diff --git a/React/Views/RCTUIActivityIndicatorViewManager.h b/React/Views/RCTActivityIndicatorViewManager.h similarity index 64% rename from React/Views/RCTUIActivityIndicatorViewManager.h rename to React/Views/RCTActivityIndicatorViewManager.h index e5a10fdd75c..cbd6816ae4c 100644 --- a/React/Views/RCTUIActivityIndicatorViewManager.h +++ b/React/Views/RCTActivityIndicatorViewManager.h @@ -9,6 +9,12 @@ #import "RCTViewManager.h" -@interface RCTUIActivityIndicatorViewManager : RCTViewManager +@interface RCTConvert (UIActivityIndicatorView) + ++ (UIActivityIndicatorViewStyle)UIActivityIndicatorViewStyle:(id)json; + +@end + +@interface RCTActivityIndicatorViewManager : RCTViewManager @end diff --git a/React/Views/RCTUIActivityIndicatorViewManager.m b/React/Views/RCTActivityIndicatorViewManager.m similarity index 52% rename from React/Views/RCTUIActivityIndicatorViewManager.m rename to React/Views/RCTActivityIndicatorViewManager.m index e2c9b3d353b..3876400dff3 100644 --- a/React/Views/RCTUIActivityIndicatorViewManager.m +++ b/React/Views/RCTActivityIndicatorViewManager.m @@ -7,35 +7,37 @@ * of patent rights can be found in the PATENTS file in the same directory. */ -#import "RCTUIActivityIndicatorViewManager.h" +#import "RCTActivityIndicatorViewManager.h" #import "RCTConvert.h" @implementation RCTConvert (UIActivityIndicatorView) +// NOTE: It's pointless to support UIActivityIndicatorViewStyleGray +// as we can set the color to any arbitrary value that we want to + RCT_ENUM_CONVERTER(UIActivityIndicatorViewStyle, (@{ - @"white-large": @(UIActivityIndicatorViewStyleWhiteLarge), - @"large-white": @(UIActivityIndicatorViewStyleWhiteLarge), - @"white": @(UIActivityIndicatorViewStyleWhite), - @"gray": @(UIActivityIndicatorViewStyleGray), + @"large": @(UIActivityIndicatorViewStyleWhiteLarge), + @"small": @(UIActivityIndicatorViewStyleWhite), }), UIActivityIndicatorViewStyleWhiteLarge, integerValue) @end -@implementation RCTUIActivityIndicatorViewManager +@implementation RCTActivityIndicatorViewManager -RCT_EXPORT_MODULE(UIActivityIndicatorViewManager) +RCT_EXPORT_MODULE() - (UIView *)view { return [[UIActivityIndicatorView alloc] init]; } -RCT_EXPORT_VIEW_PROPERTY(activityIndicatorViewStyle, UIActivityIndicatorViewStyle) RCT_EXPORT_VIEW_PROPERTY(color, UIColor) +RCT_EXPORT_VIEW_PROPERTY(hidesWhenStopped, BOOL) +RCT_REMAP_VIEW_PROPERTY(size, activityIndicatorViewStyle, UIActivityIndicatorViewStyle) RCT_CUSTOM_VIEW_PROPERTY(animating, BOOL, UIActivityIndicatorView) { - BOOL animating = json ? [json boolValue] : [defaultView isAnimating]; + BOOL animating = json ? [RCTConvert BOOL:json] : [defaultView isAnimating]; if (animating != [view isAnimating]) { if (animating) { [view startAnimating]; @@ -45,14 +47,4 @@ RCT_CUSTOM_VIEW_PROPERTY(animating, BOOL, UIActivityIndicatorView) } } -- (NSDictionary *)constantsToExport -{ - return - @{ - @"StyleWhite": @(UIActivityIndicatorViewStyleWhite), - @"StyleWhiteLarge": @(UIActivityIndicatorViewStyleWhiteLarge), - @"StyleGray": @(UIActivityIndicatorViewStyleGray), - }; -} - @end