zrmc/animations/ripple.js

ZRMC is an ES7 React wrapper for Material Components Web.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = undefined;

var _objectWithoutProperties2 = require("babel-runtime/helpers/objectWithoutProperties");

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

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);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/**
 * mdc-ripple-surface
 * See:
 * https://material.io/develop/web/components/ripples/
 * https://github.com/material-components/material-components-web/blob/master/packages/mdc-ripple/foundation.js
 *
 */

/**
 * Copyright (c) 2015-present, CWB SAS
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
var FG_ACTIVATION = "mdc-ripple-upgraded--foreground-activation";
var FG_DEACTIVATION = "mdc-ripple-upgraded--foreground-deactivation";
var BG_FOCUSED = "mdc-ripple-upgraded--background-focused";
var VAR_LEFT = "--mdc-ripple-left";
var VAR_TOP = "--mdc-ripple-top";
var VAR_FG_SIZE = "--mdc-ripple-fg-size";
var VAR_FG_SCALE = "--mdc-ripple-fg-scale";
var VAR_FG_TRANSLATE_START = "--mdc-ripple-fg-translate-start";
var VAR_FG_TRANSLATE_END = "--mdc-ripple-fg-translate-end";
var DEACTIVATION_TIMEOUT_MS = 225;
var FG_DEACTIVATION_MS = 150;
var PADDING = 10;
var INITIAL_ORIGIN_SCALE = 0.6;

var Ripple = function (_Component) {
  (0, _inherits3.default)(Ripple, _Component);

  function Ripple(props) {
    (0, _classCallCheck3.default)(this, Ripple);

    var _this = (0, _possibleConstructorReturn3.default)(this, (Ripple.__proto__ || Object.getPrototypeOf(Ripple)).call(this, props));

    _this.onBlur = function (event, previousOnBlur) {
      _this.setState({ focused: false });
      if (previousOnBlur) {
        previousOnBlur(event);
      }
    };

    _this.onFocus = function (event, previousOnFocus) {
      _this.setState({ focused: true });
      if (previousOnFocus) {
        previousOnFocus(event);
      }
    };

    _this.setRef = function (ref, previous) {
      _this.ref = ref;
      if (previous.ref) {
        previous.ref(ref);
      }
    };

    _this.handleActivate = function (event, previousActivation) {
      _this.activate();
      if (previousActivation) {
        previousActivation(event);
      }
    };

    _this.handleDeactivate = function (event, previousDeactivation) {
      _this.deactivate();
      if (previousDeactivation) {
        previousDeactivation(event);
      }
    };

    _this.state = { focused: false, isActivated: false };

    _this.layoutFrame = 0;
    _this.frame = { width: 0, height: 0 };
    _this.initialSize = 0;
    _this.maxRadius = 0;
    _this.unboundedCoords = {
      left: 0,
      top: 0
    };
    _this.fgScale = 0;
    _this.activationTimer = 0;
    _this.fgDeactivationRemovalTimer = 0;
    _this.ref = null;
    return _this;
  }

  (0, _createClass3.default)(Ripple, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.layout();
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      this.layout();
    }
  }, {
    key: "getFgTranslationCoordinates",
    value: function getFgTranslationCoordinates() {
      // Center the element around the start point.
      var startPoint = {
        x: (this.frame.width - this.initialSize) / 2,
        y: (this.frame.height - this.initialSize) / 2
      };

      var endPoint = {
        x: (this.frame.width - this.initialSize) / 2,
        y: (this.frame.height - this.initialSize) / 2
      };

      return { startPoint: startPoint, endPoint: endPoint };
    }
  }, {
    key: "rmBoundedActivationClasses",
    value: function rmBoundedActivationClasses() {
      this.ref.classList.remove(FG_ACTIVATION);
      this.activationAnimationHasEnded = false;
    }
  }, {
    key: "deactivate",
    value: function deactivate() {
      var _this2 = this;

      if (this.state.isActivated) {
        this.setState({ isActivated: false }, function () {
          _this2.animateDeactivation();
        });
      }
    }
  }, {
    key: "activate",
    value: function activate() {
      var _this3 = this;

      if (this.state.isActivated) {
        // Stop previous action
        this.stopActivation();
      }
      this.setState({ isActivated: true }, function () {
        _this3.animateActivation();
      });
    }
  }, {
    key: "stopActivation",
    value: function stopActivation() {
      clearTimeout(this.activationTimer);
      clearTimeout(this.fgDeactivationRemovalTimer);
      this.activationTimer = null;
      this.fgDeactivationRemovalTimer = null;
      if (this.ref) {
        this.rmBoundedActivationClasses();
        this.ref.classList.remove(FG_DEACTIVATION);
      }
    }
  }, {
    key: "animateDeactivation",
    value: function animateDeactivation() {
      var _this4 = this;

      var isActivated = this.state.isActivated.isActivated;

      var activationHasEnded = !isActivated;

      if (activationHasEnded && this.activationAnimationHasEnded && this.ref) {
        this.rmBoundedActivationClasses();
        this.ref.classList.add(FG_DEACTIVATION);
        this.fgDeactivationRemovalTimer = setTimeout(function () {
          _this4.ref.classList.remove(FG_DEACTIVATION);
        }, FG_DEACTIVATION_MS);
      }
    }
  }, {
    key: "animateActivation",
    value: function animateActivation() {
      var _this5 = this;

      if (this.state.isActivated && this.ref) {
        var translateStart = "";
        var translateEnd = "";

        if (!this.props.unbounded) {
          var _getFgTranslationCoor = this.getFgTranslationCoordinates(),
              startPoint = _getFgTranslationCoor.startPoint,
              endPoint = _getFgTranslationCoor.endPoint;

          translateStart = startPoint.x + "px, " + startPoint.y + "px";
          translateEnd = endPoint.x + "px, " + endPoint.y + "px";
        }
        this.ref.style.setProperty(VAR_FG_TRANSLATE_START, translateStart);
        this.ref.style.setProperty(VAR_FG_TRANSLATE_END, translateEnd);
        this.ref.classList.add(FG_ACTIVATION);
        this.activationTimer = setTimeout(function () {
          _this5.activationAnimationHasEnded = true;
          _this5.animateDeactivation();
        }, DEACTIVATION_TIMEOUT_MS);
      }
    }
  }, {
    key: "layout",
    value: function layout() {
      if (this.ref) {
        this.frame = this.ref.getBoundingClientRect();
        var maxDim = Math.max(this.frame.height, this.frame.width);

        if (this.props.unbounded) {
          var hypotenuse = Math.sqrt(Math.pow(this.frame.width, 2) + Math.pow(this.frame.height, 2));
          this.maxRadius = hypotenuse + PADDING;
        } else {
          this.maxRadius = maxDim;
        }
        this.initialSize = maxDim * INITIAL_ORIGIN_SCALE;
        this.fgScale = this.maxRadius / this.initialSize;
        this.updateLayoutCssVars();
      }
    }
  }, {
    key: "updateLayoutCssVars",
    value: function updateLayoutCssVars() {
      this.ref.style.setProperty(VAR_FG_SIZE, this.initialSize + "px");
      this.ref.style.setProperty(VAR_FG_SCALE, this.fgScale);

      if (this.props.unbounded) {
        this.unboundedCoords = {
          left: Math.round(this.frame.width / 2 - this.initialSize / 2),
          top: Math.round(this.frame.height / 2 - this.initialSize / 2)
        };

        this.ref.style.setProperty(VAR_LEFT, this.unboundedCoords.left + "px");
        this.ref.style.setProperty(VAR_TOP, this.unboundedCoords.top + "px");
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this6 = this;

      var _props = this.props,
          unbounded = _props.unbounded,
          children = _props.children;
      var props = (0, _objectWithoutProperties3.default)(children.props, []);

      if (props.className) {
        props.className += " mdc-ripple-surface";
      } else {
        props.className = "mdc-ripple-surface";
      }
      props.className += " mdc-ripple-upgraded";
      if (unbounded) {
        props.className += " mdc-ripple-upgraded--unbounded";
        props["data-mdc-ripple-is-unbounded"] = true;
      }
      if (this.state.focused) {
        props.className += " " + BG_FOCUSED;
      }
      props.ref = function (c) {
        _this6.setRef(c, children);
      };
      props.onTouchStart = function (e) {
        _this6.handleActivate(e, children.props.onTouchStart);
      };
      /* props.onPointerDown = (e) => { this.handleActivation(e, children.props.onPointerDown); }; */
      props.onMouseDown = function (e) {
        _this6.handleActivate(e, children.props.onMouseDown);
      };
      props.onKeyDown = function (e) {
        _this6.handleActivate(e, children.props.onKeyDown);
      };
      props.onTouchEnd = function (e) {
        _this6.handleDeactivate(e, children.props.onTouchEnd);
      };
      /* props.onPointerUp = (e) => { this.handleDeactivate(e, children.props.onPointerUp); }; */
      props.onMouseUp = function (e) {
        _this6.handleDeactivate(e, children.props.onMouseUp);
      };
      props.onKeyUp = function (e) {
        _this6.handleDeactivate(e, children.props.onKeyUp);
      };
      props.onBlur = function (e) {
        _this6.onBlur(e, children.props.onBlur);
      };
      props.onFocus = function (e) {
        _this6.onFocus(e, children.props.onFocus);
      };
      return _react2.default.cloneElement(children, props);
    }
  }]);
  return Ripple;
}(_react.Component);

exports.default = Ripple;


Ripple.defaultProps = {
  unbounded: false
};

Ripple.propTypes = {
  unbounded: _propTypes2.default.bool,
  children: _propTypes2.default.element.isRequired
};