mirror of
https://github.com/status-im/react-native.git
synced 2025-01-15 12:05:06 +00:00
4c245160bd
Summary: This replaces ActivityIndicatorIOS and indeterminate ProgressBar that were deprecated recently with ActivityIndicator across the codebase and examples and a few other cleanups. This also make a small tweak to ActivityIndicator so it uses the Android theme color instead of gray when no color is specified. Use Slider instead of SliderIOS in CameraRoll example. Remove the line about unifying ActivityIndicator and ProgressBar. **Test plan** Tested the affected components in UIExplorer on iOS and Android, tested the changes made in Movies example on iOS and Android. Closes https://github.com/facebook/react-native/pull/8082 Differential Revision: D3429770 fbshipit-source-id: 3b2e1196a8b9fe00d47a7aa1bbc079b094796421
128 lines
3.0 KiB
JavaScript
128 lines
3.0 KiB
JavaScript
/**
|
|
* Copyright (c) 2015-present, Facebook, Inc.
|
|
* All rights reserved.
|
|
*
|
|
* This source code is licensed under the BSD-style license found in the
|
|
* LICENSE file in the root directory of this source tree. An additional grant
|
|
* of patent rights can be found in the PATENTS file in the same directory.
|
|
*
|
|
* @providesModule ActivityIndicator
|
|
* @flow
|
|
*/
|
|
'use strict';
|
|
|
|
const ColorPropType = require('ColorPropType');
|
|
const NativeMethodsMixin = require('NativeMethodsMixin');
|
|
const Platform = require('Platform');
|
|
const PropTypes = require('ReactPropTypes');
|
|
const React = require('React');
|
|
const StyleSheet = require('StyleSheet');
|
|
const View = require('View');
|
|
|
|
const requireNativeComponent = require('requireNativeComponent');
|
|
|
|
const GRAY = '#999999';
|
|
|
|
/**
|
|
* Displays a circular loading indicator.
|
|
*/
|
|
const ActivityIndicator = React.createClass({
|
|
mixins: [NativeMethodsMixin],
|
|
|
|
propTypes: {
|
|
...View.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: ColorPropType,
|
|
/**
|
|
* Size of the indicator. Small has a height of 20, large has a height of 36.
|
|
* Other sizes can be obtained using a scale transform.
|
|
*/
|
|
size: PropTypes.oneOf([
|
|
'small',
|
|
'large',
|
|
]),
|
|
/**
|
|
* Whether the indicator should hide when not animating (true by default).
|
|
*
|
|
* @platform ios
|
|
*/
|
|
hidesWhenStopped: PropTypes.bool,
|
|
},
|
|
|
|
getDefaultProps() {
|
|
return {
|
|
animating: true,
|
|
color: Platform.OS === 'ios' ? GRAY : undefined,
|
|
hidesWhenStopped: true,
|
|
size: 'small',
|
|
};
|
|
},
|
|
|
|
render() {
|
|
const {onLayout, style, ...props} = this.props;
|
|
let sizeStyle;
|
|
switch (props.size) {
|
|
case 'small':
|
|
sizeStyle = styles.sizeSmall;
|
|
break;
|
|
case 'large':
|
|
sizeStyle = styles.sizeLarge;
|
|
break;
|
|
}
|
|
return (
|
|
<View
|
|
onLayout={onLayout}
|
|
style={[styles.container, style]}>
|
|
<RCTActivityIndicator
|
|
{...props}
|
|
style={sizeStyle}
|
|
styleAttr="Normal"
|
|
indeterminate
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
});
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
sizeSmall: {
|
|
width: 20,
|
|
height: 20,
|
|
},
|
|
sizeLarge: {
|
|
width: 36,
|
|
height: 36,
|
|
},
|
|
});
|
|
|
|
if (Platform.OS === 'ios') {
|
|
var RCTActivityIndicator = requireNativeComponent(
|
|
'RCTActivityIndicatorView',
|
|
ActivityIndicator,
|
|
{nativeOnly: {activityIndicatorViewStyle: true}},
|
|
);
|
|
} else if (Platform.OS === 'android') {
|
|
var RCTActivityIndicator = requireNativeComponent(
|
|
'AndroidProgressBar',
|
|
ActivityIndicator,
|
|
// Ignore props that are specific to non inderterminate ProgressBar.
|
|
{nativeOnly: {
|
|
indeterminate: true,
|
|
progress: true,
|
|
styleAttr: true,
|
|
}},
|
|
);
|
|
}
|
|
|
|
module.exports = ActivityIndicator;
|