Skip to content

Commit 6f83f8f

Browse files
Nick LefeverSaadnajmi
Nick Lefever
authored and
Saadnajmi
committed
[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
1 parent a56d1e4 commit 6f83f8f

File tree

3 files changed

+198
-118
lines changed

3 files changed

+198
-118
lines changed

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

Lines changed: 140 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,140 @@
1-
/*
2-
* Copyright (c) Microsoft Corporation.
3-
*
4-
* This source code is licensed under the MIT license found in the
5-
* LICENSE file in the root directory of this source tree.
6-
*/
7-
8-
// [macOS]
9-
10-
#include <react/renderer/components/view/HostPlatformViewEventEmitter.h>
11-
#include <react/renderer/components/view/KeyEvent.h>
12-
13-
namespace facebook::react {
14-
15-
#pragma mark - Focus Events
16-
17-
void HostPlatformViewEventEmitter::onFocus() const {
18-
dispatchEvent("focus");
19-
}
20-
21-
void HostPlatformViewEventEmitter::onBlur() const {
22-
dispatchEvent("blur");
23-
}
24-
25-
#pragma mark - Keyboard Events
26-
27-
static jsi::Value keyEventPayload(jsi::Runtime& runtime, const KeyEvent& event) {
28-
auto payload = jsi::Object(runtime);
29-
payload.setProperty(runtime, "key", jsi::String::createFromUtf8(runtime, event.key));
30-
payload.setProperty(runtime, "ctrlKey", event.ctrlKey);
31-
payload.setProperty(runtime, "shiftKey", event.shiftKey);
32-
payload.setProperty(runtime, "altKey", event.altKey);
33-
payload.setProperty(runtime, "metaKey", event.metaKey);
34-
payload.setProperty(runtime, "capsLockKey", event.capsLockKey);
35-
payload.setProperty(runtime, "numericPadKey", event.numericPadKey);
36-
payload.setProperty(runtime, "helpKey", event.helpKey);
37-
payload.setProperty(runtime, "functionKey", event.functionKey);
38-
return payload;
39-
};
40-
41-
void HostPlatformViewEventEmitter::onKeyDown(const KeyEvent& keyEvent) const {
42-
dispatchEvent("keyDown", [keyEvent](jsi::Runtime& runtime) {
43-
return keyEventPayload(runtime, keyEvent);
44-
});
45-
}
46-
47-
void HostPlatformViewEventEmitter::onKeyUp(const KeyEvent& keyEvent) const {
48-
dispatchEvent("keyUp", [keyEvent](jsi::Runtime& runtime) {
49-
return keyEventPayload(runtime, keyEvent);
50-
});
51-
}
52-
53-
#pragma mark - Mouse Events
54-
55-
static jsi::Value mouseEventPayload(jsi::Runtime& runtime, const MouseEvent& event) {
56-
auto payload = jsi::Object(runtime);
57-
payload.setProperty(runtime, "clientX", event.clientX);
58-
payload.setProperty(runtime, "clientY", event.clientY);
59-
payload.setProperty(runtime, "screenX", event.screenX);
60-
payload.setProperty(runtime, "screenY", event.screenY);
61-
payload.setProperty(runtime, "altKey", event.altKey);
62-
payload.setProperty(runtime, "ctrlKey", event.ctrlKey);
63-
payload.setProperty(runtime, "shiftKey", event.shiftKey);
64-
payload.setProperty(runtime, "metaKey", event.metaKey);
65-
return payload;
66-
};
67-
68-
void HostPlatformViewEventEmitter::onMouseEnter(const MouseEvent& mouseEvent) const {
69-
dispatchEvent("mouseEnter", [mouseEvent](jsi::Runtime &runtime) {
70-
return mouseEventPayload(runtime, mouseEvent);
71-
});
72-
}
73-
74-
void HostPlatformViewEventEmitter::onMouseLeave(const MouseEvent& mouseEvent) const {
75-
dispatchEvent("mouseLeave", [mouseEvent](jsi::Runtime &runtime) {
76-
return mouseEventPayload(runtime, mouseEvent);
77-
});
78-
}
79-
80-
} // namespace facebook::react
1+
/*
2+
* Copyright (c) Microsoft Corporation.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
// [macOS]
9+
10+
#include <react/renderer/components/view/HostPlatformViewEventEmitter.h>
11+
#include <react/renderer/components/view/KeyEvent.h>
12+
13+
namespace facebook::react {
14+
15+
#pragma mark - Focus Events
16+
17+
void HostPlatformViewEventEmitter::onFocus() const {
18+
dispatchEvent("focus");
19+
}
20+
21+
void HostPlatformViewEventEmitter::onBlur() const {
22+
dispatchEvent("blur");
23+
}
24+
25+
#pragma mark - Keyboard Events
26+
27+
static jsi::Value keyEventPayload(jsi::Runtime& runtime, const KeyEvent& event) {
28+
auto payload = jsi::Object(runtime);
29+
payload.setProperty(runtime, "key", jsi::String::createFromUtf8(runtime, event.key));
30+
payload.setProperty(runtime, "ctrlKey", event.ctrlKey);
31+
payload.setProperty(runtime, "shiftKey", event.shiftKey);
32+
payload.setProperty(runtime, "altKey", event.altKey);
33+
payload.setProperty(runtime, "metaKey", event.metaKey);
34+
payload.setProperty(runtime, "capsLockKey", event.capsLockKey);
35+
payload.setProperty(runtime, "numericPadKey", event.numericPadKey);
36+
payload.setProperty(runtime, "helpKey", event.helpKey);
37+
payload.setProperty(runtime, "functionKey", event.functionKey);
38+
return payload;
39+
};
40+
41+
void HostPlatformViewEventEmitter::onKeyDown(const KeyEvent& keyEvent) const {
42+
dispatchEvent("keyDown", [keyEvent](jsi::Runtime& runtime) {
43+
return keyEventPayload(runtime, keyEvent);
44+
});
45+
}
46+
47+
void HostPlatformViewEventEmitter::onKeyUp(const KeyEvent& keyEvent) const {
48+
dispatchEvent("keyUp", [keyEvent](jsi::Runtime& runtime) {
49+
return keyEventPayload(runtime, keyEvent);
50+
});
51+
}
52+
53+
#pragma mark - Mouse Events
54+
55+
static jsi::Value mouseEventPayload(jsi::Runtime& runtime, const MouseEvent& event) {
56+
auto payload = jsi::Object(runtime);
57+
payload.setProperty(runtime, "clientX", event.clientX);
58+
payload.setProperty(runtime, "clientY", event.clientY);
59+
payload.setProperty(runtime, "screenX", event.screenX);
60+
payload.setProperty(runtime, "screenY", event.screenY);
61+
payload.setProperty(runtime, "altKey", event.altKey);
62+
payload.setProperty(runtime, "ctrlKey", event.ctrlKey);
63+
payload.setProperty(runtime, "shiftKey", event.shiftKey);
64+
payload.setProperty(runtime, "metaKey", event.metaKey);
65+
return payload;
66+
};
67+
68+
void HostPlatformViewEventEmitter::onMouseEnter(const MouseEvent& mouseEvent) const {
69+
dispatchEvent("mouseEnter", [mouseEvent](jsi::Runtime &runtime) {
70+
return mouseEventPayload(runtime, mouseEvent);
71+
});
72+
}
73+
74+
void HostPlatformViewEventEmitter::onMouseLeave(const MouseEvent& mouseEvent) const {
75+
dispatchEvent("mouseLeave", [mouseEvent](jsi::Runtime &runtime) {
76+
return mouseEventPayload(runtime, mouseEvent);
77+
});
78+
}
79+
80+
#pragma mark - Drag and Drop Events
81+
82+
static jsi::Value dragEventPayload(jsi::Runtime& runtime, DragEvent const& event) {
83+
auto filesArray = jsi::Array(runtime, event.dataTransferItems.size());
84+
auto itemsArray = jsi::Array(runtime, event.dataTransferItems.size());
85+
auto typesArray = jsi::Array(runtime, event.dataTransferItems.size());
86+
int i = 0;
87+
for (auto const &transferItem : event.dataTransferItems) {
88+
auto fileObject = jsi::Object(runtime);
89+
fileObject.setProperty(runtime, "name", transferItem.name);
90+
fileObject.setProperty(runtime, "type", transferItem.type);
91+
fileObject.setProperty(runtime, "uri", transferItem.uri);
92+
if (transferItem.size.has_value()) {
93+
fileObject.setProperty(runtime, "size", *transferItem.size);
94+
}
95+
if (transferItem.width.has_value()) {
96+
fileObject.setProperty(runtime, "width", *transferItem.width);
97+
}
98+
if (transferItem.height.has_value()) {
99+
fileObject.setProperty(runtime, "height", *transferItem.height);
100+
}
101+
filesArray.setValueAtIndex(runtime, i, fileObject);
102+
103+
auto itemObject = jsi::Object(runtime);
104+
itemObject.setProperty(runtime, "kind", transferItem.kind);
105+
itemObject.setProperty(runtime, "type", transferItem.type);
106+
itemsArray.setValueAtIndex(runtime, i, itemObject);
107+
108+
typesArray.setValueAtIndex(runtime, i, transferItem.type);
109+
i++;
110+
}
111+
112+
auto dataTransferObject = jsi::Object(runtime);
113+
dataTransferObject.setProperty(runtime, "files", filesArray);
114+
dataTransferObject.setProperty(runtime, "items", itemsArray);
115+
dataTransferObject.setProperty(runtime, "types", typesArray);
116+
117+
auto payload = mouseEventPayload(runtime, event);
118+
payload.setProperty(runtime, "dataTransfer", dataTransferObject);
119+
return payload;
120+
};
121+
122+
void HostPlatformViewEventEmitter::onDragEnter(DragEvent const& dragEvent) const {
123+
dispatchEvent("dragEnter", [dragEvent](jsi::Runtime &runtime) {
124+
return dragEventPayload(runtime, dragEvent);
125+
});
126+
}
127+
128+
void HostPlatformViewEventEmitter::onDragLeave(DragEvent const& dragEvent) const {
129+
dispatchEvent("dragLeave", [dragEvent](jsi::Runtime &runtime) {
130+
return dragEventPayload(runtime, dragEvent);
131+
});
132+
}
133+
134+
void HostPlatformViewEventEmitter::onDrop(DragEvent const& dragEvent) const {
135+
dispatchEvent("drop", [dragEvent](jsi::Runtime &runtime) {
136+
return dragEventPayload(runtime, dragEvent);
137+
});
138+
}
139+
140+
} // namespace facebook::react

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

Lines changed: 44 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,44 @@
1-
/*
2-
* Copyright (c) Microsoft Corporation.
3-
*
4-
* This source code is licensed under the MIT license found in the
5-
* LICENSE file in the root directory of this source tree.
6-
*/
7-
8-
// [macOS]
9-
10-
#pragma once
11-
12-
#include <react/renderer/components/view/BaseViewEventEmitter.h>
13-
#include <react/renderer/components/view/KeyEvent.h>
14-
#include <react/renderer/components/view/MouseEvent.h>
15-
16-
namespace facebook::react {
17-
18-
class HostPlatformViewEventEmitter : public BaseViewEventEmitter {
19-
public:
20-
using BaseViewEventEmitter::BaseViewEventEmitter;
21-
22-
#pragma mark - Focus Events
23-
24-
void onFocus() const;
25-
void onBlur() const;
26-
27-
#pragma mark - Keyboard Events
28-
29-
void onKeyDown(KeyEvent const &keyEvent) const;
30-
void onKeyUp(KeyEvent const &keyEvent) const;
31-
32-
#pragma mark - Mouse Events
33-
34-
void onMouseEnter(MouseEvent const &mouseEvent) const;
35-
void onMouseLeave(MouseEvent const &mouseEvent) const;
36-
};
37-
38-
} // namespace facebook::react
1+
/*
2+
* Copyright (c) Microsoft Corporation.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
// [macOS]
9+
10+
#pragma once
11+
12+
#include <react/renderer/components/view/BaseViewEventEmitter.h>
13+
#include <react/renderer/components/view/KeyEvent.h>
14+
#include <react/renderer/components/view/MouseEvent.h>
15+
16+
namespace facebook::react {
17+
18+
class HostPlatformViewEventEmitter : public BaseViewEventEmitter {
19+
public:
20+
using BaseViewEventEmitter::BaseViewEventEmitter;
21+
22+
#pragma mark - Focus Events
23+
24+
void onFocus() const;
25+
void onBlur() const;
26+
27+
#pragma mark - Keyboard Events
28+
29+
void onKeyDown(KeyEvent const &keyEvent) const;
30+
void onKeyUp(KeyEvent const &keyEvent) const;
31+
32+
#pragma mark - Mouse Events
33+
34+
void onMouseEnter(MouseEvent const &mouseEvent) const;
35+
void onMouseLeave(MouseEvent const &mouseEvent) const;
36+
37+
#pragma mark - Drag and Drop Events
38+
39+
void onDragEnter(DragEvent const& dragEvent) const;
40+
void onDragLeave(DragEvent const& dragEvent) const;
41+
void onDrop(DragEvent const& dragEvent) const;
42+
};
43+
44+
} // namespace facebook::react

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,4 +56,18 @@ struct MouseEvent {
5656
bool metaKey{false};
5757
};
5858

59+
struct DataTransferItem {
60+
std::string name{};
61+
std::string kind{};
62+
std::string type{};
63+
std::string uri{};
64+
std::optional<int> size{};
65+
std::optional<int> width{};
66+
std::optional<int> height{};
67+
};
68+
69+
struct DragEvent : MouseEvent {
70+
std::vector<DataTransferItem> dataTransferItems;
71+
};
72+
5973
} // namespace facebook::react

0 commit comments

Comments
 (0)