From 6aefd9318ffa9801f188e6d7b1ccd70d5dbb6617 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 4 Sep 2021 16:16:21 +0200 Subject: [PATCH] Convert BaseDialog to TS MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- .../dialogs/{BaseDialog.js => BaseDialog.tsx} | 112 +++++++++--------- .../security/SetupEncryptionDialog.tsx | 2 +- 2 files changed, 57 insertions(+), 57 deletions(-) rename src/components/views/dialogs/{BaseDialog.js => BaseDialog.tsx} (61%) diff --git a/src/components/views/dialogs/BaseDialog.js b/src/components/views/dialogs/BaseDialog.tsx similarity index 61% rename from src/components/views/dialogs/BaseDialog.js rename to src/components/views/dialogs/BaseDialog.tsx index 42b21ec743..91cceb3123 100644 --- a/src/components/views/dialogs/BaseDialog.js +++ b/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 { - static propTypes = { - // 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, +export default class BaseDialog extends React.Component { + private matrixClient: MatrixClient; - // 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: 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 = { + public 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 = ( - + ); } @@ -122,11 +122,11 @@ export default class BaseDialog extends React.Component { } return ( - +