Enable strictFunctionTypes (#11201)

src/components/structures/LoggedInView.tsx

@@ -46,7 +46,7 @@ import RoomListStore from "../../stores/room-list/RoomListStore";
 import NonUrgentToastContainer from "./NonUrgentToastContainer";
 import { IOOBData, IThreepidInvite } from "../../stores/ThreepidInviteStore";
 import Modal from "../../Modal";
-import { ICollapseConfig } from "../../resizer/distributors/collapse";
+import { CollapseItem, ICollapseConfig } from "../../resizer/distributors/collapse";
 import { getKeyBindingsManager } from "../../KeyBindingsManager";
 import { IOpts } from "../../createRoom";
 import SpacePanel from "../views/spaces/SpacePanel";
@@ -134,7 +134,7 @@ class LoggedInView extends React.Component<IProps, IState> {
     protected layoutWatcherRef?: string;
     protected compactLayoutWatcherRef?: string;
     protected backgroundImageWatcherRef?: string;
-    protected resizer?: Resizer;
+    protected resizer?: Resizer<ICollapseConfig, CollapseItem>;
 
     public constructor(props: IProps) {
         super(props);
@@ -230,7 +230,7 @@ class LoggedInView extends React.Component<IProps, IState> {
         return this._roomView.current.canResetTimeline();
     };
 
-    private createResizer(): Resizer {
+    private createResizer(): Resizer<ICollapseConfig, CollapseItem> {
         let panelSize: number | null;
         let panelCollapsed: boolean;
         const collapseConfig: ICollapseConfig = {

src/components/structures/RoomSearchView.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { forwardRef, RefObject, useCallback, useContext, useEffect, useRef, useState } from "react";
+import React, { forwardRef, useCallback, useContext, useEffect, useRef, useState } from "react";
 import { ISearchResults } from "matrix-js-sdk/src/@types/search";
 import { IThreadBundledRelationship } from "matrix-js-sdk/src/models/event";
 import { THREAD_RELATION_TYPE } from "matrix-js-sdk/src/models/thread";
@@ -57,10 +57,7 @@ interface Props {
 // XXX: todo: merge overlapping results somehow?
 // XXX: why doesn't searching on name work?
 export const RoomSearchView = forwardRef<ScrollPanel, Props>(
-    (
-        { term, scope, promise, abortController, resizeNotifier, className, onUpdate }: Props,
-        ref: RefObject<ScrollPanel>,
-    ) => {
+    ({ term, scope, promise, abortController, resizeNotifier, className, onUpdate }: Props, ref) => {
         const client = useContext(MatrixClientContext);
         const roomContext = useContext(RoomContext);
         const [inProgress, setInProgress] = useState(true);
@@ -69,6 +66,7 @@ export const RoomSearchView = forwardRef<ScrollPanel, Props>(
         const aborted = useRef(false);
         // A map from room ID to permalink creator
         const permalinkCreators = useRef(new Map<string, RoomPermalinkCreator>()).current;
+        const innerRef = useRef<ScrollPanel | null>();
 
         useEffect(() => {
             return () => {
@@ -214,8 +212,16 @@ export const RoomSearchView = forwardRef<ScrollPanel, Props>(
         // once dynamic content in the search results load, make the scrollPanel check
         // the scroll offsets.
         const onHeightChanged = (): void => {
-            const scrollPanel = ref.current;
-            scrollPanel?.checkScroll();
+            innerRef.current?.checkScroll();
+        };
+
+        const onRef = (e: ScrollPanel | null): void => {
+            if (typeof ref === "function") {
+                ref(e);
+            } else if (!!ref) {
+                ref.current = e;
+            }
+            innerRef.current = e;
         };
 
         let lastRoomId: string | undefined;
@@ -317,7 +323,7 @@ export const RoomSearchView = forwardRef<ScrollPanel, Props>(
 
         return (
             <ScrollPanel
-                ref={ref}
+                ref={onRef}
                 className={"mx_RoomView_searchResultsPanel " + className}
                 onFillRequest={onSearchResultsFillRequest}
                 resizeNotifier={resizeNotifier}

src/components/structures/ScrollPanel.tsx

@@ -854,7 +854,7 @@ export default class ScrollPanel extends React.Component<IProps> {
         return this.divScroll;
     }
 
-    private collectScroll = (divScroll: HTMLDivElement): void => {
+    private collectScroll = (divScroll: HTMLDivElement | null): void => {
         this.divScroll = divScroll;
     };