Upgrade React and ReactXP

5 files changed, 60 insertions, 83 deletions

diff --git a/gui/package-lock.json b/gui/package-lock.json
index 40a83a9d57..34f36bde8c 100644
--- a/gui/package-lock.json
+++ b/gui/package-lock.json
@@ -318,11 +318,6 @@
       "integrity": "sha512-8+KAKzEvSUdeo+kmqnKrqgeE+LcA0tjYWFY7RPProVYwnqDjukzO+3b6dLD56rYX5TdWejnEOLJYOIeh4CXKuA==",
       "dev": true
     },
-    "@types/lodash": {
-      "version": "4.14.123",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.123.tgz",
-      "integrity": "sha512-pQvPkc4Nltyx7G1Ww45OjVqUsJP4UsZm+GWJpigXgkikZqJgRm4c48g027o6tdgubWHwFRF15iFd+Y4Pmqv6+Q=="
-    },
     "@types/minimatch": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
@@ -345,9 +340,9 @@
       "dev": true
     },
     "@types/node": {
-      "version": "10.12.3",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-10.12.3.tgz",
-      "integrity": "sha512-sfGmOtSMSbQ/AKG8V9xD1gmjquC9awIIZ/Kj309pHb2n3bcRAcGMQv5nJ6gCXZVsneGE4+ve8DXKRCsrg3TFzg==",
+      "version": "10.17.21",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-10.17.21.tgz",
+      "integrity": "sha512-PQKsydPxYxF1DsAFWmunaxd3sOi3iMt6Zmx/tgaagHYmwJ/9cRH91hQkeJZaUGWbvn0K5HlSVEXkn5U/llWPpQ==",
       "dev": true
     },
     "@types/node-gettext": {
@@ -363,9 +358,10 @@
       "dev": true
     },
     "@types/prop-types": {
-      "version": "15.7.0",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.0.tgz",
-      "integrity": "sha512-eItQyV43bj4rR3JPV0Skpl1SncRCdziTEK9/v8VwXmV6d/qOUO8/EuWeHBbCZcsfSHfzI5UyMJLCSXtxxznyZg=="
+      "version": "15.7.3",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
+      "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==",
+      "dev": true
     },
     "@types/rbush": {
       "version": "2.0.2",
@@ -374,28 +370,21 @@
       "dev": true
     },
     "@types/react": {
-      "version": "16.8.10",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.8.10.tgz",
-      "integrity": "sha512-7bUQeZKP4XZH/aB4i7k1i5yuwymDu/hnLMhD9NjVZvQQH7ZUgRN3d6iu8YXzx4sN/tNr0bj8jgguk8hhObzGvA==",
+      "version": "16.9.34",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.34.tgz",
+      "integrity": "sha512-8AJlYMOfPe1KGLKyHpflCg5z46n0b5DbRfqDksxBLBTUpB75ypDBAO9eCUcjNwE6LCUslwTz00yyG/X9gaVtow==",
+      "dev": true,
       "requires": {
         "@types/prop-types": "*",
         "csstype": "^2.2.0"
       }
     },
     "@types/react-dom": {
-      "version": "16.8.3",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.8.3.tgz",
-      "integrity": "sha512-HF5hD5YR3z9Mn6kXcW1VKe4AQ04ZlZj1EdLBae61hzQ3eEWWxMgNLUbIxeZp40BnSxqY1eAYLsH9QopQcxzScA==",
-      "requires": {
-        "@types/react": "*"
-      }
-    },
-    "@types/react-native": {
-      "version": "0.57.42",
-      "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.57.42.tgz",
-      "integrity": "sha512-Ms4RI8Oyi8HOIwlteFhgRE7TA9chP/mliLeJCzjKBOywYpile5TrXQF8lRDYzcC1zyTyoopu/u8VMlF+FS7VnA==",
+      "version": "16.9.6",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.6.tgz",
+      "integrity": "sha512-S6ihtlPMDotrlCJE9ST1fRmYrQNNwfgL61UB4I1W7M6kPulUKx9fXAleW5zpdIjUQ4fTaaog8uERezjsGUj9HQ==",
+      "dev": true,
       "requires": {
-        "@types/prop-types": "*",
         "@types/react": "*"
       }
     },
@@ -2241,9 +2230,10 @@
       "dev": true
     },
     "csstype": {
-      "version": "2.6.3",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.3.tgz",
-      "integrity": "sha512-rINUZXOkcBmoHWEyu7JdHu5JMzkGRoMX4ov9830WNgxf5UYxcBUO0QTKAqeJ5EZfSdlrcJYkC8WwfVW7JYi4yg=="
+      "version": "2.6.10",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.10.tgz",
+      "integrity": "sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w==",
+      "dev": true
     },
     "custom-error-instance": {
       "version": "2.1.1",
@@ -6577,7 +6567,8 @@
     "lodash": {
       "version": "4.17.14",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.14.tgz",
-      "integrity": "sha512-mmKYbW3GLuJeX+iGP+Y7Gp1AiGHGbXHCOh/jZmrawMmsE7MS4znI3RL2FsjbqOyMayHInjOeykW7PEajUk1/xw=="
+      "integrity": "sha512-mmKYbW3GLuJeX+iGP+Y7Gp1AiGHGbXHCOh/jZmrawMmsE7MS4znI3RL2FsjbqOyMayHInjOeykW7PEajUk1/xw==",
+      "dev": true
     },
     "lodash.escape": {
       "version": "4.0.1",
@@ -8368,25 +8359,24 @@
       }
     },
     "react": {
-      "version": "16.7.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-16.7.0.tgz",
-      "integrity": "sha512-StCz3QY8lxTb5cl2HJxjwLFOXPIFQp+p+hxQfc8WE0QiLfCtIlKj8/+5tjjKm8uSTlAW+fCPaavGFS06V9Ar3A==",
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.13.1.tgz",
+      "integrity": "sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2",
-        "scheduler": "^0.12.0"
+        "prop-types": "^15.6.2"
       }
     },
     "react-dom": {
-      "version": "16.7.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.7.0.tgz",
-      "integrity": "sha512-D0Ufv1ExCAmF38P2Uh1lwpminZFRXEINJe53zRAbm4KPwSyd6DY/uDoS0Blj9jvPpn1+wivKpZYc8aAAN/nAkg==",
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.13.1.tgz",
+      "integrity": "sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
         "prop-types": "^15.6.2",
-        "scheduler": "^0.12.0"
+        "scheduler": "^0.19.1"
       }
     },
     "react-is": {
@@ -8497,29 +8487,20 @@
       }
     },
     "reactxp": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/reactxp/-/reactxp-1.6.1.tgz",
-      "integrity": "sha512-C4HaazJ3bR0ivJzArHlpuZlr1xkV7+mBzt0ajbxH/XDK+2CqRaE6ZczHKqSNmoi2hCGcrdzSs8bi2Eg0cISueQ==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/reactxp/-/reactxp-2.0.0.tgz",
+      "integrity": "sha512-HAWwZFL7gXQXnQi87FOBybugSRo+/Xq30rj8tgX77i0uAHWRQHMFw4N10GPLWeacjDuC3/t0RjY6bSftGNJaFg==",
       "requires": {
-        "@types/lodash": "^4.14.123",
-        "@types/react": "^16.8.8",
-        "@types/react-dom": "^16.8.2",
-        "@types/react-native": "^0.57.40",
-        "lodash": "^4.17.11",
+        "lodash": "^4.17.15",
         "prop-types": "^15.7.2",
         "rebound": "^0.1.0",
-        "subscribableevent": "^1.0.1",
-        "synctasks": "^0.3.3"
+        "subscribableevent": "^1.0.1"
       },
       "dependencies": {
-        "@types/react": {
-          "version": "16.8.10",
-          "resolved": "https://registry.npmjs.org/@types/react/-/react-16.8.10.tgz",
-          "integrity": "sha512-7bUQeZKP4XZH/aB4i7k1i5yuwymDu/hnLMhD9NjVZvQQH7ZUgRN3d6iu8YXzx4sN/tNr0bj8jgguk8hhObzGvA==",
-          "requires": {
-            "@types/prop-types": "*",
-            "csstype": "^2.2.0"
-          }
+        "lodash": {
+          "version": "4.17.15",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
+          "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
         },
         "prop-types": {
           "version": "15.7.2",
@@ -9030,9 +9011,9 @@
       "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
     },
     "scheduler": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.12.0.tgz",
-      "integrity": "sha512-t7MBR28Akcp4Jm+QoR63XgAi9YgCUmgvDHqf5otgAj4QvdoBE4ImCX0ffehefePPG+aitiYHp0g/mW6s4Tp+dw==",
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
+      "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1"
@@ -10042,11 +10023,6 @@
       "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
       "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
     },
-    "synctasks": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/synctasks/-/synctasks-0.3.3.tgz",
-      "integrity": "sha512-8Gr8WHInZt5oU1q2N7ANqLSZ/TJn6bYlkqkwJJoGowFc5l81DRORgtHH9eJUpJGJsGJgYyWeVfKGVtUdTu4TEQ=="
-    },
     "table": {
       "version": "5.4.6",
       "resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz",
diff --git a/gui/package.json b/gui/package.json
index c3346006c5..98615a0037 100644
--- a/gui/package.json
+++ b/gui/package.json
@@ -22,12 +22,12 @@
     "moment": "^2.24.0",
     "node-gettext": "^3.0.0",
     "rbush": "^2.0.2",
-    "react": "^16.5.0",
-    "react-dom": "^16.5.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "react-redux": "^5.1.0",
     "react-router": "^4.3.1",
     "react-simple-maps": "^0.12.1",
-    "reactxp": "^1.6.1",
+    "reactxp": "^2.0.0",
     "redux": "^4.0.4",
     "sprintf-js": "^1.1.2",
     "stream-json": "^1.3.0",
@@ -49,8 +49,8 @@
     "@types/node": "^10.12.3",
     "@types/node-gettext": "^3.0.1",
     "@types/rbush": "^2.0.2",
-    "@types/react": "^16.8.8",
-    "@types/react-dom": "^16.8.2",
+    "@types/react": "^16.9.34",
+    "@types/react-dom": "^16.9.6",
     "@types/react-redux": "^7.0.6",
     "@types/react-router": "^4.4.3",
     "@types/react-simple-maps": "^0.12.1",
diff --git a/gui/src/renderer/components/Marquee.tsx b/gui/src/renderer/components/Marquee.tsx
index 04b095711e..8dc6724797 100644
--- a/gui/src/renderer/components/Marquee.tsx
+++ b/gui/src/renderer/components/Marquee.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Animated, Component, Styles, Types, UserInterface, View } from 'reactxp';
+import { Scheduler } from '../../shared/scheduler';
 
 const styles = {
   text: Styles.createTextStyle({
@@ -18,7 +19,7 @@ export default class Marquee extends Component<IMarqueeProps> {
   private textAnimation = Styles.createAnimatedTextStyle({ left: this.initialLeft });
   private textRef = React.createRef<Animated.Text>();
 
-  private animationTimeout?: number;
+  private animationScheduler = new Scheduler();
   private animation?: Types.Animated.CompositeAnimation;
 
   public componentDidMount() {
@@ -48,7 +49,7 @@ export default class Marquee extends Component<IMarqueeProps> {
   private startAnimation() {
     this.stopAnimation();
 
-    this.animationTimeout = setTimeout(async () => {
+    this.animationScheduler.schedule(async () => {
       if (this.textRef.current) {
         const textLayout = await UserInterface.measureLayoutRelativeToWindow(this.textRef.current);
         const viewLayout = await UserInterface.measureLayoutRelativeToWindow(this);
@@ -75,9 +76,7 @@ export default class Marquee extends Component<IMarqueeProps> {
   }
 
   private stopAnimation() {
-    clearTimeout(this.animationTimeout);
-    if (this.animation) {
-      this.animation.stop();
-    }
+    this.animationScheduler.cancel();
+    this.animation?.stop();
   }
 }
diff --git a/gui/src/renderer/components/SvgMap.tsx b/gui/src/renderer/components/SvgMap.tsx
index 0713faf7e2..2cc23d3399 100644
--- a/gui/src/renderer/components/SvgMap.tsx
+++ b/gui/src/renderer/components/SvgMap.tsx
@@ -9,6 +9,7 @@ import {
   Markers,
   ZoomableGroup,
 } from 'react-simple-maps';
+import { Scheduler } from '../../shared/scheduler';
 
 import geographyData from '../../../assets/geo/geometry.json';
 import statesProvincesLinesData from '../../../assets/geo/states-provinces-lines.json';
@@ -69,7 +70,7 @@ export default class SvgMap extends React.Component<IProps, IState> {
     scale: 160,
   };
 
-  private transitionEndTimeout?: number;
+  private transitionEndScheduler = new Scheduler();
 
   constructor(props: IProps) {
     super(props);
@@ -101,15 +102,14 @@ export default class SvgMap extends React.Component<IProps, IState> {
 
   public componentDidUpdate(_prevProps: IProps, _prevState: IState) {
     if (this.state.viewportBboxes.length > 1) {
-      clearTimeout(this.transitionEndTimeout);
-      this.transitionEndTimeout = setTimeout(() => {
+      this.transitionEndScheduler.schedule(() => {
         this.setState((state) => this.removeOldViewportBboxes(state));
       }, MOVE_SPEED);
     }
   }
 
   public componentWillUnmount() {
-    clearTimeout(this.transitionEndTimeout);
+    this.transitionEndScheduler.cancel();
   }
 
   public render() {
diff --git a/gui/src/shared/scheduler.ts b/gui/src/shared/scheduler.ts
index af28a7e95b..902254c567 100644
--- a/gui/src/shared/scheduler.ts
+++ b/gui/src/shared/scheduler.ts
@@ -1,12 +1,14 @@
 export class Scheduler {
-  private timer?: number;
+  private timer?: NodeJS.Timeout;
 
   public schedule(action: () => void, delay: number) {
     this.cancel();
-    this.timer = setTimeout(action, delay);
+    this.timer = global.setTimeout(action, delay);
   }
 
   public cancel() {
-    clearTimeout(this.timer);
+    if (this.timer) {
+      clearTimeout(this.timer);
+    }
   }
 }