me/glitchier-soc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add type annotation for IconButton component (#24753)

Browse source
This commit is contained in:
fusagiko / takayamaki 2023-05-02 19:53:32 +09:00 committed by GitHub
parent abce7cf2b9
commit bee49de3db
1 changed files with 37 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
app/javascript/mastodon/components/icon_button.jsx → app/javascript/mastodon/components/icon_button.tsx
View file

@ -1,34 +1,36 @@
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Icon from 'mastodon/components/icon';
import AnimatedNumber from 'mastodon/components/animated_number';
import { Icon } from './icon';
import { AnimatedNumber } from './animated_number';
export default class IconButton extends React.PureComponent {
static propTypes = {
className: PropTypes.string,
title: PropTypes.string.isRequired,
icon: PropTypes.string.isRequired,
onClick: PropTypes.func,
onMouseDown: PropTypes.func,
onKeyDown: PropTypes.func,
onKeyPress: PropTypes.func,
size: PropTypes.number,
active: PropTypes.bool,
expanded: PropTypes.bool,
style: PropTypes.object,
activeStyle: PropTypes.object,
disabled: PropTypes.bool,
inverted: PropTypes.bool,
animate: PropTypes.bool,
overlay: PropTypes.bool,
tabIndex: PropTypes.number,
counter: PropTypes.number,
obfuscateCount: PropTypes.bool,
href: PropTypes.string,
ariaHidden: PropTypes.bool,
};
type Props = {
className?: string;
title: string;
icon: string;
onClick?: React.MouseEventHandler<HTMLButtonElement>;
onMouseDown?: React.MouseEventHandler<HTMLButtonElement>;
onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;
size: number;
active: boolean;
expanded?: boolean;
style?: React.CSSProperties;
activeStyle?: React.CSSProperties;
disabled: boolean;
inverted?: boolean;
animate: boolean;
overlay: boolean;
tabIndex: number;
counter?: number;
obfuscateCount?: boolean;
href?: string;
ariaHidden: boolean;
}
type States = {
activate: boolean,
deactivate: boolean,
}
export default class IconButton extends React.PureComponent<Props, States> {
static defaultProps = {
size: 18,
@ -45,7 +47,7 @@ export default class IconButton extends React.PureComponent {
deactivate: false,
};
componentWillReceiveProps (nextProps) {
UNSAFE_componentWillReceiveProps (nextProps: Props) {
if (!nextProps.animate) return;
if (this.props.active && !nextProps.active) {
@ -55,27 +57,27 @@ export default class IconButton extends React.PureComponent {
}
}
handleClick = (e) => {
handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
e.preventDefault();
if (!this.props.disabled) {
if (!this.props.disabled && this.props.onClick != null) {
this.props.onClick(e);
}
};
handleKeyPress = (e) => {
handleKeyPress: React.KeyboardEventHandler<HTMLButtonElement> = (e) => {
if (this.props.onKeyPress && !this.props.disabled) {
this.props.onKeyPress(e);
}
};
handleMouseDown = (e) => {
handleMouseDown: React.MouseEventHandler<HTMLButtonElement> = (e) => {
if (!this.props.disabled && this.props.onMouseDown) {
this.props.onMouseDown(e);
}
};
handleKeyDown = (e) => {
handleKeyDown: React.KeyboardEventHandler<HTMLButtonElement> = (e) => {
if (!this.props.disabled && this.props.onKeyDown) {
this.props.onKeyDown(e);
}
@ -132,7 +134,7 @@ export default class IconButton extends React.PureComponent {
</React.Fragment>
);
if (href && !this.prop) {
if (href != null) {
contents = (
<a href={href} target='_blank' rel='noopener noreferrer'>
{contents}