[react-events] usePress from useKeyboard and useTap

This implements 'usePress' in user-space as a combination of 'useKeyboard' and 'useTap'. The existing 'usePress' API is preserved.
facebook · Sep 13, 2019 · 530a56a · 530a56a
1 parent 4b0b556
commit 530a56a
Show file tree

Hide file tree

Showing 7 changed files with 258 additions and 1,405 deletions.
diff --git a/packages/react-events/src/dom/Keyboard.js b/packages/react-events/src/dom/Keyboard.js
@@ -18,24 +18,29 @@ import type {ReactEventResponderListener} from 'shared/ReactTypes';
 
 type KeyboardEventType = 'keydown' | 'keyup';
 
-type KeyboardProps = {
+type KeyboardProps = {|
   disabled?: boolean,
   onKeyDown?: (e: KeyboardEvent) => ?boolean,
   onKeyUp?: (e: KeyboardEvent) => ?boolean,
   preventKeys?: PreventKeysArray,
-};
+|};
+
+type KeyboardState = {|
+  isActive: boolean,
+|};
 
 type KeyboardEvent = {|
   altKey: boolean,
   ctrlKey: boolean,
+  defaultPrevented: boolean,
   isComposing: boolean,
   key: string,
   metaKey: boolean,
+  pointerType: 'keyboard',
   shiftKey: boolean,
   target: Element | Document,
   type: KeyboardEventType,
   timeStamp: number,
-  defaultPrevented: boolean,
 |};
 
 type ModifiersObject = {|
@@ -48,7 +53,7 @@ type ModifiersObject = {|
 type PreventKeysArray = Array<string | Array<string | ModifiersObject>>;
 
 const isArray = Array.isArray;
-const targetEventTypes = ['keydown_active', 'keyup'];
+const targetEventTypes = ['click_active', 'keydown_active', 'keyup'];
 const modifiers = ['altKey', 'ctrlKey', 'metaKey', 'shiftKey'];
 
 /**
@@ -150,6 +155,7 @@ function createKeyboardEvent(
     isComposing,
     key: getEventKey(nativeEvent),
     metaKey,
+    pointerType: 'keyboard',
     shiftKey,
     target: event.target,
     timeStamp: context.getTimeStamp(),
@@ -182,21 +188,27 @@ function dispatchKeyboardEvent(
 
 const keyboardResponderImpl = {
   targetEventTypes,
+  getInitialState(): TapState {
+    return {isActive: false};
+  },
   onEvent(
     event: ReactDOMResponderEvent,
     context: ReactDOMResponderContext,
     props: KeyboardProps,
+    state: KeyboardState,
   ): void {
     const {type} = event;
     const nativeEvent: any = event.nativeEvent;
 
     if (props.disabled) {
       return;
     }
-    let defaultPrevented = nativeEvent.defaultPrevented === true;
-    if (type === 'keydown') {
+
+    if (type === 'keydown' || type === 'click') {
+      state.defaultPrevented = nativeEvent.defaultPrevented === true;
+
       const preventKeys = ((props.preventKeys: any): PreventKeysArray);
-      if (!defaultPrevented && isArray(preventKeys)) {
+      if (!state.defaultPrevented && isArray(preventKeys)) {
         preventKeyLoop: for (let i = 0; i < preventKeys.length; i++) {
           const preventKey = preventKeys[i];
           let key = preventKey;
@@ -216,32 +228,39 @@ const keyboardResponderImpl = {
               }
             }
           }
-          if (key === getEventKey(nativeEvent)) {
-            defaultPrevented = true;
+          if (
+            key === getEventKey(nativeEvent) ||
+            (type === 'click' && state.isActive)
+          ) {
+            state.defaultPrevented = true;
             nativeEvent.preventDefault();
             break;
           }
         }
       }
-      const onKeyDown = props.onKeyDown;
-      if (isFunction(onKeyDown)) {
-        dispatchKeyboardEvent(
-          event,
-          ((onKeyDown: any): (e: KeyboardEvent) => ?boolean),
-          context,
-          'keydown',
-          defaultPrevented,
-        );
+      if (type === 'keydown') {
+        state.isActive = true;
+        const onKeyDown = props.onKeyDown;
+        if (isFunction(onKeyDown)) {
+          dispatchKeyboardEvent(
+            event,
+            ((onKeyDown: any): (e: KeyboardEvent) => ?boolean),
+            context,
+            'keydown',
+            state.defaultPrevented,
+          );
+        }
       }
     } else if (type === 'keyup') {
+      state.isActive = false;
       const onKeyUp = props.onKeyUp;
       if (isFunction(onKeyUp)) {
         dispatchKeyboardEvent(
           event,
           ((onKeyUp: any): (e: KeyboardEvent) => ?boolean),
           context,
           'keyup',
-          defaultPrevented,
+          state.defaultPrevented,
         );
       }
     }