wix-style-react/dist/src/PulseAnimation/PulseAnimation.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 _PulseAnimationSt = require("./PulseAnimation.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/PulseAnimation/PulseAnimation.js";
/** PulseAnimation*/
class PulseAnimation 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,
      color,
      borderRadius,
      fluid
    } = this.props;
    var {
      animationSize
    } = this.state;
    return /*#__PURE__*/_react.default.createElement(_Animate.default, {
      dataHook: dataHook,
      animateClasses: (0, _PulseAnimationSt.st)(_PulseAnimationSt.classes.root, {
        active,
        loop,
        size: animationSize,
        fluid,
        color
      }),
      animateInlineStyle: {
        borderRadius
      },
      onEnd: onEnd,
      onStart: onStart,
      delay: delay,
      ref: this.rootRef,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 49,
        columnNumber: 7
      }
    }, children);
  }
}
PulseAnimation.displayName = 'PulseAnimation';
PulseAnimation.propTypes = {
  /** Applied as data-hook HTML attribute that can be used in the tests */
  dataHook: _propTypes.default.string,
  /** Node to animate (one child node) */
  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]),
  /** The color of the animation */
  color: _propTypes.default.oneOf(['B10', 'R10', 'P10', 'G10']).isRequired,
  /** Sets the border-radius css property of the animation */
  borderRadius: _propTypes.default.string,
  /** Changes fluidity from fit-content to 100% and allows children to stretch to its parent container width */
  fluid: _propTypes.default.bool
};
PulseAnimation.defaultProps = {
  loop: true,
  fluid: false
};
var _default = exports.default = PulseAnimation;
//# sourceMappingURL=PulseAnimation.js.map