Skip to content

Commit

Permalink
Introduce props keyDownEvents and keyUpEvents
Browse files Browse the repository at this point in the history
  • Loading branch information
Saadnajmi committed Aug 22, 2024
1 parent 1164bc9 commit 4b0dc39
Show file tree
Hide file tree
Showing 15 changed files with 328 additions and 262 deletions.
34 changes: 32 additions & 2 deletions packages/react-native/Libraries/Components/Button.js
Original file line number Diff line number Diff line change
Expand Up @@ -177,17 +177,46 @@ type ButtonProps = $ReadOnly<{|
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<HandledKeyboardEvent>,

/**
* 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<HandledKeyboardEvent>,

/*
* Specifies the Tooltip for the view
*/
Expand Down Expand Up @@ -367,6 +396,9 @@ const Button: React.AbstractComponent<ButtonProps> = (props: ButtonProps) => {
onKeyUp,
validKeysDown,
validKeysUp,
passthroughAllKeyEvents,
keyDownEvents,
keyUpEvents,
tooltip,
// macOS]
} = props;
Expand Down Expand Up @@ -443,8 +475,6 @@ const Button: React.AbstractComponent<ButtonProps> = (props: ButtonProps) => {
onBlur={onBlur}
onKeyDown={onKeyDown}
onKeyUp={onKeyUp}
validKeysDown={validKeysDown}
validKeysUp={validKeysUp}
tooltip={tooltip}
// macOS]
touchSoundDisabled={touchSoundDisabled}>
Expand Down
27 changes: 24 additions & 3 deletions packages/react-native/Libraries/Components/Pressable/Pressable.js
Original file line number Diff line number Diff line change
Expand Up @@ -187,27 +187,44 @@ 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 | HandledKeyboardEvent>,

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

/**
* @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`
* still have their native default behavior prevented, but the others do not.
* 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
*/
validKeysDown?: ?Array<string | HandledKeyboardEvent>,
keyDownEvents?: ?Array<HandledKeyboardEvent>,

/**
* 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
*/
validKeysUp?: ?Array<string | HandledKeyboardEvent>,
keyUpEvents?: ?Array<HandledKeyboardEvent>,

/**
* Specifies whether the view should receive the mouse down event when the
Expand Down Expand Up @@ -357,6 +374,9 @@ function Pressable(props: Props, forwardedRef): React.Node {
onBlur,
onKeyDown,
onKeyUp,
passthroughAllKeyEvents,
keyDownEvents,
keyUpEvents,
acceptsFirstMouse,
mouseDownCanMoveWindow,
enableFocusRing,
Expand Down Expand Up @@ -397,6 +417,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
ariaLive === 'off' ? 'none' : ariaLive ?? props.accessibilityLiveRegion;

const accessibilityLabel = ariaLabel ?? props.accessibilityLabel;

const restPropsWithDefaults: React.ElementConfig<typeof View> = {
...restProps,
...android_rippleConfig?.viewProps,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -78,18 +78,6 @@ type Props = $ReadOnly<{|
*/
nextFocusUp?: ?number,

/*
* Array of keys to receive key down events for
* For arrow keys, add "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown",
*/
validKeysDown?: ?Array<string>,

/*
* Array of keys to receive key up events for
* For arrow keys, add "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown",
*/
validKeysUp?: ?Array<string>,

/**
* Set to true to add the ripple effect to the foreground of the view, instead
* of the background. This is useful if one of your child views has a
Expand Down Expand Up @@ -343,8 +331,6 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
nextFocusUp: this.props.nextFocusUp,
onLayout: this.props.onLayout,
testID: this.props.testID,
validKeysDown: this.props.validKeysDown,
validKeysUp: this.props.validKeysUp,
},
...children,
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -38,20 +38,6 @@ type Props = $ReadOnly<{|
style?: ?ViewStyleProp,

hostRef?: ?React.Ref<typeof Animated.View>,

// [macOS
/*
* Array of keys to receive key down events for
* For arrow keys, add "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown",
*/
validKeysDown?: ?Array<string>,

/*
* Array of keys to receive key up events for
* For arrow keys, add "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown",
*/
validKeysUp?: ?Array<string>,
// macOS]
|}>;

type State = $ReadOnly<{|
Expand Down Expand Up @@ -178,18 +164,6 @@ class TouchableOpacity extends React.Component<Props, State> {
this.props.onFocus(event);
}
},
onKeyDown: event => {
if (this.props.onKeyDown != null) {
this.props.onKeyDown(event);
}
},
onKeyUp: event => {
if (this.props.onKeyUp != null) {
this.props.onKeyUp(event);
}
},
validKeysDown: this.props.validKeysDown,
validKeysUp: this.props.validKeysUp,
onLongPress: this.props.onLongPress,
onPress: this.props.onPress,
onPressIn: event => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -95,10 +95,6 @@ type Props = $ReadOnly<{|
onDragLeave?: (event: MouseEvent) => void,
onDrop?: (event: MouseEvent) => void,
draggedTypes?: ?DraggedTypesType,
onKeyDown?: ?(event: KeyEvent) => void,
onKeyUp?: ?(event: KeyEvent) => void,
validKeysDown?: ?Array<string>,
validKeysUp?: ?Array<string>,
// macOS]
pressRetentionOffset?: ?EdgeInsetsOrSizeProp,
rejectResponderTermination?: ?boolean,
Expand Down Expand Up @@ -132,8 +128,6 @@ const PASSTHROUGH_PROPS = [
'onAccessibilityAction',
'onBlur',
'onFocus',
'validKeysDown',
'validKeysUp',
'onLayout',
'onMouseEnter', // [macOS
'onMouseLeave',
Expand Down Expand Up @@ -257,10 +251,6 @@ function createPressabilityConfig({
android_disableSound: props.touchSoundDisabled,
onBlur: props.onBlur,
onFocus: props.onFocus,
onKeyDown: props.onKeyDown,
onKeyUp: props.onKeyUp,
validKeysDown: props.validKeysDown,
validKeysUp: props.validKeysUp,
onLongPress: props.onLongPress,
onPress: props.onPress,
onPressIn: props.onPressIn,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -48,9 +48,11 @@ const UIView = {
onDrop: true,
onKeyDown: true,
onKeyUp: true,
passthroughAllKeyEvents: true,
validKeysDown: true,
validKeysUp: true,
passthroughAllKeyEvents: true,
keyDownEvents: true,
keyUpEvents: true,
draggedTypes: true,
// macOS]
};
Expand Down
23 changes: 23 additions & 0 deletions packages/react-native/Libraries/Components/View/View.js
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,13 @@ const View: React.AbstractComponent<
nativeID,
pointerEvents,
tabIndex,
// [macOS
passthroughAllKeyEvents,
validKeysDown,
validKeysUp,
keyDownEvents,
keyUpEvents,
// macOS]
...otherProps
}: ViewProps,
forwardedRef,
Expand Down Expand Up @@ -102,6 +109,17 @@ const View: React.AbstractComponent<
// $FlowFixMe[sketchy-null-mixed]
const newPointerEvents = style?.pointerEvents || pointerEvents;

// [macOS
let _passthroughAllKeyEvents = passthroughAllKeyEvents;
let _validKeysDown = validKeysDown;
let _validKeysUp = validKeysUp;
if (keyDownEvents || keyUpEvents) {
_passthroughAllKeyEvents = true;
_validKeysDown = keyDownEvents;
_validKeysUp = keyUpEvents;
}
// macOS]

const actualView = (
<ViewNativeComponent
{...otherProps}
Expand All @@ -123,6 +141,11 @@ const View: React.AbstractComponent<
style={style}
// $FlowFixMe[incompatible-type]
pointerEvents={newPointerEvents}
// [macOS
passthroughAllKeyEvents={_passthroughAllKeyEvents}
validKeysDown={_validKeysDown}
validKeysUp={_validKeysUp}
// macOS]
ref={forwardedRef}
/>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -178,8 +178,11 @@ export interface ViewPropsMacOS {
onDrop?: ((event: MouseEvent) => void) | undefined;
onKeyDown?: ((event: KeyEvent) => void) | undefined;
onKeyUp?: ((event: KeyEvent) => void) | undefined;
validKeysDown?: string[] | undefined;
validKeysUp?: string[] | undefined;
validKeysDown?: Array<HandledKeyEvent | string> | undefined;
validKeysUp?: Array<HandledKeyEvent | string> | undefined;
passthroughAllKeyEvents?: boolean | undefined;
keyDownEvents?: Array<HandledKeyEvent> | undefined;
keyUpEvents?: Array<HandledKeyEvent> | undefined;
draggedTypes?: DraggedTypesType | undefined;
}

Expand Down
21 changes: 19 additions & 2 deletions packages/react-native/Libraries/Components/View/ViewPropTypes.js
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,21 @@ 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 | HandledKeyboardEvent>,

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

/**
* @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.
Expand All @@ -141,17 +156,19 @@ export type KeyboardEventProps = $ReadOnly<{|

/**
* 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
*/
validKeysDown?: ?Array<string | HandledKeyboardEvent>,
keyDownEvents?: ?Array<HandledKeyboardEvent>,

/**
* 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
*/
validKeysUp?: ?Array<string | HandledKeyboardEvent>,
keyUpEvents?: ?Array<HandledKeyboardEvent>,
|}>;
// macOS]

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -53,9 +53,11 @@ const validAttributesForNonEventProps = {
draggedTypes: true,
enableFocusRing: true,
tooltip: true,
passthroughAllKeyEvents: true,
validKeysDown: true,
validKeysUp: true,
passthroughAllKeyEvents: true,
keyDownEvents: true,
keyUpEvents: true,
mouseDownCanMoveWindow: true,
};

Expand Down
14 changes: 2 additions & 12 deletions packages/react-native/Libraries/Pressability/Pressability.js
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,7 @@ export type PressabilityConfig = $ReadOnly<{|
*/
onFocus?: ?(event: FocusEvent) => void,

// [macOS
/*
* Called after a key down event is detected.
*/
Expand All @@ -107,18 +108,7 @@ export type PressabilityConfig = $ReadOnly<{|
* Called after a key up event is detected.
*/
onKeyUp?: ?(event: KeyEvent) => void,

/*
* Array of keys to receive key down events for
* For arrow keys, add "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown",
*/
validKeysDown?: ?Array<string>,

/*
* Array of keys to receive key up events for
* For arrow keys, add "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown",
*/
validKeysUp?: ?Array<string>,
// macOS]

/**
* Called when the hover is activated to provide visual feedback.
Expand Down
Loading

0 comments on commit 4b0dc39

Please sign in to comment.