|
|
|
@ -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'; |
|
|
|
|
|
|
|
|
|
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, |
|
|
|
|
}; |
|
|
|
|
import { Icon } from './icon'; |
|
|
|
|
import { AnimatedNumber } from './animated_number'; |
|
|
|
|
|
|
|
|
|
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} |