2015-02-20 04:10:52 +00:00
|
|
|
/**
|
|
|
|
* Copyright 2004-present Facebook. All Rights Reserved.
|
|
|
|
*
|
|
|
|
* @providesModule ActivityIndicatorIOS
|
|
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
|
|
|
|
var NativeMethodsMixin = require('NativeMethodsMixin');
|
2015-03-04 22:04:52 +00:00
|
|
|
var NativeModules = require('NativeModules');
|
2015-02-20 04:10:52 +00:00
|
|
|
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 SpinnerSize = keyMirror({
|
|
|
|
large: null,
|
|
|
|
small: null,
|
|
|
|
});
|
|
|
|
|
|
|
|
var GRAY = '#999999';
|
|
|
|
|
|
|
|
var ActivityIndicatorIOS = React.createClass({
|
|
|
|
mixins: [NativeMethodsMixin],
|
|
|
|
|
|
|
|
propTypes: {
|
|
|
|
/**
|
|
|
|
* Whether to show the indicator (true, the default) or hide it (false).
|
|
|
|
*/
|
|
|
|
animating: PropTypes.bool,
|
|
|
|
/**
|
|
|
|
* The foreground color of the spinner (default is gray).
|
|
|
|
*/
|
|
|
|
color: PropTypes.string,
|
2015-03-04 22:04:52 +00:00
|
|
|
|
|
|
|
size: PropTypes.oneOf([
|
|
|
|
'small', // default
|
|
|
|
'large',
|
|
|
|
]),
|
2015-02-20 04:10:52 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
getDefaultProps: function() {
|
|
|
|
return {
|
|
|
|
animating: true,
|
|
|
|
size: SpinnerSize.small,
|
|
|
|
color: GRAY,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
|
|
|
|
render: function() {
|
|
|
|
var style = styles.sizeSmall;
|
2015-03-17 10:08:46 +00:00
|
|
|
var NativeConstants = NativeModules.RCTUIManager.UIActivityIndicatorView.Constants;
|
2015-02-20 04:10:52 +00:00
|
|
|
var activityIndicatorViewStyle = NativeConstants.StyleWhite;
|
2015-03-04 22:04:52 +00:00
|
|
|
if (this.props.size === 'large') {
|
2015-02-20 04:10:52 +00:00
|
|
|
style = styles.sizeLarge;
|
|
|
|
activityIndicatorViewStyle = NativeConstants.StyleWhiteLarge;
|
|
|
|
}
|
|
|
|
return (
|
|
|
|
<View
|
|
|
|
style={[styles.container, style, this.props.style]}>
|
|
|
|
<UIActivityIndicatorView
|
|
|
|
activityIndicatorViewStyle={activityIndicatorViewStyle}
|
|
|
|
animating={this.props.animating}
|
|
|
|
color={this.props.color}
|
|
|
|
/>
|
|
|
|
</View>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
var styles = StyleSheet.create({
|
|
|
|
container: {
|
|
|
|
alignItems: 'center',
|
|
|
|
justifyContent: 'center',
|
|
|
|
},
|
|
|
|
sizeSmall: {
|
|
|
|
height: 20,
|
|
|
|
},
|
|
|
|
sizeLarge: {
|
|
|
|
height: 36,
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
var UIActivityIndicatorView = createReactIOSNativeComponentClass({
|
|
|
|
validAttributes: merge(
|
|
|
|
ReactIOSViewAttributes.UIView, {
|
|
|
|
activityIndicatorViewStyle: true, // UIActivityIndicatorViewStyle=UIActivityIndicatorViewStyleWhite
|
|
|
|
animating: true,
|
|
|
|
color: true,
|
|
|
|
}),
|
|
|
|
uiViewClassName: 'UIActivityIndicatorView',
|
|
|
|
});
|
|
|
|
|
|
|
|
module.exports = ActivityIndicatorIOS;
|