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