From 308ac505a8be7046c2b58649fb9f6b6a103771ca Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Tue, 1 Jun 2021 14:13:46 +0100
Subject: [PATCH] Migrate AutoHideScrollbar to TypeScript

Also changed the way the React.RefObject is collected
---
 ...HideScrollbar.js => AutoHideScrollbar.tsx} | 41 ++++++++++---------
 .../dialogs/AddExistingToSpaceDialog.tsx      |  2 +-
 2 files changed, 22 insertions(+), 21 deletions(-)
 rename src/components/structures/{AutoHideScrollbar.js => AutoHideScrollbar.tsx} (61%)

diff --git a/src/components/structures/AutoHideScrollbar.js b/src/components/structures/AutoHideScrollbar.tsx
similarity index 61%
rename from src/components/structures/AutoHideScrollbar.js
rename to src/components/structures/AutoHideScrollbar.tsx
index a2dcff2731..4a577a8dbd 100644
--- a/src/components/structures/AutoHideScrollbar.js
+++ b/src/components/structures/AutoHideScrollbar.tsx
@@ -17,42 +17,43 @@ limitations under the License.
 
 import React from "react";
 
-export default class AutoHideScrollbar extends React.Component {
-    constructor(props) {
-        super(props);
-        this._collectContainerRef = this._collectContainerRef.bind(this);
-    }
+interface IProps {
+    className?: string;
+    onScroll?: () => void;
+    onWheel?: () => void;
+    style?: React.CSSProperties
+    tabIndex?: number,
+    wrappedRef?: (ref: HTMLDivElement) => void;
+}
+
+export default class AutoHideScrollbar extends React.Component<IProps> {
+    private containerRef: React.RefObject<HTMLDivElement> = React.createRef();
 
     componentDidMount() {
-        if (this.containerRef && this.props.onScroll) {
+        if (this.containerRef.current && this.props.onScroll) {
             // Using the passive option to not block the main thread
             // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners
-            this.containerRef.addEventListener("scroll", this.props.onScroll, { passive: true });
+            this.containerRef.current.addEventListener("scroll", this.props.onScroll, { passive: true });
+        }
+
+        if (this.props.wrappedRef) {
+            this.props.wrappedRef(this.containerRef.current);
         }
     }
 
     componentWillUnmount() {
-        if (this.containerRef && this.props.onScroll) {
-            this.containerRef.removeEventListener("scroll", this.props.onScroll);
-        }
-    }
-
-    _collectContainerRef(ref) {
-        if (ref && !this.containerRef) {
-            this.containerRef = ref;
-        }
-        if (this.props.wrappedRef) {
-            this.props.wrappedRef(ref);
+        if (this.containerRef.current && this.props.onScroll) {
+            this.containerRef.current.removeEventListener("scroll", this.props.onScroll);
         }
     }
 
     getScrollTop() {
-        return this.containerRef.scrollTop;
+        return this.containerRef.current.scrollTop;
     }
 
     render() {
         return (<div
-            ref={this._collectContainerRef}
+            ref={this.containerRef}
             style={this.props.style}
             className={["mx_AutoHideScrollbar", this.props.className].join(" ")}
             onWheel={this.props.onWheel}
diff --git a/src/components/views/dialogs/AddExistingToSpaceDialog.tsx b/src/components/views/dialogs/AddExistingToSpaceDialog.tsx
index 9a7f96e653..822ffc2827 100644
--- a/src/components/views/dialogs/AddExistingToSpaceDialog.tsx
+++ b/src/components/views/dialogs/AddExistingToSpaceDialog.tsx
@@ -212,7 +212,7 @@ export const AddExistingToSpace: React.FC<IAddExistingToSpaceProps> = ({
             autoComplete={true}
             autoFocus={true}
         />
-        <AutoHideScrollbar className="mx_AddExistingToSpace_content" id="mx_AddExistingToSpace">
+        <AutoHideScrollbar className="mx_AddExistingToSpace_content">
             { rooms.length > 0 ? (
                 <div className="mx_AddExistingToSpace_section">
                     <h3>{ _t("Rooms") }</h3>