[react-ui] usePress from useKeyboard and useTap (#16772)

This implements 'usePress' in user-space as a combination of 'useKeyboard' and 'useTap'. The existing 'usePress' API is preserved for now. The previous 'usePress' implementation is moved to 'PressLegacy'.
facebook · Sep 16, 2019 · 3af05de · 3af05de
1 parent 494300b
commit 3af05de
Show file tree

Hide file tree

Showing 26 changed files with 2,364 additions and 1,438 deletions.
diff --git a/packages/react-ui/accessibility/src/FocusGrid.js b/packages/react-ui/accessibility/src/FocusGrid.js
@@ -7,11 +7,11 @@
  * @flow
  */
 
-import type {KeyboardEvent} from 'react-ui/events/src/dom/Keyboard';
+import type {KeyboardEvent} from 'react-ui/events/keyboard';
 
 import React from 'react';
 import {tabFocusableImpl} from './TabbableScope';
-import {useKeyboard} from '../../events/keyboard';
+import {useKeyboard} from 'react-ui/events/keyboard';
 
 type GridComponentProps = {
   children: React.Node,

diff --git a/packages/react-ui/accessibility/src/ReactTabFocus.js b/packages/react-ui/accessibility/src/ReactTabFocus.js
@@ -8,16 +8,17 @@
  */
 
 import type {ReactScopeMethods} from 'shared/ReactTypes';
-import type {KeyboardEvent} from 'react-ui/events/src/dom/Keyboard';
+import type {KeyboardEvent} from 'react-ui/events/keyboard';
 
 import React from 'react';
 import {TabbableScope} from './TabbableScope';
-import {useKeyboard} from '../../events/keyboard';
+import {useKeyboard} from 'react-ui/events/keyboard';
 
 type TabFocusControllerProps = {
   children: React.Node,
   contain?: boolean,
 };
+
 const {useRef} = React;
 
 function getTabbableNodes(scope: ReactScopeMethods) {

diff --git a/packages/react-ui/events/press-legacy.js b/packages/react-ui/events/press-legacy.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+'use strict';
+
+module.exports = require('./src/dom/PressLegacy');
diff --git a/packages/react-ui/events/src/dom/Keyboard.js b/packages/react-ui/events/src/dom/Keyboard.js
@@ -27,6 +27,7 @@ type KeyboardProps = {|
   onClick?: (e: KeyboardEvent) => ?boolean,
   onKeyDown?: (e: KeyboardEvent) => ?boolean,
   onKeyUp?: (e: KeyboardEvent) => ?boolean,
+  preventClick?: boolean,
   preventKeys?: PreventKeysArray,
 |};
 
@@ -256,6 +257,12 @@ const keyboardResponderImpl = {
         );
       }
     } else if (type === 'click' && isVirtualClick(event)) {
+      if (props.preventClick !== false) {
+        // 'click' occurs before or after 'keyup', and may need native
+        // behavior prevented
+        nativeEvent.preventDefault();
+        state.defaultPrevented = true;
+      }
       const onClick = props.onClick;
       if (onClick != null) {
         dispatchKeyboardEvent(
@@ -266,10 +273,6 @@ const keyboardResponderImpl = {
           state.defaultPrevented,
         );
       }
-      if (state.defaultPrevented && !nativeEvent.defaultPrevented) {
-        // 'click' occurs before 'keyup' and may need native behavior prevented
-        nativeEvent.preventDefault();
-      }
     } else if (type === 'keyup') {
       state.isActive = false;
       const onKeyUp = props.onKeyUp;