ESM processColor

Summary: Changelog: [General][Changed] - ESM processColor

Reviewed By: yungsters

Differential Revision: D42200330

fbshipit-source-id: aac5650ce0b45400400ebee4e8e8b36148539955

Libraries/ActionSheetIOS/ActionSheetIOS.js

@@ -13,7 +13,7 @@ import type {ColorValue} from '../StyleSheet/StyleSheet';
 
 import RCTActionSheetManager from './NativeActionSheetManager';
 
-const processColor = require('../StyleSheet/processColor');
+import processColor from '../StyleSheet/processColor';
 const invariant = require('invariant');
 
 /**

Libraries/Components/ScrollView/AndroidHorizontalScrollViewNativeComponent.js

@@ -23,7 +23,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
   validAttributes: {
     decelerationRate: true,
     disableIntervalMomentum: true,
-    endFillColor: {process: require('../../StyleSheet/processColor')},
+    endFillColor: {process: require('../../StyleSheet/processColor').default},
     fadingEdgeLength: true,
     nestedScrollEnabled: true,
     overScrollMode: true,
@@ -43,14 +43,20 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
     borderBottomRightRadius: true,
     borderRadius: true,
     borderStyle: true,
-    borderRightColor: {process: require('../../StyleSheet/processColor')},
-    borderColor: {process: require('../../StyleSheet/processColor')},
-    borderBottomColor: {process: require('../../StyleSheet/processColor')},
+    borderRightColor: {
+      process: require('../../StyleSheet/processColor').default,
+    },
+    borderColor: {process: require('../../StyleSheet/processColor').default},
+    borderBottomColor: {
+      process: require('../../StyleSheet/processColor').default,
+    },
     borderTopLeftRadius: true,
-    borderTopColor: {process: require('../../StyleSheet/processColor')},
+    borderTopColor: {process: require('../../StyleSheet/processColor').default},
     removeClippedSubviews: true,
     borderTopRightRadius: true,
-    borderLeftColor: {process: require('../../StyleSheet/processColor')},
+    borderLeftColor: {
+      process: require('../../StyleSheet/processColor').default,
+    },
     pointerEvents: true,
   },
 };

Libraries/Components/ScrollView/ScrollViewNativeComponent.js

@@ -60,21 +60,31 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
           borderRadius: true,
           nestedScrollEnabled: true,
           borderStyle: true,
-          borderRightColor: {process: require('../../StyleSheet/processColor')},
-          borderColor: {process: require('../../StyleSheet/processColor')},
+          borderRightColor: {
+            process: require('../../StyleSheet/processColor').default,
+          },
+          borderColor: {
+            process: require('../../StyleSheet/processColor').default,
+          },
           borderBottomColor: {
-            process: require('../../StyleSheet/processColor'),
+            process: require('../../StyleSheet/processColor').default,
           },
           persistentScrollbar: true,
-          endFillColor: {process: require('../../StyleSheet/processColor')},
+          endFillColor: {
+            process: require('../../StyleSheet/processColor').default,
+          },
           fadingEdgeLength: true,
           overScrollMode: true,
           borderTopLeftRadius: true,
           scrollPerfTag: true,
-          borderTopColor: {process: require('../../StyleSheet/processColor')},
+          borderTopColor: {
+            process: require('../../StyleSheet/processColor').default,
+          },
           removeClippedSubviews: true,
           borderTopRightRadius: true,
-          borderLeftColor: {process: require('../../StyleSheet/processColor')},
+          borderLeftColor: {
+            process: require('../../StyleSheet/processColor').default,
+          },
           pointerEvents: true,
         },
       }

Libraries/Components/ScrollView/ScrollViewViewConfig.js

@@ -41,7 +41,7 @@ const ScrollViewViewConfig = {
     directionalLockEnabled: true,
     disableIntervalMomentum: true,
     endFillColor: {
-      process: require('../../StyleSheet/processColor'),
+      process: require('../../StyleSheet/processColor').default,
     },
     fadingEdgeLength: true,
     indicatorStyle: true,

Libraries/Components/TextInput/AndroidTextInputNativeComponent.js

@@ -677,35 +677,39 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
     placeholder: true,
     inlineImagePadding: true,
     contextMenuHidden: true,
-    textShadowColor: {process: require('../../StyleSheet/processColor')},
+    textShadowColor: {
+      process: require('../../StyleSheet/processColor').default,
+    },
     maxLength: true,
     selectTextOnFocus: true,
     textShadowRadius: true,
     underlineColorAndroid: {
-      process: require('../../StyleSheet/processColor'),
+      process: require('../../StyleSheet/processColor').default,
     },
     textDecorationLine: true,
     submitBehavior: true,
     textAlignVertical: true,
     fontStyle: true,
     textShadowOffset: true,
-    selectionColor: {process: require('../../StyleSheet/processColor')},
+    selectionColor: {process: require('../../StyleSheet/processColor').default},
     selection: true,
-    placeholderTextColor: {process: require('../../StyleSheet/processColor')},
+    placeholderTextColor: {
+      process: require('../../StyleSheet/processColor').default,
+    },
     importantForAutofill: true,
     lineHeight: true,
     textTransform: true,
     returnKeyType: true,
     keyboardType: true,
     multiline: true,
-    color: {process: require('../../StyleSheet/processColor')},
+    color: {process: require('../../StyleSheet/processColor').default},
     autoComplete: true,
     numberOfLines: true,
     letterSpacing: true,
     returnKeyLabel: true,
     fontSize: true,
     onKeyPress: true,
-    cursorColor: {process: require('../../StyleSheet/processColor')},
+    cursorColor: {process: require('../../StyleSheet/processColor').default},
     text: true,
     showSoftInputOnFocus: true,
     textAlign: true,
@@ -727,16 +731,22 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
     editable: true,
     fontVariant: true,
     borderBottomRightRadius: true,
-    borderBottomColor: {process: require('../../StyleSheet/processColor')},
+    borderBottomColor: {
+      process: require('../../StyleSheet/processColor').default,
+    },
     borderRadius: true,
-    borderRightColor: {process: require('../../StyleSheet/processColor')},
-    borderColor: {process: require('../../StyleSheet/processColor')},
+    borderRightColor: {
+      process: require('../../StyleSheet/processColor').default,
+    },
+    borderColor: {process: require('../../StyleSheet/processColor').default},
     borderTopRightRadius: true,
     borderStyle: true,
     borderBottomLeftRadius: true,
-    borderLeftColor: {process: require('../../StyleSheet/processColor')},
+    borderLeftColor: {
+      process: require('../../StyleSheet/processColor').default,
+    },
     borderTopLeftRadius: true,
-    borderTopColor: {process: require('../../StyleSheet/processColor')},
+    borderTopColor: {process: require('../../StyleSheet/processColor').default},
   },
 };
 

Libraries/Components/TextInput/RCTTextInputViewConfig.js

@@ -116,15 +116,21 @@ const RCTTextInputViewConfig = {
     textShadowRadius: true,
     letterSpacing: true,
     textDecorationStyle: true,
-    textDecorationColor: {process: require('../../StyleSheet/processColor')},
-    color: {process: require('../../StyleSheet/processColor')},
+    textDecorationColor: {
+      process: require('../../StyleSheet/processColor').default,
+    },
+    color: {process: require('../../StyleSheet/processColor').default},
     maxFontSizeMultiplier: true,
-    textShadowColor: {process: require('../../StyleSheet/processColor')},
+    textShadowColor: {
+      process: require('../../StyleSheet/processColor').default,
+    },
     editable: true,
     inputAccessoryViewID: true,
     caretHidden: true,
     enablesReturnKeyAutomatically: true,
-    placeholderTextColor: {process: require('../../StyleSheet/processColor')},
+    placeholderTextColor: {
+      process: require('../../StyleSheet/processColor').default,
+    },
     clearButtonMode: true,
     keyboardType: true,
     selection: true,
@@ -132,7 +138,7 @@ const RCTTextInputViewConfig = {
     submitBehavior: true,
     mostRecentEventCount: true,
     scrollEnabled: true,
-    selectionColor: {process: require('../../StyleSheet/processColor')},
+    selectionColor: {process: require('../../StyleSheet/processColor').default},
     contextMenuHidden: true,
     secureTextEntry: true,
     placeholder: true,

Libraries/Components/View/ViewNativeComponent.js

@@ -61,15 +61,27 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
           borderStartWidth: true,
           borderEndWidth: true,
 
-          borderColor: {process: require('../../StyleSheet/processColor')},
-          borderLeftColor: {process: require('../../StyleSheet/processColor')},
-          borderRightColor: {process: require('../../StyleSheet/processColor')},
-          borderTopColor: {process: require('../../StyleSheet/processColor')},
+          borderColor: {
+            process: require('../../StyleSheet/processColor').default,
+          },
+          borderLeftColor: {
+            process: require('../../StyleSheet/processColor').default,
+          },
+          borderRightColor: {
+            process: require('../../StyleSheet/processColor').default,
+          },
+          borderTopColor: {
+            process: require('../../StyleSheet/processColor').default,
+          },
           borderBottomColor: {
-            process: require('../../StyleSheet/processColor'),
+            process: require('../../StyleSheet/processColor').default,
+          },
+          borderStartColor: {
+            process: require('../../StyleSheet/processColor').default,
+          },
+          borderEndColor: {
+            process: require('../../StyleSheet/processColor').default,
           },
-          borderStartColor: {process: require('../../StyleSheet/processColor')},
-          borderEndColor: {process: require('../../StyleSheet/processColor')},
 
           focusable: true,
           overflow: true,

Libraries/Image/ImageViewNativeComponent.js

@@ -71,7 +71,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
           internal_analyticTag: true,
           resizeMode: true,
           tintColor: {
-            process: require('../StyleSheet/processColor'),
+            process: require('../StyleSheet/processColor').default,
           },
           borderBottomLeftRadius: true,
           borderTopLeftRadius: true,
@@ -82,10 +82,10 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
           shouldNotifyLoadEvents: true,
           defaultSrc: true,
           overlayColor: {
-            process: require('../StyleSheet/processColor'),
+            process: require('../StyleSheet/processColor').default,
           },
           borderColor: {
-            process: require('../StyleSheet/processColor'),
+            process: require('../StyleSheet/processColor').default,
           },
           accessible: true,
           progressiveRenderingEnabled: true,
@@ -130,7 +130,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
           resizeMode: true,
           source: true,
           tintColor: {
-            process: require('../StyleSheet/processColor'),
+            process: require('../StyleSheet/processColor').default,
           },
           ...ConditionallyIgnoredEventHandlers({
             onLoadStart: true,

Libraries/Image/TextInlineImageNativeComponent.js

@@ -36,7 +36,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
     resizeMode: true,
     src: true,
     tintColor: {
-      process: require('../StyleSheet/processColor'),
+      process: require('../StyleSheet/processColor').default,
     },
     headers: true,
   },

Libraries/NativeComponent/BaseViewConfig.android.js

@@ -160,11 +160,11 @@ const directEventTypes = {
 
 const validAttributesForNonEventProps = {
   // @ReactProps from BaseViewManager
-  backgroundColor: {process: require('../StyleSheet/processColor')},
+  backgroundColor: {process: require('../StyleSheet/processColor').default},
   transform: true,
   opacity: true,
   elevation: true,
-  shadowColor: {process: require('../StyleSheet/processColor')},
+  shadowColor: {process: require('../StyleSheet/processColor').default},
   zIndex: true,
   renderToHardwareTextureAndroid: true,
   testID: true,

Libraries/NativeComponent/BaseViewConfig.ios.js

@@ -176,10 +176,10 @@ const validAttributesForNonEventProps = {
   accessibilityElementsHidden: true,
   accessibilityIgnoresInvertColors: true,
   testID: true,
-  backgroundColor: {process: require('../StyleSheet/processColor')},
+  backgroundColor: {process: require('../StyleSheet/processColor').default},
   backfaceVisibility: true,
   opacity: true,
-  shadowColor: {process: require('../StyleSheet/processColor')},
+  shadowColor: {process: require('../StyleSheet/processColor').default},
   shadowOffset: {diff: require('../Utilities/differ/sizesDiffer')},
   shadowOpacity: true,
   shadowRadius: true,
@@ -193,7 +193,7 @@ const validAttributesForNonEventProps = {
   pointerEvents: true,
   removeClippedSubviews: true,
   borderRadius: true,
-  borderColor: {process: require('../StyleSheet/processColor')},
+  borderColor: {process: require('../StyleSheet/processColor').default},
   borderCurve: true,
   borderWidth: true,
   borderStyle: true,
@@ -201,17 +201,17 @@ const validAttributesForNonEventProps = {
   collapsable: true,
 
   borderTopWidth: true,
-  borderTopColor: {process: require('../StyleSheet/processColor')},
+  borderTopColor: {process: require('../StyleSheet/processColor').default},
   borderRightWidth: true,
-  borderRightColor: {process: require('../StyleSheet/processColor')},
+  borderRightColor: {process: require('../StyleSheet/processColor').default},
   borderBottomWidth: true,
-  borderBottomColor: {process: require('../StyleSheet/processColor')},
+  borderBottomColor: {process: require('../StyleSheet/processColor').default},
   borderLeftWidth: true,
-  borderLeftColor: {process: require('../StyleSheet/processColor')},
+  borderLeftColor: {process: require('../StyleSheet/processColor').default},
   borderStartWidth: true,
-  borderStartColor: {process: require('../StyleSheet/processColor')},
+  borderStartColor: {process: require('../StyleSheet/processColor').default},
   borderEndWidth: true,
-  borderEndColor: {process: require('../StyleSheet/processColor')},
+  borderEndColor: {process: require('../StyleSheet/processColor').default},
 
   borderTopLeftRadius: true,
   borderTopRightRadius: true,

Libraries/ReactNative/getNativeComponentAttributes.js

@@ -12,7 +12,7 @@
 
 const ReactNativeStyleAttributes = require('../Components/View/ReactNativeStyleAttributes');
 const resolveAssetSource = require('../Image/resolveAssetSource');
-const processColor = require('../StyleSheet/processColor');
+import processColor from '../StyleSheet/processColor';
 const processColorArray = require('../StyleSheet/processColorArray');
 const insetsDiffer = require('../Utilities/differ/insetsDiffer');
 const matricesDiffer = require('../Utilities/differ/matricesDiffer');

Libraries/Share/Share.js

@@ -11,7 +11,7 @@
 import NativeActionSheetManager from '../ActionSheetIOS/NativeActionSheetManager';
 import NativeShareModule from './NativeShareModule';
 
-const processColor = require('../StyleSheet/processColor');
+import processColor from '../StyleSheet/processColor';
 const Platform = require('../Utilities/Platform');
 const invariant = require('invariant');
 

Libraries/StyleSheet/PlatformColorValueTypes.ios.js

@@ -78,7 +78,7 @@ export const processColorObject = (
   color: NativeColorValue,
 ): ?NativeColorValue => {
   if ('dynamic' in color && color.dynamic != null) {
-    const processColor = require('./processColor');
+    const processColor = require('./processColor').default;
     const dynamic = color.dynamic;
     const dynamicColor: NativeColorValue = {
       dynamic: {

Libraries/StyleSheet/__tests__/processColor-test.js

@@ -10,6 +10,8 @@
 
 'use strict';
 
+import processColor from '../processColor';
+
 const {OS} = require('../../Utilities/Platform');
 const PlatformColorAndroid =
   require('../PlatformColorValueTypes.android').PlatformColor;
@@ -17,7 +19,6 @@ const PlatformColorIOS =
   require('../PlatformColorValueTypes.ios').PlatformColor;
 const DynamicColorIOS =
   require('../PlatformColorValueTypesIOS.ios').DynamicColorIOS;
-const processColor = require('../processColor');
 
 const platformSpecific =
   OS === 'android'

Libraries/StyleSheet/processColor.js

@@ -57,4 +57,4 @@ function processColor(color?: ?(number | ColorValue)): ?ProcessedColorValue {
   return normalizedColor;
 }
 
-module.exports = processColor;
+export default processColor;

index.js

@@ -382,7 +382,7 @@ module.exports = {
       .PlatformColor;
   },
   get processColor(): processColor {
-    return require('./Libraries/StyleSheet/processColor');
+    return require('./Libraries/StyleSheet/processColor').default;
   },
   get requireNativeComponent(): <T>(
     uiViewClassName: string,