Skip to content

Commit

Permalink
Remove validKeysDown, validKeysUp, passThroughAllKeyEvents
Browse files Browse the repository at this point in the history
  • Loading branch information
Saadnajmi committed Dec 13, 2024
1 parent 16acfc3 commit e68e460
Show file tree
Hide file tree
Showing 20 changed files with 102 additions and 386 deletions.
59 changes: 1 addition & 58 deletions packages/react-native/Libraries/Components/Button.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,7 @@

import type {TextStyleProp, ViewStyleProp} from '../StyleSheet/StyleSheet';
import type {PressEvent} from '../Types/CoreEventTypes';
import type {
BlurEvent,
FocusEvent,
HandledKeyEvent,
KeyEvent,
} from '../Types/CoreEventTypes'; // [macOS]
import type {BlurEvent, FocusEvent} from '../Types/CoreEventTypes'; // [macOS]
import type {
AccessibilityActionEvent,
AccessibilityActionInfo,
Expand Down Expand Up @@ -171,56 +166,6 @@ type ButtonProps = $ReadOnly<{|
*/
onFocus?: ?(e: FocusEvent) => void,

/**
* Handler to be called when a key down press is detected
*/
onKeyDown?: ?(e: KeyEvent) => void,

/**
* Handler to be called when a key up press is detected
*/
onKeyUp?: ?(e: KeyEvent) => void,

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

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

/**
* @deprecated use `keyDownEvents` or `keyUpEvents` instead
* When `true`, allows `onKeyDown` and `onKeyUp` to receive events not specified in
* `validKeysDown` and `validKeysUp`, respectively. Events matching `validKeysDown` and `validKeysUp`
* are still removed from the event queue, but the others are not.
*
* @platform macos
*/
passthroughAllKeyEvents?: ?boolean,

/**
* Array of keys to receive key down events for. These events have their default native behavior prevented.
* Overrides the props `validKeysDown`, `validKeysUp` and `passthroughAllKeyEvents`
*
* @platform macos
*/
keyDownEvents?: ?Array<HandledKeyEvent>,

/**
* Array of keys to receive key up events for. These events have their default native behavior prevented.
* Overrides the props `validKeysDown`, `validKeysUp` and `passthroughAllKeyEvents`
*
* @platform macos
*/
keyUpEvents?: ?Array<HandledKeyEvent>,

/*
* Specifies the Tooltip for the view
*/
Expand Down Expand Up @@ -402,8 +347,6 @@ const Button: React.AbstractComponent<
// [macOS
onFocus,
onBlur,
onKeyDown,
onKeyUp,
tooltip,
// macOS]
} = props;
Expand Down
25 changes: 0 additions & 25 deletions packages/react-native/Libraries/Components/Pressable/Pressable.js
Original file line number Diff line number Diff line change
Expand Up @@ -186,30 +186,6 @@ type Props = $ReadOnly<{|
*/
onKeyUp?: ?(event: KeyEvent) => void,

/**
* Array of keys to receive key down events for. These events have their default native behavior prevented.
*
* @platform macos
*/
validKeysDown?: ?Array<string | HandledKeyEvent>,

/**
* Array of keys to receive key up events for. These events have their default native behavior prevented.
*
* @platform macos
*/
validKeysUp?: ?Array<string | HandledKeyEvent>,

/**
* @deprecated use `keyDownEvents` or `keyUpEvents` instead
* When `true`, allows `onKeyDown` and `onKeyUp` to receive events not specified in
* `validKeysDown` and `validKeysUp`, respectively. Events matching `validKeysDown` and `validKeysUp`
* are still removed from the event queue, but the others are not.
*
* @platform macos
*/
passthroughAllKeyEvents?: ?boolean,

/**
* Array of keys to receive key down events for. These events have their default native behavior prevented.
* Overrides the props `validKeysDown`, `validKeysUp` and `passthroughAllKeyEvents`
Expand Down Expand Up @@ -377,7 +353,6 @@ function Pressable(
onBlur,
onKeyDown,
onKeyUp,
passthroughAllKeyEvents,
keyDownEvents,
keyUpEvents,
acceptsFirstMouse,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -51,9 +51,6 @@ const UIView = {
onDrop: true,
onKeyDown: true,
onKeyUp: true,
validKeysDown: true,
validKeysUp: true,
passthroughAllKeyEvents: true,
keyDownEvents: true,
keyUpEvents: true,
draggedTypes: true,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -137,11 +137,8 @@ export interface ViewPropsMacOS {
onDrop?: ((event: MouseEvent) => void) | undefined;
onKeyDown?: ((event: KeyEvent) => void) | undefined;
onKeyUp?: ((event: KeyEvent) => void) | undefined;
validKeysDown?: Array<HandledKeyEvent | string> | undefined;
validKeysUp?: Array<HandledKeyEvent | string> | undefined;
passthroughAllKeyEvents?: boolean | undefined;
keyDownEvents?: Array<HandledKeyEvent> | undefined;
keyUpEvents?: Array<HandledKeyEvent> | undefined;
keyDownEvents?: HandledKeyEvent[] | undefined;
keyUpEvents?: HandledKeyEvent[] | undefined;
draggedTypes?: DraggedTypesType | undefined;
}

Expand Down
24 changes: 0 additions & 24 deletions packages/react-native/Libraries/Components/View/ViewPropTypes.js
Original file line number Diff line number Diff line change
Expand Up @@ -111,30 +111,6 @@ export type KeyboardEventProps = $ReadOnly<{|
*/
onKeyUp?: ?(event: KeyEvent) => void,

/**
* Array of keys to receive key down events for. These events have their default native behavior prevented.
*
* @platform macos
*/
validKeysDown?: ?Array<string | HandledKeyEvent>,

/**
* Array of keys to receive key up events for. These events have their default native behavior prevented.
*
* @platform macos
*/
validKeysUp?: ?Array<string | HandledKeyEvent>,

/**
* @deprecated use `keyDownEvents` or `keyUpEvents` instead
* When `true`, allows `onKeyDown` and `onKeyUp` to receive events not specified in
* `validKeysDown` and `validKeysUp`, respectively. Events matching `validKeysDown` and `validKeysUp`
* are still removed from the event queue, but the others are not.
*
* @platform macos
*/
passthroughAllKeyEvents?: ?boolean,

/**
* Array of keys to receive key down events for. These events have their default native behavior prevented.
* Overrides the props `validKeysDown`, `validKeysUp` and `passthroughAllKeyEvents`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -53,9 +53,6 @@ const validAttributesForNonEventProps = {
draggedTypes: true,
enableFocusRing: true,
tooltip: true,
validKeysDown: true,
validKeysUp: true,
passthroughAllKeyEvents: true,
keyDownEvents: true,
keyUpEvents: true,
mouseDownCanMoveWindow: true,
Expand Down
4 changes: 4 additions & 0 deletions packages/react-native/Libraries/Pressability/Pressability.js
Original file line number Diff line number Diff line change
Expand Up @@ -101,11 +101,15 @@ export type PressabilityConfig = $ReadOnly<{|
// [macOS
/*
* Called after a key down event is detected.
*
* @platform macos
*/
onKeyDown?: ?(event: KeyEvent) => void,

/*
* Called after a key up event is detected.
*
* @platform macos
*/
onKeyUp?: ?(event: KeyEvent) => void,
// macOS]
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ NS_ASSUME_NONNULL_BEGIN
#if TARGET_OS_OSX // [macOS
- (BOOL)textInputShouldHandleDeleteForward:(id<RCTBackedTextInputViewProtocol>)sender; // Return `YES` to have the deleteForward event handled normally. Return `NO` to disallow it and handle it yourself.
- (BOOL)textInputShouldHandleKeyEvent:(NSEvent *)event; // Return `YES` to have the key event handled normally. Return `NO` to disallow it and handle it yourself.
- (BOOL)hasValidKeyDownOrValidKeyUp:(NSString *)key;
- (BOOL)hasKeyDownEventOrKeyUpEvent:(NSString *)key;
- (NSDragOperation)textInputDraggingEntered:(id<NSDraggingInfo>)draggingInfo;
- (void)textInputDraggingExited:(id<NSDraggingInfo>)draggingInfo;
- (BOOL)textInputShouldHandleDragOperation:(id<NSDraggingInfo>)draggingInfo;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -228,7 +228,7 @@ - (BOOL)control:(NSControl *)control textView:(NSTextView *)fieldEditor doComman
//escape
} else if (commandSelector == @selector(cancelOperation:)) {
[textInputDelegate textInputDidCancel];
if (![textInputDelegate hasValidKeyDownOrValidKeyUp:@"Escape"]) {
if (![textInputDelegate hasKeyDownEventOrKeyUpEvent:@"Escape"]) {
[[_backedTextInputView window] makeFirstResponder:nil];
}
commandHandled = YES;
Expand Down Expand Up @@ -457,7 +457,7 @@ - (BOOL)textView:(NSTextView *)textView doCommandBySelector:(SEL)commandSelector
//escape
} else if (commandSelector == @selector(cancelOperation:)) {
[textInputDelegate textInputDidCancel];
if (![textInputDelegate hasValidKeyDownOrValidKeyUp:@"Escape"]) {
if (![textInputDelegate hasKeyDownEventOrKeyUpEvent:@"Escape"]) {
[[_backedTextInputView window] makeFirstResponder:nil];
}
commandHandled = YES;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -730,9 +730,9 @@ - (BOOL)textInputShouldHandleDeleteForward:(__unused id)sender {
return YES;
}

- (BOOL)hasValidKeyDownOrValidKeyUp:(NSString *)key {
return [RCTHandledKey key:key matchesFilter:self.validKeysDown]
|| [RCTHandledKey key:key matchesFilter:self.validKeysUp];
- (BOOL)hasKeyDownEventOrKeyUpEvent:(NSString *)key {
return [RCTHandledKey key:key matchesFilter:self.keyDownEvents]
|| [RCTHandledKey key:key matchesFilter:self.keyUpEvents];
}

- (NSDragOperation)textInputDraggingEntered:(id<NSDraggingInfo>)draggingInfo
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -1664,13 +1664,6 @@ exports[`public API should not change unintentionally Libraries/Components/Butto
onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed,
onBlur?: ?(e: BlurEvent) => void,
onFocus?: ?(e: FocusEvent) => void,
onKeyDown?: ?(e: KeyEvent) => void,
onKeyUp?: ?(e: KeyEvent) => void,
validKeysDown?: ?Array<string>,
validKeysUp?: ?Array<string>,
passthroughAllKeyEvents?: ?boolean,
keyDownEvents?: ?Array<HandledKeyEvent>,
keyUpEvents?: ?Array<HandledKeyEvent>,
tooltip?: string,
accessible?: ?boolean,
accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
Expand Down Expand Up @@ -1866,9 +1859,6 @@ type Props = $ReadOnly<{|
onBlur?: ?(event: BlurEvent) => void,
onKeyDown?: ?(event: KeyEvent) => void,
onKeyUp?: ?(event: KeyEvent) => void,
validKeysDown?: ?Array<string | HandledKeyEvent>,
validKeysUp?: ?Array<string | HandledKeyEvent>,
passthroughAllKeyEvents?: ?boolean,
keyDownEvents?: ?Array<HandledKeyEvent>,
keyUpEvents?: ?Array<HandledKeyEvent>,
acceptsFirstMouse?: ?boolean,
Expand Down Expand Up @@ -4031,9 +4021,6 @@ exports[`public API should not change unintentionally Libraries/Components/View/
onDrop: true,
onKeyDown: true,
onKeyUp: true,
validKeysDown: true,
validKeysUp: true,
passthroughAllKeyEvents: true,
keyDownEvents: true,
keyUpEvents: true,
draggedTypes: true,
Expand Down Expand Up @@ -4223,9 +4210,6 @@ type DirectEventProps = $ReadOnly<{|
export type KeyboardEventProps = $ReadOnly<{|
onKeyDown?: ?(event: KeyEvent) => void,
onKeyUp?: ?(event: KeyEvent) => void,
validKeysDown?: ?Array<string | HandledKeyEvent>,
validKeysUp?: ?Array<string | HandledKeyEvent>,
passthroughAllKeyEvents?: ?boolean,
keyDownEvents?: ?Array<HandledKeyEvent>,
keyUpEvents?: ?Array<HandledKeyEvent>,
|}>;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -504,7 +504,7 @@ - (void)grammarCheckingDidChange:(BOOL)enabled
}
}

- (BOOL)hasValidKeyDownOrValidKeyUp:(nonnull NSString *)key {
- (BOOL)hasKeyDownEventOrKeyUpEvent:(nonnull NSString *)key {
return YES;
}

Expand Down
2 changes: 1 addition & 1 deletion packages/react-native/React/Views/RCTHandledKey.h
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
#if TARGET_OS_OSX
#import <React/RCTConvert.h>

// This class is used for specifying key filtering e.g. for -[RCTView validKeysDown] and -[RCTView validKeysUp]
// This class is used for specifying key filtering e.g. for -[RCTView keyDownEvents] and -[RCTView keyUpEvents]
// Also see RCTViewKeyboardEvent, which is a React representation of an actual NSEvent that is dispatched to JS.
@interface RCTHandledKey : NSObject

Expand Down
8 changes: 1 addition & 7 deletions packages/react-native/React/Views/RCTHandledKey.m
Original file line number Diff line number Diff line change
Expand Up @@ -103,12 +103,6 @@ @implementation RCTConvert (RCTHandledKey)

+ (RCTHandledKey *)RCTHandledKey:(id)json
{
// legacy way of specifying validKeysDown and validKeysUp -- here we ignore the modifiers when comparing to the NSEvent
if ([json isKindOfClass:[NSString class]]) {
return [[RCTHandledKey alloc] initWithKey:(NSString *)json];
}

// modern way of specifying validKeys and validKeysUp -- here we assume missing modifiers to mean false\NO
if ([json isKindOfClass:[NSDictionary class]]) {
NSDictionary *dict = (NSDictionary *)json;
NSString *key = dict[@"key"];
Expand All @@ -122,7 +116,7 @@ + (RCTHandledKey *)RCTHandledKey:(id)json
for (NSString *key in modifiers) {
id value = dict[key];
if (value == nil) {
value = @NO; // assume NO -- instead of nil i.e. "don't care" unlike the string case above.
value = @(NO); // assume NO -- instead of nil i.e. "don't care" unlike the string case above.
}

if (![value isKindOfClass:[NSNumber class]]) {
Expand Down
5 changes: 2 additions & 3 deletions packages/react-native/React/Views/RCTView.h
Original file line number Diff line number Diff line change
Expand Up @@ -170,11 +170,10 @@ extern const UIAccessibilityTraits SwitchAccessibilityTrait;
// NOTE does not properly work with single line text inputs (most key downs). This is because those are
// presumably handled by the window's field editor. To make it work, we'd need to look into providing
// a custom field editor for NSTextField controls.
@property (nonatomic, assign) BOOL passthroughAllKeyEvents;
@property (nonatomic, copy) RCTDirectEventBlock onKeyDown;
@property (nonatomic, copy) RCTDirectEventBlock onKeyUp;
@property (nonatomic, copy) NSArray<RCTHandledKey*> *validKeysDown;
@property (nonatomic, copy) NSArray<RCTHandledKey*> *validKeysUp;
@property (nonatomic, copy) NSArray<RCTHandledKey*> *keyDownEvents;
@property (nonatomic, copy) NSArray<RCTHandledKey*> *keyUpEvents;

// Shadow Properties
@property (nonatomic, strong) NSColor *shadowColor;
Expand Down
21 changes: 8 additions & 13 deletions packages/react-native/React/Views/RCTView.m
Original file line number Diff line number Diff line change
Expand Up @@ -1598,23 +1598,23 @@ - (BOOL)performDragOperation:(id <NSDraggingInfo>)sender

- (RCTViewKeyboardEvent*)keyboardEvent:(NSEvent*)event shouldBlock:(BOOL *)shouldBlock {
BOOL keyDown = event.type == NSEventTypeKeyDown;
NSArray<RCTHandledKey *> *validKeys = keyDown ? self.validKeysDown : self.validKeysUp;
NSArray<RCTHandledKey *> *keyEvents = keyDown ? self.keyDownEvents : self.keyUpEvents;

// If the view is focusable and the component didn't explicity set the validKeysDown or validKeysUp,
// If the view is focusable and the component didn't explicity set the keyDownEvents or keyUpEvents,
// allow enter/return and spacebar key events to mimic the behavior of native controls.
if (self.focusable && validKeys == nil) {
validKeys = @[
if (self.focusable && keyEvents == nil) {
keyEvents = @[
[[RCTHandledKey alloc] initWithKey:@"Enter"],
[[RCTHandledKey alloc] initWithKey:@" "]
];
}

// If a view specifies a key, it will always be removed from the responder chain (i.e. "handled")
*shouldBlock = [RCTHandledKey event:event matchesFilter:validKeys];
*shouldBlock = [RCTHandledKey event:event matchesFilter:keyEvents];

// If an event isn't being removed from the queue, but was requested to "passthrough" by a view,
// we want to be sure we dispatch it only once for that view. See note for GetEventDispatchStateDictionary.
if ([self passthroughAllKeyEvents] && !*shouldBlock) {
// If an event isn't being removed from the queue, we want to be sure we dispatch it
// only once for that view. See note for GetEventDispatchStateDictionary.
if (!*shouldBlock) {
NSNumber *tag = [self reactTag];
NSMutableDictionary<NSNumber *, NSNumber *> *dict = GetEventDispatchStateDictionary(event);

Expand All @@ -1625,11 +1625,6 @@ - (RCTViewKeyboardEvent*)keyboardEvent:(NSEvent*)event shouldBlock:(BOOL *)shoul
dict[tag] = @YES;
}

// Don't pass events we don't care about
if (![self passthroughAllKeyEvents] && !*shouldBlock) {
return nil;
}

return [RCTViewKeyboardEvent keyEventFromEvent:event reactTag:self.reactTag];
}

Expand Down
9 changes: 4 additions & 5 deletions packages/react-native/React/Views/RCTViewManager.m
Original file line number Diff line number Diff line change
Expand Up @@ -654,11 +654,10 @@ - (void) updateAccessibilityRole:(RCTView *)view withDefaultView:(RCTView *)defa
RCT_EXPORT_VIEW_PROPERTY(onDragEnter, RCTDirectEventBlock)
RCT_EXPORT_VIEW_PROPERTY(onDragLeave, RCTDirectEventBlock)
RCT_EXPORT_VIEW_PROPERTY(onDrop, RCTDirectEventBlock)
RCT_EXPORT_VIEW_PROPERTY(passthroughAllKeyEvents, BOOL)
RCT_EXPORT_VIEW_PROPERTY(onKeyDown, RCTDirectEventBlock) // macOS keyboard events
RCT_EXPORT_VIEW_PROPERTY(onKeyUp, RCTDirectEventBlock) // macOS keyboard events
RCT_EXPORT_VIEW_PROPERTY(validKeysDown, NSArray<RCTHandledKey *>)
RCT_EXPORT_VIEW_PROPERTY(validKeysUp, NSArray<RCTHandledKey *>)
RCT_EXPORT_VIEW_PROPERTY(onKeyDown, RCTDirectEventBlock)
RCT_EXPORT_VIEW_PROPERTY(onKeyUp, RCTDirectEventBlock)
RCT_EXPORT_VIEW_PROPERTY(keyDownEvents, NSArray<RCTHandledKey *>)
RCT_EXPORT_VIEW_PROPERTY(keyUpEvents, NSArray<RCTHandledKey *>)

#endif // macOS]

Expand Down
Loading

0 comments on commit e68e460

Please sign in to comment.