Some fixes after running yarn test

Author: dev-seb

.gitignore

@@ -1,3 +1,4 @@
 coverage
 node_modules
 dist
+.idea

packages/react-native-web/src/exports/BackHandler/index.js

@@ -12,7 +12,14 @@ function emptyFunction() {}
 
 const BackHandler = {
   exitApp: emptyFunction,
-  addEventListener(event, callback) {
+  /**
+   * Listen to "hardwareBackPress" event
+   *
+   * @param event
+   * @param callback
+   * @returns {{remove: remove}}
+   */
+  addEventListener(event: string, callback: Function) {
     document.addEventListener(event, callback);
     return {
       remove: () => {

packages/react-native-web/src/exports/Platform/index.js

@@ -18,7 +18,7 @@ const Platform = {
     return false;
   },
   get isTV(): boolean {
-    return process.env.REACT_APP_IS_TV === "true";
+    return process.env.REACT_APP_IS_TV === 'true';
   }
 };
 

packages/react-native-web/src/exports/TVEventHandler/index.js

@@ -1,5 +1,4 @@
 class TVEventHandler {
-
   constructor() {
     this.component = null;
     this.callback = null;
@@ -8,24 +7,18 @@ class TVEventHandler {
   enable(component, callback) {
     this.component = component;
     this.callback = callback;
-    document.addEventListener(
-      'onHWKeyEvent',
-      this.onHWKeyEvent.bind(this)
-    );
+    document.addEventListener('onHWKeyEvent', this.onHWKeyEvent.bind(this));
   }
 
   disable() {
-    document.removeEventListener(
-      'onHWKeyEvent',
-      this.onHWKeyEvent
-    );
+    document.removeEventListener('onHWKeyEvent', this.onHWKeyEvent);
   }
 
   onHWKeyEvent(event) {
     if (this.callback) {
       if (event && event.detail) {
         const tvEvent = event.detail.tvEvent;
-        if(tvEvent) {
+        if (tvEvent) {
           this.callback(this.component, tvEvent);
         }
       }
@@ -34,15 +27,16 @@ class TVEventHandler {
 
   static dispatchEvent(tvEvent) {
     // Dispatch tvEvent through onHWKeyEvent
-    const hwKeyEvent = new CustomEvent("onHWKeyEvent", {
-      detail: {tvEvent: tvEvent},
+    // eslint-disable-next-line no-undef
+    const hwKeyEvent = new CustomEvent('onHWKeyEvent', {
+      detail: { tvEvent: tvEvent }
     });
     document.dispatchEvent(hwKeyEvent);
   }
 
   static getTVEvent(event) {
     // create tv event
-    let tvEvent = {
+    const tvEvent = {
       eventKeyAction: -1,
       eventType: '',
       tag: ''
@@ -78,11 +72,12 @@ class TVEventHandler {
         case 'Menu':
           tvEvent.eventType = 'menu';
           break;
+        default:
+          tvEvent.eventType = '';
       }
       if (event.type === 'keydown') {
         tvEvent.eventKeyAction = 0;
-      }
-      else if (event.type === 'keyup') {
+      } else if (event.type === 'keyup') {
         tvEvent.eventKeyAction = 1;
       }
     }
@@ -96,7 +91,6 @@ class TVEventHandler {
     }
     return tvEvent;
   }
-
 }
 
 export default TVEventHandler;

packages/react-native-web/src/exports/Touchable/index.js

@@ -18,8 +18,8 @@ import Position from './Position';
 import React from 'react';
 import UIManager from '../UIManager';
 import View from '../View';
-import Platform from "../Platform";
-import TVEventHandler from "../TVEventHandler";
+import Platform from '../Platform';
+import TVEventHandler from '../TVEventHandler';
 
 type Event = Object;
 type PressEvent = Object;
@@ -382,7 +382,6 @@ const TouchableMixin = {
       };
       this._touchableNode.addEventListener('blur', this._touchableBlurListener);
     }
-
   },
 
   /**
@@ -405,9 +404,9 @@ const TouchableMixin = {
    * `this.state.touchable`.
    */
   touchableGetInitialState: function() {
+    this._isFocused = false;
     return {
-      touchable: { touchState: undefined, responderID: null },
-      focused: false
+      touchable: { touchState: undefined, responderID: null }
     };
   },
 
@@ -570,7 +569,7 @@ const TouchableMixin = {
    * using `Touchable.Mixin.withoutDefaultFocusAndBlur`.
    */
   touchableHandleFocus: function(e: Event) {
-    this.state.focused = true;
+    this._isFocused = true;
     this.props.onFocus && this.props.onFocus(e);
   },
 
@@ -583,7 +582,7 @@ const TouchableMixin = {
    * `Touchable.Mixin.withoutDefaultFocusAndBlur`.
    */
   touchableHandleBlur: function(e: Event) {
-    this.state.focused = false;
+    this._isFocused = false;
     this.props.onBlur && this.props.onBlur(e);
   },
 
@@ -879,35 +878,32 @@ const TouchableMixin = {
   // delays and longPress)
   touchableHandleKeyEvent: function(e: Event) {
     const { type, key } = e;
-    if(Platform.isTV) {
+    if (Platform.isTV) {
       // Get tvEvent
       const tvEvent = TVEventHandler.getTVEvent(e);
       // Dispatch 'select' tvEvent to component
-      if(tvEvent.eventType === 'select') {
+      if (tvEvent.eventType === 'select') {
         this.touchableHandlePress(tvEvent);
       }
       // Dispatch tvEvent to all listeners
       TVEventHandler.dispatchEvent(tvEvent);
       // Handle next focus
-      if(this._touchableNode) {
+      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 (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 !== '') {
+        if (nextFocusID && nextFocusID !== '') {
           // Get DOM element
           const element = document.getElementById(nextFocusID);
-          if(element && element.tabIndex >= 0) {
+          if (element && element.tabIndex >= 0) {
             // Force focus
             element.focus();
             // Stop event propagation
@@ -916,8 +912,9 @@ const TouchableMixin = {
         }
       }
       // Trigger Hardware Back Press for Back/Escape event keys
-      if(type === 'keydown' && (key === 'Back' || key === 'Escape')) {
-        const hwKeyEvent = new CustomEvent("hardwareBackPress", {});
+      if (type === 'keydown' && (key === 'Back' || key === 'Escape')) {
+        // eslint-disable-next-line no-undef
+        const hwKeyEvent = new CustomEvent('hardwareBackPress', {});
         document.dispatchEvent(hwKeyEvent);
       }
     }

packages/react-native-web/src/exports/TouchableHighlight/index.js

@@ -21,7 +21,7 @@ import Touchable from '../Touchable';
 import View from '../View';
 import UIManager from '../UIManager';
 import Platform from '../Platform';
-import TVEventHandler from "../TVEventHandler";
+import TVEventHandler from '../TVEventHandler';
 
 type Event = Object;
 type PressEvent = Object;
@@ -174,7 +174,7 @@ const TouchableHighlight = ((createReactClass({
     this._isMounted = true;
     ensurePositiveDelayProps(this.props);
     // Focus component
-    if(Platform.isTV && this.props.hasTVPreferredFocus === true) {
+    if (Platform.isTV && this.props.hasTVPreferredFocus === true) {
       UIManager.focus(findNodeHandle(this));
     }
   },
@@ -199,7 +199,7 @@ const TouchableHighlight = ((createReactClass({
    * Set focus to current element
    */
   setTVPreferredFocus(hasTVPreferredFocus) {
-    if(Platform.isTV && hasTVPreferredFocus === true) {
+    if (Platform.isTV && hasTVPreferredFocus === true) {
       UIManager.focus(findNodeHandle(this));
     }
   },
@@ -223,8 +223,8 @@ const TouchableHighlight = ((createReactClass({
   },
 
   touchableHandleFocus: function(e: Event) {
-    if(Platform.isTV) {
-      this.state.focused = true;
+    if (Platform.isTV) {
+      this._isFocused = true;
       // Keep underlay visible
       this._showUnderlay();
       // Get tvEvent
@@ -233,15 +233,14 @@ const TouchableHighlight = ((createReactClass({
       this.props.onFocus && this.props.onFocus(tvEvent);
       // Dispatch tvEvent to all listeners
       TVEventHandler.dispatchEvent(tvEvent);
-    }
-    else {
+    } else {
       this.props.onFocus && this.props.onFocus(e);
     }
   },
 
   touchableHandleBlur: function(e: Event) {
-    if(Platform.isTV) {
-      this.state.focused = false;
+    if (Platform.isTV) {
+      this._isFocused = false;
       // Hide underlay
       this._hideUnderlay();
       // Get tvEvent
@@ -250,8 +249,7 @@ const TouchableHighlight = ((createReactClass({
       this.props.onBlur && this.props.onBlur(tvEvent);
       // Dispatch tvEvent to all listeners
       TVEventHandler.dispatchEvent(tvEvent);
-    }
-    else {
+    } else {
       this.props.onBlur && this.props.onBlur(e);
     }
   },
@@ -305,7 +303,7 @@ const TouchableHighlight = ((createReactClass({
   _hideUnderlay: function() {
     clearTimeout(this._hideTimeout);
     this._hideTimeout = null;
-    if(Platform.isTV && this.state.focused) {
+    if (Platform.isTV && this._isFocused) {
       return;
     }
     if (this.props.testOnly_pressed) {
@@ -339,14 +337,14 @@ const TouchableHighlight = ((createReactClass({
         accessibilityRole={this.props.accessibilityRole}
         accessibilityState={this.props.accessibilityState}
         accessible={this.props.accessible !== false}
+        hasTVPreferredFocus={this.props.hasTVPreferredFocus}
         hitSlop={this.props.hitSlop}
         nativeID={this.props.nativeID}
-        onKeyDown={this.touchableHandleKeyEvent}
         //isTVSelectable={true}
         //tvParallaxProperties={this.props.tvParallaxProperties}
-        hasTVPreferredFocus={this.props.hasTVPreferredFocus}
-        onFocus={this.touchableHandleFocus}
         onBlur={this.touchableHandleBlur}
+        onFocus={this.touchableHandleFocus}
+        onKeyDown={this.touchableHandleKeyEvent}
         //nextFocusDown={this.props.nextFocusDown}
         //nextFocusForward={this.props.nextFocusForward}
         //nextFocusLeft={this.props.nextFocusLeft}