dndbeyond_src/ddb_main/node_modules/@serprex/react-motion/lib/Motion.js

"use strict";

exports.__esModule = true;
exports["default"] = void 0;

var _mapToZero = _interopRequireDefault(require("./mapToZero"));

var _stripStyle = _interopRequireDefault(require("./stripStyle"));

var _stepper3 = _interopRequireDefault(require("./stepper"));

var _performanceNow = _interopRequireDefault(require("performance-now"));

var _raf = _interopRequireDefault(require("raf"));

var _shouldStopAnimation = _interopRequireDefault(require("./shouldStopAnimation"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

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

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

var msPerFrame = 1000 / 60;

var Motion = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(Motion, _React$Component);

  function Motion(props) {
    var _this;

    _this = _React$Component.call(this, props) || this;
    _this.unmounting = false;
    _this.wasAnimating = false;
    _this.animationID = null;
    _this.prevTime = 0;
    _this.accumulatedTime = 0;
    _this.unreadPropStyle = null;

    _this.clearUnreadPropStyle = function (destStyle) {
      var dirty = false;
      var _this$state = _this.state,
          currentStyle = _this$state.currentStyle,
          currentVelocity = _this$state.currentVelocity,
          lastIdealStyle = _this$state.lastIdealStyle,
          lastIdealVelocity = _this$state.lastIdealVelocity;

      for (var key in destStyle) {
        if (!Object.prototype.hasOwnProperty.call(destStyle, key)) {
          continue;
        }

        var styleValue = destStyle[key];

        if (typeof styleValue === 'number') {
          if (!dirty) {
            dirty = true;
            currentStyle = _extends({}, currentStyle);
            currentVelocity = _extends({}, currentVelocity);
            lastIdealStyle = _extends({}, lastIdealStyle);
            lastIdealVelocity = _extends({}, lastIdealVelocity);
          }

          currentStyle[key] = styleValue;
          currentVelocity[key] = 0;
          lastIdealStyle[key] = styleValue;
          lastIdealVelocity[key] = 0;
        }
      }

      if (dirty) {
        _this.setState({
          currentStyle: currentStyle,
          currentVelocity: currentVelocity,
          lastIdealStyle: lastIdealStyle,
          lastIdealVelocity: lastIdealVelocity
        });
      }
    };

    _this.startAnimationIfNecessary = function () {
      if (_this.unmounting || _this.animationID != null) {
        return;
      } // TODO: when config is {a: 10} and dest is {a: 10} do we raf once and
      // call cb? No, otherwise accidental parent rerender causes cb trigger


      _this.animationID = (0, _raf["default"])(function (timestamp) {
        // https://github.com/chenglou/react-motion/pull/420
        // > if execution passes the conditional if (this.unmounting), then
        // executes async defaultRaf and after that component unmounts and after
        // that the callback of defaultRaf is called, then setState will be called
        // on unmounted component.
        if (_this.unmounting) {
          return;
        } // check if we need to animate in the first place


        var propsStyle = _this.props.style;

        if ((0, _shouldStopAnimation["default"])(_this.state.currentStyle, propsStyle, _this.state.currentVelocity)) {
          if (_this.wasAnimating && _this.props.onRest) {
            _this.props.onRest();
          } // no need to cancel animationID here; shouldn't have any in flight


          _this.animationID = null;
          _this.wasAnimating = false;
          _this.accumulatedTime = 0;
          return;
        }

        _this.wasAnimating = true;
        var currentTime = timestamp || (0, _performanceNow["default"])();
        var timeDelta = currentTime - _this.prevTime;
        _this.prevTime = currentTime;
        _this.accumulatedTime = _this.accumulatedTime + timeDelta; // more than 10 frames? prolly switched browser tab. Restart

        if (_this.accumulatedTime > msPerFrame * 10) {
          _this.accumulatedTime = 0;
        }

        if (_this.accumulatedTime === 0) {
          // no need to cancel animationID here; shouldn't have any in flight
          _this.animationID = null;

          _this.startAnimationIfNecessary();

          return;
        }

        var currentFrameCompletion = (_this.accumulatedTime - Math.floor(_this.accumulatedTime / msPerFrame) * msPerFrame) / msPerFrame;
        var framesToCatchUp = Math.floor(_this.accumulatedTime / msPerFrame);
        var newLastIdealStyle = {};
        var newLastIdealVelocity = {};
        var newCurrentStyle = {};
        var newCurrentVelocity = {};

        for (var key in propsStyle) {
          if (!Object.prototype.hasOwnProperty.call(propsStyle, key)) {
            continue;
          }

          var styleValue = propsStyle[key];

          if (typeof styleValue === 'number') {
            newCurrentStyle[key] = styleValue;
            newCurrentVelocity[key] = 0;
            newLastIdealStyle[key] = styleValue;
            newLastIdealVelocity[key] = 0;
          } else {
            var newLastIdealStyleValue = _this.state.lastIdealStyle[key];
            var newLastIdealVelocityValue = _this.state.lastIdealVelocity[key];

            for (var i = 0; i < framesToCatchUp; i++) {
              var _stepper = (0, _stepper3["default"])(msPerFrame / 1000, newLastIdealStyleValue, newLastIdealVelocityValue, styleValue.val, styleValue.stiffness, styleValue.damping, styleValue.precision);

              newLastIdealStyleValue = _stepper[0];
              newLastIdealVelocityValue = _stepper[1];
            }

            var _stepper2 = (0, _stepper3["default"])(msPerFrame / 1000, newLastIdealStyleValue, newLastIdealVelocityValue, styleValue.val, styleValue.stiffness, styleValue.damping, styleValue.precision),
                nextIdealX = _stepper2[0],
                nextIdealV = _stepper2[1];

            newCurrentStyle[key] = newLastIdealStyleValue + (nextIdealX - newLastIdealStyleValue) * currentFrameCompletion;
            newCurrentVelocity[key] = newLastIdealVelocityValue + (nextIdealV - newLastIdealVelocityValue) * currentFrameCompletion;
            newLastIdealStyle[key] = newLastIdealStyleValue;
            newLastIdealVelocity[key] = newLastIdealVelocityValue;
          }
        }

        _this.animationID = null; // the amount we're looped over above

        _this.accumulatedTime -= framesToCatchUp * msPerFrame;

        _this.setState({
          currentStyle: newCurrentStyle,
          currentVelocity: newCurrentVelocity,
          lastIdealStyle: newLastIdealStyle,
          lastIdealVelocity: newLastIdealVelocity
        });

        _this.unreadPropStyle = null;

        _this.startAnimationIfNecessary();
      });
    };

    _this.state = _this.defaultState();
    return _this;
  }

  var _proto = Motion.prototype;

  _proto.defaultState = function defaultState() {
    var _this$props = this.props,
        defaultStyle = _this$props.defaultStyle,
        style = _this$props.style;
    var currentStyle = defaultStyle || (0, _stripStyle["default"])(style);
    var currentVelocity = (0, _mapToZero["default"])(currentStyle);
    return {
      currentStyle: currentStyle,
      currentVelocity: currentVelocity,
      lastIdealStyle: currentStyle,
      lastIdealVelocity: currentVelocity
    };
  } // it's possible that currentStyle's value is stale: if props is immediately
  // changed from 0 to 400 to spring(0) again, the async currentStyle is still
  // at 0 (didn't have time to tick and interpolate even once). If we naively
  // compare currentStyle with destVal it'll be 0 === 0 (no animation, stop).
  // In reality currentStyle should be 400
  ;

  _proto.componentDidMount = function componentDidMount() {
    this.prevTime = (0, _performanceNow["default"])();
    this.startAnimationIfNecessary();
  };

  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(props) {
    if (this.unreadPropStyle != null) {
      // previous props haven't had the chance to be set yet; set them here
      this.clearUnreadPropStyle(this.unreadPropStyle);
    }

    this.unreadPropStyle = props.style;

    if (this.animationID == null) {
      this.prevTime = (0, _performanceNow["default"])();
      this.startAnimationIfNecessary();
    }
  };

  _proto.componentWillUnmount = function componentWillUnmount() {
    this.unmounting = true;

    if (this.animationID != null) {
      _raf["default"].cancel(this.animationID);

      this.animationID = null;
    }
  };

  _proto.render = function render() {
    var renderedChildren = this.props.children(this.state.currentStyle);
    return renderedChildren && _react["default"].Children.only(renderedChildren);
  };

  return Motion;
}(_react["default"].Component);

exports["default"] = Motion;
process.env.NODE_ENV !== "production" ? Motion.propTypes = {
  // TOOD: warn against putting a config in here
  defaultStyle: _propTypes["default"].objectOf(_propTypes["default"].number),
  style: _propTypes["default"].objectOf(_propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].object])).isRequired,
  children: _propTypes["default"].func.isRequired,
  onRest: _propTypes["default"].func
} : void 0;