From aa8e69b696649bc4772058e3b2b93eac5b628adc Mon Sep 17 00:00:00 2001 From: Luna Wei Date: Tue, 3 Jan 2023 18:09:06 -0800 Subject: [PATCH] ESM processColor Summary: Changelog: [General][Changed] - ESM processColor Reviewed By: yungsters Differential Revision: D42200330 fbshipit-source-id: aac5650ce0b45400400ebee4e8e8b36148539955 --- Libraries/ActionSheetIOS/ActionSheetIOS.js | 2 +- ...roidHorizontalScrollViewNativeComponent.js | 18 +++++++---- .../ScrollView/ScrollViewNativeComponent.js | 22 +++++++++---- .../ScrollView/ScrollViewViewConfig.js | 2 +- .../AndroidTextInputNativeComponent.js | 32 ++++++++++++------- .../TextInput/RCTTextInputViewConfig.js | 16 +++++++--- .../Components/View/ViewNativeComponent.js | 26 +++++++++++---- Libraries/Image/ImageViewNativeComponent.js | 8 ++--- .../Image/TextInlineImageNativeComponent.js | 2 +- .../NativeComponent/BaseViewConfig.android.js | 4 +-- .../NativeComponent/BaseViewConfig.ios.js | 18 +++++------ .../getNativeComponentAttributes.js | 2 +- Libraries/Share/Share.js | 2 +- .../StyleSheet/PlatformColorValueTypes.ios.js | 2 +- .../StyleSheet/__tests__/processColor-test.js | 3 +- Libraries/StyleSheet/processColor.js | 2 +- index.js | 2 +- 17 files changed, 104 insertions(+), 59 deletions(-) diff --git a/Libraries/ActionSheetIOS/ActionSheetIOS.js b/Libraries/ActionSheetIOS/ActionSheetIOS.js index c9aaca1e3ad..f87340d187b 100644 --- a/Libraries/ActionSheetIOS/ActionSheetIOS.js +++ b/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'); /** diff --git a/Libraries/Components/ScrollView/AndroidHorizontalScrollViewNativeComponent.js b/Libraries/Components/ScrollView/AndroidHorizontalScrollViewNativeComponent.js index e0414b9b232..87ebd56edd7 100644 --- a/Libraries/Components/ScrollView/AndroidHorizontalScrollViewNativeComponent.js +++ b/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, }, }; diff --git a/Libraries/Components/ScrollView/ScrollViewNativeComponent.js b/Libraries/Components/ScrollView/ScrollViewNativeComponent.js index efe08ab4ce0..2ba1886f478 100644 --- a/Libraries/Components/ScrollView/ScrollViewNativeComponent.js +++ b/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, }, } diff --git a/Libraries/Components/ScrollView/ScrollViewViewConfig.js b/Libraries/Components/ScrollView/ScrollViewViewConfig.js index 9fd5b6f6114..450b56657ec 100644 --- a/Libraries/Components/ScrollView/ScrollViewViewConfig.js +++ b/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, diff --git a/Libraries/Components/TextInput/AndroidTextInputNativeComponent.js b/Libraries/Components/TextInput/AndroidTextInputNativeComponent.js index faec7943692..e7c28912a07 100644 --- a/Libraries/Components/TextInput/AndroidTextInputNativeComponent.js +++ b/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}, }, }; diff --git a/Libraries/Components/TextInput/RCTTextInputViewConfig.js b/Libraries/Components/TextInput/RCTTextInputViewConfig.js index 6af9cd331c1..6f693295320 100644 --- a/Libraries/Components/TextInput/RCTTextInputViewConfig.js +++ b/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, diff --git a/Libraries/Components/View/ViewNativeComponent.js b/Libraries/Components/View/ViewNativeComponent.js index 7f41843de77..76125cd9fad 100644 --- a/Libraries/Components/View/ViewNativeComponent.js +++ b/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, diff --git a/Libraries/Image/ImageViewNativeComponent.js b/Libraries/Image/ImageViewNativeComponent.js index 5c30ef718fc..bd9ae7df499 100644 --- a/Libraries/Image/ImageViewNativeComponent.js +++ b/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, diff --git a/Libraries/Image/TextInlineImageNativeComponent.js b/Libraries/Image/TextInlineImageNativeComponent.js index 1ce6818b113..ff0bdb28b9a 100644 --- a/Libraries/Image/TextInlineImageNativeComponent.js +++ b/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, }, diff --git a/Libraries/NativeComponent/BaseViewConfig.android.js b/Libraries/NativeComponent/BaseViewConfig.android.js index b25e9ed0dce..5cd505439ea 100644 --- a/Libraries/NativeComponent/BaseViewConfig.android.js +++ b/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, diff --git a/Libraries/NativeComponent/BaseViewConfig.ios.js b/Libraries/NativeComponent/BaseViewConfig.ios.js index 52897e611d5..1888cb142e9 100644 --- a/Libraries/NativeComponent/BaseViewConfig.ios.js +++ b/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, diff --git a/Libraries/ReactNative/getNativeComponentAttributes.js b/Libraries/ReactNative/getNativeComponentAttributes.js index 81deeb070ad..964ba135130 100644 --- a/Libraries/ReactNative/getNativeComponentAttributes.js +++ b/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'); diff --git a/Libraries/Share/Share.js b/Libraries/Share/Share.js index 10fff7443e0..bed0f94c59f 100644 --- a/Libraries/Share/Share.js +++ b/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'); diff --git a/Libraries/StyleSheet/PlatformColorValueTypes.ios.js b/Libraries/StyleSheet/PlatformColorValueTypes.ios.js index 091a5f61fc0..e5d16313a73 100644 --- a/Libraries/StyleSheet/PlatformColorValueTypes.ios.js +++ b/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: { diff --git a/Libraries/StyleSheet/__tests__/processColor-test.js b/Libraries/StyleSheet/__tests__/processColor-test.js index d908afed1d0..607ddaa9ff7 100644 --- a/Libraries/StyleSheet/__tests__/processColor-test.js +++ b/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' diff --git a/Libraries/StyleSheet/processColor.js b/Libraries/StyleSheet/processColor.js index 955f81c8304..77eef71484a 100644 --- a/Libraries/StyleSheet/processColor.js +++ b/Libraries/StyleSheet/processColor.js @@ -57,4 +57,4 @@ function processColor(color?: ?(number | ColorValue)): ?ProcessedColorValue { return normalizedColor; } -module.exports = processColor; +export default processColor; diff --git a/index.js b/index.js index 062e86492d0..ec3532ac129 100644 --- a/index.js +++ b/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(): ( uiViewClassName: string,