ActivityIndicator ES6 Class

Reviewed By: yungsters

Differential Revision: D8219463

fbshipit-source-id: 7d252d15bb4a7345d156b1659b09be2a4a69ba6c

Libraries/Components/ActivityIndicator/ActivityIndicator.js

@@ -10,19 +10,15 @@
 
 'use strict';
 
-const ColorPropType = require('ColorPropType');
-const NativeMethodsMixin = require('NativeMethodsMixin');
 const Platform = require('Platform');
 const ProgressBarAndroid = require('ProgressBarAndroid');
-const PropTypes = require('prop-types');
 const React = require('React');
 const StyleSheet = require('StyleSheet');
 const View = require('View');
-const ViewPropTypes = require('ViewPropTypes');
 
-const createReactClass = require('create-react-class');
 const requireNativeComponent = require('requireNativeComponent');
 
+import type {NativeComponent} from 'ReactNative';
 import type {ViewProps} from 'ViewPropTypes';
 
 let RCTActivityIndicator;
@@ -31,76 +27,53 @@ const GRAY = '#999999';
 
 type IndicatorSize = number | 'small' | 'large';
 
+type IOSProps = $ReadOnly<{|
+  /**
+   * Whether the indicator should hide when not animating (true by default).
+   *
+   * See http://facebook.github.io/react-native/docs/activityindicator.html#hideswhenstopped
+   */
+  hidesWhenStopped?: ?boolean,
+|}>;
 type Props = $ReadOnly<{|
   ...ViewProps,
+  ...IOSProps,
 
-  animating?: ?boolean,
-  color?: ?string,
-  hidesWhenStopped?: ?boolean,
-  size?: ?IndicatorSize,
-|}>;
-
-type DefaultProps = {
-  animating: boolean,
-  color: ?string,
-  hidesWhenStopped: boolean,
-  size: IndicatorSize,
-};
-
-/**
- * Displays a circular loading indicator.
- *
- * See http://facebook.github.io/react-native/docs/activityindicator.html
- */
-const ActivityIndicator = ((createReactClass({
-  displayName: 'ActivityIndicator',
-  mixins: [NativeMethodsMixin],
-
-  propTypes: {
-    ...ViewPropTypes,
   /**
    * Whether to show the indicator (true, the default) or hide it (false).
    *
    * See http://facebook.github.io/react-native/docs/activityindicator.html#animating
    */
-    animating: PropTypes.bool,
+  animating?: ?boolean,
+
   /**
    * The foreground color of the spinner (default is gray).
    *
    * See http://facebook.github.io/react-native/docs/activityindicator.html#color
    */
-    color: ColorPropType,
+  color?: ?string,
+
   /**
    * Size of the indicator (default is 'small').
    * Passing a number to the size prop is only supported on Android.
    *
    * See http://facebook.github.io/react-native/docs/activityindicator.html#size
    */
-    size: PropTypes.oneOfType([
-      PropTypes.oneOf(['small', 'large']),
-      PropTypes.number,
-    ]),
+  size?: ?IndicatorSize,
+|}>;
+
 /**
-     * Whether the indicator should hide when not animating (true by default).
+ * Displays a circular loading indicator.
  *
-     * @platform ios
-     *
-     * See http://facebook.github.io/react-native/docs/activityindicator.html#hideswhenstopped
+ * See http://facebook.github.io/react-native/docs/activityindicator.html
  */
-    hidesWhenStopped: PropTypes.bool,
-  },
-
-  getDefaultProps(): DefaultProps {
-    return {
-      animating: true,
-      color: Platform.OS === 'ios' ? GRAY : null,
-      hidesWhenStopped: true,
-      size: 'small',
-    };
-  },
-
-  render() {
-    const {onLayout, style, ...props} = this.props;
+const ActivityIndicator = (
+  props: $ReadOnly<{|
+    ...Props,
+    forwardedRef?: ?React.Ref<'RCTActivityIndicatorView'>,
+  |}>,
+) => {
+  const {onLayout, style, forwardedRef, ...restProps} = props;
   let sizeStyle;
 
   switch (props.size) {
@@ -116,7 +89,8 @@ const ActivityIndicator = ((createReactClass({
   }
 
   const nativeProps = {
-      ...props,
+    ...restProps,
+    ref: forwardedRef,
     style: sizeStyle,
     styleAttr: 'Normal',
     indeterminate: true,
@@ -131,13 +105,25 @@ const ActivityIndicator = ((createReactClass({
       )}
     </View>
   );
-  },
-}): any): React.ComponentType<Props>);
+};
+
+// $FlowFixMe - TODO T29156721 `React.forwardRef` is not defined in Flow, yet.
+const ActivityIndicatorWithRef = React.forwardRef((props: Props, ref) => {
+  return <ActivityIndicator {...props} forwardedRef={ref} />;
+});
+
+ActivityIndicatorWithRef.defaultProps = {
+  animating: true,
+  color: Platform.OS === 'ios' ? GRAY : null,
+  hidesWhenStopped: true,
+  size: 'small',
+};
+ActivityIndicatorWithRef.displayName = 'ActivityIndicator';
 
 if (Platform.OS === 'ios') {
   RCTActivityIndicator = requireNativeComponent(
     'RCTActivityIndicatorView',
-    ActivityIndicator,
+    null,
     {nativeOnly: {activityIndicatorViewStyle: true}},
   );
 }
@@ -157,4 +143,4 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = ActivityIndicator;
+module.exports = (ActivityIndicatorWithRef: Class<NativeComponent<Props>>);

jest/mockComponent.js

@@ -20,9 +20,24 @@ module.exports = (moduleName, instanceMethods) => {
     render() {
       const name = RealComponent.displayName || RealComponent.name;
 
+      const props = Object.assign({}, RealComponent.defaultProps);
+
+      if (this.props) {
+        Object.keys(this.props).forEach(prop => {
+          // We can't just assign props on top of defaultProps
+          // because React treats undefined as special and different from null.
+          // If a prop is specified but set to undefined it is ignored and the
+          // default prop is used instead. If it is set to null, then the
+          // null value overwrites the default value.
+          if (this.props[prop] !== undefined) {
+            props[prop] = this.props[prop];
+          }
+        });
+      }
+
       return React.createElement(
         name.replace(/^(RCT|RK)/, ''),
-        this.props,
+        props,
         this.props.children,
       );
     }