[Glitch] Add type annotation for IconButton component

Port bee49de3db to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
lolsob-rspec
fusagiko / takayamaki 2023-05-02 19:53:32 +09:00 committed by Claire
parent da25a0bd04
commit cccf0bdace
1 changed files with 39 additions and 37 deletions

View File

@ -1,35 +1,37 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames'; import classNames from 'classnames';
import Icon from 'flavours/glitch/components/icon'; import { Icon } from './icon';
import AnimatedNumber from 'flavours/glitch/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, label: string;
tabIndex: PropTypes.number, counter?: number;
label: PropTypes.string, 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,
@ -46,7 +48,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) {
@ -56,27 +58,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);
} }
@ -89,7 +91,7 @@ export default class IconButton extends React.PureComponent {
containerSize = `${this.props.size * 1.28571429}px`; containerSize = `${this.props.size * 1.28571429}px`;
} }
let style = { const style = {
fontSize: `${this.props.size}px`, fontSize: `${this.props.size}px`,
height: containerSize, height: containerSize,
lineHeight: `${this.props.size}px`, lineHeight: `${this.props.size}px`,
@ -144,7 +146,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}