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

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _BounceAnimationSt = require("./BounceAnimation.st.css");
var _Animate = _interopRequireDefault(require("../Animate"));
var _constants = require("./constants");
var _utils = require("../Animate/utils");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/BounceAnimation/BounceAnimation.js";
/** Bounce Animation*/
class BounceAnimation extends _react.default.PureComponent {
  constructor(props) {
    super(props);
    this._getAnimationSize = () => {
      var childWidth = this.rootRef.current.offsetWidth;
      var {
        from,
        to
      } = _constants.childWidthRange.medium;
      return (0, _utils.isValueInRange)(childWidth, from, to) ? _constants.childSize.medium : _constants.childSize.small;
    };
    this.state = {
      animationSize: undefined
    };
    this.rootRef = /*#__PURE__*/_react.default.createRef();
  }
  componentDidMount() {
    var animationSize = this._getAnimationSize();
    this.setState({
      animationSize
    });
  }
  render() {
    var {
      dataHook,
      active,
      onEnd,
      onStart,
      loop,
      children,
      delay
    } = this.props;
    var {
      animationSize
    } = this.state;
    return /*#__PURE__*/_react.default.createElement(_Animate.default, {
      dataHook: dataHook,
      delay: delay,
      animateClasses: (0, _BounceAnimationSt.st)(_BounceAnimationSt.classes.root, {
        active,
        loop,
        size: animationSize
      }),
      onEnd: onEnd,
      onStart: onStart,
      ref: this.rootRef,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 39,
        columnNumber: 7
      }
    }, children);
  }
}
BounceAnimation.displayName = 'Bounce';
BounceAnimation.propTypes = {
  /** Applied as data-hook HTML attribute that can be used in the tests */
  dataHook: _propTypes.default.string,
  /** The component which we would like to animate. */
  children: _propTypes.default.node.isRequired,
  /** Triggers the animation transition */
  active: _propTypes.default.bool,
  /** A callback fired immediately after the animation starts. */
  onStart: _propTypes.default.func,
  /** A callback fired immediately after the animation ends. */
  onEnd: _propTypes.default.func,
  /** when set to true, the child component animate repetitively until stopped by other event*/
  loop: _propTypes.default.bool,
  /** set a delay before the animation execution. When provided a number- sets this as `ms`.*/
  delay: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
};
BounceAnimation.defaultProps = {};
var _default = exports.default = BounceAnimation;
//# sourceMappingURL=BounceAnimation.js.map