wix-style-react/dist/es/src/BounceAnimation/BounceAnimation.js

wix-style-react

import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/defineProperty";

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

import React from 'react';
import PropTypes from 'prop-types';
import { st, classes } from './BounceAnimation.st.css';
import Animate from '../Animate';
import { childSize, childWidthRange } from './constants';
import { isValueInRange } from '../Animate/utils';
/** Bounce Animation*/

var BounceAnimation = /*#__PURE__*/function (_React$PureComponent) {
  _inherits(BounceAnimation, _React$PureComponent);

  var _super = _createSuper(BounceAnimation);

  function BounceAnimation(props) {
    var _this;

    _classCallCheck(this, BounceAnimation);

    _this = _super.call(this, props);

    _defineProperty(_assertThisInitialized(_this), "_getAnimationSize", function () {
      var childWidth = _this.rootRef.current.offsetWidth;
      var _childWidthRange$medi = childWidthRange.medium,
          from = _childWidthRange$medi.from,
          to = _childWidthRange$medi.to;
      return isValueInRange(childWidth, from, to) ? childSize.medium : childSize.small;
    });

    _this.state = {
      animationSize: undefined
    };
    _this.rootRef = /*#__PURE__*/React.createRef();
    return _this;
  }

  _createClass(BounceAnimation, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var animationSize = this._getAnimationSize();

      this.setState({
        animationSize: animationSize
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props = this.props,
          dataHook = _this$props.dataHook,
          active = _this$props.active,
          onEnd = _this$props.onEnd,
          onStart = _this$props.onStart,
          loop = _this$props.loop,
          children = _this$props.children,
          delay = _this$props.delay;
      var animationSize = this.state.animationSize;
      return /*#__PURE__*/React.createElement(Animate, {
        dataHook: dataHook,
        delay: delay,
        animateClasses: st(classes.root, {
          active: active,
          loop: loop,
          size: animationSize
        }),
        onEnd: onEnd,
        onStart: onStart,
        ref: this.rootRef
      }, children);
    }
  }]);

  return BounceAnimation;
}(React.PureComponent);

BounceAnimation.displayName = 'Bounce';
BounceAnimation.propTypes = {
  /** Applied as data-hook HTML attribute that can be used in the tests */
  dataHook: PropTypes.string,

  /** The component which we would like to animate. */
  children: PropTypes.node.isRequired,

  /** Triggers the animation transition */
  active: PropTypes.bool,

  /** A callback fired immediately after the animation starts. */
  onStart: PropTypes.func,

  /** A callback fired immediately after the animation ends. */
  onEnd: PropTypes.func,

  /** when set to true, the child component animate repetitively until stopped by other event*/
  loop: PropTypes.bool,

  /** set a delay before the animation execution. When provided a number- sets this as `ms`.*/
  delay: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
};
BounceAnimation.defaultProps = {};
export default BounceAnimation;