162 lines
		
	
	
		
			5.1 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			162 lines
		
	
	
		
			5.1 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
'use strict';
 | 
						|
 | 
						|
Object.defineProperty(exports, "__esModule", {
 | 
						|
  value: true
 | 
						|
});
 | 
						|
 | 
						|
var _extends2 = require('babel-runtime/helpers/extends');
 | 
						|
 | 
						|
var _extends3 = _interopRequireDefault(_extends2);
 | 
						|
 | 
						|
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
 | 
						|
 | 
						|
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
 | 
						|
 | 
						|
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
 | 
						|
 | 
						|
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
 | 
						|
 | 
						|
var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
 | 
						|
 | 
						|
var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
 | 
						|
 | 
						|
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
 | 
						|
 | 
						|
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
 | 
						|
 | 
						|
var _createClass2 = require('babel-runtime/helpers/createClass');
 | 
						|
 | 
						|
var _createClass3 = _interopRequireDefault(_createClass2);
 | 
						|
 | 
						|
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
 | 
						|
 | 
						|
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
 | 
						|
 | 
						|
var _inherits2 = require('babel-runtime/helpers/inherits');
 | 
						|
 | 
						|
var _inherits3 = _interopRequireDefault(_inherits2);
 | 
						|
 | 
						|
var _react = require('react');
 | 
						|
 | 
						|
var _react2 = _interopRequireDefault(_react);
 | 
						|
 | 
						|
var _propTypes = require('prop-types');
 | 
						|
 | 
						|
var _propTypes2 = _interopRequireDefault(_propTypes);
 | 
						|
 | 
						|
var _classnames = require('classnames');
 | 
						|
 | 
						|
var _classnames2 = _interopRequireDefault(_classnames);
 | 
						|
 | 
						|
var _Transition = require('react-transition-group/Transition');
 | 
						|
 | 
						|
var _Transition2 = _interopRequireDefault(_Transition);
 | 
						|
 | 
						|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 | 
						|
 | 
						|
/**
 | 
						|
 * @ignore - internal component.
 | 
						|
 */
 | 
						|
var Ripple = function (_React$Component) {
 | 
						|
  (0, _inherits3.default)(Ripple, _React$Component);
 | 
						|
 | 
						|
  function Ripple() {
 | 
						|
    var _ref;
 | 
						|
 | 
						|
    var _temp, _this, _ret;
 | 
						|
 | 
						|
    (0, _classCallCheck3.default)(this, Ripple);
 | 
						|
 | 
						|
    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
 | 
						|
      args[_key] = arguments[_key];
 | 
						|
    }
 | 
						|
 | 
						|
    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = Ripple.__proto__ || (0, _getPrototypeOf2.default)(Ripple)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
 | 
						|
      rippleVisible: false,
 | 
						|
      rippleLeaving: false
 | 
						|
    }, _this.handleEnter = function () {
 | 
						|
      _this.setState({
 | 
						|
        rippleVisible: true
 | 
						|
      });
 | 
						|
    }, _this.handleExit = function () {
 | 
						|
      _this.setState({
 | 
						|
        rippleLeaving: true
 | 
						|
      });
 | 
						|
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
 | 
						|
  }
 | 
						|
 | 
						|
  (0, _createClass3.default)(Ripple, [{
 | 
						|
    key: 'render',
 | 
						|
    value: function render() {
 | 
						|
      var _classNames, _classNames2;
 | 
						|
 | 
						|
      var _props = this.props,
 | 
						|
          classes = _props.classes,
 | 
						|
          classNameProp = _props.className,
 | 
						|
          pulsate = _props.pulsate,
 | 
						|
          rippleX = _props.rippleX,
 | 
						|
          rippleY = _props.rippleY,
 | 
						|
          rippleSize = _props.rippleSize,
 | 
						|
          other = (0, _objectWithoutProperties3.default)(_props, ['classes', 'className', 'pulsate', 'rippleX', 'rippleY', 'rippleSize']);
 | 
						|
      var _state = this.state,
 | 
						|
          rippleVisible = _state.rippleVisible,
 | 
						|
          rippleLeaving = _state.rippleLeaving;
 | 
						|
 | 
						|
 | 
						|
      var className = (0, _classnames2.default)(classes.wrapper, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.wrapperLeaving, rippleLeaving), (0, _defineProperty3.default)(_classNames, classes.wrapperPulsating, pulsate), _classNames), classNameProp);
 | 
						|
 | 
						|
      var rippleClassName = (0, _classnames2.default)(classes.ripple, (_classNames2 = {}, (0, _defineProperty3.default)(_classNames2, classes.rippleVisible, rippleVisible), (0, _defineProperty3.default)(_classNames2, classes.rippleFast, pulsate), _classNames2));
 | 
						|
 | 
						|
      var rippleStyles = {
 | 
						|
        width: rippleSize,
 | 
						|
        height: rippleSize,
 | 
						|
        top: -(rippleSize / 2) + rippleY,
 | 
						|
        left: -(rippleSize / 2) + rippleX
 | 
						|
      };
 | 
						|
 | 
						|
      return _react2.default.createElement(
 | 
						|
        _Transition2.default,
 | 
						|
        (0, _extends3.default)({ onEnter: this.handleEnter, onExit: this.handleExit }, other),
 | 
						|
        _react2.default.createElement(
 | 
						|
          'span',
 | 
						|
          { className: className },
 | 
						|
          _react2.default.createElement('span', { className: rippleClassName, style: rippleStyles })
 | 
						|
        )
 | 
						|
      );
 | 
						|
    }
 | 
						|
  }]);
 | 
						|
  return Ripple;
 | 
						|
}(_react2.default.Component);
 | 
						|
 | 
						|
Ripple.propTypes = process.env.NODE_ENV !== "production" ? {
 | 
						|
  /**
 | 
						|
   * Useful to extend the style applied to components.
 | 
						|
   */
 | 
						|
  classes: _propTypes2.default.object.isRequired,
 | 
						|
  /**
 | 
						|
   * @ignore
 | 
						|
   */
 | 
						|
  className: _propTypes2.default.string,
 | 
						|
  /**
 | 
						|
   * If `true`, the ripple pulsates, typically indicating the keyboard focus state of an element.
 | 
						|
   */
 | 
						|
  pulsate: _propTypes2.default.bool,
 | 
						|
  /**
 | 
						|
   * Diameter of the ripple.
 | 
						|
   */
 | 
						|
  rippleSize: _propTypes2.default.number,
 | 
						|
  /**
 | 
						|
   * Horizontal position of the ripple center.
 | 
						|
   */
 | 
						|
  rippleX: _propTypes2.default.number,
 | 
						|
  /**
 | 
						|
   * Vertical position of the ripple center.
 | 
						|
   */
 | 
						|
  rippleY: _propTypes2.default.number
 | 
						|
} : {};
 | 
						|
 | 
						|
Ripple.defaultProps = {
 | 
						|
  pulsate: false
 | 
						|
};
 | 
						|
 | 
						|
exports.default = Ripple; |