Add onFocus/onBlur/onKeyDown/onKeyUp to Pressable (facebook#962)

* Add onFocus/onBlur/onKeyDown/onKeyUp to Pressable * yarn lint --fix * add validKeysUp/Down
dannyvv · Jan 19, 2022 · d7cb3a7 · d7cb3a7
1 parent 65f2be8
commit d7cb3a7
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 18 deletions.
diff --git a/Libraries/Components/Pressable/Pressable.js b/Libraries/Components/Pressable/Pressable.js
@@ -27,6 +27,11 @@ import type {
   LayoutEvent,
   MouseEvent,
   PressEvent,
+  // [TODO(macOS GH#774)
+  FocusEvent,
+  BlurEvent,
+  KeyEvent,
+  // ]TODO(macOS GH#774)
 } from '../../Types/CoreEventTypes';
 import type {DraggedTypesType} from '../View/DraggedType'; // TODO(macOS GH#774)
 import View from '../View/View';
@@ -134,6 +139,40 @@ type Props = $ReadOnly<{|
    */
   onPressOut?: ?(event: PressEvent) => mixed,
 
+  // [TODO(macOS GH#774)
+  /**
+   * Called after the element is focused.
+   */
+  onFocus?: ?(event: FocusEvent) => mixed,
+
+  /**
+   * Called after the element loses focus.
+   */
+  onBlur?: ?(event: BlurEvent) => mixed,
+
+  /**
+   * Called after a key down event is detected.
+   */
+  onKeyDown?: ?(event: KeyEvent) => mixed,
+
+  /**
+   * Called after a key up event is detected.
+   */
+  onKeyUp?: ?(event: KeyEvent) => mixed,
+
+  /**
+   * 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>,
+  // ]TODO(macOS GH#774)
+
   /**
    * Either view styles or a function that receives a boolean reflecting whether
    * the component is currently pressed and returns view styles.
@@ -200,6 +239,12 @@ function Pressable(props: Props, forwardedRef): React.Node {
     onPress,
     onPressIn,
     onPressOut,
+    // [TODO(macOS GH#774)
+    onFocus,
+    onBlur,
+    onKeyDown,
+    onKeyUp,
+    // ]TODO(macOS GH#774)
     pressRetentionOffset,
     style,
     testOnly_pressed,
@@ -266,6 +311,12 @@ function Pressable(props: Props, forwardedRef): React.Node {
           onPressOut(event);
         }
       },
+      // [TODO(macOS GH#774)
+      onFocus,
+      onBlur,
+      onKeyDown,
+      onKeyUp,
+      // ]TODO(macOS GH#774)
     }),
     [
       android_disableSound,
@@ -282,6 +333,12 @@ function Pressable(props: Props, forwardedRef): React.Node {
       onPress,
       onPressIn,
       onPressOut,
+      // [TODO(macOS GH#774)
+      onFocus,
+      onBlur,
+      onKeyDown,
+      onKeyUp,
+      // ]TODO(macOS GH#774)
       pressRetentionOffset,
       setPressed,
       unstable_pressDelay,

diff --git a/Libraries/Pressability/Pressability.js b/Libraries/Pressability/Pressability.js
@@ -466,21 +466,6 @@ export default class Pressability {
       },
     };
 
-    const keyEventHandlers = {
-      onKeyDown: (event: KeyEvent): void => {
-        const {onKeyDown} = this._config;
-        if (onKeyDown != null) {
-          onKeyDown(event);
-        }
-      },
-      onKeyUp: (event: KeyEvent): void => {
-        const {onKeyUp} = this._config;
-        if (onKeyUp != null) {
-          onKeyUp(event);
-        }
-      },
-    };
-
     const responderEventHandlers = {
       onStartShouldSetResponder: (): boolean => {
         const {disabled} = this._config;
@@ -636,11 +621,28 @@ export default class Pressability {
             },
           };
 
+    // [TODO(macOS GH#774)
+    const keyboardEventHandlers = {
+      onKeyDown: (event: KeyEvent): void => {
+        const {onKeyDown} = this._config;
+        if (onKeyDown != null) {
+          onKeyDown(event);
+        }
+      },
+      onKeyUp: (event: KeyEvent): void => {
+        const {onKeyUp} = this._config;
+        if (onKeyUp != null) {
+          onKeyUp(event);
+        }
+      },
+    };
+    // ]TODO(macOS GH#774)
+
     return {
       ...focusEventHandlers,
       ...responderEventHandlers,
       ...mouseEventHandlers,
-      ...keyEventHandlers,
+      ...keyboardEventHandlers, // [TODO(macOS GH#774)]
     };
   }
 

diff --git a/packages/rn-tester/js/examples/Pressable/PressableExample.js b/packages/rn-tester/js/examples/Pressable/PressableExample.js
@@ -98,8 +98,12 @@ function PressableFeedbackEvents() {
           testID="pressable_feedback_events_button"
           accessibilityLabel="pressable feedback events"
           accessibilityRole="button"
-          onHoverIn={() => appendEvent('hoverIn')} // [TODO(macOS GH#774)
-          onHoverOut={() => appendEvent('hoverOut')} // ]TODO(macOS GH#774)
+          // [TODO(macOS GH#774)
+          onHoverIn={() => appendEvent('hoverIn')}
+          onHoverOut={() => appendEvent('hoverOut')}
+          onFocus={() => appendEvent('focus')}
+          onBlur={() => appendEvent('blur')}
+          // ]TODO(macOS GH#774)
           onPress={() => appendEvent('press')}
           onPressIn={() => appendEvent('pressIn')}
           onPressOut={() => appendEvent('pressOut')}