Skip to content

Commit 77691c4

Browse files
SaadnajmiSaadnajmi
committed
Introduce props keyDownEvents and keyUpEvents 
1 parent 1f82ed9 commit 77691c4

File tree

14 files changed

+280
-214
lines changed

14 files changed

+280
-214
lines changed

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

Lines changed: 32 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -177,17 +177,46 @@ type ButtonProps = $ReadOnly<{|
177177
onKeyUp?: ?(e: KeyEvent) => void,
178178

179179
/*
180+
* @deprecated use `keyDownEvents` or `keyUpEvents` instead
180181
* Array of keys to receive key down events for
181182
* For arrow keys, add "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown",
182183
*/
183184
validKeysDown?: ?Array<string>,
184185

185186
/*
187+
* @deprecated use `keyDownEvents` or `keyUpEvents` instead
186188
* Array of keys to receive key up events for
187189
* For arrow keys, add "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown",
188190
*/
189191
validKeysUp?: ?Array<string>,
190192

193+
194+
/**
195+
* @deprecated use `keyDownEvents` or `keyUpEvents` instead
196+
* When `true`, allows `onKeyDown` and `onKeyUp` to receive events not specified in
197+
* `validKeysDown` and `validKeysUp`, respectively. Events matching `validKeysDown` and `validKeysUp`
198+
* are still removed from the event queue, but the others are not.
199+
*
200+
* @platform macos
201+
*/
202+
passthroughAllKeyEvents?: ?boolean,
203+
204+
/**
205+
* Array of keys to receive key down events for. These events have their default native behavior prevented.
206+
* Overrides the props `validKeysDown`, `validKeysUp` and `passthroughAllKeyEvents`
207+
*
208+
* @platform macos
209+
*/
210+
keyDownEvents?: ?Array<HandledKeyboardEvent>,
211+
212+
/**
213+
* Array of keys to receive key up events for. These events have their default native behavior prevented.
214+
* Overrides the props `validKeysDown`, `validKeysUp` and `passthroughAllKeyEvents`
215+
*
216+
* @platform macos
217+
*/
218+
keyUpEvents?: ?Array<HandledKeyboardEvent>,
219+
191220
/*
192221
* Specifies the Tooltip for the view
193222
*/
@@ -367,6 +396,9 @@ const Button: React.AbstractComponent<ButtonProps> = (props: ButtonProps) => {
367396
onKeyUp,
368397
validKeysDown,
369398
validKeysUp,
399+
passthroughAllKeyEvents,
400+
keyDownEvents,
401+
keyUpEvents,
370402
tooltip,
371403
// macOS]
372404
} = props;
@@ -443,8 +475,6 @@ const Button: React.AbstractComponent<ButtonProps> = (props: ButtonProps) => {
443475
onBlur={onBlur}
444476
onKeyDown={onKeyDown}
445477
onKeyUp={onKeyUp}
446-
validKeysDown={validKeysDown}
447-
validKeysUp={validKeysUp}
448478
tooltip={tooltip}
449479
// macOS]
450480
touchSoundDisabled={touchSoundDisabled}>

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

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -187,27 +187,44 @@ type Props = $ReadOnly<{|
187187
onKeyUp?: ?(event: KeyEvent) => void,
188188

189189
/**
190+
* Array of keys to receive key down events for. These events have their default native behavior prevented.
191+
*
192+
* @platform macos
193+
*/
194+
validKeysDown?: ?Array<string | HandledKeyboardEvent>,
195+
196+
/**
197+
* Array of keys to receive key up events for. These events have their default native behavior prevented.
198+
*
199+
* @platform macos
200+
*/
201+
validKeysUp?: ?Array<string | HandledKeyboardEvent>,
202+
203+
/**
204+
* @deprecated use `keyDownEvents` or `keyUpEvents` instead
190205
* When `true`, allows `onKeyDown` and `onKeyUp` to receive events not specified in
191206
* `validKeysDown` and `validKeysUp`, respectively. Events matching `validKeysDown` and `validKeysUp`
192-
* still have their native default behavior prevented, but the others do not.
207+
* are still removed from the event queue, but the others are not.
193208
*
194209
* @platform macos
195210
*/
196211
passthroughAllKeyEvents?: ?boolean,
197212

198213
/**
199214
* Array of keys to receive key down events for. These events have their default native behavior prevented.
215+
* Overrides the props `validKeysDown`, `validKeysUp` and `passthroughAllKeyEvents`
200216
*
201217
* @platform macos
202218
*/
203-
validKeysDown?: ?Array<string | HandledKeyboardEvent>,
219+
keyDownEvents?: ?Array<HandledKeyboardEvent>,
204220

205221
/**
206222
* Array of keys to receive key up events for. These events have their default native behavior prevented.
223+
* Overrides the props `validKeysDown`, `validKeysUp` and `passthroughAllKeyEvents`
207224
*
208225
* @platform macos
209226
*/
210-
validKeysUp?: ?Array<string | HandledKeyboardEvent>,
227+
keyUpEvents?: ?Array<HandledKeyboardEvent>,
211228

212229
/**
213230
* Specifies whether the view should receive the mouse down event when the
@@ -357,6 +374,9 @@ function Pressable(props: Props, forwardedRef): React.Node {
357374
onBlur,
358375
onKeyDown,
359376
onKeyUp,
377+
passthroughAllKeyEvents,
378+
keyDownEvents,
379+
keyUpEvents,
360380
acceptsFirstMouse,
361381
mouseDownCanMoveWindow,
362382
enableFocusRing,
@@ -397,6 +417,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
397417
ariaLive === 'off' ? 'none' : ariaLive ?? props.accessibilityLiveRegion;
398418

399419
const accessibilityLabel = ariaLabel ?? props.accessibilityLabel;
420+
400421
const restPropsWithDefaults: React.ElementConfig<typeof View> = {
401422
...restProps,
402423
...android_rippleConfig?.viewProps,

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

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -78,18 +78,6 @@ type Props = $ReadOnly<{|
7878
*/
7979
nextFocusUp?: ?number,
8080

81-
/*
82-
* Array of keys to receive key down events for
83-
* For arrow keys, add "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown",
84-
*/
85-
validKeysDown?: ?Array<string>,
86-
87-
/*
88-
* Array of keys to receive key up events for
89-
* For arrow keys, add "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown",
90-
*/
91-
validKeysUp?: ?Array<string>,
92-
9381
/**
9482
* Set to true to add the ripple effect to the foreground of the view, instead
9583
* of the background. This is useful if one of your child views has a
@@ -343,8 +331,6 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
343331
nextFocusUp: this.props.nextFocusUp,
344332
onLayout: this.props.onLayout,
345333
testID: this.props.testID,
346-
validKeysDown: this.props.validKeysDown,
347-
validKeysUp: this.props.validKeysUp,
348334
},
349335
...children,
350336
);

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

Lines changed: 0 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -38,20 +38,6 @@ type Props = $ReadOnly<{|
3838
style?: ?ViewStyleProp,
3939

4040
hostRef?: ?React.Ref<typeof Animated.View>,
41-
42-
// [macOS
43-
/*
44-
* Array of keys to receive key down events for
45-
* For arrow keys, add "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown",
46-
*/
47-
validKeysDown?: ?Array<string>,
48-
49-
/*
50-
* Array of keys to receive key up events for
51-
* For arrow keys, add "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown",
52-
*/
53-
validKeysUp?: ?Array<string>,
54-
// macOS]
5541
|}>;
5642

5743
type State = $ReadOnly<{|
@@ -178,18 +164,6 @@ class TouchableOpacity extends React.Component<Props, State> {
178164
this.props.onFocus(event);
179165
}
180166
},
181-
onKeyDown: event => {
182-
if (this.props.onKeyDown != null) {
183-
this.props.onKeyDown(event);
184-
}
185-
},
186-
onKeyUp: event => {
187-
if (this.props.onKeyUp != null) {
188-
this.props.onKeyUp(event);
189-
}
190-
},
191-
validKeysDown: this.props.validKeysDown,
192-
validKeysUp: this.props.validKeysUp,
193167
onLongPress: this.props.onLongPress,
194168
onPress: this.props.onPress,
195169
onPressIn: event => {

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

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -95,10 +95,6 @@ type Props = $ReadOnly<{|
9595
onDragLeave?: (event: MouseEvent) => void,
9696
onDrop?: (event: MouseEvent) => void,
9797
draggedTypes?: ?DraggedTypesType,
98-
onKeyDown?: ?(event: KeyEvent) => void,
99-
onKeyUp?: ?(event: KeyEvent) => void,
100-
validKeysDown?: ?Array<string>,
101-
validKeysUp?: ?Array<string>,
10298
// macOS]
10399
pressRetentionOffset?: ?EdgeInsetsOrSizeProp,
104100
rejectResponderTermination?: ?boolean,
@@ -132,8 +128,6 @@ const PASSTHROUGH_PROPS = [
132128
'onAccessibilityAction',
133129
'onBlur',
134130
'onFocus',
135-
'validKeysDown',
136-
'validKeysUp',
137131
'onLayout',
138132
'onMouseEnter', // [macOS
139133
'onMouseLeave',
@@ -257,10 +251,6 @@ function createPressabilityConfig({
257251
android_disableSound: props.touchSoundDisabled,
258252
onBlur: props.onBlur,
259253
onFocus: props.onFocus,
260-
onKeyDown: props.onKeyDown,
261-
onKeyUp: props.onKeyUp,
262-
validKeysDown: props.validKeysDown,
263-
validKeysUp: props.validKeysUp,
264254
onLongPress: props.onLongPress,
265255
onPress: props.onPress,
266256
onPressIn: props.onPressIn,

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,9 +48,11 @@ const UIView = {
4848
onDrop: true,
4949
onKeyDown: true,
5050
onKeyUp: true,
51-
passthroughAllKeyEvents: true,
5251
validKeysDown: true,
5352
validKeysUp: true,
53+
passthroughAllKeyEvents: true,
54+
keyDownEvents: true,
55+
keyUpEvents: true,
5456
draggedTypes: true,
5557
// macOS]
5658
};

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,13 @@ const View: React.AbstractComponent<
5555
nativeID,
5656
pointerEvents,
5757
tabIndex,
58+
// [macOS
59+
passthroughAllKeyEvents,
60+
validKeysDown,
61+
validKeysUp,
62+
keyDownEvents,
63+
keyUpEvents,
64+
// macOS]
5865
...otherProps
5966
}: ViewProps,
6067
forwardedRef,
@@ -102,6 +109,17 @@ const View: React.AbstractComponent<
102109
// $FlowFixMe[sketchy-null-mixed]
103110
const newPointerEvents = style?.pointerEvents || pointerEvents;
104111

112+
// [macOS
113+
let _passthroughAllKeyEvents = passthroughAllKeyEvents;
114+
let _validKeysDown = validKeysDown;
115+
let _validKeysUp = validKeysUp;
116+
if (keyDownEvents || keyUpEvents) {
117+
_passthroughAllKeyEvents = true;
118+
_validKeysDown = keyDownEvents;
119+
_validKeysUp = keyUpEvents;
120+
}
121+
// macOS]
122+
105123
const actualView = (
106124
<ViewNativeComponent
107125
{...otherProps}
@@ -123,6 +141,11 @@ const View: React.AbstractComponent<
123141
style={style}
124142
// $FlowFixMe[incompatible-type]
125143
pointerEvents={newPointerEvents}
144+
// [macOS
145+
passthroughAllKeyEvents={_passthroughAllKeyEvents}
146+
validKeysDown={_validKeysDown}
147+
validKeysUp={_validKeysUp}
148+
// macOS]
126149
ref={forwardedRef}
127150
/>
128151
);

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -178,8 +178,11 @@ export interface ViewPropsMacOS {
178178
onDrop?: ((event: MouseEvent) => void) | undefined;
179179
onKeyDown?: ((event: KeyEvent) => void) | undefined;
180180
onKeyUp?: ((event: KeyEvent) => void) | undefined;
181-
validKeysDown?: string[] | undefined;
182-
validKeysUp?: string[] | undefined;
181+
validKeysDown?: Array<HandledKeyEvent | string> | undefined;
182+
validKeysUp?: Array<HandledKeyEvent | string> | undefined;
183+
passthroughAllKeyEvents?: boolean | undefined;
184+
keyDownEvents?: Array<HandledKeyEvent> | undefined;
185+
keyUpEvents?: Array<HandledKeyEvent> | undefined;
183186
draggedTypes?: DraggedTypesType | undefined;
184187
}
185188

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

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,21 @@ export type KeyboardEventProps = $ReadOnly<{|
131131
onKeyUp?: ?(event: KeyEvent) => void,
132132

133133
/**
134+
* Array of keys to receive key down events for. These events have their default native behavior prevented.
135+
*
136+
* @platform macos
137+
*/
138+
validKeysDown?: ?Array<string | HandledKeyboardEvent>,
139+
140+
/**
141+
* Array of keys to receive key up events for. These events have their default native behavior prevented.
142+
*
143+
* @platform macos
144+
*/
145+
validKeysUp?: ?Array<string | HandledKeyboardEvent>,
146+
147+
/**
148+
* @deprecated use `keyDownEvents` or `keyUpEvents` instead
134149
* When `true`, allows `onKeyDown` and `onKeyUp` to receive events not specified in
135150
* `validKeysDown` and `validKeysUp`, respectively. Events matching `validKeysDown` and `validKeysUp`
136151
* are still removed from the event queue, but the others are not.
@@ -141,17 +156,19 @@ export type KeyboardEventProps = $ReadOnly<{|
141156

142157
/**
143158
* Array of keys to receive key down events for. These events have their default native behavior prevented.
159+
* Overrides the props `validKeysDown`, `validKeysUp` and `passthroughAllKeyEvents`
144160
*
145161
* @platform macos
146162
*/
147-
validKeysDown?: ?Array<string | HandledKeyboardEvent>,
163+
keyDownEvents?: ?Array<HandledKeyboardEvent>,
148164

149165
/**
150166
* Array of keys to receive key up events for. These events have their default native behavior prevented.
167+
* Overrides the props `validKeysDown`, `validKeysUp` and `passthroughAllKeyEvents`
151168
*
152169
* @platform macos
153170
*/
154-
validKeysUp?: ?Array<string | HandledKeyboardEvent>,
171+
keyUpEvents?: ?Array<HandledKeyboardEvent>,
155172
|}>;
156173
// macOS]
157174

‎packages/react-native/Libraries/NativeComponent/BaseViewConfig.macos.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,9 +53,11 @@ const validAttributesForNonEventProps = {
5353
draggedTypes: true,
5454
enableFocusRing: true,
5555
tooltip: true,
56-
passthroughAllKeyEvents: true,
5756
validKeysDown: true,
5857
validKeysUp: true,
58+
passthroughAllKeyEvents: true,
59+
keyDownEvents: true,
60+
keyUpEvents: true,
5961
mouseDownCanMoveWindow: true,
6062
};
6163

‎packages/react-native/Libraries/Pressability/Pressability.js

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,7 @@ export type PressabilityConfig = $ReadOnly<{|
9898
*/
9999
onFocus?: ?(event: FocusEvent) => void,
100100

101+
// [macOS
101102
/*
102103
* Called after a key down event is detected.
103104
*/
@@ -107,18 +108,7 @@ export type PressabilityConfig = $ReadOnly<{|
107108
* Called after a key up event is detected.
108109
*/
109110
onKeyUp?: ?(event: KeyEvent) => void,
110-
111-
/*
112-
* Array of keys to receive key down events for
113-
* For arrow keys, add "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown",
114-
*/
115-
validKeysDown?: ?Array<string>,
116-
117-
/*
118-
* Array of keys to receive key up events for
119-
* For arrow keys, add "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown",
120-
*/
121-
validKeysUp?: ?Array<string>,
111+
// macOS]
122112

123113
/**
124114
* Called when the hover is activated to provide visual feedback.

0 commit comments

Comments
 (0)