luna/mastodon
0
0
Fork 0
mirror of https://github.com/lunaisnotaboy/mastodon.git synced 2024-11-17 20:32:56 +00:00
Code Issues Projects Releases Wiki Activity

[Glitch] Add type annotation for IconButton component

Browse source 
Port 5a5975d7f7 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
fusagiko / takayamaki 2023-05-02 19:53:32 +09:00 committed by Claire
parent 8b31030fe4
commit 20f1f3aa7d
1 changed files with 39 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
app/javascript/flavours/glitch/components/icon_button.jsx → app/javascript/flavours/glitch/components/icon_button.tsx
View file

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