| 1 | import { useEffect, useRef, useState } from 'react';
|
|---|
| 2 | import { noop } from '../util/DataUtils';
|
|---|
| 3 | import { resolveDefaultProps } from '../util/resolveDefaultProps';
|
|---|
| 4 | import configUpdate from './configUpdate';
|
|---|
| 5 | import { configEasing } from './easing';
|
|---|
| 6 | import { useAnimationManager } from './useAnimationManager';
|
|---|
| 7 | import { Global } from '../util/Global';
|
|---|
| 8 | var defaultJavascriptAnimateProps = {
|
|---|
| 9 | begin: 0,
|
|---|
| 10 | duration: 1000,
|
|---|
| 11 | easing: 'ease',
|
|---|
| 12 | isActive: true,
|
|---|
| 13 | canBegin: true,
|
|---|
| 14 | onAnimationEnd: () => {},
|
|---|
| 15 | onAnimationStart: () => {}
|
|---|
| 16 | };
|
|---|
| 17 | var from = {
|
|---|
| 18 | t: 0
|
|---|
| 19 | };
|
|---|
| 20 | var to = {
|
|---|
| 21 | t: 1
|
|---|
| 22 | };
|
|---|
| 23 | export function JavascriptAnimate(outsideProps) {
|
|---|
| 24 | var props = resolveDefaultProps(outsideProps, defaultJavascriptAnimateProps);
|
|---|
| 25 | var {
|
|---|
| 26 | isActive: isActiveProp,
|
|---|
| 27 | canBegin,
|
|---|
| 28 | duration,
|
|---|
| 29 | easing,
|
|---|
| 30 | begin,
|
|---|
| 31 | onAnimationEnd,
|
|---|
| 32 | onAnimationStart,
|
|---|
| 33 | children
|
|---|
| 34 | } = props;
|
|---|
| 35 | var isActive = isActiveProp === 'auto' ? !Global.isSsr : isActiveProp;
|
|---|
| 36 | var animationManager = useAnimationManager(props.animationId, props.animationManager);
|
|---|
| 37 | var [style, setStyle] = useState(isActive ? from : to);
|
|---|
| 38 | var stopJSAnimation = useRef(null);
|
|---|
| 39 | useEffect(() => {
|
|---|
| 40 | if (!isActive) {
|
|---|
| 41 | setStyle(to);
|
|---|
| 42 | }
|
|---|
| 43 | }, [isActive]);
|
|---|
| 44 | useEffect(() => {
|
|---|
| 45 | if (!isActive || !canBegin) {
|
|---|
| 46 | return noop;
|
|---|
| 47 | }
|
|---|
| 48 | var startAnimation = configUpdate(from, to, configEasing(easing), duration, setStyle, animationManager.getTimeoutController());
|
|---|
| 49 | var onAnimationActive = () => {
|
|---|
| 50 | stopJSAnimation.current = startAnimation();
|
|---|
| 51 | };
|
|---|
| 52 | animationManager.start([onAnimationStart, begin, onAnimationActive, duration, onAnimationEnd]);
|
|---|
| 53 | return () => {
|
|---|
| 54 | animationManager.stop();
|
|---|
| 55 | if (stopJSAnimation.current) {
|
|---|
| 56 | stopJSAnimation.current();
|
|---|
| 57 | }
|
|---|
| 58 | onAnimationEnd();
|
|---|
| 59 | };
|
|---|
| 60 | }, [isActive, canBegin, duration, easing, begin, onAnimationStart, onAnimationEnd, animationManager]);
|
|---|
| 61 | return children(style.t);
|
|---|
| 62 | } |
|---|