diff options
Diffstat (limited to 'app/javascript/mastodon/components/icon_button.js')
-rw-r--r-- | app/javascript/mastodon/components/icon_button.js | 164 |
1 files changed, 0 insertions, 164 deletions
diff --git a/app/javascript/mastodon/components/icon_button.js b/app/javascript/mastodon/components/icon_button.js deleted file mode 100644 index b7daf82a4..000000000 --- a/app/javascript/mastodon/components/icon_button.js +++ /dev/null @@ -1,164 +0,0 @@ -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'; - -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.string, - counter: PropTypes.number, - obfuscateCount: PropTypes.bool, - href: PropTypes.string, - ariaHidden: PropTypes.bool, - }; - - static defaultProps = { - size: 18, - active: false, - disabled: false, - animate: false, - overlay: false, - tabIndex: '0', - ariaHidden: false, - }; - - state = { - activate: false, - deactivate: false, - } - - componentWillReceiveProps (nextProps) { - if (!nextProps.animate) return; - - if (this.props.active && !nextProps.active) { - this.setState({ activate: false, deactivate: true }); - } else if (!this.props.active && nextProps.active) { - this.setState({ activate: true, deactivate: false }); - } - } - - handleClick = (e) => { - e.preventDefault(); - - if (!this.props.disabled) { - this.props.onClick(e); - } - } - - handleKeyPress = (e) => { - if (this.props.onKeyPress && !this.props.disabled) { - this.props.onKeyPress(e); - } - } - - handleMouseDown = (e) => { - if (!this.props.disabled && this.props.onMouseDown) { - this.props.onMouseDown(e); - } - } - - handleKeyDown = (e) => { - if (!this.props.disabled && this.props.onKeyDown) { - this.props.onKeyDown(e); - } - } - - render () { - const style = { - fontSize: `${this.props.size}px`, - width: `${this.props.size * 1.28571429}px`, - height: `${this.props.size * 1.28571429}px`, - lineHeight: `${this.props.size}px`, - ...this.props.style, - ...(this.props.active ? this.props.activeStyle : {}), - }; - - const { - active, - className, - disabled, - expanded, - icon, - inverted, - overlay, - tabIndex, - title, - counter, - obfuscateCount, - href, - ariaHidden, - } = this.props; - - const { - activate, - deactivate, - } = this.state; - - const classes = classNames(className, 'icon-button', { - active, - disabled, - inverted, - activate, - deactivate, - overlayed: overlay, - 'icon-button--with-counter': typeof counter !== 'undefined', - }); - - if (typeof counter !== 'undefined') { - style.width = 'auto'; - } - - let contents = ( - <React.Fragment> - <Icon id={icon} fixedWidth aria-hidden='true' /> {typeof counter !== 'undefined' && <span className='icon-button__counter'><AnimatedNumber value={counter} obfuscate={obfuscateCount} /></span>} - </React.Fragment> - ); - - if (href && !this.prop) { - contents = ( - <a href={href} target='_blank' rel='noopener noreferrer'> - {contents} - </a> - ); - } - - return ( - <button - type='button' - aria-label={title} - aria-expanded={expanded} - aria-hidden={ariaHidden} - title={title} - className={classes} - onClick={this.handleClick} - onMouseDown={this.handleMouseDown} - onKeyDown={this.handleKeyDown} - onKeyPress={this.handleKeyPress} - style={style} - tabIndex={tabIndex} - disabled={disabled} - > - {contents} - </button> - ); - } - -} |