Use generated view config for ActivityIndicatorView

Summary: This diff moves ActivityIndicatorView to the generated view config

Reviewed By: shergin

Differential Revision: D15392561

fbshipit-source-id: 67a2fa0dbbb884af9e9c02b9062d3a610a023240

Libraries/Components/ActivityIndicator/ActivityIndicator.js

@@ -15,15 +15,12 @@ const React = require('react');
 const StyleSheet = require('../../StyleSheet/StyleSheet');
 const View = require('../View/View');
 
-const RCTActivityIndicatorViewNativeComponent = require('./RCTActivityIndicatorViewNativeComponent');
+const ActivityIndicatorViewNativeComponent = require('./ActivityIndicatorViewNativeComponent');
 
 import type {NativeComponent} from '../../Renderer/shims/ReactNative';
 import type {ViewProps} from '../View/ViewPropTypes';
 
-const RCTActivityIndicator =
-  Platform.OS === 'android'
-    ? require('../ProgressBarAndroid/ProgressBarAndroid')
-    : RCTActivityIndicatorViewNativeComponent;
+const ProgressBarAndroid = require('../ProgressBarAndroid/ProgressBarAndroid');
 
 const GRAY = '#999999';
 
@@ -93,8 +90,6 @@ const ActivityIndicator = (props: Props, forwardedRef?: any) => {
     ref: forwardedRef,
     style: sizeStyle,
     size: sizeProp,
-    styleAttr: 'Normal',
-    indeterminate: true,
   };
 
   return (
@@ -106,7 +101,11 @@ const ActivityIndicator = (props: Props, forwardedRef?: any) => {
       )}>
       {/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was
        * found when making Flow check .android.js files. */}
-      <RCTActivityIndicator {...nativeProps} />
+      {Platform.OS === 'android' ? (
+        <ProgressBarAndroid {...nativeProps} styleAttr="Normal" indeterminate />
+      ) : (
+        <ActivityIndicatorViewNativeComponent {...nativeProps} />
+      )}
     </View>
   );
 };

Libraries/Components/ActivityIndicator/ActivityIndicatorViewNativeComponent.js

@@ -10,11 +10,13 @@
 
 'use strict';
 
-const requireNativeComponent = require('../../ReactNative/requireNativeComponent');
+import type {
+  WithDefault,
+  CodegenNativeComponent,
+} from '../../Types/CodegenTypes';
 
+import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
 import type {ViewProps} from '../View/ViewPropTypes';
-import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
-import type {NativeComponent} from '../../Renderer/shims/ReactNative';
 
 type NativeProps = $ReadOnly<{|
   ...ViewProps,
@@ -24,21 +26,21 @@ type NativeProps = $ReadOnly<{|
    *
    * See http://facebook.github.io/react-native/docs/activityindicator.html#hideswhenstopped
    */
-  hidesWhenStopped?: ?boolean,
+  hidesWhenStopped?: ?WithDefault<boolean, false>,
 
   /**
    * 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,
+  animating?: ?WithDefault<boolean, false>,
 
   /**
    * The foreground color of the spinner (default is gray).
    *
    * See http://facebook.github.io/react-native/docs/activityindicator.html#color
    */
-  color?: ?string,
+  color?: ?ColorValue,
 
   /**
    * Size of the indicator (default is 'small').
@@ -46,15 +48,17 @@ type NativeProps = $ReadOnly<{|
    *
    * See http://facebook.github.io/react-native/docs/activityindicator.html#size
    */
-  size?: ?('small' | 'large'),
-
-  style?: ?ViewStyleProp,
-  styleAttr?: ?string,
-  indeterminate?: ?boolean,
+  size?: ?WithDefault<'small' | 'large', 'small'>,
 |}>;
 
-type ActivityIndicatorNativeType = Class<NativeComponent<NativeProps>>;
+type Options = {
+  isDeprecatedPaperComponentNameRCT: true,
+};
 
-module.exports = ((requireNativeComponent(
-  'RCTActivityIndicatorView',
-): any): ActivityIndicatorNativeType);
+type ActivityIndicatorNativeType = CodegenNativeComponent<
+  'ActivityIndicatorView',
+  NativeProps,
+  Options,
+>;
+
+module.exports = ((require('./ActivityIndicatorViewNativeViewConfig'): any): ActivityIndicatorNativeType);

Libraries/Components/ActivityIndicator/ActivityIndicatorViewNativeViewConfig.js

@@ -0,0 +1,45 @@
+
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+'use strict';
+
+const ReactNativeViewConfigRegistry = require('ReactNativeViewConfigRegistry');
+const ReactNativeViewViewConfig = require('ReactNativeViewViewConfig');
+const verifyComponentAttributeEquivalence = require('verifyComponentAttributeEquivalence');
+
+const ActivityIndicatorViewViewConfig = {
+  uiViewClassName: 'RCTActivityIndicatorView',
+  Commands: {},
+
+  bubblingEventTypes: {
+    ...ReactNativeViewViewConfig.bubblingEventTypes,
+  },
+
+  directEventTypes: {
+    ...ReactNativeViewViewConfig.directEventTypes,
+  },
+
+  validAttributes: {
+    ...ReactNativeViewViewConfig.validAttributes,
+    hidesWhenStopped: true,
+    animating: true,
+    color: { process: require('processColor') },
+    size: true,
+  },
+};
+
+verifyComponentAttributeEquivalence('RCTActivityIndicatorView', ActivityIndicatorViewViewConfig);
+
+ReactNativeViewConfigRegistry.register(
+  'RCTActivityIndicatorView',
+  () => ActivityIndicatorViewViewConfig,
+);
+
+module.exports = 'RCTActivityIndicatorView'; // RCT prefix present for paper support

Libraries/Components/ActivityIndicator/ActivityIndicatorViewSchema.js

@@ -17,6 +17,7 @@ const SwitchSchema: SchemaType = {
     ActivityIndicatorSchema: {
       components: {
         ActivityIndicatorView: {
+          isDeprecatedPaperComponentNameRCT: true,
           extendsProps: [
             {
               type: 'ReactNativeBuiltInType',
@@ -41,14 +42,6 @@ const SwitchSchema: SchemaType = {
                 default: false,
               },
             },
-            {
-              name: 'styleAttr',
-              optional: true,
-              typeAnnotation: {
-                type: 'StringTypeAnnotation',
-                default: '',
-              },
-            },
             {
               name: 'color',
               optional: true,
@@ -73,14 +66,6 @@ const SwitchSchema: SchemaType = {
                 ],
               },
             },
-            {
-              name: 'intermediate',
-              optional: true,
-              typeAnnotation: {
-                type: 'BooleanTypeAnnotation',
-                default: false,
-              },
-            },
           ],
         },
       },

Libraries/Components/ActivityIndicator/__tests__/__snapshots__/ActivityIndicator-test.js.snap

@@ -22,7 +22,6 @@ exports[`<ActivityIndicator /> should render as <View> when not mocked 1`] = `
     animating={true}
     color="#0000ff"
     hidesWhenStopped={true}
-    indeterminate={true}
     size="large"
     style={
       Object {
@@ -30,7 +29,6 @@ exports[`<ActivityIndicator /> should render as <View> when not mocked 1`] = `
         "width": 36,
       }
     }
-    styleAttr="Normal"
   />
 </View>
 `;

Libraries/Utilities/__tests__/verifyComponentAttributeEquivalence-test.js

@@ -13,6 +13,7 @@
 const getNativeComponentAttributes = require('../../ReactNative/getNativeComponentAttributes');
 const verifyComponentAttributeEquivalence = require('../verifyComponentAttributeEquivalence');
 
+jest.dontMock('../verifyComponentAttributeEquivalence');
 jest.mock('../../ReactNative/getNativeComponentAttributes', () => () => ({
   NativeProps: {
     value: 'BOOL',

jest/setup.js

@@ -363,3 +363,8 @@ jest.doMock('../Libraries/ReactNative/requireNativeComponent', () => {
       }
     };
 });
+
+jest.doMock(
+  '../Libraries/Utilities/verifyComponentAttributeEquivalence',
+  () => function() {},
+);

packages/react-native-codegen/src/cli/viewconfigs/generate-view-configs-cli.js

@@ -23,7 +23,10 @@ const yargv = yargs.strict().option('t', {
 const argv = yargv.argv;
 const fileList = argv._[0].split('\n');
 
-const CURRENT_VIEW_CONFIG_FILES = ['SliderNativeComponent.js'];
+const CURRENT_VIEW_CONFIG_FILES = [
+  'SliderNativeComponent.js',
+  'ActivityIndicatorViewNativeComponent.js',
+];
 
 generate(
   fileList.filter(fileName =>