Skip to content

Commit d8ab0f4

Browse files
SaadnajmiSaadnajmi
committed
Update types
1 parent c3afaf0 commit d8ab0f4

File tree

8 files changed

+137
-27
lines changed

8 files changed

+137
-27
lines changed

‎packages/react-native/Libraries/Components/Pressable/Pressable.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import type {
1212
BlurEvent,
1313
// [macOS
1414
FocusEvent,
15+
DragEvent,
1516
HandledKeyEvent,
1617
KeyEvent,
1718
GestureResponderEvent,
@@ -198,21 +199,21 @@ type PressableBaseProps = $ReadOnly<{
198199
*
199200
* @platform macos
200201
*/
201-
onDragEnter?: (event: MouseEvent) => void,
202+
onDragEnter?: (event: DragEvent) => void,
202203

203204
/**
204205
* Fired when a file is dragged out of the Pressable via the mouse.
205206
*
206207
* @platform macos
207208
*/
208-
onDragLeave?: (event: MouseEvent) => void,
209+
onDragLeave?: (event: DragEvent) => void,
209210

210211
/**
211212
* Fired when a file is dropped on the Pressable via the mouse.
212213
*
213214
* @platform macos
214215
*/
215-
onDrop?: (event: MouseEvent) => void,
216+
onDrop?: (event: DragEvent) => void,
216217

217218
/**
218219
* The types of dragged files that the Pressable will accept.

‎packages/react-native/Libraries/Components/Touchable/TouchableWithoutFeedback.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ import type {EdgeInsetsOrSizeProp} from '../../StyleSheet/EdgeInsetsPropType';
1313
import type {
1414
BlurEvent,
1515
FocusEvent,
16-
// [macOS]
17-
MouseEvent,
16+
MouseEvent, // [macOS]
17+
DragEvent, // [macOS]
1818
GestureResponderEvent,
1919
LayoutChangeEvent,
2020
} from '../../Types/CoreEventTypes';
@@ -36,9 +36,9 @@ export type TouchableWithoutFeedbackPropsIOS = {
3636
tooltip?: ?string,
3737
onMouseEnter?: (event: MouseEvent) => void,
3838
onMouseLeave?: (event: MouseEvent) => void,
39-
onDragEnter?: (event: MouseEvent) => void,
40-
onDragLeave?: (event: MouseEvent) => void,
41-
onDrop?: (event: MouseEvent) => void,
39+
onDragEnter?: (event: DragEvent) => void,
40+
onDragLeave?: (event: DragEvent) => void,
41+
onDrop?: (event: DragEvent) => void,
4242
draggedTypes?: ?DraggedTypesType,
4343
// macOS]
4444
};

‎packages/react-native/Libraries/Components/View/DraggedType.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@
1212

1313
'use strict';
1414

15-
export type DraggedType = 'fileUrl';
15+
export type DraggedType = 'fileUrl' | 'image' | 'string';
1616

1717
export type DraggedTypesType = DraggedType | $ReadOnlyArray<DraggedType>;
1818

1919
module.exports = {
20-
DraggedTypes: ['fileUrl'],
20+
DraggedTypes: ['fileUrl', 'image', 'string'],
2121
};

‎packages/react-native/Libraries/Components/View/ViewPropTypes.d.ts‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {GestureResponderHandlers} from '../../../types/public/ReactNativeRendere
1313
import {StyleProp} from '../../StyleSheet/StyleSheet';
1414
import {ViewStyle} from '../../StyleSheet/StyleSheetTypes';
1515
import {
16+
DragEvent,
1617
HandledKeyEvent,
1718
KeyEvent,
1819
LayoutChangeEvent,
@@ -108,7 +109,7 @@ export interface ViewPropsAndroid {
108109
tabIndex?: 0 | -1 | undefined;
109110
}
110111

111-
export type DraggedType = 'fileUrl';
112+
export type DraggedType = 'fileUrl' | 'image' | 'string';
112113
export type DraggedTypesType = DraggedType | DraggedType[];
113114

114115
export interface ViewPropsMacOS {
@@ -118,9 +119,9 @@ export interface ViewPropsMacOS {
118119
enableFocusRing?: boolean | undefined;
119120
onMouseEnter?: ((event: MouseEvent) => void) | undefined;
120121
onMouseLeave?: ((event: MouseEvent) => void) | undefined;
121-
onDragEnter?: ((event: MouseEvent) => void) | undefined;
122-
onDragLeave?: ((event: MouseEvent) => void) | undefined;
123-
onDrop?: ((event: MouseEvent) => void) | undefined;
122+
onDragEnter?: ((event: DragEvent) => void) | undefined;
123+
onDragLeave?: ((event: DragEvent) => void) | undefined;
124+
onDrop?: ((event: DragEvent) => void) | undefined;
124125
onKeyDown?: ((event: KeyEvent) => void) | undefined;
125126
onKeyUp?: ((event: KeyEvent) => void) | undefined;
126127
keyDownEvents?: HandledKeyEvent[] | undefined;

‎packages/react-native/Libraries/Components/View/ViewPropTypes.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import type {
1616
BlurEvent,
1717
FocusEvent,
1818
// [macOS]
19+
DragEvent,
1920
HandledKeyEvent,
2021
KeyEvent,
2122
LayoutChangeEvent,
@@ -410,21 +411,21 @@ type MacOSViewProps = $ReadOnly<{|
410411
*
411412
* @platform macos
412413
*/
413-
onDragEnter?: (event: MouseEvent) => void,
414+
onDragEnter?: (event: DragEvent) => void,
414415

415416
/**
416417
* Fired when a file is dragged out of the view via the mouse.
417418
*
418419
* @platform macos
419420
*/
420-
onDragLeave?: (event: MouseEvent) => void,
421+
onDragLeave?: (event: DragEvent) => void,
421422

422423
/**
423424
* Fired when an element is dropped on a valid drop target
424425
*
425426
* @platform macos
426427
*/
427-
onDrop?: (event: MouseEvent) => void,
428+
onDrop?: (event: DragEvent) => void,
428429

429430
/**
430431
* Specifies the Tooltip for the view

‎packages/react-native/Libraries/Types/CoreEventTypes.d.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -305,4 +305,26 @@ export interface NativeBlurEvent extends TargetedEvent {}
305305
export interface FocusEvent extends NativeSyntheticEvent<NativeFocusEvent> {}
306306

307307
export interface BlueEvent extends NativeSyntheticEvent<NativeBlurEvent> {}
308+
309+
// Drag and Drop types
310+
export interface DataTransferItem {
311+
name: string;
312+
kind: string;
313+
type: string;
314+
uri: string;
315+
size?: number | undefined;
316+
width?: number | undefined;
317+
height?: number | undefined;
318+
}
319+
320+
export interface DataTransfer {
321+
files: ReadonlyArray<DataTransferItem>;
322+
types: ReadonlyArray<string>;
323+
}
324+
325+
export interface DragEvent extends MouseEvent {
326+
nativeEvent: NativeMouseEvent & {
327+
dataTransfer?: DataTransfer | undefined;
328+
};
329+
}
308330
// macOS]

‎packages/react-native/Libraries/Types/CoreEventTypes.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -370,3 +370,59 @@ export type MouseEvent = NativeSyntheticEvent<
370370
timestamp: number,
371371
}>,
372372
>;
373+
374+
// // Base mouse event data shared between MouseEvent and DragEvent
375+
// export type NativeMouseEvent = $ReadOnly<{
376+
// clientX: number,
377+
// clientY: number,
378+
// pageX: number,
379+
// pageY: number,
380+
// timestamp: number,
381+
// screenX?: number,
382+
// screenY?: number,
383+
// altKey?: boolean,
384+
// ctrlKey?: boolean,
385+
// shiftKey?: boolean,
386+
// metaKey?: boolean,
387+
// }>;
388+
389+
// export type MouseEvent = NativeSyntheticEvent<
390+
// $ReadOnly<{
391+
// ...NativeMouseEvent,
392+
// dataTransfer?: DataTransfer,
393+
// }>,
394+
// >;
395+
396+
// [macOS
397+
export type DataTransferItem = $ReadOnly<{
398+
name: string,
399+
kind: string,
400+
type: string,
401+
uri: string,
402+
size?: number,
403+
width?: number,
404+
height?: number,
405+
}>;
406+
407+
export type DataTransfer = $ReadOnly<{
408+
files: $ReadOnlyArray<DataTransferItem>,
409+
types: $ReadOnlyArray<string>,
410+
}>;
411+
412+
export type DragEvent = NativeSyntheticEvent<
413+
$ReadOnly<{
414+
clientX: number,
415+
clientY: number,
416+
pageX: number,
417+
pageY: number,
418+
timestamp: number,
419+
screenX?: number,
420+
screenY?: number,
421+
altKey?: boolean,
422+
ctrlKey?: boolean,
423+
shiftKey?: boolean,
424+
metaKey?: boolean,
425+
dataTransfer?: DataTransfer,
426+
}>,
427+
>;
428+
// macOS]

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

Lines changed: 39 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1744,9 +1744,9 @@ type PressableBaseProps = $ReadOnly<{
17441744
enableFocusRing?: ?boolean,
17451745
allowsVibrancy?: ?boolean,
17461746
tooltip?: ?string,
1747-
onDragEnter?: (event: MouseEvent) => void,
1748-
onDragLeave?: (event: MouseEvent) => void,
1749-
onDrop?: (event: MouseEvent) => void,
1747+
onDragEnter?: (event: DragEvent) => void,
1748+
onDragLeave?: (event: DragEvent) => void,
1749+
onDrop?: (event: DragEvent) => void,
17501750
draggedTypes?: ?DraggedTypesType,
17511751
style?:
17521752
| ViewStyleProp
@@ -3774,9 +3774,9 @@ exports[`public API should not change unintentionally Libraries/Components/Touch
37743774
tooltip?: ?string,
37753775
onMouseEnter?: (event: MouseEvent) => void,
37763776
onMouseLeave?: (event: MouseEvent) => void,
3777-
onDragEnter?: (event: MouseEvent) => void,
3778-
onDragLeave?: (event: MouseEvent) => void,
3779-
onDrop?: (event: MouseEvent) => void,
3777+
onDragEnter?: (event: DragEvent) => void,
3778+
onDragLeave?: (event: DragEvent) => void,
3779+
onDrop?: (event: DragEvent) => void,
37803780
draggedTypes?: ?DraggedTypesType,
37813781
};
37823782
export type TouchableWithoutFeedbackPropsAndroid = {
@@ -3841,7 +3841,7 @@ declare export default typeof UnimplementedView;
38413841
`;
38423842

38433843
exports[`public API should not change unintentionally Libraries/Components/View/DraggedType.js 1`] = `
3844-
"export type DraggedType = \\"fileUrl\\";
3844+
"export type DraggedType = \\"fileUrl\\" | \\"image\\" | \\"string\\";
38453845
export type DraggedTypesType = DraggedType | $ReadOnlyArray<DraggedType>;
38463846
declare module.exports: { DraggedTypes: $FlowFixMe };
38473847
"
@@ -4212,9 +4212,9 @@ export type ViewPropsIOS = $ReadOnly<{
42124212
shouldRasterizeIOS?: ?boolean,
42134213
}>;
42144214
type MacOSViewProps = $ReadOnly<{|
4215-
onDragEnter?: (event: MouseEvent) => void,
4216-
onDragLeave?: (event: MouseEvent) => void,
4217-
onDrop?: (event: MouseEvent) => void,
4215+
onDragEnter?: (event: DragEvent) => void,
4216+
onDragLeave?: (event: DragEvent) => void,
4217+
onDrop?: (event: DragEvent) => void,
42184218
tooltip?: ?string,
42194219
acceptsFirstMouse?: ?boolean,
42204220
mouseDownCanMoveWindow?: ?boolean,
@@ -8572,6 +8572,35 @@ export type MouseEvent = NativeSyntheticEvent<
85728572
timestamp: number,
85738573
}>,
85748574
>;
8575+
export type DataTransferItem = $ReadOnly<{
8576+
name: string,
8577+
kind: string,
8578+
type: string,
8579+
uri: string,
8580+
size?: number,
8581+
width?: number,
8582+
height?: number,
8583+
}>;
8584+
export type DataTransfer = $ReadOnly<{
8585+
files: $ReadOnlyArray<DataTransferItem>,
8586+
types: $ReadOnlyArray<string>,
8587+
}>;
8588+
export type DragEvent = NativeSyntheticEvent<
8589+
$ReadOnly<{
8590+
clientX: number,
8591+
clientY: number,
8592+
pageX: number,
8593+
pageY: number,
8594+
timestamp: number,
8595+
screenX?: number,
8596+
screenY?: number,
8597+
altKey?: boolean,
8598+
ctrlKey?: boolean,
8599+
shiftKey?: boolean,
8600+
metaKey?: boolean,
8601+
dataTransfer?: DataTransfer,
8602+
}>,
8603+
>;
85758604
"
85768605
`;
85778606

0 commit comments

Comments
 (0)