From af853e1d86aa71fe78ed24a2b2ca780453df4b7a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Thu, 16 Sep 2021 19:16:36 +0200 Subject: [PATCH] Convert DialogButtons to TS MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- .../eventindex/ManageEventIndexDialog.tsx | 5 +- .../views/dialogs/CryptoStoreTooNewDialog.tsx | 5 +- .../{DialogButtons.js => DialogButtons.tsx} | 85 ++++++++++--------- 3 files changed, 47 insertions(+), 48 deletions(-) rename src/components/views/elements/{DialogButtons.js => DialogButtons.tsx} (64%) diff --git a/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.tsx b/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.tsx index 2748fda35a..ac7875b920 100644 --- a/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.tsx +++ b/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.tsx @@ -26,10 +26,9 @@ import { SettingLevel } from "../../../../settings/SettingLevel"; import Field from '../../../../components/views/elements/Field'; import BaseDialog from "../../../../components/views/dialogs/BaseDialog"; import DialogButtons from "../../../../components/views/elements/DialogButtons"; +import { IDialogProps } from "../../../../components/views/dialogs/IDialogProps"; -interface IProps { - onFinished: (confirmed: boolean) => void; -} +interface IProps extends IDialogProps {} interface IState { eventIndexSize: number; diff --git a/src/components/views/dialogs/CryptoStoreTooNewDialog.tsx b/src/components/views/dialogs/CryptoStoreTooNewDialog.tsx index d03b668cd9..3bb78233ea 100644 --- a/src/components/views/dialogs/CryptoStoreTooNewDialog.tsx +++ b/src/components/views/dialogs/CryptoStoreTooNewDialog.tsx @@ -23,10 +23,9 @@ import Modal from '../../../Modal'; import BaseDialog from "./BaseDialog"; import DialogButtons from "../elements/DialogButtons"; import QuestionDialog from "./QuestionDialog"; +import { IDialogProps } from "./IDialogProps"; -interface IProps { - onFinished: (success: boolean) => void; -} +interface IProps extends IDialogProps {} const CryptoStoreTooNewDialog: React.FC = (props: IProps) => { const brand = SdkConfig.get().brand; diff --git a/src/components/views/elements/DialogButtons.js b/src/components/views/elements/DialogButtons.tsx similarity index 64% rename from src/components/views/elements/DialogButtons.js rename to src/components/views/elements/DialogButtons.tsx index 9dd4a84b9a..0dff64c0b4 100644 --- a/src/components/views/elements/DialogButtons.js +++ b/src/components/views/elements/DialogButtons.tsx @@ -17,60 +17,61 @@ limitations under the License. */ import React from "react"; -import PropTypes from "prop-types"; import { _t } from '../../../languageHandler'; import { replaceableComponent } from "../../../utils/replaceableComponent"; +interface IProps { + // The primary button which is styled differently and has default focus. + primaryButton: React.ReactNode; + + // A node to insert into the cancel button instead of default "Cancel" + cancelButton?: React.ReactNode; + + // If true, make the primary button a form submit button (input type="submit") + primaryIsSubmit?: boolean; + + // onClick handler for the primary button. + onPrimaryButtonClick?: (ev: React.MouseEvent) => void; + + // should there be a cancel button? default: true + hasCancel?: boolean; + + // The class of the cancel button, only used if a cancel button is + // enabled + cancelButtonClass?: string; + + // onClick handler for the cancel button. + onCancel?: (...args: any[]) => void; + + focus?: boolean; + + // disables the primary and cancel buttons + disabled?: boolean; + + // disables only the primary button + primaryDisabled?: boolean; + + // something to stick next to the buttons, optionally + additive?: React.ReactNode; + + primaryButtonClass?: string; +} + /** * Basic container for buttons in modal dialogs. */ @replaceableComponent("views.elements.DialogButtons") -export default class DialogButtons extends React.Component { - static propTypes = { - // The primary button which is styled differently and has default focus. - primaryButton: PropTypes.node.isRequired, - - // A node to insert into the cancel button instead of default "Cancel" - cancelButton: PropTypes.node, - - // If true, make the primary button a form submit button (input type="submit") - primaryIsSubmit: PropTypes.bool, - - // onClick handler for the primary button. - onPrimaryButtonClick: PropTypes.func, - - // should there be a cancel button? default: true - hasCancel: PropTypes.bool, - - // The class of the cancel button, only used if a cancel button is - // enabled - cancelButtonClass: PropTypes.node, - - // onClick handler for the cancel button. - onCancel: PropTypes.func, - - focus: PropTypes.bool, - - // disables the primary and cancel buttons - disabled: PropTypes.bool, - - // disables only the primary button - primaryDisabled: PropTypes.bool, - - // something to stick next to the buttons, optionally - additive: PropTypes.element, - }; - - static defaultProps = { +export default class DialogButtons extends React.Component { + public static defaultProps: Partial = { hasCancel: true, disabled: false, }; - _onCancelClick = () => { - this.props.onCancel(); + private onCancelClick = (event: React.MouseEvent): void => { + this.props.onCancel(event); }; - render() { + public render(): JSX.Element { let primaryButtonClassName = "mx_Dialog_primary"; if (this.props.primaryButtonClass) { primaryButtonClassName += " " + this.props.primaryButtonClass; @@ -82,7 +83,7 @@ export default class DialogButtons extends React.Component { // important: the default type is 'submit' and this button comes before the // primary in the DOM so will get form submissions unless we make it not a submit. type="button" - onClick={this._onCancelClick} + onClick={this.onCancelClick} className={this.props.cancelButtonClass} disabled={this.props.disabled} >