From 589aea0abf2f4e4bb8aa667bf70527d1cd5d0807 Mon Sep 17 00:00:00 2001 From: Sam Zhou Date: Sat, 5 Aug 2023 12:01:26 -0700 Subject: [PATCH] Adjust typing of PlatformColorValueTypes to prepare for Flow multiplatform support (#38804) Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/38804 Changelog: [Internal] Reviewed By: yungsters Differential Revision: D48081150 fbshipit-source-id: a25f04c59ee2ae733ae6efa24d6c5be7c5d414da --- .../Libraries/Animated/nodes/AnimatedColor.js | 2 +- .../PlatformColorValueTypes.android.js | 13 ++++-- .../StyleSheet/PlatformColorValueTypes.ios.js | 41 +++++++++++++------ .../PlatformColorValueTypesIOS.ios.js | 2 +- .../Libraries/StyleSheet/StyleSheet.js | 2 + .../Libraries/StyleSheet/StyleSheetTypes.js | 2 +- .../Libraries/StyleSheet/processColor.js | 3 +- 7 files changed, 43 insertions(+), 22 deletions(-) diff --git a/packages/react-native/Libraries/Animated/nodes/AnimatedColor.js b/packages/react-native/Libraries/Animated/nodes/AnimatedColor.js index 389a4a82ffe..ebf986093b1 100644 --- a/packages/react-native/Libraries/Animated/nodes/AnimatedColor.js +++ b/packages/react-native/Libraries/Animated/nodes/AnimatedColor.js @@ -10,9 +10,9 @@ 'use strict'; -import type {NativeColorValue} from '../../StyleSheet/PlatformColorValueTypes'; import type {ProcessedColorValue} from '../../StyleSheet/processColor'; import type {ColorValue} from '../../StyleSheet/StyleSheet'; +import type {NativeColorValue} from '../../StyleSheet/StyleSheetTypes'; import type {PlatformConfig} from '../AnimatedPlatformConfig'; import normalizeColor from '../../StyleSheet/normalizeColor'; diff --git a/packages/react-native/Libraries/StyleSheet/PlatformColorValueTypes.android.js b/packages/react-native/Libraries/StyleSheet/PlatformColorValueTypes.android.js index 50a28c94c53..42d95a068ad 100644 --- a/packages/react-native/Libraries/StyleSheet/PlatformColorValueTypes.android.js +++ b/packages/react-native/Libraries/StyleSheet/PlatformColorValueTypes.android.js @@ -9,20 +9,25 @@ */ import type {ProcessedColorValue} from './processColor'; -import type {ColorValue} from './StyleSheet'; +import type {ColorValue, NativeColorValue} from './StyleSheet'; -export opaque type NativeColorValue = { +/** The actual type of the opaque NativeColorValue on Android platform */ +type LocalNativeColorValue = { resource_paths?: Array, }; export const PlatformColor = (...names: Array): ColorValue => { - return {resource_paths: names}; + /* $FlowExpectedError[incompatible-return] + * LocalNativeColorValue is the actual type of the opaque NativeColorValue on Android platform */ + return ({resource_paths: names}: LocalNativeColorValue); }; export const normalizeColorObject = ( color: NativeColorValue, ): ?ProcessedColorValue => { - if ('resource_paths' in color) { + /* $FlowExpectedError[incompatible-cast] + * LocalNativeColorValue is the actual type of the opaque NativeColorValue on Android platform */ + if ('resource_paths' in (color: LocalNativeColorValue)) { return color; } return null; diff --git a/packages/react-native/Libraries/StyleSheet/PlatformColorValueTypes.ios.js b/packages/react-native/Libraries/StyleSheet/PlatformColorValueTypes.ios.js index e5d16313a73..418df65ac95 100644 --- a/packages/react-native/Libraries/StyleSheet/PlatformColorValueTypes.ios.js +++ b/packages/react-native/Libraries/StyleSheet/PlatformColorValueTypes.ios.js @@ -9,9 +9,10 @@ */ import type {ProcessedColorValue} from './processColor'; -import type {ColorValue} from './StyleSheet'; +import type {ColorValue, NativeColorValue} from './StyleSheet'; -export opaque type NativeColorValue = { +/** The actual type of the opaque NativeColorValue on iOS platform */ +type LocalNativeColorValue = { semantic?: Array, dynamic?: { light: ?(ColorValue | ProcessedColorValue), @@ -22,7 +23,8 @@ export opaque type NativeColorValue = { }; export const PlatformColor = (...names: Array): ColorValue => { - return {semantic: names}; + // $FlowExpectedError[incompatible-return] LocalNativeColorValue is the iOS LocalNativeColorValue type + return ({semantic: names}: LocalNativeColorValue); }; export type DynamicColorIOSTuplePrivate = { @@ -35,19 +37,21 @@ export type DynamicColorIOSTuplePrivate = { export const DynamicColorIOSPrivate = ( tuple: DynamicColorIOSTuplePrivate, ): ColorValue => { - return { + return ({ dynamic: { light: tuple.light, dark: tuple.dark, highContrastLight: tuple.highContrastLight, highContrastDark: tuple.highContrastDark, }, - }; + /* $FlowExpectedError[incompatible-return] + * LocalNativeColorValue is the actual type of the opaque NativeColorValue on iOS platform */ + }: LocalNativeColorValue); }; -export const normalizeColorObject = ( - color: NativeColorValue, -): ?ProcessedColorValue => { +const _normalizeColorObject = ( + color: LocalNativeColorValue, +): ?LocalNativeColorValue => { if ('semantic' in color) { // an ios semantic color return color; @@ -56,7 +60,7 @@ export const normalizeColorObject = ( // a dynamic, appearance aware color const dynamic = color.dynamic; - const dynamicColor: NativeColorValue = { + const dynamicColor: LocalNativeColorValue = { dynamic: { // $FlowFixMe[incompatible-use] light: normalizeColor(dynamic.light), @@ -70,17 +74,22 @@ export const normalizeColorObject = ( }; return dynamicColor; } - return null; }; -export const processColorObject = ( +export const normalizeColorObject: ( color: NativeColorValue, -): ?NativeColorValue => { + /* $FlowExpectedError[incompatible-type] + * LocalNativeColorValue is the actual type of the opaque NativeColorValue on iOS platform */ +) => ?ProcessedColorValue = _normalizeColorObject; + +const _processColorObject = ( + color: LocalNativeColorValue, +): ?LocalNativeColorValue => { if ('dynamic' in color && color.dynamic != null) { const processColor = require('./processColor').default; const dynamic = color.dynamic; - const dynamicColor: NativeColorValue = { + const dynamicColor: LocalNativeColorValue = { dynamic: { // $FlowFixMe[incompatible-use] light: processColor(dynamic.light), @@ -96,3 +105,9 @@ export const processColorObject = ( } return color; }; + +export const processColorObject: ( + color: NativeColorValue, + /* $FlowExpectedError[incompatible-type] + * LocalNativeColorValue is the actual type of the opaque NativeColorValue on iOS platform */ +) => ?NativeColorValue = _processColorObject; diff --git a/packages/react-native/Libraries/StyleSheet/PlatformColorValueTypesIOS.ios.js b/packages/react-native/Libraries/StyleSheet/PlatformColorValueTypesIOS.ios.js index a476e74b314..4450dc56567 100644 --- a/packages/react-native/Libraries/StyleSheet/PlatformColorValueTypesIOS.ios.js +++ b/packages/react-native/Libraries/StyleSheet/PlatformColorValueTypesIOS.ios.js @@ -10,7 +10,7 @@ import type {ColorValue} from './StyleSheet'; -import {DynamicColorIOSPrivate} from './PlatformColorValueTypes'; +import {DynamicColorIOSPrivate} from './PlatformColorValueTypes.ios'; export type DynamicColorIOSTuple = { light: ColorValue, diff --git a/packages/react-native/Libraries/StyleSheet/StyleSheet.js b/packages/react-native/Libraries/StyleSheet/StyleSheet.js index 523cd748423..b921df31505 100644 --- a/packages/react-native/Libraries/StyleSheet/StyleSheet.js +++ b/packages/react-native/Libraries/StyleSheet/StyleSheet.js @@ -27,6 +27,8 @@ const ReactNativeStyleAttributes = require('../Components/View/ReactNativeStyleA const PixelRatio = require('../Utilities/PixelRatio').default; const flatten = require('./flattenStyle'); +export type {NativeColorValue} from './StyleSheetTypes'; + /** * This type should be used as the type for anything that is a color. It is * most useful when using DynamicColorIOS which can be a string or a dynamic diff --git a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js index 5bb8c8c71b8..fb2db1c4c60 100644 --- a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js +++ b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js @@ -11,7 +11,6 @@ 'use strict'; import type AnimatedNode from '../Animated/nodes/AnimatedNode'; -import type {NativeColorValue} from './PlatformColorValueTypes'; import type { ____DangerouslyImpreciseStyle_InternalOverrides, ____ImageStyle_InternalOverrides, @@ -21,6 +20,7 @@ import type { } from './private/_StyleSheetTypesOverrides'; import type {____TransformStyle_Internal} from './private/_TransformStyle'; +declare export opaque type NativeColorValue; export type ____ColorValue_Internal = null | string | number | NativeColorValue; export type ColorArrayValue = null | $ReadOnlyArray<____ColorValue_Internal>; export type PointValue = { diff --git a/packages/react-native/Libraries/StyleSheet/processColor.js b/packages/react-native/Libraries/StyleSheet/processColor.js index 77eef71484a..2bac21b59bf 100644 --- a/packages/react-native/Libraries/StyleSheet/processColor.js +++ b/packages/react-native/Libraries/StyleSheet/processColor.js @@ -10,8 +10,7 @@ 'use strict'; -import type {NativeColorValue} from './PlatformColorValueTypes'; -import type {ColorValue} from './StyleSheet'; +import type {ColorValue, NativeColorValue} from './StyleSheet'; const Platform = require('../Utilities/Platform'); const normalizeColor = require('./normalizeColor');