Conform more of the code base to strict null checking (#10147)

* Conform more of the code base to strict null checking

* More strict fixes

* More strict work

* Fix missing optional type

* Iterate

src/components/views/elements/AccessibleTooltipButton.tsx

@@ -73,7 +73,7 @@ export default class AccessibleTooltipButton extends React.PureComponent<IProps,
         if (ev.relatedTarget) this.showTooltip();
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const { title, tooltip, children, tooltipClassName, forceHide, alignment, onHideTooltip, ...props } =
             this.props;

src/components/views/elements/AppPermission.tsx

@@ -88,7 +88,7 @@ export default class AppPermission extends React.Component<IProps, IState> {
         }
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const brand = SdkConfig.get().brand;
 
         const displayName = this.state.roomMember ? this.state.roomMember.name : this.props.creatorUserId;

src/components/views/elements/AppTile.tsx

@@ -544,7 +544,7 @@ export default class AppTile extends React.Component<IProps, IState> {
         this.setState({ menuDisplayed: false });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let appTileBody;
 
         // Note that there is advice saying allow-scripts shouldn't be used with allow-same-origin

src/components/views/elements/DesktopCapturerSourcePicker.tsx

@@ -55,7 +55,7 @@ export class ExistingSource extends React.Component<ExistingSourceIProps> {
         this.props.onSelect(this.props.source);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const thumbnailClasses = classNames({
             mx_desktopCapturerSourcePicker_source_thumbnail: true,
             mx_desktopCapturerSourcePicker_source_thumbnail_selected: this.props.selected,
@@ -149,7 +149,7 @@ export default class DesktopCapturerSourcePicker extends React.Component<PickerI
         return new Tab(type, label, null, <div className="mx_desktopCapturerSourcePicker_tab">{sources}</div>);
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const tabs = [
             this.getTab("screen", _t("Share entire screen")),
             this.getTab("window", _t("Application window")),

src/components/views/elements/DialPadBackspaceButton.tsx

@@ -25,7 +25,7 @@ interface IProps {
 }
 
 export default class DialPadBackspaceButton extends React.PureComponent<IProps> {
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <div className="mx_DialPadBackspaceButtonWrapper">
                 <AccessibleButton

src/components/views/elements/DialogButtons.tsx

@@ -71,7 +71,7 @@ export default class DialogButtons extends React.Component<IProps> {
         this.props.onCancel(event);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let primaryButtonClassName = "mx_Dialog_primary";
         if (this.props.primaryButtonClass) {
             primaryButtonClassName += " " + this.props.primaryButtonClass;

src/components/views/elements/Draggable.tsx

@@ -73,7 +73,7 @@ export default class Draggable extends React.Component<IProps, IState> {
         });
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return <div className={this.props.className} onMouseDown={this.onMouseDown} />;
     }
 }

src/components/views/elements/Dropdown.tsx

@@ -49,7 +49,7 @@ class MenuOption extends React.Component<IMenuOptionProps> {
         this.props.onClick(this.props.dropdownKey);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const optClasses = classnames({
             mx_Dropdown_option: true,
             mx_Dropdown_option_highlight: this.props.highlighted,
@@ -327,7 +327,7 @@ export default class Dropdown extends React.Component<DropdownProps, IState> {
         return options;
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let currentValue;
 
         const menuStyle: CSSProperties = {};

src/components/views/elements/EditableItemList.tsx

@@ -57,7 +57,7 @@ export class EditableItem extends React.Component<IItemProps, IItemState> {
         this.setState({ verifyRemove: false });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         if (this.state.verifyRemove) {
             return (
                 <div className="mx_EditableItem">
@@ -148,7 +148,7 @@ export default class EditableItemList<P = {}> extends React.PureComponent<IProps
         );
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const editableItems = this.props.items.map((item, index) => {
             if (!this.props.canRemove) {
                 return <li key={item}>{item}</li>;

src/components/views/elements/EditableText.tsx

@@ -202,7 +202,7 @@ export default class EditableText extends React.Component<IProps, IState> {
         this.showPlaceholder(!this.value);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const { className, editable, initialValue, label, labelClassName } = this.props;
         let editableEl;
 

src/components/views/elements/EditableTextContainer.tsx

@@ -133,7 +133,7 @@ export default class EditableTextContainer extends React.Component<IProps, IStat
         );
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         if (this.state.busy) {
             return <Spinner />;
         } else if (this.state.errorString) {

src/components/views/elements/EventListSummary.tsx

@@ -495,7 +495,7 @@ export default class EventListSummary extends React.Component<IProps> {
         };
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const eventsToRender = this.props.events;
 
         // Map user IDs to latest Avatar Member. ES6 Maps are ordered by when the key was created,

src/components/views/elements/EventTilePreview.tsx

@@ -111,7 +111,7 @@ export default class EventTilePreview extends React.Component<IProps, IState> {
         return event;
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const className = classnames(this.props.className, {
             mx_IRCLayout: this.props.layout == Layout.IRC,
             mx_EventTilePreview_loader: !this.props.userId,

src/components/views/elements/Field.tsx

@@ -232,7 +232,7 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
         return valid;
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         /* eslint @typescript-eslint/no-unused-vars: ["error", { "ignoreRestSiblings": true }] */
         const {
             element,

src/components/views/elements/IRCTimelineProfileResizer.tsx

@@ -91,7 +91,7 @@ export default class IRCTimelineProfileResizer extends React.Component<IProps, I
         }
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return <Draggable className="mx_ProfileResizer" dragFunc={this.dragFunc} onMouseUp={this.onMoueUp} />;
     }
 }

src/components/views/elements/ImageView.tsx

@@ -411,7 +411,7 @@ export default class ImageView extends React.Component<IProps, IState> {
         return <React.Fragment>{contextMenu}</React.Fragment>;
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const showEventMeta = !!this.props.mxEvent;
 
         let transitionClassName;

src/components/views/elements/InfoTooltip.tsx

@@ -39,7 +39,7 @@ export default class InfoTooltip extends React.PureComponent<ITooltipProps> {
         super(props);
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const { tooltip, children, tooltipClassName, className, kind } = this.props;
         const title = _t("Information");
         const iconClassName =

src/components/views/elements/InlineSpinner.tsx

@@ -30,7 +30,7 @@ export default class InlineSpinner extends React.PureComponent<IProps> {
         h: 16,
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <div className="mx_InlineSpinner">
                 <div

src/components/views/elements/InviteReason.tsx

@@ -45,7 +45,7 @@ export default class InviteReason extends React.PureComponent<IProps, IState> {
         });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const classes = classNames({
             mx_InviteReason: true,
             mx_InviteReason_hidden: this.state.hidden,

src/components/views/elements/LabelledToggleSwitch.tsx

@@ -43,7 +43,7 @@ interface IProps {
 }
 
 export default class LabelledToggleSwitch extends React.PureComponent<IProps> {
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         // This is a minimal version of a SettingsFlag
         const { label, caption } = this.props;
         let firstPart = (

src/components/views/elements/LanguageDropdown.tsx

@@ -83,7 +83,7 @@ export default class LanguageDropdown extends React.Component<IProps, IState> {
         });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         if (this.state.langs === null) {
             return <Spinner />;
         }

src/components/views/elements/LazyRenderList.tsx

@@ -117,7 +117,7 @@ export default class LazyRenderList<T = any> extends React.Component<IProps<T>,
         return new ItemRange(topCount, renderCount, bottomCount);
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const { itemHeight, items, renderItem } = this.props;
         const { renderRange } = this.state;
         const { topCount, renderCount, bottomCount } = renderRange;

src/components/views/elements/LinkWithTooltip.tsx

@@ -25,7 +25,7 @@ export default class LinkWithTooltip extends React.Component<IProps> {
         super(props);
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const { children, tooltip, ...props } = this.props;
 
         return (

src/components/views/elements/Measured.tsx

@@ -64,7 +64,7 @@ export default class Measured extends React.PureComponent<IProps> {
         this.props.onMeasurement(entry.contentRect.width <= this.props.breakpoint);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return null;
     }
 }

src/components/views/elements/PersistedElement.tsx

@@ -191,7 +191,7 @@ export default class PersistedElement extends React.Component<IProps> {
         });
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return <div ref={this.collectChildContainer} />;
     }
 }

src/components/views/elements/Pill.tsx

@@ -214,7 +214,7 @@ export default class Pill extends React.Component<IProps, IState> {
         });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const resource = this.state.resourceId;
 
         let avatar = null;

src/components/views/elements/PowerSelector.tsx

@@ -148,7 +148,7 @@ export default class PowerSelector extends React.Component<IProps, IState> {
         }
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let picker;
         const label = typeof this.props.label === "undefined" ? _t("Power level") : this.props.label;
         if (this.state.custom) {

src/components/views/elements/ReplyChain.tsx

@@ -199,7 +199,7 @@ export default class ReplyChain extends React.Component<IProps, IState> {
         return getUserNameColorClass(ev.getSender()).replace("Username", "ReplyChain");
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let header = null;
         if (this.state.err) {
             header = (

src/components/views/elements/RoomAliasField.tsx

@@ -77,7 +77,7 @@ export default class RoomAliasField extends React.PureComponent<IProps, IState>
         return { prefix, postfix, value, maxlength };
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const { prefix, postfix, value, maxlength } = this.domainProps;
         return (
             <Field

src/components/views/elements/SettingsFlag.tsx

@@ -75,7 +75,7 @@ export default class SettingsFlag extends React.Component<IProps, IState> {
         );
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const canChange = SettingsStore.canSetValue(this.props.name, this.props.roomId, this.props.level);
 
         if (!canChange && this.props.hideIfCannotSet) return null;

src/components/views/elements/SpellCheckLanguagesDropdown.tsx

@@ -91,7 +91,7 @@ export default class SpellCheckLanguagesDropdown extends React.Component<
         this.setState({ searchQuery });
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         if (this.state.languages === null) {
             return <Spinner />;
         }

src/components/views/elements/Spinner.tsx

@@ -30,7 +30,7 @@ export default class Spinner extends React.PureComponent<IProps> {
         h: 32,
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const { w, h, message } = this.props;
         return (
             <div className="mx_Spinner">

src/components/views/elements/Spoiler.tsx

@@ -42,7 +42,7 @@ export default class Spoiler extends React.Component<IProps, IState> {
         this.setState({ visible: !this.state.visible });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const reason = this.props.reason ? (
             <span className="mx_EventTile_spoiler_reason">{"(" + this.props.reason + ")"}</span>
         ) : null;

src/components/views/elements/StyledCheckbox.tsx

@@ -44,7 +44,7 @@ export default class StyledCheckbox extends React.PureComponent<IProps, IState>
         this.id = this.props.id || "checkbox_" + randomString(10);
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         /* eslint @typescript-eslint/no-unused-vars: ["error", { "ignoreRestSiblings": true }] */
         const { children, className, kind = CheckboxStyle.Solid, inputRef, ...otherProps } = this.props;
 

src/components/views/elements/StyledRadioButton.tsx

@@ -34,7 +34,7 @@ export default class StyledRadioButton extends React.PureComponent<IProps, IStat
         childrenInLabel: true,
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const { children, className, disabled, outlined, childrenInLabel, inputRef, ...otherProps } = this.props;
         const _className = classnames("mx_StyledRadioButton", className, {
             mx_StyledRadioButton_disabled: disabled,

src/components/views/elements/SyntaxHighlight.tsx

@@ -24,7 +24,7 @@ interface IProps {
 }
 
 export default class SyntaxHighlight extends React.PureComponent<IProps> {
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const { children: content, language } = this.props;
         const highlighted = language ? hljs.highlight(content, { language }) : hljs.highlightAuto(content);
 

src/components/views/elements/TagComposer.tsx

@@ -65,7 +65,7 @@ export default class TagComposer extends React.PureComponent<IProps, IState> {
         this.props.onRemove(tag);
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <div className="mx_TagComposer">
                 <form className="mx_TagComposer_input" onSubmit={this.onAdd}>

src/components/views/elements/TextWithTooltip.tsx

@@ -32,7 +32,7 @@ export default class TextWithTooltip extends React.Component<IProps> {
         super(props);
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const { class: className, children, tooltip, tooltipClass, tooltipProps, ...props } = this.props;
 
         return (

src/components/views/elements/Tooltip.tsx

@@ -174,7 +174,7 @@ export default class Tooltip extends React.PureComponent<ITooltipProps, State> {
         this.setState(style);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const tooltipClasses = classNames("mx_Tooltip", this.props.tooltipClassName, {
             mx_Tooltip_visible: this.props.visible,
             mx_Tooltip_invisible: !this.props.visible,

src/components/views/elements/TooltipButton.tsx

@@ -28,7 +28,7 @@ export default class TooltipButton extends React.Component<IProps> {
         super(props);
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <TooltipTarget
                 className="mx_TooltipButton_container"

src/components/views/elements/TruncatedList.tsx

@@ -70,7 +70,7 @@ export default class TruncatedList extends React.Component<IProps> {
         }
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let overflowNode = null;
 
         const totalChildren = this.getChildCount();

src/components/views/elements/crypto/VerificationQRCode.tsx

@@ -24,7 +24,7 @@ interface IProps {
 }
 
 export default class VerificationQRCode extends React.PureComponent<IProps> {
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <QRCode
                 data={[{ data: this.props.qrCodeData.getBuffer(), mode: "byte" }]}