@wix/design-system
Version:
@wix/design-system
37 lines • 1.47 kB
JavaScript
import React from 'react';
import { st, classes } from './BounceAnimation.st.css.js';
import Animate from '../Animate';
import { CHILD_SIZE, CHILD_WIDTH_RANGE } from './BounceAnimation.constants';
import { isValueInRange } from '../Animate/utils';
/** Bounce Animation*/
class BounceAnimation 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 } = this.props;
const { animationSize } = this.state;
return (React.createElement(Animate, { dataHook: dataHook, delay: delay, animateClasses: st(classes.root, { active, loop, size: animationSize }), onEnd: onEnd, onStart: onStart, ref: this.rootRef }, children));
}
}
Object.assign(BounceAnimation, {
displayName: 'Bounce',
defaultProps: {},
});
export default BounceAnimation;
//# sourceMappingURL=BounceAnimation.js.map