chore(NPM): Updates JS modules to match RN 0.58 (#2293)

A few deprecations and refactorings caused issues with the upgrade to 0.58. This was all the changes to JS necessary to get RNTester working.
microsoft · May 3, 2019 · 3c24758 · 3c24758
1 parent 938e3be
commit 3c24758
Show file tree

Hide file tree

Showing 19 changed files with 1,496 additions and 1,411 deletions.
diff --git a/RNWCS/Libraries/Components/ActivityIndicator/ActivityIndicator.windows.js b/RNWCS/Libraries/Components/ActivityIndicator/ActivityIndicator.windows.js
@@ -1,129 +1,132 @@
 /**
- * Copyright (c) 2015-present, Facebook, Inc.
+ * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- * 
+ *
  * Portions copyright for react-native-windows:
  * 
  * Copyright (c) Microsoft Corporation. All rights reserved.
  * Licensed under the MIT License.
- *
- * @providesModule ActivityIndicator
+ * 
+ * @format
  * @flow
  */
+
 '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';
+
+const RCTActivityIndicator =
+  Platform.OS === 'android'
+    ? require('ProgressBarAndroid')
+    : Platform.OS === 'ios'
+      ? requireNativeComponent('RCTActivityIndicatorView')
+      : requireNativeComponent('WindowsProgressRing');
+
 const GRAY = '#999999';
 
 type IndicatorSize = number | 'small' | 'large';
 
-type DefaultProps = {
-  animating: boolean,
-  color: any,
-  hidesWhenStopped: boolean,
-  size: IndicatorSize,
-}
+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,
+
+  /**
+   * Whether to show the indicator (true, the default) or hide it (false).
+   *
+   * See http://facebook.github.io/react-native/docs/activityindicator.html#animating
+   */
+  animating?: ?boolean,
+
+  /**
+   * The foreground color of the spinner (default is gray).
+   *
+   * See http://facebook.github.io/react-native/docs/activityindicator.html#color
+   */
+  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?: ?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,
-    /**
-     * The foreground color of the spinner (default is gray).
-     * 
-     * See http://facebook.github.io/react-native/docs/activityindicator.html#color
-     */
-    color: ColorPropType,
-    /**
-     * 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,
-    ]),
-    /**
-     * Whether the indicator should hide when not animating (true by default).
-     *
-     * @platform ios
-     * 
-     * See http://facebook.github.io/react-native/docs/activityindicator.html#hideswhenstopped
-     */
-    hidesWhenStopped: PropTypes.bool,
-  },
+const ActivityIndicator = (
+  props: Props,
+  forwardedRef?: ?React.Ref<'RCTActivityIndicatorView'>,
+) => {
+  const {onLayout, style, ...restProps} = props;
+  let sizeStyle;
 
-  getDefaultProps(): DefaultProps {
-    return {
-      animating: true,
-      color: Platform.OS !== 'android' ? 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;
-      default:
-        sizeStyle = {height: props.size, width: props.size};
-        break;
-    }
-
-    const nativeProps = {
-      ...props,
-      style: sizeStyle,
-      styleAttr: 'Normal',
-      indeterminate: true,
-    };
-
-    return (
-      <View onLayout={onLayout} style={[styles.container, style]}>
-        {Platform.OS !== 'android' ? (
-          <RCTActivityIndicator {...nativeProps} />
-        ) : (
-          <ProgressBarAndroid {...nativeProps} />
-        )}
-      </View>
-    );
+  switch (props.size) {
+    case 'small':
+      sizeStyle = styles.sizeSmall;
+      break;
+    case 'large':
+      sizeStyle = styles.sizeLarge;
+      break;
+    default:
+      sizeStyle = {height: props.size, width: props.size};
+      break;
   }
-});
+
+  const nativeProps = {
+    ...restProps,
+    ref: forwardedRef,
+    style: sizeStyle,
+    styleAttr: 'Normal',
+    indeterminate: true,
+  };
+
+  return (
+    <View
+      onLayout={onLayout}
+      style={StyleSheet.compose(
+        styles.container,
+        style,
+      )}>
+      {/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was
+        * found when making Flow check .android.js files. */}
+      <RCTActivityIndicator {...nativeProps} />
+    </View>
+  );
+};
+
+// $FlowFixMe - TODO T29156721 `React.forwardRef` is not defined in Flow, yet.
+const ActivityIndicatorWithRef = React.forwardRef(ActivityIndicator);
+ActivityIndicatorWithRef.displayName = 'ActivityIndicator';
+
+ActivityIndicatorWithRef.defaultProps = {
+  animating: true,
+  color: Platform.OS !== 'android' ? GRAY : null,
+  hidesWhenStopped: true,
+  size: 'small',
+};
 
 const styles = StyleSheet.create({
   container: {
@@ -140,17 +143,4 @@ const styles = StyleSheet.create({
   },
 });
 
-if (Platform.OS === 'ios') {
-  var RCTActivityIndicator = requireNativeComponent(
-    'RCTActivityIndicatorView',
-    ActivityIndicator,
-    {nativeOnly: {activityIndicatorViewStyle: true}},
-  );
-} else if (Platform.OS === 'windows') {
-  var RCTActivityIndicator = requireNativeComponent(
-      'WindowsProgressRing',
-      ActivityIndicator
-  );
-}
-
-module.exports = ActivityIndicator;
+module.exports = (ActivityIndicatorWithRef: Class<NativeComponent<Props>>);