Update ActivityIndicator component (#29523)

Summary:
Fixes https://github.com/MLH-Fellowship/react-native/issues/34

The PR is part of an effort to update the code comments to match the current documentation on the React Native website. The project is a part of the MLH Fellowship program and involves the automatic generation of the website docs from code comments and flow types as the end result.

To learn more about the project you can visit the project wiki:
- [Project Details](https://github.com/MLH-Fellowship/0.4.x-projects/wiki/React-Native-Flowtype-API-Docs-Generator)
- [RN Docs Standards](https://github.com/MLH-Fellowship/react-native/wiki/RN-Docs-standards)

Link to the documentation(the source of truth):
- [activityindicator.md](https://github.com/MLH-Fellowship/react-native-website/blob/master/docs/activityindicator.md)

## Changes
* Update the title and prop description from docs.
* Remove unnecessary `*` from the code comments.
* Add Snack player example specified in the docs to the code comments as JSDoc.
* Add `type` annotation to parse supported datatype by the prop.
* Add `platform` annotation to specify platforms supported by a prop.
* Add `default` annotation to parse default value of prop.

## Changelog
[Internal]

Pull Request resolved: https://github.com/facebook/react-native/pull/29523

Test Plan:
All changes are made to the code comments and thus there is no need for testing.

Reviewed by jevakallio

Reviewed By: cpojer

Differential Revision: D22921419

Pulled By: motiz88

fbshipit-source-id: 3701bf3e3f4e0762529c8a5597263354d5243f07
This commit is contained in:
Aniket Kumar
2020-08-04 08:40:57 -07:00
committed by Facebook GitHub Bot
parent 44cb09ac46
commit bb7aef2dd7
@@ -6,6 +6,7 @@
*
* @format
* @flow
* @generate-docs
*/
'use strict';
@@ -29,10 +30,10 @@ type IndicatorSize = number | 'small' | 'large';
type IOSProps = $ReadOnly<{|
/**
* Whether the indicator should hide when not animating (true by default).
*
* See https://reactnative.dev/docs/activityindicator.html#hideswhenstopped
*/
Whether the indicator should hide when not animating.
@platform ios
*/
hidesWhenStopped?: ?boolean,
|}>;
type Props = $ReadOnly<{|
@@ -40,33 +41,27 @@ type Props = $ReadOnly<{|
...IOSProps,
/**
* Whether to show the indicator (true, the default) or hide it (false).
*
* See https://reactnative.dev/docs/activityindicator.html#animating
Whether to show the indicator (`true`) or hide it (`false`).
*/
animating?: ?boolean,
/**
* The foreground color of the spinner (default is gray).
*
* See https://reactnative.dev/docs/activityindicator.html#color
*/
The foreground color of the spinner.
@default {@platform android} `null` (system accent default color)
@default {@platform ios} '#999999'
*/
color?: ?ColorValue,
/**
* Size of the indicator (default is 'small').
* Passing a number to the size prop is only supported on Android.
*
* See https://reactnative.dev/docs/activityindicator.html#size
*/
Size of the indicator.
@type enum(`'small'`, `'large'`)
@type {@platform android} number
*/
size?: ?IndicatorSize,
|}>;
/**
* Displays a circular loading indicator.
*
* See https://reactnative.dev/docs/activityindicator.html
*/
const ActivityIndicator = (props: Props, forwardedRef?: any) => {
const {onLayout, style, size, ...restProps} = props;
let sizeStyle;
@@ -115,6 +110,68 @@ const ActivityIndicator = (props: Props, forwardedRef?: any) => {
);
};
/**
Displays a circular loading indicator.
```SnackPlayer name=ActivityIndicator%20Function%20Component%20Example
import React from "react";
import { ActivityIndicator, StyleSheet, Text, View } from "react-native";
const App = () => (
<View style={[styles.container, styles.horizontal]}>
<ActivityIndicator />
<ActivityIndicator size="large" />
<ActivityIndicator size="small" color="#0000ff" />
<ActivityIndicator size="large" color="#00ff00" />
</View>
);
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center"
},
horizontal: {
flexDirection: "row",
justifyContent: "space-around",
padding: 10
}
});
export default App;
```
```SnackPlayer name=ActivityIndicator%20Class%20Component%20Example
import React, { Component } from "react";
import { ActivityIndicator, StyleSheet, Text, View } from "react-native";
class App extends Component {
render() {
return (
<View style={[styles.container, styles.horizontal]}>
<ActivityIndicator />
<ActivityIndicator size="large" />
<ActivityIndicator size="small" color="#0000ff" />
<ActivityIndicator size="large" color="#00ff00" />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center"
},
horizontal: {
flexDirection: "row",
justifyContent: "space-around",
padding: 10
}
});
export default App;
```
*/
const ActivityIndicatorWithRef: React.AbstractComponent<
Props,
HostComponent<mixed>,