Skip to content

Commit e429094

Browse files
eps1loneps1lon
authored
[react] Add types for onGestureEnter/Exit/Share/Update events (DefinitelyTyped#74371)
1 parent 3f43cd0 commit e429094

9 files changed

Lines changed: 184 additions & 8 deletions

File tree

‎types/react-dom/test/experimental-tests.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,16 @@ function swipeTransitionTest() {
2525
},
2626
);
2727
}
28+
29+
<React.ViewTransition
30+
onGestureEnter={(timeline, options, instance, types) => {
31+
// $ExpectType CSSNumberish | null
32+
timeline.currentTime;
33+
// $ExpectType ViewTransitionPseudoElement
34+
instance.group;
35+
}}
36+
>
37+
</React.ViewTransition>;
2838
}
2939

3040
// @enableSrcObject

‎types/react/canary.d.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -71,19 +71,19 @@ declare module "." {
7171
/**
7272
* The `<ViewTransition>` or its parent Component is mounted and there's no other `<ViewTransition>` with the same name being deleted.
7373
*/
74-
onEnter?: (instance: ViewTransitionInstance, types: Array<string>) => void;
74+
onEnter?: (instance: ViewTransitionInstance, types: Array<string>) => void | (() => void);
7575
/**
7676
* The `<ViewTransition>` or its parent Component is unmounted and there's no other `<ViewTransition>` with the same name being deleted.
7777
*/
78-
onExit?: (instance: ViewTransitionInstance, types: Array<string>) => void;
78+
onExit?: (instance: ViewTransitionInstance, types: Array<string>) => void | (() => void);
7979
/**
8080
* This `<ViewTransition>` is being mounted and another `<ViewTransition>` instance with the same name is being unmounted elsewhere.
8181
*/
82-
onShare?: (instance: ViewTransitionInstance, types: Array<string>) => void;
82+
onShare?: (instance: ViewTransitionInstance, types: Array<string>) => void | (() => void);
8383
/**
8484
* The content of `<ViewTransition>` has changed either due to DOM mutations or because an inner child `<ViewTransition>` has resized.
8585
*/
86-
onUpdate?: (instance: ViewTransitionInstance, types: Array<string>) => void;
86+
onUpdate?: (instance: ViewTransitionInstance, types: Array<string>) => void | (() => void);
8787
ref?: Ref<ViewTransitionInstance> | undefined;
8888
/**
8989
* Combined with {@link className} if this `<ViewTransition>` is being mounted and another instance with the same name is being unmounted elsewhere.

‎types/react/experimental.d.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,13 +129,43 @@ declare module "." {
129129
rangeStart?: number | undefined;
130130
rangeEnd?: number | undefined;
131131
}
132+
export type GestureOptionsRequired = {
133+
[P in keyof GestureOptions]-?: NonNullable<GestureOptions[P]>;
134+
};
132135
/** */
133136
export function unstable_startGestureTransition(
134137
provider: GestureProvider,
135138
scope: () => void,
136139
options?: GestureOptions,
137140
): () => void;
138141

142+
interface ViewTransitionProps {
143+
onGestureEnter?: (
144+
timeline: GestureProvider,
145+
options: GestureOptionsRequired,
146+
instance: ViewTransitionInstance,
147+
types: Array<string>,
148+
) => void | (() => void);
149+
onGestureExit?: (
150+
timeline: GestureProvider,
151+
options: GestureOptionsRequired,
152+
instance: ViewTransitionInstance,
153+
types: Array<string>,
154+
) => void | (() => void);
155+
onGestureShare?: (
156+
timeline: GestureProvider,
157+
options: GestureOptionsRequired,
158+
instance: ViewTransitionInstance,
159+
types: Array<string>,
160+
) => void | (() => void);
161+
onGestureUpdate?: (
162+
timeline: GestureProvider,
163+
options: GestureOptionsRequired,
164+
instance: ViewTransitionInstance,
165+
types: Array<string>,
166+
) => void | (() => void);
167+
}
168+
139169
// @enableSrcObject
140170
interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_IMG_SRC_TYPES {
141171
srcObject: Blob;

‎types/react/test/canary.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,24 +61,47 @@ function viewTransitionTests() {
6161
instance;
6262
// $ExpectType string[]
6363
types;
64+
return function cleanup() {};
6465
}}
6566
onExit={(instance, types) => {
6667
// $ExpectType ViewTransitionInstance
6768
instance;
6869
// $ExpectType string[]
6970
types;
71+
return function cleanup() {};
7072
}}
7173
onShare={(instance, types) => {
7274
// $ExpectType ViewTransitionInstance
7375
instance;
7476
// $ExpectType string[]
7577
types;
78+
return function cleanup() {};
7679
}}
7780
onUpdate={(instance, types) => {
7881
// $ExpectType ViewTransitionInstance
7982
instance;
8083
// $ExpectType string[]
8184
types;
85+
return function cleanup() {};
86+
}}
87+
/>;
88+
89+
<ViewTransition
90+
// @ts-expect-error -- onEnter can return void or a cleanup function.
91+
onEnter={() => {
92+
return 5;
93+
}}
94+
// @ts-expect-error -- onExit can return void or a cleanup function.
95+
onExit={() => {
96+
return 5;
97+
}}
98+
// @ts-expect-error -- onShare can return void or a cleanup function.
99+
onShare={() => {
100+
return 5;
101+
}}
102+
// @ts-expect-error -- onUpdate can return void or a cleanup function.
103+
onUpdate={() => {
104+
return 5;
82105
}}
83106
/>;
84107

‎types/react/test/experimental.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -178,4 +178,34 @@ function swipeTransitionTest() {
178178
// options can be empty
179179
startGestureTransition(gestureProvider, () => {}, {});
180180
}
181+
182+
<React.ViewTransition
183+
onGestureEnter={(timeline, options, instance, types) => {
184+
// @ts-expect-error -- Only implemented by react-dom
185+
timeline.currentTime;
186+
// passed options are non-nullable
187+
// $ExpectType number
188+
options.rangeStart;
189+
// $ExpectType number
190+
options.rangeEnd;
191+
// @ts-expect-error -- Only implemented by react-dom
192+
instance.group;
193+
}}
194+
>
195+
</React.ViewTransition>;
196+
197+
<React.ViewTransition
198+
// @ts-expect-error -- Either void or a function must be returned
199+
onGestureEnter={() => {
200+
return 5;
201+
}}
202+
>
203+
</React.ViewTransition>;
204+
205+
<React.ViewTransition
206+
onGestureEnter={() => {
207+
return function cleanup() {};
208+
}}
209+
>
210+
</React.ViewTransition>;
181211
}

‎types/react/ts5.0/canary.d.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -71,19 +71,19 @@ declare module "." {
7171
/**
7272
* The `<ViewTransition>` or its parent Component is mounted and there's no other `<ViewTransition>` with the same name being deleted.
7373
*/
74-
onEnter?: (instance: ViewTransitionInstance, types: Array<string>) => void;
74+
onEnter?: (instance: ViewTransitionInstance, types: Array<string>) => void | (() => void);
7575
/**
7676
* The `<ViewTransition>` or its parent Component is unmounted and there's no other `<ViewTransition>` with the same name being deleted.
7777
*/
78-
onExit?: (instance: ViewTransitionInstance, types: Array<string>) => void;
78+
onExit?: (instance: ViewTransitionInstance, types: Array<string>) => void | (() => void);
7979
/**
8080
* This `<ViewTransition>` is being mounted and another `<ViewTransition>` instance with the same name is being unmounted elsewhere.
8181
*/
82-
onShare?: (instance: ViewTransitionInstance, types: Array<string>) => void;
82+
onShare?: (instance: ViewTransitionInstance, types: Array<string>) => void | (() => void);
8383
/**
8484
* The content of `<ViewTransition>` has changed either due to DOM mutations or because an inner child `<ViewTransition>` has resized.
8585
*/
86-
onUpdate?: (instance: ViewTransitionInstance, types: Array<string>) => void;
86+
onUpdate?: (instance: ViewTransitionInstance, types: Array<string>) => void | (() => void);
8787
ref?: Ref<ViewTransitionInstance> | undefined;
8888
/**
8989
* Combined with {@link className} if this `<ViewTransition>` is being mounted and another instance with the same name is being unmounted elsewhere.

‎types/react/ts5.0/experimental.d.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,13 +129,43 @@ declare module "." {
129129
rangeStart?: number | undefined;
130130
rangeEnd?: number | undefined;
131131
}
132+
export type GestureOptionsRequired = {
133+
[P in keyof GestureOptions]-?: NonNullable<GestureOptions[P]>;
134+
};
132135
/** */
133136
export function unstable_startGestureTransition(
134137
provider: GestureProvider,
135138
scope: () => void,
136139
options?: GestureOptions,
137140
): () => void;
138141

142+
interface ViewTransitionProps {
143+
onGestureEnter?: (
144+
timeline: GestureProvider,
145+
options: GestureOptionsRequired,
146+
instance: ViewTransitionInstance,
147+
types: Array<string>,
148+
) => void | (() => void);
149+
onGestureExit?: (
150+
timeline: GestureProvider,
151+
options: GestureOptionsRequired,
152+
instance: ViewTransitionInstance,
153+
types: Array<string>,
154+
) => void | (() => void);
155+
onGestureShare?: (
156+
timeline: GestureProvider,
157+
options: GestureOptionsRequired,
158+
instance: ViewTransitionInstance,
159+
types: Array<string>,
160+
) => void | (() => void);
161+
onGestureUpdate?: (
162+
timeline: GestureProvider,
163+
options: GestureOptionsRequired,
164+
instance: ViewTransitionInstance,
165+
types: Array<string>,
166+
) => void | (() => void);
167+
}
168+
139169
// @enableSrcObject
140170
interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_IMG_SRC_TYPES {
141171
srcObject: Blob;

‎types/react/ts5.0/test/canary.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,24 +61,47 @@ function viewTransitionTests() {
6161
instance;
6262
// $ExpectType string[]
6363
types;
64+
return function cleanup() {};
6465
}}
6566
onExit={(instance, types) => {
6667
// $ExpectType ViewTransitionInstance
6768
instance;
6869
// $ExpectType string[]
6970
types;
71+
return function cleanup() {};
7072
}}
7173
onShare={(instance, types) => {
7274
// $ExpectType ViewTransitionInstance
7375
instance;
7476
// $ExpectType string[]
7577
types;
78+
return function cleanup() {};
7679
}}
7780
onUpdate={(instance, types) => {
7881
// $ExpectType ViewTransitionInstance
7982
instance;
8083
// $ExpectType string[]
8184
types;
85+
return function cleanup() {};
86+
}}
87+
/>;
88+
89+
<ViewTransition
90+
// @ts-expect-error -- onEnter can return void or a cleanup function.
91+
onEnter={() => {
92+
return 5;
93+
}}
94+
// @ts-expect-error -- onExit can return void or a cleanup function.
95+
onExit={() => {
96+
return 5;
97+
}}
98+
// @ts-expect-error -- onShare can return void or a cleanup function.
99+
onShare={() => {
100+
return 5;
101+
}}
102+
// @ts-expect-error -- onUpdate can return void or a cleanup function.
103+
onUpdate={() => {
104+
return 5;
82105
}}
83106
/>;
84107

‎types/react/ts5.0/test/experimental.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -178,4 +178,34 @@ function swipeTransitionTest() {
178178
// options can be empty
179179
startGestureTransition(gestureProvider, () => {}, {});
180180
}
181+
182+
<React.ViewTransition
183+
onGestureEnter={(timeline, options, instance, types) => {
184+
// @ts-expect-error -- Only implemented by react-dom
185+
timeline.currentTime;
186+
// passed options are non-nullable
187+
// $ExpectType number
188+
options.rangeStart;
189+
// $ExpectType number
190+
options.rangeEnd;
191+
// @ts-expect-error -- Only implemented by react-dom
192+
instance.group;
193+
}}
194+
>
195+
</React.ViewTransition>;
196+
197+
<React.ViewTransition
198+
// @ts-expect-error -- Either void or a function must be returned
199+
onGestureEnter={() => {
200+
return 5;
201+
}}
202+
>
203+
</React.ViewTransition>;
204+
205+
<React.ViewTransition
206+
onGestureEnter={() => {
207+
return function cleanup() {};
208+
}}
209+
>
210+
</React.ViewTransition>;
181211
}

0 commit comments

Comments
 (0)