mirror of https://github.com/vector-im/riot-web
Convert ActionButton to TS
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>pull/21833/head
parent
e11e17eb85
commit
8bbd91547d
|
@ -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 }
|
Loading…
Reference in New Issue