@razorpay/blade
Version:
The Design System that powers Razorpay
67 lines (64 loc) • 1.99 kB
JavaScript
import { useState, useRef, useEffect } from 'react';
import { noop } from '../util/DataUtils.js';
import { resolveDefaultProps } from '../util/resolveDefaultProps.js';
import configUpdate from './configUpdate.js';
import { configEasing } from './easing.js';
import { useAnimationManager } from './useAnimationManager.js';
import { Global } from '../util/Global.js';
var defaultJavascriptAnimateProps = {
begin: 0,
duration: 1000,
easing: 'ease',
isActive: true,
canBegin: true,
onAnimationEnd: () => {},
onAnimationStart: () => {}
};
var from = {
t: 0
};
var to = {
t: 1
};
function JavascriptAnimate(outsideProps) {
var props = resolveDefaultProps(outsideProps, defaultJavascriptAnimateProps);
var {
isActive: isActiveProp,
canBegin,
duration,
easing,
begin,
onAnimationEnd,
onAnimationStart,
children
} = props;
var isActive = isActiveProp === 'auto' ? !Global.isSsr : isActiveProp;
var animationManager = useAnimationManager(props.animationId, props.animationManager);
var [style, setStyle] = useState(isActive ? from : to);
var stopJSAnimation = useRef(null);
useEffect(() => {
if (!isActive) {
setStyle(to);
}
}, [isActive]);
useEffect(() => {
if (!isActive || !canBegin) {
return noop;
}
var startAnimation = configUpdate(from, to, configEasing(easing), duration, setStyle, animationManager.getTimeoutController());
var onAnimationActive = () => {
stopJSAnimation.current = startAnimation();
};
animationManager.start([onAnimationStart, begin, onAnimationActive, duration, onAnimationEnd]);
return () => {
animationManager.stop();
if (stopJSAnimation.current) {
stopJSAnimation.current();
}
onAnimationEnd();
};
}, [isActive, canBegin, duration, easing, begin, onAnimationStart, onAnimationEnd, animationManager]);
return children(style.t);
}
export { JavascriptAnimate };
//# sourceMappingURL=JavascriptAnimate.js.map