Skip to content

Commit 9010e69

Browse files
j-piaseckifacebook-github-bot
j-piasecki
authored and
facebook-github-bot
committed
Update transform types to preserve behavior in TypeScript (react#51115)
Summary: Pull Request resolved: react#51115 Changelog: [Internal] Reviewed By: huntie Differential Revision: D74229819 fbshipit-source-id: 08e363ae58c29ca910601b2f078153b8ff30103c
1 parent 5e612e6 commit 9010e69

2 files changed

Lines changed: 93 additions & 42 deletions

File tree

‎packages/react-native/Libraries/StyleSheet/private/_TransformStyle.js‎

Lines changed: 49 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,25 @@
1010

1111
import type AnimatedNode from '../../Animated/nodes/AnimatedNode';
1212

13+
// Helper types to enforce that a single key is used in a transform object
14+
// after generating a TypeScript definition file from the Flow types.
15+
// $FlowExpectedError[unclear-type]
16+
type KeysOfUnion<T> = T extends any ? $Keys<T> : empty;
17+
// $FlowExpectedError[unclear-type]
18+
type ValueOfUnion<T, K> = T extends any
19+
? K extends $Keys<T>
20+
? T[K]
21+
: empty
22+
: empty;
23+
type MergeUnion<T> = {
24+
[K in KeysOfUnion<T>]?: ValueOfUnion<T, K>,
25+
};
26+
type MaximumOneOf<T: {...}> = $Values<{
27+
[K in keyof T]: $Exact<{
28+
[P in keyof T]?: P extends K ? T[P] : empty,
29+
}>,
30+
}>;
31+
1332
export type ____TransformStyle_Internal = $ReadOnly<{
1433
/**
1534
* `transform` accepts an array of transformation objects. Each object specifies
@@ -29,27 +48,36 @@ export type ____TransformStyle_Internal = $ReadOnly<{
2948
*/
3049
transform?:
3150
| $ReadOnlyArray<
32-
| {+perspective: number | AnimatedNode}
33-
| {+rotate: string | AnimatedNode}
34-
| {+rotateX: string | AnimatedNode}
35-
| {+rotateY: string | AnimatedNode}
36-
| {+rotateZ: string | AnimatedNode}
37-
| {+scale: number | AnimatedNode}
38-
| {+scaleX: number | AnimatedNode}
39-
| {+scaleY: number | AnimatedNode}
40-
| {+translateX: number | string | AnimatedNode}
41-
| {+translateY: number | string | AnimatedNode}
42-
| {
43-
+translate:
44-
| [number | string | AnimatedNode, number | string | AnimatedNode]
45-
| AnimatedNode,
46-
}
47-
| {+skewX: string | AnimatedNode}
48-
| {+skewY: string | AnimatedNode}
49-
// TODO: what is the actual type it expects?
50-
| {
51-
+matrix: $ReadOnlyArray<number | AnimatedNode> | AnimatedNode,
52-
},
51+
$ReadOnly<
52+
MaximumOneOf<
53+
MergeUnion<
54+
| {+perspective: number | AnimatedNode}
55+
| {+rotate: string | AnimatedNode}
56+
| {+rotateX: string | AnimatedNode}
57+
| {+rotateY: string | AnimatedNode}
58+
| {+rotateZ: string | AnimatedNode}
59+
| {+scale: number | AnimatedNode}
60+
| {+scaleX: number | AnimatedNode}
61+
| {+scaleY: number | AnimatedNode}
62+
| {+translateX: number | string | AnimatedNode}
63+
| {+translateY: number | string | AnimatedNode}
64+
| {
65+
+translate:
66+
| [
67+
number | string | AnimatedNode,
68+
number | string | AnimatedNode,
69+
]
70+
| AnimatedNode,
71+
}
72+
| {+skewX: string | AnimatedNode}
73+
| {+skewY: string | AnimatedNode}
74+
// TODO: what is the actual type it expects?
75+
| {
76+
+matrix: $ReadOnlyArray<number | AnimatedNode> | AnimatedNode,
77+
},
78+
>,
79+
>,
80+
>,
5381
>
5482
| string,
5583
/**

‎packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap‎

Lines changed: 44 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -7580,29 +7580,52 @@ export type ____ViewStyle_InternalOverrides = $ReadOnly<{}>;
75807580
`;
75817581

75827582
exports[`public API should not change unintentionally Libraries/StyleSheet/private/_TransformStyle.js 1`] = `
7583-
"export type ____TransformStyle_Internal = $ReadOnly<{
7583+
"type KeysOfUnion<T> = T extends any ? $Keys<T> : empty;
7584+
type ValueOfUnion<T, K> = T extends any
7585+
? K extends $Keys<T>
7586+
? T[K]
7587+
: empty
7588+
: empty;
7589+
type MergeUnion<T> = {
7590+
[K in KeysOfUnion<T>]?: ValueOfUnion<T, K>,
7591+
};
7592+
type MaximumOneOf<T: { ... }> = $Values<{
7593+
[K in keyof T]: $Exact<{
7594+
[P in keyof T]?: P extends K ? T[P] : empty,
7595+
}>,
7596+
}>;
7597+
export type ____TransformStyle_Internal = $ReadOnly<{
75847598
transform?:
75857599
| $ReadOnlyArray<
7586-
| { +perspective: number | AnimatedNode }
7587-
| { +rotate: string | AnimatedNode }
7588-
| { +rotateX: string | AnimatedNode }
7589-
| { +rotateY: string | AnimatedNode }
7590-
| { +rotateZ: string | AnimatedNode }
7591-
| { +scale: number | AnimatedNode }
7592-
| { +scaleX: number | AnimatedNode }
7593-
| { +scaleY: number | AnimatedNode }
7594-
| { +translateX: number | string | AnimatedNode }
7595-
| { +translateY: number | string | AnimatedNode }
7596-
| {
7597-
+translate:
7598-
| [number | string | AnimatedNode, number | string | AnimatedNode]
7599-
| AnimatedNode,
7600-
}
7601-
| { +skewX: string | AnimatedNode }
7602-
| { +skewY: string | AnimatedNode }
7603-
| {
7604-
+matrix: $ReadOnlyArray<number | AnimatedNode> | AnimatedNode,
7605-
},
7600+
$ReadOnly<
7601+
MaximumOneOf<
7602+
MergeUnion<
7603+
| { +perspective: number | AnimatedNode }
7604+
| { +rotate: string | AnimatedNode }
7605+
| { +rotateX: string | AnimatedNode }
7606+
| { +rotateY: string | AnimatedNode }
7607+
| { +rotateZ: string | AnimatedNode }
7608+
| { +scale: number | AnimatedNode }
7609+
| { +scaleX: number | AnimatedNode }
7610+
| { +scaleY: number | AnimatedNode }
7611+
| { +translateX: number | string | AnimatedNode }
7612+
| { +translateY: number | string | AnimatedNode }
7613+
| {
7614+
+translate:
7615+
| [
7616+
number | string | AnimatedNode,
7617+
number | string | AnimatedNode,
7618+
]
7619+
| AnimatedNode,
7620+
}
7621+
| { +skewX: string | AnimatedNode }
7622+
| { +skewY: string | AnimatedNode }
7623+
| {
7624+
+matrix: $ReadOnlyArray<number | AnimatedNode> | AnimatedNode,
7625+
},
7626+
>,
7627+
>,
7628+
>,
76067629
>
76077630
| string,
76087631
transformOrigin?:

0 commit comments

Comments
 (0)