content: import React from 'react';
  import PropTypes from 'prop-types';
  import classNames from 'classnames';
  import { StaggeredMotion, spring } from 'react-motion';
  import onClickOutside from 'react-onclickoutside';
  import PaperActionButtonOption from './paper-action-button-option';
  import Icon from './icon';
  
  // see https://github.com/gaearon/react-hot-loader/issues/304
  const PaperActionButtonOptionType = (
    <PaperActionButtonOption label="" iconName="none" />
  ).type;
  
  function presetSpring(val) {
    return spring(val, {
      stiffness: 400,
      damping: 27
    });
  }
  
  class PaperActionButton extends React.Component {
    constructor(...args) {
      super(...args);
      this.state = {
        active: false
      };
      this.handleButtonClick = this.handleButtonClick.bind(this);
      this.handleClickOutside = this.handleClickOutside.bind(this);
    }
  
    handleButtonClick(e) {
      let haveChildren = this.props.children && this.props.children.length > 0;
      this.setState(({ active }) => ({ active: !active && haveChildren }));
      this.props.onClick(e);
    }
  
    handleClickOutside() {
      this.setState({ active: false });
    }
  
    render() {
      const {
        className,
        disabled,
        color,
        large,
        children,
        spinOnActive,
        readOnly
      } = this.props;
  
      let buttonStyle = {};
      if (color) buttonStyle.backgroundColor = color;
  
      return (
        <div
          className={classNames(
            className,
            'paper-action-button',
            `paper-action-button--${large ? 'large' : 'small'}`,
            {
              'paper-action-button--read-only': readOnly,
              'paper-action-button--disabled': disabled
            }
          )}
        >
          {children && (
            <StaggeredMotion
              defaultStyles={children.map(() => ({
                scale: 0,
                opacity: 0
              }))}
              styles={prevInterpolatedStyles =>
                prevInterpolatedStyles.map((_, i) => {
                  let scale = 0;
                  if (this.state.active) {
                    scale = i === 0 ? 1 : prevInterpolatedStyles[i - 1].scale;
                  }
                  return {
                    scale: presetSpring(scale),
                    opacity: presetSpring(scale)
                  };
                })
              }
            >
              {interpolatingStyles => {
                let animationStyles = interpolatingStyles.reduceRight(
                  (prev, curr) => {
                    prev.push(curr);
                    return prev;
                  },
                  []
                );
                return (
                  <div className="paper-action-button__option-list">
                    {React.Children.map(children, (child, i) => {
                      let scale = animationStyles[i].scale;
                      if (child && child.type === PaperActionButtonOptionType) {
                        return React.cloneElement(child, {
                          __close: this.handleClickOutside,
                          __badgeStyle: { transform: `scale(${scale})` },
                          __labelStyle: { transform: `scale(${scale})` }
                        });
                      }
                    })}
                  </div>
                );
              }}
            </StaggeredMotion>
          )}
          <button
            className={classNames(
              'paper-action-button__button',
              `paper-action-button__button--${
                this.state.active ? 'active' : 'inactive'
              }`,
              `paper-action-button__button--${spinOnActive ? 'spin' : 'no-spin'}`
            )}
            disabled={disabled}
            onClick={this.handleButtonClick}
            onMouseUp={() => this.myRef.blur()}
            ref={myRef => {
              this.myRef = myRef;
            }}
            style={buttonStyle}
          >
            <span className="paper-action-button__button__icon-wrapper">
              <Icon className="paper-action-button__icon">add</Icon>
            </span>
          </button>
          <div className="paper-action-button__shadow" />
        </div>
      );
    }
  }
  
  PaperActionButton.defaultProps = {
    onClick: () => {},
    spinOnActive: true,
    large: true
  };
  
  PaperActionButton.propTypes = {
    disabled: PropTypes.bool,
    className: PropTypes.string,
    onClick: PropTypes.func,
    children: PropTypes.any,
    color: PropTypes.string,
    spinOnActive: PropTypes.bool,
    large: PropTypes.bool,
    readOnly: PropTypes.bool
  };
  
  export default onClickOutside(PaperActionButton);
  