Skip to content

Commit 02e29ab

Browse files
NickGerlemanfacebook-github-bot
NickGerleman
authored and
facebook-github-bot
committed
Improve handling of invalid DimensionValue usage (#36346)
Summary: Pull Request resolved: #36346 1. Remove Paper native assertions for converting DimensionValue string to Yoga unit, and fix a case where Fabric could throw on invalid value. 2. Move DimensionValue types in TypeScript to use template literal types, to show malformed strings in-editor, during typechecking. Update min TS version to allow this (in conformance with the min TS version used by DefinitelyTyped). Changelog: [General][Added] - Improve handling of invalid DimensionValue usage Reviewed By: javache Differential Revision: D43153075 fbshipit-source-id: db4e813df6e81cbd3158edad7c07c7a90c009803
1 parent c1023c7 commit 02e29ab

File tree

7 files changed

+175
-131
lines changed

7 files changed

+175
-131
lines changed

‎Libraries/StyleSheet/StyleSheetTypes.d.ts

Lines changed: 102 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
* @format
88
*/
99

10+
import {Animated} from '../Animated/Animated';
1011
import {ImageResizeMode} from '../Image/ImageResizeMode';
1112
import {ColorValue} from './StyleSheet';
1213

@@ -17,6 +18,15 @@ type FlexAlignType =
1718
| 'stretch'
1819
| 'baseline';
1920

21+
type DimensionValue =
22+
| number
23+
| 'auto'
24+
| `${number}%`
25+
| Animated.AnimatedNode
26+
| null;
27+
type AnimatableNumericValue = number | Animated.AnimatedNode;
28+
type AnimatableStringValue = number | Animated.AnimatedNode;
29+
2030
/**
2131
* Flex Prop Types
2232
* @see https://reactnative.dev/docs/flexbox
@@ -35,17 +45,17 @@ export interface FlexStyle {
3545
alignSelf?: 'auto' | FlexAlignType | undefined;
3646
aspectRatio?: number | string | undefined;
3747
borderBottomWidth?: number | undefined;
38-
borderEndWidth?: number | string | undefined;
48+
borderEndWidth?: number | undefined;
3949
borderLeftWidth?: number | undefined;
4050
borderRightWidth?: number | undefined;
41-
borderStartWidth?: number | string | undefined;
51+
borderStartWidth?: number | undefined;
4252
borderTopWidth?: number | undefined;
4353
borderWidth?: number | undefined;
44-
bottom?: number | string | undefined;
54+
bottom?: DimensionValue | undefined;
4555
display?: 'none' | 'flex' | undefined;
46-
end?: number | string | undefined;
56+
end?: DimensionValue | undefined;
4757
flex?: number | undefined;
48-
flexBasis?: number | string | undefined;
58+
flexBasis?: DimensionValue | undefined;
4959
flexDirection?:
5060
| 'row'
5161
| 'column'
@@ -58,14 +68,14 @@ export interface FlexStyle {
5868
flexGrow?: number | undefined;
5969
flexShrink?: number | undefined;
6070
flexWrap?: 'wrap' | 'nowrap' | 'wrap-reverse' | undefined;
61-
height?: number | string | undefined;
62-
inset?: number | string | undefined;
63-
insetBlock?: number | string | undefined;
64-
insetBlockEnd?: number | string | undefined;
65-
insetBlockStart?: number | string | undefined;
66-
insetInline?: number | string | undefined;
67-
insetInlineEnd?: number | string | undefined;
68-
insetInlineStart?: number | string | undefined;
71+
height?: DimensionValue | undefined;
72+
inset?: DimensionValue | undefined;
73+
insetBlock?: DimensionValue | undefined;
74+
insetBlockEnd?: DimensionValue | undefined;
75+
insetBlockStart?: DimensionValue | undefined;
76+
insetInline?: DimensionValue | undefined;
77+
insetInlineEnd?: DimensionValue | undefined;
78+
insetInlineStart?: DimensionValue | undefined;
6979
justifyContent?:
7080
| 'flex-start'
7181
| 'flex-end'
@@ -74,47 +84,47 @@ export interface FlexStyle {
7484
| 'space-around'
7585
| 'space-evenly'
7686
| undefined;
77-
left?: number | string | undefined;
78-
margin?: number | string | undefined;
79-
marginBlock?: number | string | undefined;
80-
marginBlockEnd?: number | string | undefined;
81-
marginBlockStart?: number | string | undefined;
82-
marginBottom?: number | string | undefined;
83-
marginEnd?: number | string | undefined;
84-
marginHorizontal?: number | string | undefined;
85-
marginInline?: number | string | undefined;
86-
marginInlineEnd?: number | string | undefined;
87-
marginInlineStart?: number | string | undefined;
88-
marginLeft?: number | string | undefined;
89-
marginRight?: number | string | undefined;
90-
marginStart?: number | string | undefined;
91-
marginTop?: number | string | undefined;
92-
marginVertical?: number | string | undefined;
93-
maxHeight?: number | string | undefined;
94-
maxWidth?: number | string | undefined;
95-
minHeight?: number | string | undefined;
96-
minWidth?: number | string | undefined;
87+
left?: DimensionValue | undefined;
88+
margin?: DimensionValue | undefined;
89+
marginBlock?: DimensionValue | undefined;
90+
marginBlockEnd?: DimensionValue | undefined;
91+
marginBlockStart?: DimensionValue | undefined;
92+
marginBottom?: DimensionValue | undefined;
93+
marginEnd?: DimensionValue | undefined;
94+
marginHorizontal?: DimensionValue | undefined;
95+
marginInline?: DimensionValue | undefined;
96+
marginInlineEnd?: DimensionValue | undefined;
97+
marginInlineStart?: DimensionValue | undefined;
98+
marginLeft?: DimensionValue | undefined;
99+
marginRight?: DimensionValue | undefined;
100+
marginStart?: DimensionValue | undefined;
101+
marginTop?: DimensionValue | undefined;
102+
marginVertical?: DimensionValue | undefined;
103+
maxHeight?: DimensionValue | undefined;
104+
maxWidth?: DimensionValue | undefined;
105+
minHeight?: DimensionValue | undefined;
106+
minWidth?: DimensionValue | undefined;
97107
overflow?: 'visible' | 'hidden' | 'scroll' | undefined;
98-
padding?: number | string | undefined;
99-
paddingBottom?: number | string | undefined;
100-
paddingBlock?: number | string | undefined;
101-
paddingBlockEnd?: number | string | undefined;
102-
paddingBlockStart?: number | string | undefined;
103-
paddingEnd?: number | string | undefined;
104-
paddingHorizontal?: number | string | undefined;
105-
paddingInline?: number | string | undefined;
106-
paddingInlineEnd?: number | string | undefined;
107-
paddingInlineStart?: number | string | undefined;
108-
paddingLeft?: number | string | undefined;
109-
paddingRight?: number | string | undefined;
110-
paddingStart?: number | string | undefined;
111-
paddingTop?: number | string | undefined;
112-
paddingVertical?: number | string | undefined;
108+
padding?: DimensionValue | undefined;
109+
paddingBottom?: DimensionValue | undefined;
110+
paddingBlock?: DimensionValue | undefined;
111+
paddingBlockEnd?: DimensionValue | undefined;
112+
paddingBlockStart?: DimensionValue | undefined;
113+
paddingEnd?: DimensionValue | undefined;
114+
paddingHorizontal?: DimensionValue | undefined;
115+
paddingInline?: DimensionValue | undefined;
116+
paddingInlineEnd?: DimensionValue | undefined;
117+
paddingInlineStart?: DimensionValue | undefined;
118+
paddingLeft?: DimensionValue | undefined;
119+
paddingRight?: DimensionValue | undefined;
120+
paddingStart?: DimensionValue | undefined;
121+
paddingTop?: DimensionValue | undefined;
122+
paddingVertical?: DimensionValue | undefined;
113123
position?: 'absolute' | 'relative' | undefined;
114-
right?: number | string | undefined;
115-
start?: number | string | undefined;
116-
top?: number | string | undefined;
117-
width?: number | string | undefined;
124+
right?: DimensionValue | undefined;
125+
start?: DimensionValue | undefined;
126+
top?: DimensionValue | undefined;
127+
width?: DimensionValue | undefined;
118128
zIndex?: number | undefined;
119129

120130
/**
@@ -125,61 +135,61 @@ export interface FlexStyle {
125135

126136
export interface ShadowStyleIOS {
127137
shadowColor?: ColorValue | undefined;
128-
shadowOffset?: {width: number; height: number} | undefined;
129-
shadowOpacity?: number | undefined;
138+
shadowOffset?: Readonly<{width: number; height: number}> | undefined;
139+
shadowOpacity?: AnimatableNumericValue | undefined;
130140
shadowRadius?: number | undefined;
131141
}
132142

133143
interface PerpectiveTransform {
134-
perspective: number;
144+
perspective: AnimatableNumericValue;
135145
}
136146

137147
interface RotateTransform {
138-
rotate: string;
148+
rotate: AnimatableStringValue;
139149
}
140150

141151
interface RotateXTransform {
142-
rotateX: string;
152+
rotateX: AnimatableStringValue;
143153
}
144154

145155
interface RotateYTransform {
146-
rotateY: string;
156+
rotateY: AnimatableStringValue;
147157
}
148158

149159
interface RotateZTransform {
150-
rotateZ: string;
160+
rotateZ: AnimatableStringValue;
151161
}
152162

153163
interface ScaleTransform {
154-
scale: number;
164+
scale: AnimatableNumericValue;
155165
}
156166

157167
interface ScaleXTransform {
158-
scaleX: number;
168+
scaleX: AnimatableNumericValue;
159169
}
160170

161171
interface ScaleYTransform {
162-
scaleY: number;
172+
scaleY: AnimatableNumericValue;
163173
}
164174

165175
interface TranslateXTransform {
166-
translateX: number;
176+
translateX: AnimatableNumericValue;
167177
}
168178

169179
interface TranslateYTransform {
170-
translateY: number;
180+
translateY: AnimatableNumericValue;
171181
}
172182

173183
interface SkewXTransform {
174-
skewX: string;
184+
skewX: AnimatableStringValue;
175185
}
176186

177187
interface SkewYTransform {
178-
skewY: string;
188+
skewY: AnimatableStringValue;
179189
}
180190

181191
interface MatrixTransform {
182-
matrix: number[];
192+
matrix: AnimatableNumericValue[];
183193
}
184194

185195
export interface TransformsStyle {
@@ -207,23 +217,23 @@ export interface TransformsStyle {
207217
/**
208218
* @deprecated Use rotate in transform prop instead.
209219
*/
210-
rotation?: number | undefined;
220+
rotation?: AnimatableNumericValue | undefined;
211221
/**
212222
* @deprecated Use scaleX in transform prop instead.
213223
*/
214-
scaleX?: number | undefined;
224+
scaleX?: AnimatableNumericValue | undefined;
215225
/**
216226
* @deprecated Use scaleY in transform prop instead.
217227
*/
218-
scaleY?: number | undefined;
228+
scaleY?: AnimatableNumericValue | undefined;
219229
/**
220230
* @deprecated Use translateX in transform prop instead.
221231
*/
222-
translateX?: number | undefined;
232+
translateX?: AnimatableNumericValue | undefined;
223233
/**
224234
* @deprecated Use translateY in transform prop instead.
225235
*/
226-
translateY?: number | undefined;
236+
translateY?: AnimatableNumericValue | undefined;
227237
}
228238

229239
/**
@@ -236,37 +246,32 @@ export interface ViewStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle {
236246
borderBlockEndColor?: ColorValue | undefined;
237247
borderBlockStartColor?: ColorValue | undefined;
238248
borderBottomColor?: ColorValue | undefined;
239-
borderBottomEndRadius?: number | undefined;
240-
borderBottomLeftRadius?: number | undefined;
241-
borderBottomRightRadius?: number | undefined;
242-
borderBottomStartRadius?: number | undefined;
243-
borderBottomWidth?: number | undefined;
249+
borderBottomEndRadius?: AnimatableNumericValue | undefined;
250+
borderBottomLeftRadius?: AnimatableNumericValue | undefined;
251+
borderBottomRightRadius?: AnimatableNumericValue | undefined;
252+
borderBottomStartRadius?: AnimatableNumericValue | undefined;
244253
borderColor?: ColorValue | undefined;
245254
/**
246255
* On iOS 13+, it is possible to change the corner curve of borders.
247256
* @platform ios
248257
*/
249258
borderCurve?: 'circular' | 'continuous' | undefined;
250259
borderEndColor?: ColorValue | undefined;
251-
borderEndEndRadius?: number | undefined;
252-
borderEndStartRadius?: number | undefined;
260+
borderEndEndRadius?: AnimatableNumericValue | undefined;
261+
borderEndStartRadius?: AnimatableNumericValue | undefined;
253262
borderLeftColor?: ColorValue | undefined;
254-
borderLeftWidth?: number | undefined;
255-
borderRadius?: number | undefined;
263+
borderRadius?: AnimatableNumericValue | undefined;
256264
borderRightColor?: ColorValue | undefined;
257-
borderRightWidth?: number | undefined;
258265
borderStartColor?: ColorValue | undefined;
259-
borderStartEndRadius?: number | undefined;
260-
borderStartStartRadius?: number | undefined;
266+
borderStartEndRadius?: AnimatableNumericValue | undefined;
267+
borderStartStartRadius?: AnimatableNumericValue | undefined;
261268
borderStyle?: 'solid' | 'dotted' | 'dashed' | undefined;
262269
borderTopColor?: ColorValue | undefined;
263-
borderTopEndRadius?: number | undefined;
264-
borderTopLeftRadius?: number | undefined;
265-
borderTopRightRadius?: number | undefined;
266-
borderTopStartRadius?: number | undefined;
267-
borderTopWidth?: number | undefined;
268-
borderWidth?: number | undefined;
269-
opacity?: number | undefined;
270+
borderTopEndRadius?: AnimatableNumericValue | undefined;
271+
borderTopLeftRadius?: AnimatableNumericValue | undefined;
272+
borderTopRightRadius?: AnimatableNumericValue | undefined;
273+
borderTopStartRadius?: AnimatableNumericValue | undefined;
274+
opacity?: AnimatableNumericValue | undefined;
270275
/**
271276
* Sets the elevation of a view, using Android's underlying
272277
* [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation).
@@ -290,7 +295,6 @@ export type FontVariant =
290295
| 'proportional-nums';
291296
export interface TextStyleIOS extends ViewStyle {
292297
fontVariant?: FontVariant[] | undefined;
293-
letterSpacing?: number | undefined;
294298
textDecorationColor?: ColorValue | undefined;
295299
textDecorationStyle?: 'solid' | 'double' | 'dotted' | 'dashed' | undefined;
296300
writingDirection?: 'auto' | 'ltr' | 'rtl' | undefined;
@@ -351,17 +355,16 @@ export interface TextStyle extends TextStyleIOS, TextStyleAndroid, ViewStyle {
351355
export interface ImageStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle {
352356
resizeMode?: ImageResizeMode | undefined;
353357
backfaceVisibility?: 'visible' | 'hidden' | undefined;
354-
borderBottomLeftRadius?: number | undefined;
355-
borderBottomRightRadius?: number | undefined;
358+
borderBottomLeftRadius?: AnimatableNumericValue | undefined;
359+
borderBottomRightRadius?: AnimatableNumericValue | undefined;
356360
backgroundColor?: ColorValue | undefined;
357361
borderColor?: ColorValue | undefined;
358-
borderWidth?: number | undefined;
359-
borderRadius?: number | undefined;
360-
borderTopLeftRadius?: number | undefined;
361-
borderTopRightRadius?: number | undefined;
362+
borderRadius?: AnimatableNumericValue | undefined;
363+
borderTopLeftRadius?: AnimatableNumericValue | undefined;
364+
borderTopRightRadius?: AnimatableNumericValue | undefined;
362365
overflow?: 'visible' | 'hidden' | undefined;
363366
overlayColor?: ColorValue | undefined;
364367
tintColor?: ColorValue | undefined;
365-
opacity?: number | undefined;
368+
opacity?: AnimatableNumericValue | undefined;
366369
objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down' | undefined;
367370
}

0 commit comments

Comments
 (0)