Update to 0.14.10 version

dev-seb · Sébastien Biziou · commit b1c28c9318fd · 2021-01-25T21:50:20.000+01:00
- Enable TV support on TouchableHighlight only and if Platform.isTV is true
- Move Key Event handler to useTVEvents module
- Support both NodeHandle and nativeID for nextFocus props
diff --git a/packages/babel-plugin-react-native-web/src/moduleMap.js b/packages/babel-plugin-react-native-web/src/moduleMap.js
@@ -4,20 +4,18 @@ module.exports = {
   ActivityIndicator: true,
   Alert: true,
   Animated: true,
-  Appearance: true,
   AppRegistry: true,
   AppState: true,
+  Appearance: true,
   BackHandler: true,
   Button: true,
   CheckBox: true,
   Clipboard: true,
-  createElement: true,
   DeviceEventEmitter: true,
   DeviceInfo: true,
   Dimensions: true,
   DrawerLayoutAndroid: true,
   Easing: true,
-  findNodeHandle: true,
   FlatList: true,
   I18nManager: true,
   Image: true,
@@ -38,10 +36,8 @@ module.exports = {
   PixelRatio: true,
   Platform: true,
   Pressable: true,
-  processColor: true,
   ProgressBar: true,
   RefreshControl: true,
-  render: true,
   SafeAreaView: true,
   ScrollView: true,
   SectionList: true,
@@ -51,6 +47,7 @@ module.exports = {
   StyleSheet: true,
   Switch: true,
   Systrace: true,
+  TVEventHandler: true,
   Text: true,
   TextInput: true,
   ToastAndroid: true,
@@ -59,13 +56,16 @@ module.exports = {
   TouchableNativeFeedback: true,
   TouchableOpacity: true,
   TouchableWithoutFeedback: true,
-  TVEventHandler: true,
   UIManager: true,
-  unmountComponentAtNode: true,
-  useColorScheme: true,
-  useWindowDimensions: true,
   Vibration: true,
   View: true,
   VirtualizedList: true,
-  YellowBox: true
+  YellowBox: true,
+  createElement: true,
+  findNodeHandle: true,
+  processColor: true,
+  render: true,
+  unmountComponentAtNode: true,
+  useColorScheme: true,
+  useWindowDimensions: true
 };
diff --git a/packages/react-native-web/src/exports/TVEventHandler/index.js b/packages/react-native-web/src/exports/TVEventHandler/index.js
@@ -2,16 +2,19 @@ class TVEventHandler {
   constructor() {
     this.component = null;
     this.callback = null;
+    this.onHWKeyEvent = this.onHWKeyEvent.bind(this);
   }
 
   enable(component, callback) {
     this.component = component;
     this.callback = callback;
-    document.addEventListener('onHWKeyEvent', this.onHWKeyEvent.bind(this));
+    document.addEventListener('onHWKeyEvent', this.onHWKeyEvent);
   }
 
   disable() {
     document.removeEventListener('onHWKeyEvent', this.onHWKeyEvent);
+    this.component = null;
+    this.callback = null;
   }
 
   onHWKeyEvent(event) {
diff --git a/packages/react-native-web/src/exports/Touchable/index.js b/packages/react-native-web/src/exports/Touchable/index.js
@@ -18,8 +18,6 @@ import Position from './Position';
 import React from 'react';
 import UIManager from '../UIManager';
 import View from '../View';
-import Platform from '../Platform';
-import TVEventHandler from '../TVEventHandler';
 
 type Event = Object;
 type PressEvent = Object;
@@ -878,46 +876,6 @@ const TouchableMixin = {
   // delays and longPress)
   touchableHandleKeyEvent: function(e: Event) {
     const { type, key } = e;
-    if (Platform.isTV) {
-      // Get tvEvent
-      const tvEvent = TVEventHandler.getTVEvent(e);
-      // Dispatch 'select' tvEvent to component
-      if (tvEvent.eventType === 'select') {
-        this.touchableHandlePress(tvEvent);
-      }
-      // Dispatch tvEvent to all listeners
-      TVEventHandler.dispatchEvent(tvEvent);
-      // Handle next focus
-      if (this._touchableNode) {
-        let nextFocusID = '';
-        // Check nextFocus* properties
-        if (this._touchableNode.hasAttribute('nextFocusUp') && key === 'ArrowUp') {
-          nextFocusID = this._touchableNode.getAttribute('nextFocusUp');
-        } else if (this._touchableNode.hasAttribute('nextFocusRight') && key === 'ArrowRight') {
-          nextFocusID = this._touchableNode.getAttribute('nextFocusRight');
-        } else if (this._touchableNode.hasAttribute('nextFocusDown') && key === 'ArrowDown') {
-          nextFocusID = this._touchableNode.getAttribute('nextFocusDown');
-        } else if (this._touchableNode.hasAttribute('nextFocusLeft') && key === 'ArrowLeft') {
-          nextFocusID = this._touchableNode.getAttribute('nextFocusLeft');
-        }
-        if (nextFocusID && nextFocusID !== '') {
-          // Get DOM element
-          const element = document.getElementById(nextFocusID);
-          if (element && element.tabIndex >= 0) {
-            // Force focus
-            element.focus();
-            // Stop event propagation
-            e.stopPropagation();
-          }
-        }
-      }
-      // Trigger Hardware Back Press for Back/Escape event keys
-      if (type === 'keydown' && (key === 'Back' || key === 'Escape')) {
-        // eslint-disable-next-line no-undef
-        const hwKeyEvent = new CustomEvent('hardwareBackPress', {});
-        document.dispatchEvent(hwKeyEvent);
-      }
-    }
     if (key === 'Enter' || key === ' ') {
       if (type === 'keydown') {
         if (!this._isTouchableKeyboardActive) {
diff --git a/packages/react-native-web/src/exports/TouchableHighlight/index.js b/packages/react-native-web/src/exports/TouchableHighlight/index.js
@@ -18,11 +18,9 @@ import * as React from 'react';
 import { useCallback, useMemo, useState, useRef } from 'react';
 import useMergeRefs from '../../modules/useMergeRefs';
 import usePressEvents from '../../modules/usePressEvents';
+import useTVEvents from '../../modules/useTVEvents';
 import StyleSheet from '../StyleSheet';
 import View from '../View';
-import UIManager from '../UIManager';
-import Platform from '../Platform';
-import TVEventHandler from '../TVEventHandler';
 
 type ViewStyle = $PropertyType<ViewProps, 'style'>;
 
@@ -33,7 +31,13 @@ type Props = $ReadOnly<{|
   onShowUnderlay?: ?() => void,
   style?: ViewStyle,
   testOnly_pressed?: ?boolean,
-  underlayColor?: ?ColorValue
+  underlayColor?: ?ColorValue,
+  hasTVPreferredFocus?: ?boolean,
+  nextFocusDown?: ?any,
+  nextFocusForward?: ?any,
+  nextFocusLeft?: ?any,
+  nextFocusRight?: ?any,
+  nextFocusUp?: ?any
 |}>;
 
 type ExtraStyles = $ReadOnly<{|
@@ -82,6 +86,14 @@ function TouchableHighlight(props: Props, forwardedRef): React.Node {
     delayLongPress,
     disabled,
     focusable,
+    hasTVPreferredFocus,
+    nextFocusDown,
+    nextFocusForward,
+    nextFocusLeft,
+    nextFocusRight,
+    nextFocusUp,
+    onFocus,
+    onBlur,
     onHideUnderlay,
     onLongPress,
     onPress,
@@ -163,12 +175,40 @@ function TouchableHighlight(props: Props, forwardedRef): React.Node {
 
   const pressEventHandlers = usePressEvents(hostRef, pressConfig);
 
+  const tvConfig = useMemo(
+    () => ({
+      hasTVPreferredFocus,
+      nextFocusDown,
+      nextFocusForward,
+      nextFocusLeft,
+      nextFocusRight,
+      nextFocusUp,
+      onPress,
+      onFocus,
+      onBlur
+    }),
+    [
+      hasTVPreferredFocus,
+      nextFocusDown,
+      nextFocusForward,
+      nextFocusLeft,
+      nextFocusRight,
+      nextFocusUp,
+      onPress,
+      onFocus,
+      onBlur
+    ]
+  );
+
+  const tvEventHandlers = useTVEvents(hostRef, tvConfig);
+
   const child = React.Children.only(children);
 
   return (
     <View
       {...rest}
       {...pressEventHandlers}
+      {...tvEventHandlers}
       accessibilityState={{
         disabled,
         ...props.accessibilityState
diff --git a/packages/react-native-web/src/exports/TouchableOpacity/index.js b/packages/react-native-web/src/exports/TouchableOpacity/index.js
@@ -19,9 +19,6 @@ import useMergeRefs from '../../modules/useMergeRefs';
 import usePressEvents from '../../modules/usePressEvents';
 import StyleSheet from '../StyleSheet';
 import View from '../View';
-import UIManager from '../UIManager';
-import Platform from '../Platform';
-import TVEventHandler from '../TVEventHandler';
 
 type ViewStyle = $PropertyType<ViewProps, 'style'>;
 
diff --git a/packages/react-native-web/src/modules/useTVEvents/index.js b/packages/react-native-web/src/modules/useTVEvents/index.js
@@ -0,0 +1,138 @@
+/**
+ * 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 strict-local
+ * @format
+ */
+
+'use strict';
+
+import * as React from 'react';
+import { useEffect } from 'react';
+import View from '../../exports/View';
+import UIManager from '../../exports/UIManager';
+import Platform from '../../exports/Platform';
+import TVEventHandler from '../../exports/TVEventHandler';
+
+type Event = any;
+
+export type TVResponderConfig = $ReadOnly<{|
+  hasTVPreferredFocus?: ?boolean,
+  nextFocusDown?: ?any,
+  nextFocusForward?: ?any,
+  nextFocusLeft?: ?any,
+  nextFocusRight?: ?any,
+  nextFocusUp?: ?any,
+  onPress?: ?(event: Event) => void,
+  onFocus?: ?(event: Event) => void,
+  onBlur?: ?(event: Event) => void,
+|}>;
+
+export default function useTVEvents(
+  hostRef: React.ElementRef<typeof View>,
+  config: TVResponderConfig
+) {
+  useEffect(() => {
+    if (Platform.isTV && config.hasTVPreferredFocus) {
+      if (hostRef.current) {
+        UIManager.focus(hostRef.current);
+      }
+    }
+  }, [config.hasTVPreferredFocus, hostRef]);
+
+  function onKeyEvent(event: Event) {
+    const { type, key } = event;
+    // Get tvEvent
+    const tvEvent = TVEventHandler.getTVEvent(event);
+    // Dispatch 'select' tvEvent to component
+    if (tvEvent.eventType === 'select') {
+      if (config.onPress) {
+        config.onPress(tvEvent);
+      }
+    }
+    // Dispatch tvEvent to all listeners
+    TVEventHandler.dispatchEvent(tvEvent);
+    // Handle next focus
+    let nextElement = null;
+    // Check nextFocus properties set using : nextFocus*={findNodeHandle(ref.current)}
+    if (config.nextFocusUp && key === 'ArrowUp') {
+      nextElement = config.nextFocusUp;
+    } else if (config.nextFocusRight && key === 'ArrowRight') {
+      nextElement = config.nextFocusRight;
+    } else if (config.nextFocusDown && key === 'ArrowDown') {
+      nextElement = config.nextFocusDown;
+    } else if (config.nextFocusLeft && key === 'ArrowLeft') {
+      nextElement = config.nextFocusLeft;
+    } else if (config.nextFocusForward && key === 'ArrowRight') {
+      nextElement = config.nextFocusForward;
+    }
+    if (nextElement) {
+      // Focus if element is focusable
+      UIManager.focus(nextElement);
+      // Stop event propagation
+      event.stopPropagation();
+    }
+    // Check nextFocus properties set using : ref.current.setNativeProps({nextFocus*: nativeID}
+    let nextFocusID = '';
+    // Check nextFocus* properties
+    if (hostRef.current.hasAttribute('nextFocusUp') && key === 'ArrowUp') {
+      nextFocusID = hostRef.current.getAttribute('nextFocusUp');
+    } else if (hostRef.current.hasAttribute('nextFocusRight') && key === 'ArrowRight') {
+      nextFocusID = hostRef.current.getAttribute('nextFocusRight');
+    } else if (hostRef.current.hasAttribute('nextFocusDown') && key === 'ArrowDown') {
+      nextFocusID = hostRef.current.getAttribute('nextFocusDown');
+    } else if (hostRef.current.hasAttribute('nextFocusLeft') && key === 'ArrowLeft') {
+      nextFocusID = hostRef.current.getAttribute('nextFocusLeft');
+    } else if (hostRef.current.hasAttribute('nextFocusForward') && key === 'ArrowRight') {
+      nextFocusID = hostRef.current.getAttribute('nextFocusForward');
+    }
+    if (nextFocusID && nextFocusID !== '') {
+      // Get DOM element
+      nextElement = document.getElementById(nextFocusID);
+      if (nextElement) {
+        // Focus is element if focusable
+        UIManager.focus(nextElement);
+        // Stop event propagation
+        event.stopPropagation();
+      }
+    }
+    // Trigger Hardware Back Press for Back/Escape event keys
+    if (type === 'keydown' && (key === 'Back' || key === 'Escape')) {
+      // eslint-disable-next-line no-undef
+      const hwKeyEvent = new CustomEvent('hardwareBackPress', {});
+      document.dispatchEvent(hwKeyEvent);
+    }
+  }
+
+  const tvEventHandlers = Platform.isTV
+    ? {
+        onFocus: (event: Event) => {
+          // Get tvEvent
+          const tvEvent = TVEventHandler.getTVEvent(event);
+          // Dispatch tvEvent to component
+          if (config.onFocus) {
+            config.onFocus(tvEvent);
+          }
+          // Dispatch tvEvent to all listeners
+          TVEventHandler.dispatchEvent(tvEvent);
+        },
+        onBlur: (event: Event) => {
+          // Get tvEvent
+          const tvEvent = TVEventHandler.getTVEvent(event);
+          // Dispatch tvEvent to component
+          if (config.onBlur) {
+            config.onBlur(tvEvent);
+          }
+          // Dispatch tvEvent to all listeners
+          TVEventHandler.dispatchEvent(tvEvent);
+        },
+        onKeyDown: onKeyEvent,
+        onKeyUp: onKeyEvent,
+      }
+    : {};
+
+  return tvEventHandlers;
+}

Original file line number	Diff line number	Diff line change
`@@ -2,16 +2,19 @@ class TVEventHandler {`
`2`	`2`	`constructor() {`
`3`	`3`	`this.component = null;`
`4`	`4`	`this.callback = null;`
	`5`	`+ this.onHWKeyEvent = this.onHWKeyEvent.bind(this);`
`5`	`6`	`}`
`6`	`7`
`7`	`8`	`enable(component, callback) {`
`8`	`9`	`this.component = component;`
`9`	`10`	`this.callback = callback;`
`10`		`- document.addEventListener('onHWKeyEvent', this.onHWKeyEvent.bind(this));`
	`11`	`+ document.addEventListener('onHWKeyEvent', this.onHWKeyEvent);`
`11`	`12`	`}`
`12`	`13`
`13`	`14`	`disable() {`
`14`	`15`	`document.removeEventListener('onHWKeyEvent', this.onHWKeyEvent);`
	`16`	`+ this.component = null;`
	`17`	`+ this.callback = null;`
`15`	`18`	`}`
`16`	`19`
`17`	`20`	`onHWKeyEvent(event) {`