@applicaster/zapp-react-dom-app 13.0.0-alpha.1150285364 → 13.0.0-alpha.1212224153

package/App/InteractionManager/index.tsx

@@ -386,7 +386,7 @@ class InteractionManagerClass extends React.Component<Props, State> {
       this.longPressDetector.monitorKeyPress(event.code, event);
     }
 
-    // Only handle repeat events for arrow keys
+    // None of the logic below should be executed for repeated keys
     if (event.repeat && !keyCode(event).matchesAny(...ARROW_KEYS)) return;
 
     /**

package/App/Loader/loadLocale.js

@@ -4,8 +4,8 @@ import { QuickBrickCommunicationModule } from "../../Polyfills/QuickBrickCommuni
 import { loadLocaleImpl, getLanguageCode } from "./utils";
 
 type Locale = {
-  language: string;
-  country: string;
+  language: string,
+  country: string,
 };
 
 async function getBrowserLocale() {

package/App/Router/index.js

@@ -0,0 +1,17 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import { Router } from "react-router";
+import { createMemoryHistory } from "history";
+
+const history = createMemoryHistory();
+
+export const ZappDomRouter = ({ children, ...otherProps }) => (
+  <Router history={history} {...otherProps}>
+    {children}
+  </Router>
+);
+
+ZappDomRouter.propTypes = {
+  children: PropTypes.node.isRequired,
+};

package/App/Splash/Spinner.js

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,81 @@
+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;
+}

package/index.js

@@ -1,11 +1,13 @@
 /// <reference types="@applicaster/applicaster-types" />
 import * as R from "ramda";
+import { useHistory, useLocation } from "react-router-dom";
 
 import { createQuickBrickApp } from "@applicaster/quick-brick-core";
 import * as QuickBrickManager from "@applicaster/zapp-react-native-bridge/QuickBrick";
 import * as Contexts from "@applicaster/zapp-react-native-ui-components/Contexts";
 import { OfflineHandler } from "@applicaster/zapp-react-native-ui-components/Components/OfflineHandler";
 import { getXray } from "@applicaster/zapp-react-native-utils/logger";
+import { ZappDomRouter } from "./App/Router";
 import { Layout } from "./App/Layout";
 import { SplashLoader } from "./App/Loader/SplashLoader";
 import { appLoader } from "./App/Loader";
@@ -22,6 +24,11 @@ const contextProviders = R.map(R.prop("withProvider"), R.values(Contexts));
 if (withXray) contextProviders.push(withXray);
 
 export const ZappApp = createQuickBrickApp({
+  navigations: {
+    Router: ZappDomRouter,
+    useLocation,
+    useHistory,
+  },
   QuickBrickManager,
   Layout,
   OfflineHandler,

package/package.json

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