From 370c65b94379a72e74f5dfd5b6202f282841a950 Mon Sep 17 00:00:00 2001 From: Moti Zilberman Date: Tue, 15 Feb 2022 08:49:21 -0800 Subject: [PATCH] Refactor StyleSheetTypes for (internal) extensibility Summary: Changelog: [Internal] Reviewed By: arushikesarwani94 Differential Revision: D34188705 fbshipit-source-id: 017285553f24144f8f7eff3a126a99be6c9b2f25 --- Libraries/StyleSheet/StyleSheetTypes.js | 123 +++++++++--------- .../private/_StyleSheetTypesOverrides.js | 15 +++ .../StyleSheet/private/_TransformStyle.js | 53 ++++++++ 3 files changed, 126 insertions(+), 65 deletions(-) create mode 100644 Libraries/StyleSheet/private/_StyleSheetTypesOverrides.js create mode 100644 Libraries/StyleSheet/private/_TransformStyle.js diff --git a/Libraries/StyleSheet/StyleSheetTypes.js b/Libraries/StyleSheet/StyleSheetTypes.js index 4d0f7a0a35d8dc..a12ed0cafc1af5 100644 --- a/Libraries/StyleSheet/StyleSheetTypes.js +++ b/Libraries/StyleSheet/StyleSheetTypes.js @@ -17,18 +17,28 @@ import type {NativeColorValue} from './PlatformColorValueTypes'; export type ____ColorValue_Internal = null | string | number | NativeColorValue; export type ColorArrayValue = null | $ReadOnlyArray<____ColorValue_Internal>; -export type PointValue = {| +export type PointValue = { x: number, y: number, -|}; -export type EdgeInsetsValue = {| +}; +export type EdgeInsetsValue = { top: number, left: number, right: number, bottom: number, -|}; +}; export type DimensionValue = null | number | string | AnimatedNode; +import type { + ____DangerouslyImpreciseStyle_InternalOverrides, + ____ImageStyle_InternalOverrides, + ____ShadowStyle_InternalOverrides, + ____TextStyle_InternalOverrides, + ____ViewStyle_InternalOverrides, +} from './private/_StyleSheetTypesOverrides'; + +import type {____TransformStyle_Internal} from './private/_TransformStyle'; + /** * React Native's layout system is based on Flexbox and is powered both * on iOS and Android by an open source project called `Yoga`: @@ -42,7 +52,7 @@ export type DimensionValue = null | number | string | AnimatedNode; * These properties are a subset of our styles that are consumed by the layout * algorithm and affect the positioning and sizing of views. */ -type ____LayoutStyle_Internal = $ReadOnly<{| +type ____LayoutStyle_Internal = $ReadOnly<{ /** `display` sets the display type of this component. * * It works similarly to `display` in CSS, but only support 'flex' and 'none'. @@ -472,49 +482,7 @@ type ____LayoutStyle_Internal = $ReadOnly<{| * @platform ios */ direction?: 'inherit' | 'ltr' | 'rtl', -|}>; - -type ____TransformStyle_Internal = $ReadOnly<{| - /** - * `transform` accepts an array of transformation objects. Each object specifies - * the property that will be transformed as the key, and the value to use in the - * transformation. Objects should not be combined. Use a single key/value pair - * per object. - * - * The rotate transformations require a string so that the transform may be - * expressed in degrees (deg) or radians (rad). For example: - * - * `transform([{ rotateX: '45deg' }, { rotateZ: '0.785398rad' }])` - * - * The skew transformations require a string so that the transform may be - * expressed in degrees (deg). For example: - * - * `transform([{ skewX: '45deg' }])` - */ - transform?: $ReadOnlyArray< - | {|+perspective: number | AnimatedNode|} - | {|+rotate: string | AnimatedNode|} - | {|+rotateX: string | AnimatedNode|} - | {|+rotateY: string | AnimatedNode|} - | {|+rotateZ: string | AnimatedNode|} - | {|+scale: number | AnimatedNode|} - | {|+scaleX: number | AnimatedNode|} - | {|+scaleY: number | AnimatedNode|} - | {|+translateX: number | AnimatedNode|} - | {|+translateY: number | AnimatedNode|} - | {| - +translate: - | [number | AnimatedNode, number | AnimatedNode] - | AnimatedNode, - |} - | {|+skewX: string|} - | {|+skewY: string|} - // TODO: what is the actual type it expects? - | {| - +matrix: $ReadOnlyArray | AnimatedNode, - |}, - >, -|}>; +}>; /** * These props can be used to dynamically generate shadows on views, images, text, etc. @@ -526,7 +494,7 @@ type ____TransformStyle_Internal = $ReadOnly<{| * To add a drop shadow to a view use the [`elevation` property](docs/viewstyleproptypes.html#elevation) (Android 5.0+). * To customize the color use the [`shadowColor` property](docs/shadow-props.html#shadowColor) (Android 9.0+). */ -export type ____ShadowStyle_Internal = $ReadOnly<{| +export type ____ShadowStyle_InternalCore = $ReadOnly<{ /** * Sets the drop shadow color * @platform ios @@ -536,10 +504,10 @@ export type ____ShadowStyle_Internal = $ReadOnly<{| * Sets the drop shadow offset * @platform ios */ - shadowOffset?: $ReadOnly<{| + shadowOffset?: $ReadOnly<{ width?: number, height?: number, - |}>, + }>, /** * Sets the drop shadow opacity (multiplied by the color's alpha component) * @platform ios @@ -550,9 +518,14 @@ export type ____ShadowStyle_Internal = $ReadOnly<{| * @platform ios */ shadowRadius?: number, -|}>; +}>; + +export type ____ShadowStyle_Internal = $ReadOnly<{ + ...____ShadowStyle_InternalCore, + ...____ShadowStyle_InternalOverrides, +}>; -export type ____ViewStyle_Internal = $ReadOnly<{| +export type ____ViewStyle_InternalCore = $ReadOnly<{ ...$Exact<____LayoutStyle_Internal>, ...$Exact<____ShadowStyle_Internal>, ...$Exact<____TransformStyle_Internal>, @@ -584,7 +557,12 @@ export type ____ViewStyle_Internal = $ReadOnly<{| borderTopWidth?: number | AnimatedNode, opacity?: number | AnimatedNode, elevation?: number, -|}>; +}>; + +export type ____ViewStyle_Internal = $ReadOnly<{ + ...____ViewStyle_InternalCore, + ...____ViewStyle_InternalOverrides, +}>; export type ____FontWeight_Internal = | 'normal' @@ -599,7 +577,7 @@ export type ____FontWeight_Internal = | '800' | '900'; -export type ____TextStyle_Internal = $ReadOnly<{| +export type ____TextStyle_InternalCore = $ReadOnly<{ ...$Exact<____ViewStyle_Internal>, color?: ____ColorValue_Internal, fontFamily?: string, @@ -613,10 +591,10 @@ export type ____TextStyle_Internal = $ReadOnly<{| | 'tabular-nums' | 'proportional-nums', >, - textShadowOffset?: $ReadOnly<{| + textShadowOffset?: $ReadOnly<{ width: number, height: number, - |}>, + }>, textShadowRadius?: number, textShadowColor?: ____ColorValue_Internal, letterSpacing?: number, @@ -633,22 +611,37 @@ export type ____TextStyle_Internal = $ReadOnly<{| textDecorationColor?: ____ColorValue_Internal, textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase', writingDirection?: 'auto' | 'ltr' | 'rtl', -|}>; +}>; -export type ____ImageStyle_Internal = $ReadOnly<{| +export type ____TextStyle_Internal = $ReadOnly<{ + ...____TextStyle_InternalCore, + ...____TextStyle_InternalOverrides, +}>; + +export type ____ImageStyle_InternalCore = $ReadOnly<{ ...$Exact<____ViewStyle_Internal>, resizeMode?: 'contain' | 'cover' | 'stretch' | 'center' | 'repeat', tintColor?: ____ColorValue_Internal, overlayColor?: string, -|}>; +}>; + +export type ____ImageStyle_Internal = $ReadOnly<{ + ...____ImageStyle_InternalCore, + ...____ImageStyle_InternalOverrides, +}>; -export type ____DangerouslyImpreciseStyle_Internal = { +export type ____DangerouslyImpreciseStyle_InternalCore = $ReadOnly<{ ...$Exact<____TextStyle_Internal>, - +resizeMode?: 'contain' | 'cover' | 'stretch' | 'center' | 'repeat', - +tintColor?: ____ColorValue_Internal, - +overlayColor?: string, + resizeMode?: 'contain' | 'cover' | 'stretch' | 'center' | 'repeat', + tintColor?: ____ColorValue_Internal, + overlayColor?: string, +}>; + +export type ____DangerouslyImpreciseStyle_Internal = $ReadOnly<{ + ...____DangerouslyImpreciseStyle_InternalCore, + ...____DangerouslyImpreciseStyle_InternalOverrides, ... -}; +}>; type GenericStyleProp<+T> = | null diff --git a/Libraries/StyleSheet/private/_StyleSheetTypesOverrides.js b/Libraries/StyleSheet/private/_StyleSheetTypesOverrides.js new file mode 100644 index 00000000000000..a5aab95e4322b9 --- /dev/null +++ b/Libraries/StyleSheet/private/_StyleSheetTypesOverrides.js @@ -0,0 +1,15 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @flow strict + * @format + */ + +export type ____DangerouslyImpreciseStyle_InternalOverrides = $ReadOnly<{}>; +export type ____ImageStyle_InternalOverrides = $ReadOnly<{}>; +export type ____ShadowStyle_InternalOverrides = $ReadOnly<{}>; +export type ____TextStyle_InternalOverrides = $ReadOnly<{}>; +export type ____ViewStyle_InternalOverrides = $ReadOnly<{}>; diff --git a/Libraries/StyleSheet/private/_TransformStyle.js b/Libraries/StyleSheet/private/_TransformStyle.js new file mode 100644 index 00000000000000..b0f764b5c5ab79 --- /dev/null +++ b/Libraries/StyleSheet/private/_TransformStyle.js @@ -0,0 +1,53 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @flow strict-local + * @format + */ + +const AnimatedNode = require('../../Animated/nodes/AnimatedNode'); + +export type ____TransformStyle_Internal = $ReadOnly<{| + /** + * `transform` accepts an array of transformation objects. Each object specifies + * the property that will be transformed as the key, and the value to use in the + * transformation. Objects should not be combined. Use a single key/value pair + * per object. + * + * The rotate transformations require a string so that the transform may be + * expressed in degrees (deg) or radians (rad). For example: + * + * `transform([{ rotateX: '45deg' }, { rotateZ: '0.785398rad' }])` + * + * The skew transformations require a string so that the transform may be + * expressed in degrees (deg). For example: + * + * `transform([{ skewX: '45deg' }])` + */ + transform?: $ReadOnlyArray< + | {|+perspective: number | AnimatedNode|} + | {|+rotate: string | AnimatedNode|} + | {|+rotateX: string | AnimatedNode|} + | {|+rotateY: string | AnimatedNode|} + | {|+rotateZ: string | AnimatedNode|} + | {|+scale: number | AnimatedNode|} + | {|+scaleX: number | AnimatedNode|} + | {|+scaleY: number | AnimatedNode|} + | {|+translateX: number | AnimatedNode|} + | {|+translateY: number | AnimatedNode|} + | {| + +translate: + | [number | AnimatedNode, number | AnimatedNode] + | AnimatedNode, + |} + | {|+skewX: string|} + | {|+skewY: string|} + // TODO: what is the actual type it expects? + | {| + +matrix: $ReadOnlyArray | AnimatedNode, + |}, + >, +|}>;