mirrors/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2024-11-20 11:35:29 +01:00
Code Issues Projects Releases 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 32a030dd74
commit 5a5975d7f7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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 React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames'; import classNames from 'classnames';
import Icon from 'mastodon/components/icon'; import { Icon } from './icon';
import AnimatedNumber from 'mastodon/components/animated_number'; import { AnimatedNumber } from './animated_number';
export default class IconButton extends React.PureComponent { type Props = {
className?: string;
static propTypes = { title: string;
className: PropTypes.string, icon: string;
title: PropTypes.string.isRequired, onClick?: React.MouseEventHandler<HTMLButtonElement>;
icon: PropTypes.string.isRequired, onMouseDown?: React.MouseEventHandler<HTMLButtonElement>;
onClick: PropTypes.func, onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
onMouseDown: PropTypes.func, onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;
onKeyDown: PropTypes.func, size: number;
onKeyPress: PropTypes.func, active: boolean;
size: PropTypes.number, expanded?: boolean;
active: PropTypes.bool, style?: React.CSSProperties;
expanded: PropTypes.bool, activeStyle?: React.CSSProperties;
style: PropTypes.object, disabled: boolean;
activeStyle: PropTypes.object, inverted?: boolean;
disabled: PropTypes.bool, animate: boolean;
inverted: PropTypes.bool, overlay: boolean;
animate: PropTypes.bool, tabIndex: number;
overlay: PropTypes.bool, counter?: number;
tabIndex: PropTypes.number, obfuscateCount?: boolean;
counter: PropTypes.number, href?: string;
obfuscateCount: PropTypes.bool, ariaHidden: boolean;
href: PropTypes.string, }
ariaHidden: PropTypes.bool, type States = {
}; activate: boolean,
deactivate: boolean,
}
export default class IconButton extends React.PureComponent<Props, States> {
static defaultProps = { static defaultProps = {
size: 18, size: 18,
@ -45,7 +47,7 @@ export default class IconButton extends React.PureComponent {
deactivate: false, deactivate: false,
}; };
componentWillReceiveProps (nextProps) { UNSAFE_componentWillReceiveProps (nextProps: Props) {
if (!nextProps.animate) return; if (!nextProps.animate) return;
if (this.props.active && !nextProps.active) { 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(); e.preventDefault();
if (!this.props.disabled) { if (!this.props.disabled && this.props.onClick != null) {
this.props.onClick(e); this.props.onClick(e);
} }
}; };
handleKeyPress = (e) => { handleKeyPress: React.KeyboardEventHandler<HTMLButtonElement> = (e) => {
if (this.props.onKeyPress && !this.props.disabled) { if (this.props.onKeyPress && !this.props.disabled) {
this.props.onKeyPress(e); this.props.onKeyPress(e);
} }
}; };
handleMouseDown = (e) => { handleMouseDown: React.MouseEventHandler<HTMLButtonElement> = (e) => {
if (!this.props.disabled && this.props.onMouseDown) { if (!this.props.disabled && this.props.onMouseDown) {
this.props.onMouseDown(e); this.props.onMouseDown(e);
} }
}; };
handleKeyDown = (e) => { handleKeyDown: React.KeyboardEventHandler<HTMLButtonElement> = (e) => {
if (!this.props.disabled && this.props.onKeyDown) { if (!this.props.disabled && this.props.onKeyDown) {
this.props.onKeyDown(e); this.props.onKeyDown(e);
} }
@ -132,7 +134,7 @@ export default class IconButton extends React.PureComponent {
</React.Fragment> </React.Fragment>
); );
if (href && !this.prop) { if (href != null) {
contents = ( contents = (
<a href={href} target='_blank' rel='noopener noreferrer'> <a href={href} target='_blank' rel='noopener noreferrer'>
{contents} {contents}