Move and Rename custom propType definitions in ColorPropTypes (#21371)

Summary:
related #21342

TODO
* move ColorPropType.js
* fix flow error

CheckList
 - [x] `yarn prettier`
 - [x] `yarn flow-check-android`
 - [x] `yarn flow-check-ios`

All flow checks pass.

[GENERAL] [ENHANCEMENT] [DeprecatedColorPropType.js] - Created.
Pull Request resolved: https://github.com/facebook/react-native/pull/21371

Reviewed By: RSNara

Differential Revision: D10087818

Pulled By: TheSavior

fbshipit-source-id: 48088b441699886eef1fff3aafc2ca6015455006

Libraries/Components/Button.js

@@ -10,7 +10,6 @@
 
 'use strict';
 
-const ColorPropType = require('ColorPropType');
 const Platform = require('Platform');
 const React = require('React');
 const StyleSheet = require('StyleSheet');

Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js

@@ -9,7 +9,7 @@
 
 'use strict';
 
-const ColorPropType = require('ColorPropType');
+const DeprecatedColorPropType = require('DeprecatedColorPropType');
 const DeprecatedViewPropTypes = require('DeprecatedViewPropTypes');
 const NativeMethodsMixin = require('NativeMethodsMixin');
 const Platform = require('Platform');
@@ -92,7 +92,7 @@ const DrawerLayoutAndroid = createReactClass({
      * );
      * ```
      */
-    drawerBackgroundColor: ColorPropType,
+    drawerBackgroundColor: DeprecatedColorPropType,
     /**
      * Specifies the side of the screen from which the drawer will slide in.
      */
@@ -147,7 +147,7 @@ const DrawerLayoutAndroid = createReactClass({
      * status bar to allow it to open over the status bar. It will only have an
      * effect on API 21+.
      */
-    statusBarBackgroundColor: ColorPropType,
+    statusBarBackgroundColor: DeprecatedColorPropType,
   },
 
   mixins: [NativeMethodsMixin],

Libraries/Components/TextInput/InputAccessoryView.js

@@ -9,7 +9,7 @@
  */
 'use strict';
 
-const ColorPropType = require('ColorPropType');
+const DeprecatedColorPropType = require('DeprecatedColorPropType');
 const DeprecatedViewPropTypes = require('DeprecatedViewPropTypes');
 const Platform = require('Platform');
 const React = require('React');
@@ -85,7 +85,7 @@ type Props = {
    */
   nativeID?: string,
   style?: DeprecatedViewPropTypes.style,
-  backgroundColor?: ColorPropType,
+  backgroundColor?: DeprecatedColorPropType,
 };
 
 class InputAccessoryView extends React.Component<Props> {

Libraries/Components/TextInput/TextInput.js

@@ -9,7 +9,7 @@
  */
 'use strict';
 
-const ColorPropType = require('ColorPropType');
+const DeprecatedColorPropType = require('DeprecatedColorPropType');
 const DeprecatedViewPropTypes = require('DeprecatedViewPropTypes');
 const DocumentSelectionState = require('DocumentSelectionState');
 const EventEmitter = require('EventEmitter');
@@ -592,7 +592,7 @@ const TextInput = createReactClass({
     /**
      * The text color of the placeholder string.
      */
-    placeholderTextColor: ColorPropType,
+    placeholderTextColor: DeprecatedColorPropType,
     /**
      * If `false`, scrolling of the text view will be disabled.
      * The default value is `true`. Does only work with 'multiline={true}'.
@@ -607,7 +607,7 @@ const TextInput = createReactClass({
     /**
      * The highlight and cursor color of the text input.
      */
-    selectionColor: ColorPropType,
+    selectionColor: DeprecatedColorPropType,
     /**
      * An instance of `DocumentSelectionState`, this is some state that is responsible for
      * maintaining selection information for a document.
@@ -698,7 +698,7 @@ const TextInput = createReactClass({
      * The color of the `TextInput` underline.
      * @platform android
      */
-    underlineColorAndroid: ColorPropType,
+    underlineColorAndroid: DeprecatedColorPropType,
 
     /**
      * If defined, the provided image resource will be rendered on the left.

Libraries/Components/ToolbarAndroid/ToolbarAndroid.android.js

@@ -9,7 +9,7 @@
 
 'use strict';
 
-const ColorPropType = require('ColorPropType');
+const DeprecatedColorPropType = require('DeprecatedColorPropType');
 const DeprecatedViewPropTypes = require('DeprecatedViewPropTypes');
 const Image = require('Image');
 const NativeMethodsMixin = require('NativeMethodsMixin');
@@ -118,7 +118,7 @@ const ToolbarAndroid = createReactClass({
     /**
      * Sets the toolbar subtitle color.
      */
-    subtitleColor: ColorPropType,
+    subtitleColor: DeprecatedColorPropType,
     /**
      * Sets the toolbar title.
      */
@@ -126,7 +126,7 @@ const ToolbarAndroid = createReactClass({
     /**
      * Sets the toolbar title color.
      */
-    titleColor: ColorPropType,
+    titleColor: DeprecatedColorPropType,
     /**
      * Sets the content inset for the toolbar starting edge.
      *

Libraries/Components/Touchable/TouchableHighlight.js

@@ -9,7 +9,7 @@
  */
 'use strict';
 
-const ColorPropType = require('ColorPropType');
+const DeprecatedColorPropType = require('DeprecatedColorPropType');
 const DeprecatedViewPropTypes = require('DeprecatedViewPropTypes');
 const NativeMethodsMixin = require('NativeMethodsMixin');
 const Platform = require('Platform');
@@ -164,7 +164,7 @@ const TouchableHighlight = ((createReactClass({
      * The color of the underlay that will show through when the touch is
      * active.
      */
-    underlayColor: ColorPropType,
+    underlayColor: DeprecatedColorPropType,
     /**
      * Style to apply to the container/underlay. Most commonly used to make sure
      * rounded corners match the wrapped component.

Libraries/Components/View/ShadowPropTypesIOS.js

@@ -9,7 +9,7 @@
  */
 'use strict';
 
-const ColorPropType = require('ColorPropType');
+const DeprecatedColorPropType = require('DeprecatedColorPropType');
 const ReactPropTypes = require('prop-types');
 
 /**
@@ -26,7 +26,7 @@ const ShadowPropTypesIOS = {
    * Sets the drop shadow color
    * @platform ios
    */
-  shadowColor: ColorPropType,
+  shadowColor: DeprecatedColorPropType,
   /**
    * Sets the drop shadow offset
    * @platform ios

Libraries/Components/View/ViewStylePropTypes.js

@@ -10,7 +10,7 @@
 
 'use strict';
 
-const ColorPropType = require('ColorPropType');
+const DeprecatedColorPropType = require('DeprecatedColorPropType');
 const LayoutPropTypes = require('LayoutPropTypes');
 const ReactPropTypes = require('prop-types');
 const ShadowPropTypesIOS = require('ShadowPropTypesIOS');
@@ -24,14 +24,14 @@ const ViewStylePropTypes = {
   ...ShadowPropTypesIOS,
   ...DeprecatedTransformPropTypes,
   backfaceVisibility: ReactPropTypes.oneOf(['visible', 'hidden']),
-  backgroundColor: ColorPropType,
-  borderColor: ColorPropType,
-  borderTopColor: ColorPropType,
-  borderRightColor: ColorPropType,
-  borderBottomColor: ColorPropType,
-  borderLeftColor: ColorPropType,
-  borderStartColor: ColorPropType,
-  borderEndColor: ColorPropType,
+  backgroundColor: DeprecatedColorPropType,
+  borderColor: DeprecatedColorPropType,
+  borderTopColor: DeprecatedColorPropType,
+  borderRightColor: DeprecatedColorPropType,
+  borderBottomColor: DeprecatedColorPropType,
+  borderLeftColor: DeprecatedColorPropType,
+  borderStartColor: DeprecatedColorPropType,
+  borderEndColor: DeprecatedColorPropType,
   borderRadius: ReactPropTypes.number,
   borderTopLeftRadius: ReactPropTypes.number,
   borderTopRightRadius: ReactPropTypes.number,

Libraries/Image/ImageStylePropTypes.js

@@ -9,7 +9,7 @@
  */
 'use strict';
 
-const ColorPropType = require('ColorPropType');
+const DeprecatedColorPropType = require('DeprecatedColorPropType');
 const ImageResizeMode = require('ImageResizeMode');
 const LayoutPropTypes = require('LayoutPropTypes');
 const ReactPropTypes = require('prop-types');
@@ -22,8 +22,8 @@ const ImageStylePropTypes = {
   ...DeprecatedTransformPropTypes,
   resizeMode: ReactPropTypes.oneOf(Object.keys(ImageResizeMode)),
   backfaceVisibility: ReactPropTypes.oneOf(['visible', 'hidden']),
-  backgroundColor: ColorPropType,
-  borderColor: ColorPropType,
+  backgroundColor: DeprecatedColorPropType,
+  borderColor: DeprecatedColorPropType,
   borderWidth: ReactPropTypes.number,
   borderRadius: ReactPropTypes.number,
   overflow: ReactPropTypes.oneOf(['visible', 'hidden']),
@@ -31,7 +31,7 @@ const ImageStylePropTypes = {
   /**
    * Changes the color of all the non-transparent pixels to the tintColor.
    */
-  tintColor: ColorPropType,
+  tintColor: DeprecatedColorPropType,
   opacity: ReactPropTypes.number,
   /**
    * When the image has rounded corners, specifying an overlayColor will

Libraries/Inspector/ElementProperties.js

@@ -34,7 +34,7 @@ type Props = $ReadOnly<{|
   },
   frame?: ?Object,
   selection?: ?number,
-  setSelection?: (number) => mixed,
+  setSelection?: number => mixed,
 |}>;
 
 class ElementProperties extends React.Component<Props> {
@@ -86,9 +86,7 @@ class ElementProperties extends React.Component<Props> {
               <StyleInspector style={style} />
               {openFileButton}
             </View>
-            {
-              <BoxInspector style={style} frame={this.props.frame} />
-            }
+            {<BoxInspector style={style} frame={this.props.frame} />}
           </View>
         </View>
       </TouchableWithoutFeedback>

Libraries/Network/XMLHttpRequest.js

@@ -248,7 +248,7 @@ class XMLHttpRequest extends EventTarget(...XHR_EVENTS) {
           this._cachedResponse = BlobManager.createFromOptions(this._response);
         } else if (this._response === '') {
           this._cachedResponse = null;
-        } else { 
+        } else {
           throw new Error(`Invalid response for blob: ${this._response}`);
         }
         break;

Libraries/Text/TextPropTypes.js

@@ -10,7 +10,7 @@
 
 'use strict';
 
-const ColorPropType = require('ColorPropType');
+const DeprecatedColorPropType = require('DeprecatedColorPropType');
 const DeprecatedEdgeInsetsPropType = require('DeprecatedEdgeInsetsPropType');
 const PropTypes = require('prop-types');
 const StyleSheetPropType = require('StyleSheetPropType');
@@ -74,7 +74,7 @@ module.exports = {
    *
    * See https://facebook.github.io/react-native/docs/text.html#selectioncolor
    */
-  selectionColor: ColorPropType,
+  selectionColor: DeprecatedColorPropType,
   /**
    * When `true`, no visual change is made when text is pressed down.
    *

Libraries/Text/TextStylePropTypes.js

@@ -10,14 +10,14 @@
 
 'use strict';
 
-const ColorPropType = require('ColorPropType');
+const DeprecatedColorPropType = require('DeprecatedColorPropType');
 const ReactPropTypes = require('prop-types');
 const ViewStylePropTypes = require('ViewStylePropTypes');
 
 const TextStylePropTypes = {
   ...ViewStylePropTypes,
 
-  color: ColorPropType,
+  color: DeprecatedColorPropType,
   fontFamily: ReactPropTypes.string,
   fontSize: ReactPropTypes.number,
   fontStyle: ReactPropTypes.oneOf(['normal', 'italic']),
@@ -56,7 +56,7 @@ const TextStylePropTypes = {
     height: ReactPropTypes.number,
   }),
   textShadowRadius: ReactPropTypes.number,
-  textShadowColor: ColorPropType,
+  textShadowColor: DeprecatedColorPropType,
   /**
    * @platform ios
    */
@@ -107,7 +107,7 @@ const TextStylePropTypes = {
   /**
    * @platform ios
    */
-  textDecorationColor: ColorPropType,
+  textDecorationColor: DeprecatedColorPropType,
   textTransform: ReactPropTypes.oneOf([
     'none' /*default*/,
     'capitalize',

Libraries/react-native/react-native-implementation.js

@@ -301,7 +301,7 @@ const ReactNative = {
 
   // Prop Types
   get ColorPropType() {
-    return require('ColorPropType');
+    return require('DeprecatedColorPropType');
   },
   get EdgeInsetsPropType() {
     return require('DeprecatedEdgeInsetsPropType');