feat(fabric): Implement Drag and Drop on View

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

@@ -12,6 +12,7 @@ import type {
   BlurEvent,
   // [macOS
   FocusEvent,
+  DragEvent,
   HandledKeyEvent,
   KeyEvent,
   GestureResponderEvent,
@@ -198,21 +199,21 @@ type PressableBaseProps = $ReadOnly<{
    *
    * @platform macos
    */
-  onDragEnter?: (event: MouseEvent) => void,
+  onDragEnter?: (event: DragEvent) => void,
 
   /**
    * Fired when a file is dragged out of the Pressable via the mouse.
    *
    * @platform macos
    */
-  onDragLeave?: (event: MouseEvent) => void,
+  onDragLeave?: (event: DragEvent) => void,
 
   /**
    * Fired when a file is dropped on the Pressable via the mouse.
    *
    * @platform macos
    */
-  onDrop?: (event: MouseEvent) => void,
+  onDrop?: (event: DragEvent) => void,
 
   /**
    * The types of dragged files that the Pressable will accept.

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

@@ -13,8 +13,8 @@ import type {EdgeInsetsOrSizeProp} from '../../StyleSheet/EdgeInsetsPropType';
 import type {
   BlurEvent,
   FocusEvent,
-  // [macOS]
-  MouseEvent,
+  MouseEvent, // [macOS]
+  DragEvent, // [macOS]
   GestureResponderEvent,
   LayoutChangeEvent,
 } from '../../Types/CoreEventTypes';
@@ -36,9 +36,9 @@ export type TouchableWithoutFeedbackPropsIOS = {
   tooltip?: ?string,
   onMouseEnter?: (event: MouseEvent) => void,
   onMouseLeave?: (event: MouseEvent) => void,
-  onDragEnter?: (event: MouseEvent) => void,
-  onDragLeave?: (event: MouseEvent) => void,
-  onDrop?: (event: MouseEvent) => void,
+  onDragEnter?: (event: DragEvent) => void,
+  onDragLeave?: (event: DragEvent) => void,
+  onDrop?: (event: DragEvent) => void,
   draggedTypes?: ?DraggedTypesType,
   // macOS]
 };

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

@@ -12,10 +12,10 @@
 
 'use strict';
 
-export type DraggedType = 'fileUrl';
+export type DraggedType = 'fileUrl' | 'image' | 'string';
 
 export type DraggedTypesType = DraggedType | $ReadOnlyArray<DraggedType>;
 
 module.exports = {
-  DraggedTypes: ['fileUrl'],
+  DraggedTypes: ['fileUrl', 'image', 'string'],
 };

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

@@ -13,6 +13,7 @@ import {GestureResponderHandlers} from '../../../types/public/ReactNativeRendere
 import {StyleProp} from '../../StyleSheet/StyleSheet';
 import {ViewStyle} from '../../StyleSheet/StyleSheetTypes';
 import {
+  DragEvent,
   HandledKeyEvent,
   KeyEvent,
   LayoutChangeEvent,
@@ -108,7 +109,7 @@ export interface ViewPropsAndroid {
   tabIndex?: 0 | -1 | undefined;
 }
 
-export type DraggedType = 'fileUrl';
+export type DraggedType = 'fileUrl' | 'image' | 'string';
 export type DraggedTypesType = DraggedType | DraggedType[];
 
 export interface ViewPropsMacOS {
@@ -118,9 +119,9 @@ export interface ViewPropsMacOS {
   enableFocusRing?: boolean | undefined;
   onMouseEnter?: ((event: MouseEvent) => void) | undefined;
   onMouseLeave?: ((event: MouseEvent) => void) | undefined;
-  onDragEnter?: ((event: MouseEvent) => void) | undefined;
-  onDragLeave?: ((event: MouseEvent) => void) | undefined;
-  onDrop?: ((event: MouseEvent) => void) | undefined;
+  onDragEnter?: ((event: DragEvent) => void) | undefined;
+  onDragLeave?: ((event: DragEvent) => void) | undefined;
+  onDrop?: ((event: DragEvent) => void) | undefined;
   onKeyDown?: ((event: KeyEvent) => void) | undefined;
   onKeyUp?: ((event: KeyEvent) => void) | undefined;
   keyDownEvents?: HandledKeyEvent[] | undefined;

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

@@ -16,6 +16,7 @@ import type {
   BlurEvent,
   FocusEvent,
   // [macOS]
+  DragEvent,
   HandledKeyEvent,
   KeyEvent,
   LayoutChangeEvent,
@@ -410,21 +411,21 @@ type MacOSViewProps = $ReadOnly<{|
    *
    * @platform macos
    */
-  onDragEnter?: (event: MouseEvent) => void,
+  onDragEnter?: (event: DragEvent) => void,
 
   /**
    * Fired when a file is dragged out of the view via the mouse.
    *
    * @platform macos
    */
-  onDragLeave?: (event: MouseEvent) => void,
+  onDragLeave?: (event: DragEvent) => void,
 
   /**
    * Fired when an element is dropped on a valid drop target
    *
    * @platform macos
    */
-  onDrop?: (event: MouseEvent) => void,
+  onDrop?: (event: DragEvent) => void,
 
   /**
    * Specifies the Tooltip for the view

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

@@ -305,4 +305,26 @@ export interface NativeBlurEvent extends TargetedEvent {}
 export interface FocusEvent extends NativeSyntheticEvent<NativeFocusEvent> {}
 
 export interface BlueEvent extends NativeSyntheticEvent<NativeBlurEvent> {}
+
+// Drag and Drop types
+export interface DataTransferItem {
+  name: string;
+  kind: string;
+  type: string;
+  uri: string;
+  size?: number | undefined;
+  width?: number | undefined;
+  height?: number | undefined;
+}
+
+export interface DataTransfer {
+  files: ReadonlyArray<DataTransferItem>;
+  types: ReadonlyArray<string>;
+}
+
+export interface DragEvent extends MouseEvent {
+  nativeEvent: NativeMouseEvent & {
+    dataTransfer?: DataTransfer | undefined;
+  };
+}
 // macOS]

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

@@ -370,3 +370,59 @@ export type MouseEvent = NativeSyntheticEvent<
     timestamp: number,
   }>,
 >;
+
+// // Base mouse event data shared between MouseEvent and DragEvent
+// export type NativeMouseEvent = $ReadOnly<{
+//   clientX: number,
+//   clientY: number,
+//   pageX: number,
+//   pageY: number,
+//   timestamp: number,
+//   screenX?: number,
+//   screenY?: number,
+//   altKey?: boolean,
+//   ctrlKey?: boolean,
+//   shiftKey?: boolean,
+//   metaKey?: boolean,
+// }>;
+
+// export type MouseEvent = NativeSyntheticEvent<
+//   $ReadOnly<{
+//     ...NativeMouseEvent,
+//     dataTransfer?: DataTransfer,
+//   }>,
+// >;
+
+// [macOS
+export type DataTransferItem = $ReadOnly<{
+  name: string,
+  kind: string,
+  type: string,
+  uri: string,
+  size?: number,
+  width?: number,
+  height?: number,
+}>;
+
+export type DataTransfer = $ReadOnly<{
+  files: $ReadOnlyArray<DataTransferItem>,
+  types: $ReadOnlyArray<string>,
+}>;
+
+export type DragEvent = NativeSyntheticEvent<
+  $ReadOnly<{
+    clientX: number,
+    clientY: number,
+    pageX: number,
+    pageY: number,
+    timestamp: number,
+    screenX?: number,
+    screenY?: number,
+    altKey?: boolean,
+    ctrlKey?: boolean,
+    shiftKey?: boolean,
+    metaKey?: boolean,
+    dataTransfer?: DataTransfer,
+  }>,
+>;
+// macOS]

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

@@ -1744,9 +1744,9 @@ type PressableBaseProps = $ReadOnly<{
   enableFocusRing?: ?boolean,
   allowsVibrancy?: ?boolean,
   tooltip?: ?string,
-  onDragEnter?: (event: MouseEvent) => void,
-  onDragLeave?: (event: MouseEvent) => void,
-  onDrop?: (event: MouseEvent) => void,
+  onDragEnter?: (event: DragEvent) => void,
+  onDragLeave?: (event: DragEvent) => void,
+  onDrop?: (event: DragEvent) => void,
   draggedTypes?: ?DraggedTypesType,
   style?:
     | ViewStyleProp
@@ -3774,9 +3774,9 @@ exports[`public API should not change unintentionally Libraries/Components/Touch
   tooltip?: ?string,
   onMouseEnter?: (event: MouseEvent) => void,
   onMouseLeave?: (event: MouseEvent) => void,
-  onDragEnter?: (event: MouseEvent) => void,
-  onDragLeave?: (event: MouseEvent) => void,
-  onDrop?: (event: MouseEvent) => void,
+  onDragEnter?: (event: DragEvent) => void,
+  onDragLeave?: (event: DragEvent) => void,
+  onDrop?: (event: DragEvent) => void,
   draggedTypes?: ?DraggedTypesType,
 };
 export type TouchableWithoutFeedbackPropsAndroid = {
@@ -3841,7 +3841,7 @@ declare export default typeof UnimplementedView;
 `;
 
 exports[`public API should not change unintentionally Libraries/Components/View/DraggedType.js 1`] = `
-"export type DraggedType = \\"fileUrl\\";
+"export type DraggedType = \\"fileUrl\\" | \\"image\\" | \\"string\\";
 export type DraggedTypesType = DraggedType | $ReadOnlyArray<DraggedType>;
 declare module.exports: { DraggedTypes: $FlowFixMe };
 "
@@ -4212,9 +4212,9 @@ export type ViewPropsIOS = $ReadOnly<{
   shouldRasterizeIOS?: ?boolean,
 }>;
 type MacOSViewProps = $ReadOnly<{|
-  onDragEnter?: (event: MouseEvent) => void,
-  onDragLeave?: (event: MouseEvent) => void,
-  onDrop?: (event: MouseEvent) => void,
+  onDragEnter?: (event: DragEvent) => void,
+  onDragLeave?: (event: DragEvent) => void,
+  onDrop?: (event: DragEvent) => void,
   tooltip?: ?string,
   acceptsFirstMouse?: ?boolean,
   mouseDownCanMoveWindow?: ?boolean,
@@ -8572,6 +8572,35 @@ export type MouseEvent = NativeSyntheticEvent<
     timestamp: number,
   }>,
 >;
+export type DataTransferItem = $ReadOnly<{
+  name: string,
+  kind: string,
+  type: string,
+  uri: string,
+  size?: number,
+  width?: number,
+  height?: number,
+}>;
+export type DataTransfer = $ReadOnly<{
+  files: $ReadOnlyArray<DataTransferItem>,
+  types: $ReadOnlyArray<string>,
+}>;
+export type DragEvent = NativeSyntheticEvent<
+  $ReadOnly<{
+    clientX: number,
+    clientY: number,
+    pageX: number,
+    pageY: number,
+    timestamp: number,
+    screenX?: number,
+    screenY?: number,
+    altKey?: boolean,
+    ctrlKey?: boolean,
+    shiftKey?: boolean,
+    metaKey?: boolean,
+    dataTransfer?: DataTransfer,
+  }>,
+>;
 "
 `;