text: 'use strict';
  
  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  
  var _react = require('react');
  
  var _react2 = _interopRequireDefault(_react);
  
  var _reactDom = require('react-dom');
  
  var _reactDom2 = _interopRequireDefault(_reactDom);
  
  var _reactAddonsPureRenderMixin = require('react-addons-pure-render-mixin');
  
  var _reactAddonsPureRenderMixin2 = _interopRequireDefault(_reactAddonsPureRenderMixin);
  
  var _stylePropable = require('../mixins/style-propable');
  
  var _stylePropable2 = _interopRequireDefault(_stylePropable);
  
  var _autoPrefix = require('../styles/auto-prefix');
  
  var _autoPrefix2 = _interopRequireDefault(_autoPrefix);
  
  var _colors = require('../styles/colors');
  
  var _colors2 = _interopRequireDefault(_colors);
  
  var _transitions = require('../styles/transitions');
  
  var _transitions2 = _interopRequireDefault(_transitions);
  
  var _scaleIn = require('../transition-groups/scale-in');
  
  var _scaleIn2 = _interopRequireDefault(_scaleIn);
  
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  
  var pulsateDuration = 750;
  
  var FocusRipple = _react2.default.createClass({
    displayName: 'FocusRipple',
  
    propTypes: {
      color: _react2.default.PropTypes.string,
      innerStyle: _react2.default.PropTypes.object,
      opacity: _react2.default.PropTypes.number,
      show: _react2.default.PropTypes.bool,
  
      /**
       * Override the inline-styles of the root element.
       */
      style: _react2.default.PropTypes.object
    },
  
    mixins: [_reactAddonsPureRenderMixin2.default, _stylePropable2.default],
  
    getDefaultProps: function getDefaultProps() {
      return {
        color: _colors2.default.darkBlack
      };
    },
    componentDidMount: function componentDidMount() {
      if (this.props.show) {
        this._setRippleSize();
        this._pulsate();
      }
    },
    componentDidUpdate: function componentDidUpdate() {
      if (this.props.show) {
        this._setRippleSize();
        this._pulsate();
      } else {
        if (this._timeout) clearTimeout(this._timeout);
      }
    },
    _getRippleElement: function _getRippleElement(props) {
      var color = props.color;
      var innerStyle = props.innerStyle;
      var opacity = props.opacity;
  
      var innerStyles = this.mergeAndPrefix({
        position: 'absolute',
        height: '100%',
        width: '100%',
        borderRadius: '50%',
        opacity: opacity ? opacity : 0.16,
        backgroundColor: color,
        transition: _transitions2.default.easeOut(pulsateDuration + 'ms', 'transform', null, _transitions2.default.easeInOutFunction)
      }, innerStyle);
  
      return _react2.default.createElement('div', { ref: 'innerCircle', style: innerStyles });
    },
    _pulsate: function _pulsate() {
      if (!this.isMounted()) return;
  
      var innerCircle = _reactDom2.default.findDOMNode(this.refs.innerCircle);
      if (!innerCircle) return;
  
      var startScale = 'scale(1)';
      var endScale = 'scale(0.85)';
      var currentScale = innerCircle.style.transform;
      var nextScale = undefined;
  
      currentScale = currentScale || startScale;
      nextScale = currentScale === startScale ? endScale : startScale;
  
      _autoPrefix2.default.set(innerCircle.style, 'transform', nextScale);
      this._timeout = setTimeout(this._pulsate, pulsateDuration);
    },
    _setRippleSize: function _setRippleSize() {
      var el = _reactDom2.default.findDOMNode(this.refs.innerCircle);
      var height = el.offsetHeight;
      var width = el.offsetWidth;
      var size = Math.max(height, width);
  
      var oldTop = 0;
      // For browsers that don't support endsWith()
      if (el.style.top.indexOf('px', el.style.top.length - 2) !== -1) {
        oldTop = parseInt(el.style.top);
      }
      el.style.height = size + 'px';
      el.style.top = height / 2 - size / 2 + oldTop + 'px';
    },
    render: function render() {
      var _props = this.props;
      var show = _props.show;
      var style = _props.style;
  
      var mergedRootStyles = this.mergeStyles({
        height: '100%',
        width: '100%',
        position: 'absolute',
        top: 0,
        left: 0
      }, style);
  
      var ripple = show ? this._getRippleElement(this.props) : null;
  
      return _react2.default.createElement(
        _scaleIn2.default,
        {
          maxScale: 0.85,
          style: mergedRootStyles },
        ripple
      );
    }
  });
  
  exports.default = FocusRipple;
  module.exports = exports['default'];