Convert ActionButton to TS

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2021-07-20 10:59:34 +02:00
parent e11e17eb85
commit 8bbd91547d
No known key found for this signature in database
GPG key ID: 55C211A1226CB17D

View file

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