You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

172 lines
5.4 KiB

  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. var _extends2 = require('babel-runtime/helpers/extends');
  6. var _extends3 = _interopRequireDefault(_extends2);
  7. var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
  8. var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
  9. var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
  10. var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
  11. var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
  12. var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
  13. var _createClass2 = require('babel-runtime/helpers/createClass');
  14. var _createClass3 = _interopRequireDefault(_createClass2);
  15. var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
  16. var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
  17. var _inherits2 = require('babel-runtime/helpers/inherits');
  18. var _inherits3 = _interopRequireDefault(_inherits2);
  19. var _simpleAssign = require('simple-assign');
  20. var _simpleAssign2 = _interopRequireDefault(_simpleAssign);
  21. var _react = require('react');
  22. var _react2 = _interopRequireDefault(_react);
  23. var _propTypes = require('prop-types');
  24. var _propTypes2 = _interopRequireDefault(_propTypes);
  25. var _reactDom = require('react-dom');
  26. var _reactDom2 = _interopRequireDefault(_reactDom);
  27. var _shallowEqual = require('recompose/shallowEqual');
  28. var _shallowEqual2 = _interopRequireDefault(_shallowEqual);
  29. var _autoPrefix = require('../utils/autoPrefix');
  30. var _autoPrefix2 = _interopRequireDefault(_autoPrefix);
  31. var _transitions = require('../styles/transitions');
  32. var _transitions2 = _interopRequireDefault(_transitions);
  33. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  34. var CircleRipple = function (_Component) {
  35. (0, _inherits3.default)(CircleRipple, _Component);
  36. function CircleRipple() {
  37. (0, _classCallCheck3.default)(this, CircleRipple);
  38. return (0, _possibleConstructorReturn3.default)(this, (CircleRipple.__proto__ || (0, _getPrototypeOf2.default)(CircleRipple)).apply(this, arguments));
  39. }
  40. (0, _createClass3.default)(CircleRipple, [{
  41. key: 'shouldComponentUpdate',
  42. value: function shouldComponentUpdate(nextProps) {
  43. return !(0, _shallowEqual2.default)(this.props, nextProps);
  44. }
  45. }, {
  46. key: 'componentWillUnmount',
  47. value: function componentWillUnmount() {
  48. clearTimeout(this.enterTimer);
  49. clearTimeout(this.leaveTimer);
  50. }
  51. }, {
  52. key: 'componentWillAppear',
  53. value: function componentWillAppear(callback) {
  54. this.initializeAnimation(callback);
  55. }
  56. }, {
  57. key: 'componentWillEnter',
  58. value: function componentWillEnter(callback) {
  59. this.initializeAnimation(callback);
  60. }
  61. }, {
  62. key: 'componentDidAppear',
  63. value: function componentDidAppear() {
  64. this.animate();
  65. }
  66. }, {
  67. key: 'componentDidEnter',
  68. value: function componentDidEnter() {
  69. this.animate();
  70. }
  71. }, {
  72. key: 'componentWillLeave',
  73. value: function componentWillLeave(callback) {
  74. var style = _reactDom2.default.findDOMNode(this).style;
  75. style.opacity = 0;
  76. // If the animation is aborted, remove from the DOM immediately
  77. var removeAfter = this.props.aborted ? 0 : 2000;
  78. this.enterTimer = setTimeout(callback, removeAfter);
  79. }
  80. }, {
  81. key: 'animate',
  82. value: function animate() {
  83. var style = _reactDom2.default.findDOMNode(this).style;
  84. var transitionValue = _transitions2.default.easeOut('2s', 'opacity') + ', ' + _transitions2.default.easeOut('1s', 'transform');
  85. _autoPrefix2.default.set(style, 'transition', transitionValue);
  86. _autoPrefix2.default.set(style, 'transform', 'scale(1)');
  87. }
  88. }, {
  89. key: 'initializeAnimation',
  90. value: function initializeAnimation(callback) {
  91. var style = _reactDom2.default.findDOMNode(this).style;
  92. style.opacity = this.props.opacity;
  93. _autoPrefix2.default.set(style, 'transform', 'scale(0)');
  94. this.leaveTimer = setTimeout(callback, 0);
  95. }
  96. }, {
  97. key: 'render',
  98. value: function render() {
  99. var _props = this.props,
  100. aborted = _props.aborted,
  101. color = _props.color,
  102. opacity = _props.opacity,
  103. style = _props.style,
  104. touchGenerated = _props.touchGenerated,
  105. other = (0, _objectWithoutProperties3.default)(_props, ['aborted', 'color', 'opacity', 'style', 'touchGenerated']);
  106. var prepareStyles = this.context.muiTheme.prepareStyles;
  107. var mergedStyles = (0, _simpleAssign2.default)({
  108. position: 'absolute',
  109. top: 0,
  110. left: 0,
  111. height: '100%',
  112. width: '100%',
  113. borderRadius: '50%',
  114. backgroundColor: color
  115. }, style);
  116. return _react2.default.createElement('div', (0, _extends3.default)({}, other, { style: prepareStyles(mergedStyles) }));
  117. }
  118. }]);
  119. return CircleRipple;
  120. }(_react.Component);
  121. CircleRipple.defaultProps = {
  122. opacity: 0.1,
  123. aborted: false
  124. };
  125. CircleRipple.contextTypes = {
  126. muiTheme: _propTypes2.default.object.isRequired
  127. };
  128. CircleRipple.propTypes = process.env.NODE_ENV !== "production" ? {
  129. aborted: _propTypes2.default.bool,
  130. color: _propTypes2.default.string,
  131. opacity: _propTypes2.default.number,
  132. style: _propTypes2.default.object,
  133. touchGenerated: _propTypes2.default.bool
  134. } : {};
  135. exports.default = CircleRipple;