UNPKG

@wix/design-system

Version:

@wix/design-system

37 lines 1.47 kB
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