From 8bbd91547d6fbbcb1aba8f30e067ded32ce83315 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Tue, 20 Jul 2021 10:59:34 +0200
Subject: [PATCH] Convert ActionButton to TS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 .../{ActionButton.js => ActionButton.tsx}     | 51 +++++++++++--------
 1 file changed, 29 insertions(+), 22 deletions(-)
 rename src/components/views/elements/{ActionButton.js => ActionButton.tsx} (75%)

diff --git a/src/components/views/elements/ActionButton.js b/src/components/views/elements/ActionButton.tsx
similarity index 75%
rename from src/components/views/elements/ActionButton.js
rename to src/components/views/elements/ActionButton.tsx
index 9c9e9663e7..f776174722 100644
--- a/src/components/views/elements/ActionButton.js
+++ b/src/components/views/elements/ActionButton.tsx
@@ -15,49 +15,56 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import AccessibleButton from './AccessibleButton';
 import dis from '../../../dispatcher/dispatcher';
 import * as sdk from '../../../index';
 import Analytics from '../../../Analytics';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
-@replaceableComponent("views.elements.ActionButton")
-export default class ActionButton extends React.Component {
-    static propTypes = {
-        size: PropTypes.string,
-        tooltip: PropTypes.bool,
-        action: PropTypes.string.isRequired,
-        mouseOverAction: PropTypes.string,
-        label: PropTypes.string.isRequired,
-        iconPath: PropTypes.string,
-        className: PropTypes.string,
-        children: PropTypes.node,
-    };
+interface IProps {
+    size?: string;
+    tooltip?: boolean;
+    action: string;
+    mouseOverAction?: string;
+    label: string;
+    iconPath?: string;
+    className?: string;
+    children?: JSX.Element;
+}
 
+interface IState {
+    showTooltip: boolean;
+}
+
+@replaceableComponent("views.elements.ActionButton")
+export default class ActionButton extends React.Component<IProps, IState> {
     static defaultProps = {
         size: "25",
         tooltip: false,
     };
 
-    state = {
-        showTooltip: false,
-    };
+    constructor(props: IProps) {
+        super(props);
 
-    _onClick = (ev) => {
+        this.state = {
+            showTooltip: false,
+        };
+    }
+
+    private onClick = (ev: React.MouseEvent): void => {
         ev.stopPropagation();
         Analytics.trackEvent('Action Button', 'click', this.props.action);
         dis.dispatch({ action: this.props.action });
     };
 
-    _onMouseEnter = () => {
+    private onMouseEnter = (): void => {
         if (this.props.tooltip) this.setState({ showTooltip: true });
         if (this.props.mouseOverAction) {
             dis.dispatch({ action: this.props.mouseOverAction });
         }
     };
 
-    _onMouseLeave = () => {
+    private onMouseLeave = (): void => {
         this.setState({ showTooltip: false });
     };
 
@@ -80,9 +87,9 @@ export default class ActionButton extends React.Component {
         return (
             <AccessibleButton
                 className={classNames.join(" ")}
-                onClick={this._onClick}
-                onMouseEnter={this._onMouseEnter}
-                onMouseLeave={this._onMouseLeave}
+                onClick={this.onClick}
+                onMouseEnter={this.onMouseEnter}
+                onMouseLeave={this.onMouseLeave}
                 aria-label={this.props.label}
             >
                 { icon }