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

@wix/design-system

import React from 'react';
import { st, classes } from './PulseAnimation.st.css.js';
import Animate from '../Animate';
import { CHILD_SIZE, CHILD_WIDTH_RANGE } from './PulseAnimation.constants';
import { isValueInRange } from '../Animate/utils';
/** PulseAnimation*/
class PulseAnimation extends React.PureComponent {
    constructor(props) {
        super(props);
        this.rootRef = React.createRef();
        this._getAnimationSize = () => {
            const childWidth = this.rootRef.current?.offsetWidth ?? 0;
            const { from, to } = CHILD_WIDTH_RANGE.medium;
            return isValueInRange(childWidth, from, to)
                ? CHILD_SIZE.medium
                : CHILD_SIZE.small;
        };
        this.state = {
            animationSize: undefined,
        };
    }
    componentDidMount() {
        const animationSize = this._getAnimationSize();
        this.setState({ animationSize });
    }
    render() {
        const { dataHook, active, onEnd, onStart, loop, children, delay, color, borderRadius, fluid, } = this.props;
        const { animationSize } = this.state;
        return (React.createElement(Animate, { dataHook: dataHook, animateClasses: st(classes.root, {
                active,
                loop,
                size: animationSize,
                fluid,
                color,
            }), animateInlineStyle: { borderRadius }, onEnd: onEnd, onStart: onStart, delay: delay, ref: this.rootRef }, children));
    }
}
PulseAnimation.displayName = 'PulseAnimation';
PulseAnimation.defaultProps = {
    loop: true,
    fluid: false,
};
export default PulseAnimation;
//# sourceMappingURL=PulseAnimation.js.map