[fabric] Add drag and drop event emitters to View

Summary: Add the drag and drop event emitters to View with the payload conversion matching the Paper API for dragEnter/dragLeave/drop events.

Test Plan: Tested later in this stack.

Reviewers: shawndempsey, #rn-desktop

Reviewed By: shawndempsey

Differential Revision: https://phabricator.intern.facebook.com/D53674738

Author: Nick Lefever

packages/react-native/ReactCommon/react/renderer/components/view/platform/macos/react/renderer/components/view/HostPlatformViewEventEmitter.cpp

@@ -1,80 +1,80 @@
-/*
- * Copyright (c) Microsoft Corporation.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
- // [macOS]
-
-#include <react/renderer/components/view/HostPlatformViewEventEmitter.h>
-#include <react/renderer/components/view/KeyEvent.h>
-
-namespace facebook::react {
-
-#pragma mark - Focus Events
-
-void HostPlatformViewEventEmitter::onFocus() const {
-  dispatchEvent("focus");
-}
-
-void HostPlatformViewEventEmitter::onBlur() const {
-  dispatchEvent("blur");
-}
-
-#pragma mark - Keyboard Events
-
-static jsi::Value keyEventPayload(jsi::Runtime& runtime, const KeyEvent& event) {
-  auto payload = jsi::Object(runtime);
-  payload.setProperty(runtime, "key", jsi::String::createFromUtf8(runtime, event.key));
-  payload.setProperty(runtime, "ctrlKey", event.ctrlKey);
-  payload.setProperty(runtime, "shiftKey", event.shiftKey);
-  payload.setProperty(runtime, "altKey", event.altKey);
-  payload.setProperty(runtime, "metaKey", event.metaKey);
-  payload.setProperty(runtime, "capsLockKey", event.capsLockKey);
-  payload.setProperty(runtime, "numericPadKey", event.numericPadKey);
-  payload.setProperty(runtime, "helpKey", event.helpKey);
-  payload.setProperty(runtime, "functionKey", event.functionKey);
-  return payload;
-};
-
-void HostPlatformViewEventEmitter::onKeyDown(const KeyEvent& keyEvent) const {
-  dispatchEvent("keyDown", [keyEvent](jsi::Runtime& runtime) {
-    return keyEventPayload(runtime, keyEvent);
-  });
-}
-
-void HostPlatformViewEventEmitter::onKeyUp(const KeyEvent& keyEvent) const {
-  dispatchEvent("keyUp", [keyEvent](jsi::Runtime& runtime) {
-    return keyEventPayload(runtime, keyEvent);
-  });
-}
-
-#pragma mark - Mouse Events
-
-static jsi::Value mouseEventPayload(jsi::Runtime& runtime, const MouseEvent& event) {
-  auto payload = jsi::Object(runtime);
-  payload.setProperty(runtime, "clientX", event.clientX);
-  payload.setProperty(runtime, "clientY", event.clientY);
-  payload.setProperty(runtime, "screenX", event.screenX);
-  payload.setProperty(runtime, "screenY", event.screenY);
-  payload.setProperty(runtime, "altKey", event.altKey);
-  payload.setProperty(runtime, "ctrlKey", event.ctrlKey);
-  payload.setProperty(runtime, "shiftKey", event.shiftKey);
-  payload.setProperty(runtime, "metaKey", event.metaKey);
-  return payload;
-};
-
-void HostPlatformViewEventEmitter::onMouseEnter(const MouseEvent& mouseEvent) const {
-  dispatchEvent("mouseEnter", [mouseEvent](jsi::Runtime &runtime) { 
-    return mouseEventPayload(runtime, mouseEvent); 
-  });
-}
-
-void HostPlatformViewEventEmitter::onMouseLeave(const MouseEvent& mouseEvent) const {
-  dispatchEvent("mouseLeave", [mouseEvent](jsi::Runtime &runtime) { 
-    return mouseEventPayload(runtime, mouseEvent); 
-  });
-}
-
-} // namespace facebook::react
+/*
+ * Copyright (c) Microsoft Corporation.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+ // [macOS]
+
+#include <react/renderer/components/view/HostPlatformViewEventEmitter.h>
+#include <react/renderer/components/view/KeyEvent.h>
+
+namespace facebook::react {
+
+#pragma mark - Focus Events
+
+void HostPlatformViewEventEmitter::onFocus() const {
+  dispatchEvent("focus");
+}
+
+void HostPlatformViewEventEmitter::onBlur() const {
+  dispatchEvent("blur");
+}
+
+#pragma mark - Keyboard Events
+
+static jsi::Value keyEventPayload(jsi::Runtime& runtime, const KeyEvent& event) {
+  auto payload = jsi::Object(runtime);
+  payload.setProperty(runtime, "key", jsi::String::createFromUtf8(runtime, event.key));
+  payload.setProperty(runtime, "ctrlKey", event.ctrlKey);
+  payload.setProperty(runtime, "shiftKey", event.shiftKey);
+  payload.setProperty(runtime, "altKey", event.altKey);
+  payload.setProperty(runtime, "metaKey", event.metaKey);
+  payload.setProperty(runtime, "capsLockKey", event.capsLockKey);
+  payload.setProperty(runtime, "numericPadKey", event.numericPadKey);
+  payload.setProperty(runtime, "helpKey", event.helpKey);
+  payload.setProperty(runtime, "functionKey", event.functionKey);
+  return payload;
+};
+
+void HostPlatformViewEventEmitter::onKeyDown(const KeyEvent& keyEvent) const {
+  dispatchEvent("keyDown", [keyEvent](jsi::Runtime& runtime) {
+    return keyEventPayload(runtime, keyEvent);
+  });
+}
+
+void HostPlatformViewEventEmitter::onKeyUp(const KeyEvent& keyEvent) const {
+  dispatchEvent("keyUp", [keyEvent](jsi::Runtime& runtime) {
+    return keyEventPayload(runtime, keyEvent);
+  });
+}
+
+#pragma mark - Mouse Events
+
+static jsi::Value mouseEventPayload(jsi::Runtime& runtime, const MouseEvent& event) {
+  auto payload = jsi::Object(runtime);
+  payload.setProperty(runtime, "clientX", event.clientX);
+  payload.setProperty(runtime, "clientY", event.clientY);
+  payload.setProperty(runtime, "screenX", event.screenX);
+  payload.setProperty(runtime, "screenY", event.screenY);
+  payload.setProperty(runtime, "altKey", event.altKey);
+  payload.setProperty(runtime, "ctrlKey", event.ctrlKey);
+  payload.setProperty(runtime, "shiftKey", event.shiftKey);
+  payload.setProperty(runtime, "metaKey", event.metaKey);
+  return payload;
+};
+
+void HostPlatformViewEventEmitter::onMouseEnter(const MouseEvent& mouseEvent) const {
+  dispatchEvent("mouseEnter", [mouseEvent](jsi::Runtime &runtime) { 
+    return mouseEventPayload(runtime, mouseEvent); 
+  });
+}
+
+void HostPlatformViewEventEmitter::onMouseLeave(const MouseEvent& mouseEvent) const {
+  dispatchEvent("mouseLeave", [mouseEvent](jsi::Runtime &runtime) { 
+    return mouseEventPayload(runtime, mouseEvent); 
+  });
+}
+
+} // namespace facebook::react

packages/react-native/ReactCommon/react/renderer/components/view/platform/macos/react/renderer/components/view/HostPlatformViewEventEmitter.h

@@ -33,6 +33,12 @@ class HostPlatformViewEventEmitter : public BaseViewEventEmitter {
 
   void onMouseEnter(MouseEvent const& mouseEvent) const;
   void onMouseLeave(MouseEvent const& mouseEvent) const;
+
+#pragma mark - Drag and Drop Events
+
+  void onDragEnter(DragEvent const& dragEvent) const;
+  void onDragLeave(DragEvent const& dragEvent) const;
+  void onDrop(DragEvent const& dragEvent) const;
 };
 
-} // namespace facebook::react
+} // namespace facebook::react

packages/react-native/ReactCommon/react/renderer/components/view/platform/macos/react/renderer/components/view/MouseEvent.h

@@ -56,4 +56,18 @@ struct MouseEvent {
   bool metaKey{false};
 };
 
+struct DataTransferItem {
+  std::string name{};
+  std::string kind{};
+  std::string type{};
+  std::string uri{};
+  std::optional<int> size{};
+  std::optional<int> width{};
+  std::optional<int> height{};
+};
+
+struct DragEvent : MouseEvent {
+  std::vector<DataTransferItem> dataTransferItems;
+};
+
 } // namespace facebook::react