Merge pull request #5343 from matrix-org/t3chguy/ts/resizer

Convert resizer to Typescript

Author: t3chguy

src/components/structures/LoggedInView.tsx

@@ -52,6 +52,7 @@ import RoomListStore from "../../stores/room-list/RoomListStore";
 import NonUrgentToastContainer from "./NonUrgentToastContainer";
 import { ToggleRightPanelPayload } from "../../dispatcher/payloads/ToggleRightPanelPayload";
 import { IThreepidInvite } from "../../stores/ThreepidInviteStore";
+import { ICollapseConfig } from "../../resizer/distributors/collapse";
 
 // We need to fetch each pinned message individually (if we don't already have it)
 // so each pinned message may trigger a request. Limit the number per room for sanity.
@@ -205,13 +206,8 @@ class LoggedInView extends React.Component<IProps, IState> {
     };
 
     _createResizer() {
-        const classNames = {
-            handle: "mx_ResizeHandle",
-            vertical: "mx_ResizeHandle_vertical",
-            reverse: "mx_ResizeHandle_reverse",
-        };
         let size;
-        const collapseConfig = {
+        const collapseConfig: ICollapseConfig = {
             toggleSize: 260 - 50,
             onCollapsed: (collapsed) => {
                 if (collapsed) {
@@ -234,7 +230,11 @@ class LoggedInView extends React.Component<IProps, IState> {
             },
         };
         const resizer = new Resizer(this._resizeContainer.current, CollapseDistributor, collapseConfig);
-        resizer.setClassNames(classNames);
+        resizer.setClassNames({
+            handle: "mx_ResizeHandle",
+            vertical: "mx_ResizeHandle_vertical",
+            reverse: "mx_ResizeHandle_reverse",
+        });
         return resizer;
     }
 

src/resizer/distributors/collapse.js renamed to 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,28 +16,37 @@ limitations under the License.
 
 import FixedDistributor from "./fixed";
 import ResizeItem from "../item";
+import Resizer, {IConfig} from "../resizer";
+import Sizer from "../sizer";
 
-class CollapseItem extends ResizeItem {
-    notifyCollapsed(collapsed) {
+export interface ICollapseConfig extends IConfig {
+    toggleSize: number;
+    onCollapsed?(collapsed: boolean, id: string, element: HTMLElement): void;
+}
+
+class CollapseItem extends ResizeItem<ICollapseConfig> {
+    notifyCollapsed(collapsed: boolean) {
         const callback = this.resizer.config.onCollapsed;
         if (callback) {
             callback(collapsed, this.id, this.domNode);
         }
     }
 }
 
-export default class CollapseDistributor extends FixedDistributor {
-    static createItem(resizeHandle, resizer, sizer) {
+export default class CollapseDistributor extends FixedDistributor<ICollapseConfig, CollapseItem> {
+    static createItem(resizeHandle: HTMLDivElement, resizer: Resizer<ICollapseConfig>, sizer: Sizer) {
         return new CollapseItem(resizeHandle, resizer, sizer);
     }
 
-    constructor(item, config) {
+    private readonly toggleSize: number;
+    private isCollapsed = false;
+
+    constructor(item: CollapseItem) {
         super(item);
-        this.toggleSize = config && config.toggleSize;
-        this.isCollapsed = false;
+        this.toggleSize = item.resizer?.config?.toggleSize;
     }
 
-    resize(newSize) {
+    public resize(newSize: number) {
         const isCollapsedSize = newSize < this.toggleSize;
         if (isCollapsedSize && !this.isCollapsed) {
             this.isCollapsed = true;

src/resizer/distributors/fixed.js renamed to 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.
@@ -16,6 +16,7 @@ limitations under the License.
 
 import ResizeItem from "../item";
 import Sizer from "../sizer";
+import Resizer, {IConfig} from "../resizer";
 
 /**
 distributors translate a moving cursor into
@@ -27,29 +28,30 @@ they have two methods:
         within the container bounding box. For internal use.
         This method usually ends up calling `resize` once the start offset is subtracted.
 */
-export default class FixedDistributor {
-    static createItem(resizeHandle, resizer, sizer) {
+export default class FixedDistributor<C extends IConfig, I extends ResizeItem<any> = ResizeItem<C>> {
+    static createItem(resizeHandle: HTMLDivElement, resizer: Resizer, sizer: Sizer): ResizeItem {
         return new ResizeItem(resizeHandle, resizer, sizer);
     }
 
-    static createSizer(containerElement, vertical, reverse) {
+    static createSizer(containerElement: HTMLElement, vertical: boolean, reverse: boolean): Sizer {
         return new Sizer(containerElement, vertical, reverse);
     }
 
-    constructor(item) {
-        this.item = item;
+    private readonly beforeOffset: number;
+
+    constructor(public readonly item: I) {
         this.beforeOffset = item.offset();
     }
 
-    resize(size) {
+    public resize(size: number) {
         this.item.setSize(size);
     }
 
-    resizeFromContainerOffset(offset) {
+    public resizeFromContainerOffset(offset: number) {
         this.resize(offset - this.beforeOffset);
     }
 
-    start() {}
+    public start() {}
 
-    finish() {}
+    public finish() {}
 }

src/resizer/index.js renamed to 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");
@@ -15,6 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-export FixedDistributor from "./distributors/fixed";
-export CollapseDistributor from "./distributors/collapse";
-export Resizer from "./resizer";
+export {default as FixedDistributor} from "./distributors/fixed";
+export {default as CollapseDistributor} from "./distributors/collapse";
+export {default as Resizer} from "./resizer";

src/resizer/item.js renamed to src/resizer/item.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.
@@ -14,25 +14,30 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-export default class ResizeItem {
-    constructor(handle, resizer, sizer) {
-        const id = handle.getAttribute("data-id");
-        const reverse = resizer.isReverseResizeHandle(handle);
-        const domNode = reverse ? handle.nextElementSibling : handle.previousElementSibling;
-
-        this.domNode = domNode;
-        this.id = id;
-        this.reverse = reverse;
-        this.resizer = resizer;
-        this.sizer = sizer;
+import Resizer, {IConfig} from "./resizer";
+import Sizer from "./sizer";
+
+export default class ResizeItem<C extends IConfig = IConfig> {
+    public readonly domNode: HTMLElement;
+    protected readonly id: string;
+    protected reverse: boolean;
+
+    constructor(
+        handle: HTMLElement,
+        public readonly resizer: Resizer<C>,
+        public readonly sizer: Sizer,
+    ) {
+        this.reverse = resizer.isReverseResizeHandle(handle);
+        this.domNode = <HTMLElement>(this.reverse ? handle.nextElementSibling : handle.previousElementSibling);
+        this.id = handle.getAttribute("data-id");
     }
 
-    _copyWith(handle, resizer, sizer) {
-        const Ctor = this.constructor;
+    private copyWith(handle: HTMLElement, resizer: Resizer, sizer: Sizer) {
+        const Ctor = this.constructor as typeof ResizeItem;
         return new Ctor(handle, resizer, sizer);
     }
 
-    _advance(forwards) {
+    private advance(forwards: boolean) {
         // opposite direction from fromResizeHandle to get back to handle
         let handle = this.reverse ?
             this.domNode.previousElementSibling :
@@ -45,63 +50,62 @@ export default class ResizeItem {
             } else {
                 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;
         }
     }
 
-    next() {
-        return this._advance(true);
+    public next() {
+        return this.advance(true);
     }
 
-    previous() {
-        return this._advance(false);
+    public previous() {
+        return this.advance(false);
     }
 
-    size() {
+    public size() {
         return this.sizer.getItemSize(this.domNode);
     }
 
-    offset() {
+    public offset() {
         return this.sizer.getItemOffset(this.domNode);
     }
 
-    setSize(size) {
+    public setSize(size: number) {
         this.sizer.setItemSize(this.domNode, size);
         const callback = this.resizer.config.onResized;
         if (callback) {
             callback(size, this.id, this.domNode);
         }
     }
 
-    clearSize() {
+    public clearSize() {
         this.sizer.clearItemSize(this.domNode);
         const callback = this.resizer.config.onResized;
         if (callback) {
             callback(null, this.id, this.domNode);
         }
     }
 
-
-    first() {
+    public first() {
         const firstHandle = Array.from(this.domNode.parentElement.children).find(el => {
-            return this.resizer.isResizeHandle(el);
+            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);
         }
     }
 
-    last() {
+    public last() {
         const lastHandle = Array.from(this.domNode.parentElement.children).reverse().find(el => {
-            return this.resizer.isResizeHandle(el);
+            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);
         }
     }
 }