Skip to content

Commit 06f4930

Browse files
Nick LefeverSaadnajmi
Nick Lefever
authored and
Saadnajmi
committed
[fabric] Add mouse event props to View
Summary: This diff adds the `onMouseEnter` and `onMouseLeave` event handler props and event emitters to the View component in Fabric. The mouse event data is the same that was provided by the Paper implementation in `RCTView`. These changes were made in the macOS specific extension of the View component props. Test Plan: Tested later in this stack. Reviewers: shawndempsey, #rn-desktop Reviewed By: shawndempsey Differential Revision: https://phabricator.intern.facebook.com/D53529016 Tasks: T154617556
1 parent 69fe24f commit 06f4930

File tree

5 files changed

+157
-53
lines changed

5 files changed

+157
-53
lines changed

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

Lines changed: 80 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,80 @@
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-
} // 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+
} // namespace facebook::react

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111

1212
#include <react/renderer/components/view/BaseViewEventEmitter.h>
1313
#include <react/renderer/components/view/KeyEvent.h>
14+
#include <react/renderer/components/view/MouseEvent.h>
1415

1516
namespace facebook::react {
1617

@@ -27,6 +28,11 @@ class HostPlatformViewEventEmitter : public BaseViewEventEmitter {
2728

2829
void onKeyDown(KeyEvent const &keyEvent) const;
2930
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;
3036
};
3137

3238
} // namespace facebook::react

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,10 @@ struct HostPlatformViewEvents {
2525
// Keyboard Events
2626
KeyDown = 2,
2727
KeyUp = 3,
28+
29+
// Mouse Events
30+
MouseEnter = 2,
31+
MouseLeave = 3,
2832
};
2933

3034
constexpr bool operator[](const Offset offset) const {
@@ -57,10 +61,16 @@ static inline HostPlatformViewEvents convertRawProp(
5761
convertRawProp(context, rawProps, "onFocus", sourceValue[Offset::Focus], defaultValue[Offset::Focus]);
5862
result[Offset::Blur] =
5963
convertRawProp(context, rawProps, "onBlur", sourceValue[Offset::Blur], defaultValue[Offset::Blur]);
64+
// Keyboard Events
6065
result[Offset::KeyDown] =
6166
convertRawProp(context, rawProps, "onKeyDown", sourceValue[Offset::KeyDown], defaultValue[Offset::KeyDown]);
6267
result[Offset::KeyUp] =
6368
convertRawProp(context, rawProps, "onKeyUp", sourceValue[Offset::KeyUp], defaultValue[Offset::KeyUp]);
69+
// Mouse Events
70+
result[Offset::MouseEnter] =
71+
convertRawProp(context, rawProps, "onMouseEnter", sourceValue[Offset::MouseEnter], defaultValue[Offset::MouseEnter]);
72+
result[Offset::MouseLeave] =
73+
convertRawProp(context, rawProps, "onMouseLeave", sourceValue[Offset::MouseLeave], defaultValue[Offset::MouseLeave]);
6474

6575
return result;
6676
}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,8 @@ void HostPlatformViewProps::setProp(
9696
VIEW_EVENT_CASE_MACOS(Blur);
9797
VIEW_EVENT_CASE_MACOS(KeyDown);
9898
VIEW_EVENT_CASE_MACOS(KeyUp);
99+
VIEW_EVENT_CASE_MACOS(MouseEnter);
100+
VIEW_EVENT_CASE_MACOS(MouseLeave);
99101
RAW_SET_PROP_SWITCH_CASE_BASIC(focusable);
100102
RAW_SET_PROP_SWITCH_CASE_BASIC(enableFocusRing);
101103
RAW_SET_PROP_SWITCH_CASE_BASIC(keyDownEvents);

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

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
/*
2+
* Copyright (c) Meta Platforms, Inc. and affiliates.
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+
#pragma once
9+
10+
#include <react/renderer/graphics/Geometry.h>
11+
12+
namespace facebook::react {
13+
14+
/*
15+
* Describes a mouse enter/leave event.
16+
*/
17+
struct MouseEvent {
18+
/**
19+
* Pointer horizontal location in target view.
20+
*/
21+
Float clientX{0};
22+
23+
/**
24+
* Pointer vertical location in target view.
25+
*/
26+
Float clientY{0};
27+
28+
/**
29+
* Pointer horizontal location in window.
30+
*/
31+
Float screenX{0};
32+
33+
/**
34+
* Pointer vertical location in window.
35+
*/
36+
Float screenY{0};
37+
38+
/*
39+
* A flag indicating if the alt key is pressed.
40+
*/
41+
bool altKey{false};
42+
43+
/*
44+
* A flag indicating if the control key is pressed.
45+
*/
46+
bool ctrlKey{false};
47+
48+
/*
49+
* A flag indicating if the shift key is pressed.
50+
*/
51+
bool shiftKey{false};
52+
53+
/*
54+
* A flag indicating if the meta key is pressed.
55+
*/
56+
bool metaKey{false};
57+
};
58+
59+
} // namespace facebook::react

0 commit comments

Comments
 (0)