Merge branch 'develop' into improved-forwarding-ui

src/components/views/elements/EffectsOverlay.tsx

@@ -17,7 +17,8 @@
 import React, { FunctionComponent, useEffect, useRef } from 'react';
 import dis from '../../../dispatcher/dispatcher';
 import ICanvasEffect from '../../../effects/ICanvasEffect';
-import {CHAT_EFFECTS} from '../../../effects'
+import { CHAT_EFFECTS } from '../../../effects'
+import UIStore, { UI_EVENTS } from "../../../stores/UIStore";
 
 interface IProps {
     roomWidth: number;
@@ -45,8 +46,8 @@ const EffectsOverlay: FunctionComponent<IProps> = ({ roomWidth }) => {
 
     useEffect(() => {
         const resize = () => {
-            if (canvasRef.current) {
-                canvasRef.current.height = window.innerHeight;
+            if (canvasRef.current && canvasRef.current?.height !== UIStore.instance.windowHeight) {
+                canvasRef.current.height = UIStore.instance.windowHeight;
             }
         };
         const onAction = (payload: { action: string }) => {
@@ -58,12 +59,12 @@ const EffectsOverlay: FunctionComponent<IProps> = ({ roomWidth }) => {
         }
         const dispatcherRef = dis.register(onAction);
         const canvas = canvasRef.current;
-        canvas.height = window.innerHeight;
-        window.addEventListener('resize', resize, true);
+        canvas.height = UIStore.instance.windowHeight;
+        UIStore.instance.on(UI_EVENTS.Resize, resize);
 
         return () => {
             dis.unregister(dispatcherRef);
-            window.removeEventListener('resize', resize);
+            UIStore.instance.off(UI_EVENTS.Resize, resize);
             // eslint-disable-next-line react-hooks/exhaustive-deps
             const currentEffects = effectsRef.current; // this is not a react node ref, warning can be safely ignored
             for (const effect in currentEffects) {

src/components/views/elements/InlineSpinner.tsx

@@ -18,19 +18,29 @@ import React from "react";
 import {_t} from "../../../languageHandler";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
-@replaceableComponent("views.elements.InlineSpinner")
-export default class InlineSpinner extends React.Component {
-    render() {
-        const w = this.props.w || 16;
-        const h = this.props.h || 16;
+interface IProps {
+    w?: number;
+    h?: number;
+    children?: React.ReactNode;
+}
 
+@replaceableComponent("views.elements.InlineSpinner")
+export default class InlineSpinner extends React.PureComponent<IProps> {
+    static defaultProps = {
+        w: 16,
+        h: 16,
+    }
+
+    render() {
         return (
             <div className="mx_InlineSpinner">
                 <div
                     className="mx_InlineSpinner_icon mx_Spinner_icon"
-                    style={{width: w, height: h}}
+                    style={{width: this.props.w, height: this.props.h}}
                     aria-label={_t("Loading...")}
-                ></div>
+                >
+                    {this.props.children}
+                </div>
             </div>
         );
     }

src/components/views/elements/SSOButtons.tsx

@@ -112,7 +112,7 @@ interface IProps {
 const MAX_PER_ROW = 6;
 
 const SSOButtons: React.FC<IProps> = ({matrixClient, flow, loginType, fragmentAfterLogin, primary}) => {
-    const providers = flow["org.matrix.msc2858.identity_providers"] || [];
+    const providers = flow.identity_providers || [];
     if (providers.length < 2) {
         return <div className="mx_SSOButtons">
             <SSOButton

src/components/views/elements/Tooltip.tsx

@@ -22,6 +22,7 @@ import React, {Component, CSSProperties} from 'react';
 import ReactDOM from 'react-dom';
 import classNames from 'classnames';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import UIStore from "../../../stores/UIStore";
 
 const MIN_TOOLTIP_HEIGHT = 25;
 
@@ -97,15 +98,15 @@ export default class Tooltip extends React.Component<IProps> {
             // we need so that we're still centered.
             offset = Math.floor(parentBox.height - MIN_TOOLTIP_HEIGHT);
         }
-
+        const width = UIStore.instance.windowWidth;
         const baseTop = (parentBox.top - 2 + this.props.yOffset) + window.pageYOffset;
         const top = baseTop + offset;
-        const right = window.innerWidth - parentBox.right - window.pageXOffset - 16;
+        const right = width - parentBox.right - window.pageXOffset - 16;
         const left = parentBox.right + window.pageXOffset + 6;
         const horizontalCenter = parentBox.right - window.pageXOffset - (parentBox.width / 2);
         switch (this.props.alignment) {
             case Alignment.Natural:
-                if (parentBox.right > window.innerWidth / 2) {
+                if (parentBox.right > width / 2) {
                     style.right = right;
                     style.top = top;
                     break;

src/components/views/elements/TooltipButton.tsx

@@ -19,19 +19,30 @@ import React from 'react';
 import * as sdk from '../../../index';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
-@replaceableComponent("views.elements.TooltipButton")
-export default class TooltipButton extends React.Component {
-    state = {
-        hover: false,
-    };
+interface IProps {
+    helpText: string;
+}
 
-    onMouseOver = () => {
+interface IState {
+    hover: boolean;
+}
+
+@replaceableComponent("views.elements.TooltipButton")
+export default class TooltipButton extends React.Component<IProps, IState> {
+    constructor(props) {
+        super(props);
+        this.state = {
+            hover: false,
+        };
+    }
+
+    private onMouseOver = () => {
         this.setState({
             hover: true,
         });
     };
 
-    onMouseLeave = () => {
+    private onMouseLeave = () => {
         this.setState({
             hover: false,
         });