Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into t3chguy/feat/widgets

 Conflicts:

	src/resizer/distributors/collapse.ts

	src/resizer/distributors/fixed.ts

	src/resizer/index.ts

	src/resizer/item.ts

	src/resizer/resizer.ts

	src/resizer/sizer.ts

src/resizer/distributors/collapse.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 New Vector Ltd
+Copyright 2019 - 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -16,9 +16,10 @@ limitations under the License.
 
 import FixedDistributor from "./fixed";
 import ResizeItem from "../item";
-import {IConfig} from "../resizer";
+import Resizer, {IConfig} from "../resizer";
+import Sizer from "../sizer";
 
-interface ICollapseConfig extends IConfig {
+export interface ICollapseConfig extends IConfig {
     toggleSize: number;
     onCollapsed?(collapsed: boolean, id: string, element: HTMLElement): void;
 }
@@ -33,17 +34,16 @@ class CollapseItem extends ResizeItem<ICollapseConfig> {
 }
 
 export default class CollapseDistributor extends FixedDistributor<ICollapseConfig, CollapseItem> {
-    static createItem(resizeHandle, resizer, sizer) {
+    static createItem(resizeHandle: HTMLDivElement, resizer: Resizer<ICollapseConfig>, sizer: Sizer) {
         return new CollapseItem(resizeHandle, resizer, sizer);
     }
 
     private readonly toggleSize: number;
-    private isCollapsed: boolean;
+    private isCollapsed = false;
 
     constructor(item: CollapseItem) {
         super(item);
         this.toggleSize = item.resizer?.config?.toggleSize;
-        this.isCollapsed = false;
     }
 
     public resize(newSize: number) {

src/resizer/distributors/fixed.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 New Vector Ltd
+Copyright 2019 - 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -29,11 +29,11 @@ they have two methods:
         This method usually ends up calling `resize` once the start offset is subtracted.
 */
 export default class FixedDistributor<C extends IConfig, I extends ResizeItem<any> = ResizeItem<C>> {
-    static createItem(resizeHandle: HTMLDivElement, resizer: Resizer, sizer: Sizer) {
+    static createItem(resizeHandle: HTMLDivElement, resizer: Resizer, sizer: Sizer): ResizeItem {
         return new ResizeItem(resizeHandle, resizer, sizer);
     }
 
-    static createSizer(containerElement: HTMLElement, vertical: boolean, reverse: boolean) {
+    static createSizer(containerElement: HTMLElement, vertical: boolean, reverse: boolean): Sizer {
         return new Sizer(containerElement, vertical, reverse);
     }
 

src/resizer/index.ts

@@ -1,5 +1,4 @@
 /*
-Copyright 2018 New Vector Ltd
 Copyright 2019 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");

src/resizer/item.ts

@@ -1,6 +1,5 @@
 /*
-Copyright 2019 New Vector Ltd
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2019 - 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,8 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import Sizer from "./sizer";
 import Resizer, {IConfig} from "./resizer";
+import Sizer from "./sizer";
 
 export default class ResizeItem<C extends IConfig = IConfig> {
     public readonly domNode: HTMLElement;
@@ -28,38 +27,31 @@ export default class ResizeItem<C extends IConfig = IConfig> {
         public readonly resizer: Resizer<C>,
         public readonly sizer: Sizer,
     ) {
-        const id = handle.getAttribute("data-id");
-        const reverse = resizer.isReverseResizeHandle(handle);
-
-        this.domNode = <HTMLElement>(reverse ? handle.nextElementSibling : handle.previousElementSibling);
-        this.id = id;
-        this.reverse = reverse;
-        this.resizer = resizer;
-        this.sizer = sizer;
+        this.reverse = resizer.isReverseResizeHandle(handle);
+        this.domNode = <HTMLElement>(this.reverse ? handle.nextElementSibling : handle.previousElementSibling);
+        this.id = handle.getAttribute("data-id");
     }
 
-    private copyWith(handle: Element, resizer: Resizer, sizer: Sizer) {
+    private copyWith(handle: HTMLElement, resizer: Resizer, sizer: Sizer) {
         const Ctor = this.constructor as typeof ResizeItem;
-        return new Ctor(<HTMLElement>handle, resizer, sizer);
+        return new Ctor(handle, resizer, sizer);
     }
 
     private advance(forwards: boolean) {
         // opposite direction from fromResizeHandle to get back to handle
-        let handle = <HTMLElement>(this.reverse ?
-            this.domNode.previousElementSibling :
-            this.domNode.nextElementSibling);
+        let handle = this.reverse ? this.domNode.previousElementSibling : this.domNode.nextElementSibling;
         const moveNext = forwards !== this.reverse; // xor
         // iterate at least once to avoid infinite loop
         do {
             if (moveNext) {
-                handle = <HTMLElement>handle.nextElementSibling;
+                handle = handle.nextElementSibling;
             } else {
-                handle = <HTMLElement>handle.previousElementSibling;
+                handle = handle.previousElementSibling;
             }
-        } while (handle && !this.resizer.isResizeHandle(handle));
+        } while (handle && !this.resizer.isResizeHandle(<HTMLElement>handle));
 
         if (handle) {
-            const nextHandle = this.copyWith(handle, this.resizer, this.sizer);
+            const nextHandle = this.copyWith(<HTMLElement>handle, this.resizer, this.sizer);
             nextHandle.reverse = this.reverse;
             return nextHandle;
         }
@@ -118,7 +110,7 @@ export default class ResizeItem<C extends IConfig = IConfig> {
             return this.resizer.isResizeHandle(<HTMLElement>el);
         });
         if (firstHandle) {
-            return this.copyWith(firstHandle, this.resizer, this.sizer);
+            return this.copyWith(<HTMLElement>firstHandle, this.resizer, this.sizer);
         }
     }
 
@@ -127,7 +119,7 @@ export default class ResizeItem<C extends IConfig = IConfig> {
             return this.resizer.isResizeHandle(<HTMLElement>el);
         });
         if (lastHandle) {
-            return this.copyWith(lastHandle, this.resizer, this.sizer);
+            return this.copyWith(<HTMLElement>lastHandle, this.resizer, this.sizer);
         }
     }
 }

src/resizer/resizer.ts

@@ -1,6 +1,5 @@
 /*
-Copyright 2018 New Vector Ltd
-Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
+Copyright 2018 - 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,28 +14,20 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-/*
-classNames:
-    // class on resize-handle
-    handle: string
-    // class on resize-handle
-    reverse: string
-    // class on resize-handle
-    vertical: string
-    // class on container
-    resizing: string
-*/
-
 import {throttle} from "lodash";
 
 import FixedDistributor from "./distributors/fixed";
-import Sizer from "./sizer";
 import ResizeItem from "./item";
+import Sizer from "./sizer";
 
 interface IClassNames {
+    // class on resize-handle
     handle?: string;
+    // class on resize-handle
     reverse?: string;
+    // class on resize-handle
     vertical?: string;
+    // class on container
     resizing?: string;
 }
 
@@ -90,7 +81,7 @@ export default class Resizer<C extends IConfig = IConfig> {
     Gives the distributor for a specific resize handle, as if you would have started
     to drag that handle. Can be used to manipulate the size of an item programmatically.
     @param {number} handleIndex the index of the resize handle in the container
-    @return {Distributor} a new distributor for the given handle
+    @return {FixedDistributor} a new distributor for the given handle
     */
     public forHandleAt(handleIndex: number): FixedDistributor<C> {
         const handles = this.getResizeHandles();
@@ -121,7 +112,7 @@ export default class Resizer<C extends IConfig = IConfig> {
     private onMouseDown = (event: MouseEvent) => {
         // use closest in case the resize handle contains
         // child dom nodes that can be the target
-        const resizeHandle = event.target && (<HTMLElement>event.target).closest(`.${this.classNames.handle}`);
+        const resizeHandle = event.target && (<HTMLDivElement>event.target).closest(`.${this.classNames.handle}`);
         if (!resizeHandle || resizeHandle.parentElement !== this.container) {
             return;
         }

src/resizer/sizer.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2018 New Vector Ltd
+Copyright 2018 - 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -57,13 +57,13 @@ export default class Sizer {
     }
 
     /** @return {number} container offset to document */
-    private getPageOffset() {
+    private getPageOffset(): number {
         let element = this.container;
         let offset = 0;
         while (element) {
             const pos = this.vertical ? element.offsetTop : element.offsetLeft;
             offset = offset + pos;
-            element = element.offsetParent as HTMLElement;
+            element = <HTMLElement>element.offsetParent;
         }
         return offset;
     }