Convert BaseDialog to TS

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

src/components/views/dialogs/BaseDialog.tsx

@@ -18,15 +18,59 @@ limitations under the License.
 
 import React from 'react';
 import FocusLock from 'react-focus-lock';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import { Key } from '../../../Keyboard';
-import AccessibleButton from '../elements/AccessibleButton';
+import AccessibleButton, { ButtonEvent } from '../elements/AccessibleButton';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import { _t } from "../../../languageHandler";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+
+interface IProps {
+    // onFinished callback to call when Escape is pressed
+    // Take a boolean which is true if the dialog was dismissed
+    // with a positive / confirm action or false if it was
+    // cancelled (BaseDialog itself only calls this with false).
+    onFinished: (confirm: any) => void;
+
+    // Whether the dialog should have a 'close' button that will
+    // cause the dialog to be cancelled. This should only be set
+    // to false if there is nothing the app can sensibly do if the
+    // dialog is cancelled, eg. "We can't restore your session and
+    // the app cannot work". Default: true.
+    hasCancel?: boolean;
+
+    // called when a key is pressed
+    onKeyDown?: (e: KeyboardEvent | React.KeyboardEvent) => void;
+
+    // CSS class to apply to dialog div
+    className?: string;
+
+    // if true, dialog container is 60% of the viewport width. Otherwise,
+    // the container will have no fixed size, allowing its contents to
+    // determine its size. Default: true.
+    fixedWidth?: boolean;
+
+    // Title for the dialog.
+    title?: JSX.Element | string;
+
+    // Path to an icon to put in the header
+    headerImage?: string;
+
+    // children should be the content of the dialog
+    children?: React.ReactNode;
+
+    // Id of content element
+    // If provided, this is used to add a aria-describedby attribute
+    contentId?: string;
+
+    // optional additional class for the title element (basically anything that can be passed to classnames)
+    titleClass?: string | string[];
+
+    headerButton?: JSX.Element;
+}
 
 /*
  * Basic container for modal dialogs.
@@ -35,54 +79,10 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
  * dialog on escape.
  */
 @replaceableComponent("views.dialogs.BaseDialog")
-export default class BaseDialog extends React.Component {
+export default class BaseDialog extends React.Component<IProps> {
-    static propTypes = {
+    private matrixClient: MatrixClient;
-        // onFinished callback to call when Escape is pressed
-        // Take a boolean which is true if the dialog was dismissed
-        // with a positive / confirm action or false if it was
-        // cancelled (BaseDialog itself only calls this with false).
-        onFinished: PropTypes.func.isRequired,
 
-        // Whether the dialog should have a 'close' button that will
+    public static defaultProps = {
-        // cause the dialog to be cancelled. This should only be set
-        // to false if there is nothing the app can sensibly do if the
-        // dialog is cancelled, eg. "We can't restore your session and
-        // the app cannot work". Default: true.
-        hasCancel: PropTypes.bool,
-
-        // called when a key is pressed
-        onKeyDown: PropTypes.func,
-
-        // CSS class to apply to dialog div
-        className: PropTypes.string,
-
-        // if true, dialog container is 60% of the viewport width. Otherwise,
-        // the container will have no fixed size, allowing its contents to
-        // determine its size. Default: true.
-        fixedWidth: PropTypes.bool,
-
-        // Title for the dialog.
-        title: PropTypes.node.isRequired,
-
-        // Path to an icon to put in the header
-        headerImage: PropTypes.string,
-
-        // children should be the content of the dialog
-        children: PropTypes.node,
-
-        // Id of content element
-        // If provided, this is used to add a aria-describedby attribute
-        contentId: PropTypes.string,
-
-        // optional additional class for the title element (basically anything that can be passed to classnames)
-        titleClass: PropTypes.oneOfType([
-            PropTypes.string,
-            PropTypes.object,
-            PropTypes.arrayOf(PropTypes.string),
-        ]),
-    };
-
-    static defaultProps = {
         hasCancel: true,
         fixedWidth: true,
     };
@@ -90,10 +90,10 @@ export default class BaseDialog extends React.Component {
     constructor(props) {
         super(props);
 
-        this._matrixClient = MatrixClientPeg.get();
+        this.matrixClient = MatrixClientPeg.get();
     }
 
-    _onKeyDown = (e) => {
+    private onKeyDown = (e: KeyboardEvent | React.KeyboardEvent): void => {
         if (this.props.onKeyDown) {
             this.props.onKeyDown(e);
         }
@@ -104,15 +104,15 @@ export default class BaseDialog extends React.Component {
         }
     };
 
-    _onCancelClick = (e) => {
+    private onCancelClick = (e: ButtonEvent): void => {
         this.props.onFinished(false);
     };
 
-    render() {
+    public render(): JSX.Element {
         let cancelButton;
         if (this.props.hasCancel) {
             cancelButton = (
-                <AccessibleButton onClick={this._onCancelClick} className="mx_Dialog_cancelButton" aria-label={_t("Close dialog")} />
+                <AccessibleButton onClick={this.onCancelClick} className="mx_Dialog_cancelButton" aria-label={_t("Close dialog")} />
             );
         }
 
@@ -122,11 +122,11 @@ export default class BaseDialog extends React.Component {
         }
 
         return (
-            <MatrixClientContext.Provider value={this._matrixClient}>
+            <MatrixClientContext.Provider value={this.matrixClient}>
                 <FocusLock
                     returnFocus={true}
                     lockProps={{
-                        onKeyDown: this._onKeyDown,
+                        onKeyDown: this.onKeyDown,
                         role: "dialog",
                         ["aria-labelledby"]: "mx_BaseDialog_title",
                         // This should point to a node describing the dialog.

src/components/views/dialogs/security/SetupEncryptionDialog.tsx

@@ -34,7 +34,7 @@ interface IProps {
 }
 
 interface IState {
-    icon: Phase;
+    icon: string;
 }
 
 @replaceableComponent("views.dialogs.security.SetupEncryptionDialog")