@applicaster/zapp-react-dom-app 13.0.0-alpha.4455522223 → 13.0.0-alpha.4534963565

package/App/InteractionManager/index.tsx

@@ -140,13 +140,16 @@ class InteractionManagerClass extends React.Component<Props, State> {
     this.onConfirmDialogOpen = this.onConfirmDialogOpen.bind(this);
     this.onConfirmDialogClose = this.onConfirmDialogClose.bind(this);
 
+    this.handlePhysicalKeyboardDismiss =
+      this.handlePhysicalKeyboardDismiss.bind(this);
+
     this.confirmDialog.setConfirmAction(this.performExit);
     this.confirmDialog.setCancelAction(this.onConfirmDialogClose);
     this.longPressDetector = new KeyboardLongPressManager();
   }
 
   componentDidMount() {
-    window.addEventListener("keydown", this.onKeyDownListener);
+    window.addEventListener("keydown", this.onKeyDownListener, true);
     window.addEventListener("keyup", this.onKeyUp);
     window.addEventListener("mousemove", this.onMouseMoveListener);
 
@@ -181,6 +184,11 @@ class InteractionManagerClass extends React.Component<Props, State> {
       "onLongPressRelease",
       this.handleLongPressRelease.bind(this)
     );
+
+    document.addEventListener(
+      "keyboardDismissedByPhysicalKeypress",
+      this.handlePhysicalKeyboardDismiss
+    );
   }
 
   componentWillUnmount() {
@@ -209,6 +217,11 @@ class InteractionManagerClass extends React.Component<Props, State> {
       "onLongPressRelease",
       this.handleLongPressRelease
     );
+
+    document.removeEventListener(
+      "keyboardDismissedByPhysicalKeypress",
+      this.handlePhysicalKeyboardDismiss
+    );
   }
 
   performExit() {
@@ -448,20 +461,13 @@ class InteractionManagerClass extends React.Component<Props, State> {
     }
 
     /**
-     When pressing backspace or the Native "Back" button:
+     When pressing escape or the Native "Back" button:
      if on the transport controls: we show the player
      if on the player : we show the UI
      if on the UI : we exit the app
+     note: backspace affects the keyboard input, so it not handled here
      */
-
-    if (
-      keyCode(event).matchesAny(
-        KEYS.Back,
-        KEYS.Escape,
-        KEYS.EscapeDevice,
-        KEYS.Backspace
-      )
-    ) {
+    if (keyCode(event).matchesAny(KEYS.Back, KEYS.Escape, KEYS.EscapeDevice)) {
       switch (displayState) {
         case DISPLAY_STATES.DEFAULT:
         case DISPLAY_STATES.PLAYER:
@@ -542,12 +548,6 @@ class InteractionManagerClass extends React.Component<Props, State> {
         focusManager.moveFocus(direction);
       }
 
-      if (!isDialogVisible) {
-        // run focus recovery on user interaction attempt
-        // probably we failed to set initial focus for some reason
-        focusManager.recoverFocus();
-      }
-
       if (
         displayState === DISPLAY_STATES.PLAYER ||
         displayState === DISPLAY_STATES.HUD
@@ -652,7 +652,7 @@ class InteractionManagerClass extends React.Component<Props, State> {
     }
   }
 
-  handleKeyboardDismiss = () => {
+  handleKeyboardDismiss() {
     this.isDismissing = true;
 
     this.setState(
@@ -663,9 +663,10 @@ class InteractionManagerClass extends React.Component<Props, State> {
       },
       () => {
         this.isDismissing = false;
+        focusManager.recoverFocus();
       }
     );
-  };
+  }
 
   handleKeyboardInput = (value: string) => {
     const { activeInputRef } = this.state;
@@ -761,6 +762,35 @@ class InteractionManagerClass extends React.Component<Props, State> {
     ].includes(event.code);
   }
 
+  handlePhysicalKeyboardDismiss(event: CustomEvent) {
+    const { value, position, inputElement } = event.detail;
+
+    this.isDismissing = true;
+
+    this.setState(
+      {
+        isKeyboardVisible: false,
+        keyboardInput: "",
+        activeInputRef: null,
+      },
+      () => {
+        if (inputElement) {
+          inputElement.value = value;
+          inputElement.focus();
+          inputElement.setSelectionRange(position, position);
+
+          const keyboardEvent = new CustomEvent("keyboardUpdate", {
+            detail: { value },
+          });
+
+          document.dispatchEvent(keyboardEvent);
+        }
+
+        this.isDismissing = false;
+      }
+    );
+  }
+
   render() {
     return (
       (shouldUseOnScreenKeyboard() && this.state.isKeyboardVisible && (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-dom-app",
-  "version": "13.0.0-alpha.4455522223",
+  "version": "13.0.0-alpha.4534963565",
   "description": "Zapp App Component for Applicaster's Quick Brick React Native App",
   "main": "index.js",
   "scripts": {
@@ -22,11 +22,11 @@
   },
   "homepage": "https://github.com/applicaster/zapp-react-dom-app#readme",
   "dependencies": {
-    "@applicaster/zapp-react-dom-ui-components": "13.0.0-alpha.4455522223",
-    "@applicaster/zapp-react-native-bridge": "13.0.0-alpha.4455522223",
-    "@applicaster/zapp-react-native-redux": "13.0.0-alpha.4455522223",
-    "@applicaster/zapp-react-native-ui-components": "13.0.0-alpha.4455522223",
-    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.4455522223",
+    "@applicaster/zapp-react-dom-ui-components": "13.0.0-alpha.4534963565",
+    "@applicaster/zapp-react-native-bridge": "13.0.0-alpha.4534963565",
+    "@applicaster/zapp-react-native-redux": "13.0.0-alpha.4534963565",
+    "@applicaster/zapp-react-native-ui-components": "13.0.0-alpha.4534963565",
+    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.4534963565",
     "abortcontroller-polyfill": "^1.7.5",
     "react-router-dom": "^5.1.2",
     "typeface-montserrat": "^0.0.54",

package/App/Splash/Spinner.js

@@ -1,30 +0,0 @@
-import React from "react";
-
-import "./spinner-styles.css";
-
-export const Spinner = (color) => {
-  const spinnerColor = {
-    background: color.color,
-  };
-
-  return (
-    <div>
-      <div id="progress">
-        <div className="spinner">
-          <div style={spinnerColor} className="bar1" />
-          <div style={spinnerColor} className="bar2" />
-          <div style={spinnerColor} className="bar3" />
-          <div style={spinnerColor} className="bar4" />
-          <div style={spinnerColor} className="bar5" />
-          <div style={spinnerColor} className="bar6" />
-          <div style={spinnerColor} className="bar7" />
-          <div style={spinnerColor} className="bar8" />
-          <div style={spinnerColor} className="bar9" />
-          <div style={spinnerColor} className="bar10" />
-          <div style={spinnerColor} className="bar11" />
-          <div style={spinnerColor} className="bar12" />
-        </div>
-      </div>
-    </div>
-  );
-};

package/App/Splash/spinner-styles.css

@@ -1,81 +0,0 @@
-div.spinner {
-  position: absolute;
-  width: 100px;
-  height: 100px;
-  display: inline-block;
-  top: 50%;
-  left: 50%;
-  margin: -60px 0 0 -70px;
-}
-
-div.spinner div {
-  width: 6%;
-  height: 16%;
-  position: absolute;
-  left: 49%;
-  top: 43%;
-  opacity: 0;
-  -webkit-border-radius: 50px;
-  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
-  -webkit-animation: fade 1s linear infinite;
-}
-
-@-webkit-keyframes fade {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0.25;
-  }
-}
-
-div.spinner div.bar1 {
-  -webkit-transform: rotate(0deg) translate(0, -130%);
-  -webkit-animation-delay: 0s;
-}
-
-div.spinner div.bar2 {
-  -webkit-transform: rotate(30deg) translate(0, -130%);
-  -webkit-animation-delay: -0.9167s;
-}
-
-div.spinner div.bar3 {
-  -webkit-transform: rotate(60deg) translate(0, -130%);
-  -webkit-animation-delay: -0.833s;
-}
-div.spinner div.bar4 {
-  -webkit-transform: rotate(90deg) translate(0, -130%);
-  -webkit-animation-delay: -0.7497s;
-}
-div.spinner div.bar5 {
-  -webkit-transform: rotate(120deg) translate(0, -130%);
-  -webkit-animation-delay: -0.667s;
-}
-div.spinner div.bar6 {
-  -webkit-transform: rotate(150deg) translate(0, -130%);
-  -webkit-animation-delay: -0.5837s;
-}
-div.spinner div.bar7 {
-  -webkit-transform: rotate(180deg) translate(0, -130%);
-  -webkit-animation-delay: -0.5s;
-}
-div.spinner div.bar8 {
-  -webkit-transform: rotate(210deg) translate(0, -130%);
-  -webkit-animation-delay: -0.4167s;
-}
-div.spinner div.bar9 {
-  -webkit-transform: rotate(240deg) translate(0, -130%);
-  -webkit-animation-delay: -0.333s;
-}
-div.spinner div.bar10 {
-  -webkit-transform: rotate(270deg) translate(0, -130%);
-  -webkit-animation-delay: -0.2497s;
-}
-div.spinner div.bar11 {
-  -webkit-transform: rotate(300deg) translate(0, -130%);
-  -webkit-animation-delay: -0.167s;
-}
-div.spinner div.bar12 {
-  -webkit-transform: rotate(330deg) translate(0, -130%);
-  -webkit-animation-delay: -0.0833s;
-}