import React from 'react'; import Motion from '../features/ui/util/optional_motion'; import spring from 'react-motion/lib/spring'; 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.string, label: 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 () { // Hack required for some icons which have an overriden size let containerSize = '1.28571429em'; if (this.props.style?.fontSize) { containerSize = `${this.props.size * 1.28571429}px`; } let style = { fontSize: `${this.props.size}px`, height: containerSize, lineHeight: `${this.props.size}px`, ...this.props.style, ...(this.props.active ? this.props.activeStyle : {}), }; if (!this.props.label) { style.width = containerSize; } else { style.textAlign = 'left'; } 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 = ( ); if (href && !this.prop) { contents = ( {contents} ); } return ( ); } }