content: 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';
  
  export default class IconButton extends React.PureComponent {
  
    static propTypes = {
      className: PropTypes.string,
      title: PropTypes.string.isRequired,
      icon: PropTypes.string.isRequired,
      onClick: PropTypes.func,
      size: PropTypes.number,
      active: PropTypes.bool,
      pressed: 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,
    };
  
    static defaultProps = {
      size: 18,
      active: false,
      disabled: false,
      animate: false,
      overlay: false,
      tabIndex: '0',
    };
  
    handleClick = (e) =>  {
      e.preventDefault();
  
      if (!this.props.disabled) {
        this.props.onClick(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,
        animate,
        className,
        disabled,
        expanded,
        icon,
        inverted,
        overlay,
        pressed,
        tabIndex,
        title,
      } = this.props;
  
      const classes = classNames(className, 'icon-button', {
        active,
        disabled,
        inverted,
        overlayed: overlay,
      });
  
      if (!animate) {
        // Perf optimization: avoid unnecessary <Motion> components unless
        // we actually need to animate.
        return (
          <button
            aria-label={title}
            aria-pressed={pressed}
            aria-expanded={expanded}
            title={title}
            className={classes}
            onClick={this.handleClick}
            style={style}
            tabIndex={tabIndex}
          >
            <i className={`fa fa-fw fa-${icon}`} aria-hidden='true' />
          </button>
        );
      }
  
      return (
        <Motion defaultStyle={{ rotate: active ? -360 : 0 }} style={{ rotate: animate ? spring(active ? -360 : 0, { stiffness: 120, damping: 7 }) : 0 }}>
          {({ rotate }) => (
            <button
              aria-label={title}
              aria-pressed={pressed}
              aria-expanded={expanded}
              title={title}
              className={classes}
              onClick={this.handleClick}
              style={style}
              tabIndex={tabIndex}
            >
              <i style={{ transform: `rotate(${rotate}deg)` }} className={`fa fa-fw fa-${icon}`} aria-hidden='true' />
            </button>
          )}
        </Motion>
      );
    }
  
  }
  