@wix/design-system/dist/cjs/PulseAnimation/PulseAnimation.js

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _PulseAnimationSt = require("./PulseAnimation.st.css.js");
var _Animate = _interopRequireDefault(require("../Animate"));
var _PulseAnimation2 = require("./PulseAnimation.constants");
var _utils = require("../Animate/utils");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/PulseAnimation/PulseAnimation.tsx";
/** PulseAnimation*/
class PulseAnimation extends _react.default.PureComponent {
  constructor(props) {
    super(props);
    this.rootRef = /*#__PURE__*/_react.default.createRef();
    this._getAnimationSize = () => {
      var _this$rootRef$current, _this$rootRef$current2;
      var childWidth = (_this$rootRef$current = (_this$rootRef$current2 = this.rootRef.current) == null ? void 0 : _this$rootRef$current2.offsetWidth) !== null && _this$rootRef$current !== void 0 ? _this$rootRef$current : 0;
      var {
        from,
        to
      } = _PulseAnimation2.CHILD_WIDTH_RANGE.medium;
      return (0, _utils.isValueInRange)(childWidth, from, to) ? _PulseAnimation2.CHILD_SIZE.medium : _PulseAnimation2.CHILD_SIZE.small;
    };
    this.state = {
      animationSize: undefined
    };
  }
  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: 65,
        columnNumber: 7
      }
    }, children);
  }
}
PulseAnimation.displayName = 'PulseAnimation';
PulseAnimation.defaultProps = {
  loop: true,
  fluid: false
};
var _default = exports.default = PulseAnimation;
//# sourceMappingURL=PulseAnimation.js.map