{"dependencies":[{"name":"babel-runtime/helpers/toConsumableArray","loc":{"line":7,"column":34}},{"name":"babel-runtime/core-js/object/get-prototype-of","loc":{"line":11,"column":30}},{"name":"babel-runtime/helpers/classCallCheck","loc":{"line":15,"column":31}},{"name":"babel-runtime/helpers/createClass","loc":{"line":19,"column":28}},{"name":"babel-runtime/helpers/possibleConstructorReturn","loc":{"line":23,"column":42}},{"name":"babel-runtime/helpers/inherits","loc":{"line":27,"column":25}},{"name":"babel-runtime/helpers/toArray","loc":{"line":31,"column":24}},{"name":"simple-assign","loc":{"line":35,"column":28}},{"name":"react","loc":{"line":39,"column":21}},{"name":"prop-types","loc":{"line":43,"column":25}},{"name":"react-dom","loc":{"line":47,"column":24}},{"name":"react-transition-group/TransitionGroup","loc":{"line":51,"column":31}},{"name":"../utils/dom","loc":{"line":55,"column":19}},{"name":"./CircleRipple","loc":{"line":59,"column":28}}],"generated":{"js":"'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n\nvar _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');\n\nvar _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);\n\nvar _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');\n\nvar _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);\n\nvar _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');\n\nvar _classCallCheck3 = _interopRequireDefault(_classCallCheck2);\n\nvar _createClass2 = require('babel-runtime/helpers/createClass');\n\nvar _createClass3 = _interopRequireDefault(_createClass2);\n\nvar _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');\n\nvar _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);\n\nvar _inherits2 = require('babel-runtime/helpers/inherits');\n\nvar _inherits3 = _interopRequireDefault(_inherits2);\n\nvar _toArray2 = require('babel-runtime/helpers/toArray');\n\nvar _toArray3 = _interopRequireDefault(_toArray2);\n\nvar _simpleAssign = require('simple-assign');\n\nvar _simpleAssign2 = _interopRequireDefault(_simpleAssign);\n\nvar _react = require('react');\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _propTypes = require('prop-types');\n\nvar _propTypes2 = _interopRequireDefault(_propTypes);\n\nvar _reactDom = require('react-dom');\n\nvar _reactDom2 = _interopRequireDefault(_reactDom);\n\nvar _TransitionGroup = require('react-transition-group/TransitionGroup');\n\nvar _TransitionGroup2 = _interopRequireDefault(_TransitionGroup);\n\nvar _dom = require('../utils/dom');\n\nvar _dom2 = _interopRequireDefault(_dom);\n\nvar _CircleRipple = require('./CircleRipple');\n\nvar _CircleRipple2 = _interopRequireDefault(_CircleRipple);\n\nfunction _interopRequireDefault(obj) {\n  return obj && obj.__esModule ? obj : { default: obj };\n}\n\n// Remove the first element of the array\nvar shift = function shift(_ref) {\n  var _ref2 = (0, _toArray3.default)(_ref),\n      newArray = _ref2.slice(1);\n\n  return newArray;\n};\n\nvar TouchRipple = function (_Component) {\n  (0, _inherits3.default)(TouchRipple, _Component);\n\n  function TouchRipple(props, context) {\n    (0, _classCallCheck3.default)(this, TouchRipple);\n\n    // Touch start produces a mouse down event for compat reasons. To avoid\n    // showing ripples twice we skip showing a ripple for the first mouse down\n    // after a touch start. Note we don't store ignoreNextMouseDown in this.state\n    // to avoid re-rendering when we change it.\n    var _this = (0, _possibleConstructorReturn3.default)(this, (TouchRipple.__proto__ || (0, _getPrototypeOf2.default)(TouchRipple)).call(this, props, context));\n\n    _this.handleMouseDown = function (event) {\n      // only listen to left clicks\n      if (event.button === 0) {\n        _this.start(event, false);\n      }\n    };\n\n    _this.handleMouseUp = function () {\n      _this.end();\n    };\n\n    _this.handleMouseLeave = function () {\n      _this.end();\n    };\n\n    _this.handleTouchStart = function (event) {\n      event.stopPropagation();\n      // If the user is swiping (not just tapping), save the position so we can\n      // abort ripples if the user appears to be scrolling.\n      if (_this.props.abortOnScroll && event.touches) {\n        _this.startListeningForScrollAbort(event);\n        _this.startTime = Date.now();\n      }\n      _this.start(event, true);\n    };\n\n    _this.handleTouchEnd = function () {\n      _this.end();\n    };\n\n    _this.handleTouchMove = function (event) {\n      // Stop trying to abort if we're already 300ms into the animation\n      var timeSinceStart = Math.abs(Date.now() - _this.startTime);\n      if (timeSinceStart > 300) {\n        _this.stopListeningForScrollAbort();\n        return;\n      }\n\n      // If the user is scrolling...\n      var deltaY = Math.abs(event.touches[0].clientY - _this.firstTouchY);\n      var deltaX = Math.abs(event.touches[0].clientX - _this.firstTouchX);\n      // Call it a scroll after an arbitrary 6px (feels reasonable in testing)\n      if (deltaY > 6 || deltaX > 6) {\n        var currentRipples = _this.state.ripples;\n        var ripple = currentRipples[0];\n        // This clone will replace the ripple in ReactTransitionGroup with a\n        // version that will disappear immediately when removed from the DOM\n        var abortedRipple = _react2.default.cloneElement(ripple, { aborted: true });\n        // Remove the old ripple and replace it with the new updated one\n        currentRipples = shift(currentRipples);\n        currentRipples = [].concat((0, _toConsumableArray3.default)(currentRipples), [abortedRipple]);\n        _this.setState({ ripples: currentRipples }, function () {\n          // Call end after we've set the ripple to abort otherwise the setState\n          // in end() merges with this and the ripple abort fails\n          _this.end();\n        });\n      }\n    };\n\n    _this.ignoreNextMouseDown = false;\n\n    _this.state = {\n      // This prop allows us to only render the ReactTransitionGroup\n      // on the first click of the component, making the inital render faster.\n      hasRipples: false,\n      nextKey: 0,\n      ripples: []\n    };\n    return _this;\n  }\n\n  (0, _createClass3.default)(TouchRipple, [{\n    key: 'start',\n    value: function start(event, isRippleTouchGenerated) {\n      var theme = this.context.muiTheme.ripple;\n\n      if (this.ignoreNextMouseDown && !isRippleTouchGenerated) {\n        this.ignoreNextMouseDown = false;\n        return;\n      }\n\n      var ripples = this.state.ripples;\n\n      // Add a ripple to the ripples array\n      ripples = [].concat((0, _toConsumableArray3.default)(ripples), [_react2.default.createElement(_CircleRipple2.default, {\n        key: this.state.nextKey,\n        style: !this.props.centerRipple ? this.getRippleStyle(event) : {},\n        color: this.props.color || theme.color,\n        opacity: this.props.opacity,\n        touchGenerated: isRippleTouchGenerated\n      })]);\n\n      this.ignoreNextMouseDown = isRippleTouchGenerated;\n      this.setState({\n        hasRipples: true,\n        nextKey: this.state.nextKey + 1,\n        ripples: ripples\n      });\n    }\n  }, {\n    key: 'end',\n    value: function end() {\n      var currentRipples = this.state.ripples;\n      this.setState({\n        ripples: shift(currentRipples)\n      });\n      if (this.props.abortOnScroll) {\n        this.stopListeningForScrollAbort();\n      }\n    }\n\n    // Check if the user seems to be scrolling and abort the animation if so\n\n  }, {\n    key: 'startListeningForScrollAbort',\n    value: function startListeningForScrollAbort(event) {\n      this.firstTouchY = event.touches[0].clientY;\n      this.firstTouchX = event.touches[0].clientX;\n      // Note that when scolling Chrome throttles this event to every 200ms\n      // Also note we don't listen for scroll events directly as there's no general\n      // way to cover cases like scrolling within containers on the page\n      document.body.addEventListener('touchmove', this.handleTouchMove);\n    }\n  }, {\n    key: 'stopListeningForScrollAbort',\n    value: function stopListeningForScrollAbort() {\n      document.body.removeEventListener('touchmove', this.handleTouchMove);\n    }\n  }, {\n    key: 'getRippleStyle',\n    value: function getRippleStyle(event) {\n      var el = _reactDom2.default.findDOMNode(this);\n      var elHeight = el.offsetHeight;\n      var elWidth = el.offsetWidth;\n      var offset = _dom2.default.offset(el);\n      var isTouchEvent = event.touches && event.touches.length;\n      var pageX = isTouchEvent ? event.touches[0].pageX : event.pageX;\n      var pageY = isTouchEvent ? event.touches[0].pageY : event.pageY;\n      var pointerX = pageX - offset.left;\n      var pointerY = pageY - offset.top;\n      var topLeftDiag = this.calcDiag(pointerX, pointerY);\n      var topRightDiag = this.calcDiag(elWidth - pointerX, pointerY);\n      var botRightDiag = this.calcDiag(elWidth - pointerX, elHeight - pointerY);\n      var botLeftDiag = this.calcDiag(pointerX, elHeight - pointerY);\n      var rippleRadius = Math.max(topLeftDiag, topRightDiag, botRightDiag, botLeftDiag);\n      var rippleSize = rippleRadius * 2;\n      var left = pointerX - rippleRadius;\n      var top = pointerY - rippleRadius;\n\n      return {\n        directionInvariant: true,\n        height: rippleSize,\n        width: rippleSize,\n        top: top,\n        left: left\n      };\n    }\n  }, {\n    key: 'calcDiag',\n    value: function calcDiag(a, b) {\n      return Math.sqrt(a * a + b * b);\n    }\n  }, {\n    key: 'render',\n    value: function render() {\n      var _props = this.props,\n          children = _props.children,\n          style = _props.style;\n      var _state = this.state,\n          hasRipples = _state.hasRipples,\n          ripples = _state.ripples;\n      var prepareStyles = this.context.muiTheme.prepareStyles;\n\n      var rippleGroup = void 0;\n\n      if (hasRipples) {\n        var mergedStyles = (0, _simpleAssign2.default)({\n          height: '100%',\n          width: '100%',\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          overflow: 'hidden',\n          pointerEvents: 'none',\n          zIndex: 1 // This is also needed so that ripples do not bleed past a parent border radius.\n        }, style);\n\n        rippleGroup = _react2.default.createElement(_TransitionGroup2.default, { style: prepareStyles(mergedStyles) }, ripples);\n      }\n\n      return _react2.default.createElement('div', {\n        onMouseUp: this.handleMouseUp,\n        onMouseDown: this.handleMouseDown,\n        onMouseLeave: this.handleMouseLeave,\n        onTouchStart: this.handleTouchStart,\n        onTouchEnd: this.handleTouchEnd\n      }, rippleGroup, children);\n    }\n  }]);\n  return TouchRipple;\n}(_react.Component);\n\nTouchRipple.defaultProps = {\n  abortOnScroll: true\n};\nTouchRipple.contextTypes = {\n  muiTheme: _propTypes2.default.object.isRequired\n};\nTouchRipple.propTypes = \"development\" !== \"production\" ? {\n  abortOnScroll: _propTypes2.default.bool,\n  centerRipple: _propTypes2.default.bool,\n  children: _propTypes2.default.node,\n  color: _propTypes2.default.string,\n  opacity: _propTypes2.default.number,\n  style: _propTypes2.default.object\n} : {};\nexports.default = TouchRipple;"},"hash":"e989ccfac4ff9129be0c9d87b30d5d4b"}