| 1 | "use strict";
|
|---|
| 2 |
|
|---|
| 3 | Object.defineProperty(exports, "__esModule", {
|
|---|
| 4 | value: true
|
|---|
| 5 | });
|
|---|
| 6 | exports.CSSTransitionAnimate = CSSTransitionAnimate;
|
|---|
| 7 | var _react = require("react");
|
|---|
| 8 | var _DataUtils = require("../util/DataUtils");
|
|---|
| 9 | var _resolveDefaultProps = require("../util/resolveDefaultProps");
|
|---|
| 10 | var _useAnimationManager = require("./useAnimationManager");
|
|---|
| 11 | var _util = require("./util");
|
|---|
| 12 | var _Global = require("../util/Global");
|
|---|
| 13 | var defaultProps = {
|
|---|
| 14 | begin: 0,
|
|---|
| 15 | duration: 1000,
|
|---|
| 16 | easing: 'ease',
|
|---|
| 17 | isActive: true,
|
|---|
| 18 | canBegin: true,
|
|---|
| 19 | onAnimationEnd: () => {},
|
|---|
| 20 | onAnimationStart: () => {}
|
|---|
| 21 | };
|
|---|
| 22 | function CSSTransitionAnimate(outsideProps) {
|
|---|
| 23 | var props = (0, _resolveDefaultProps.resolveDefaultProps)(outsideProps, defaultProps);
|
|---|
| 24 | var {
|
|---|
| 25 | animationId,
|
|---|
| 26 | from,
|
|---|
| 27 | to,
|
|---|
| 28 | attributeName,
|
|---|
| 29 | isActive: isActiveProp,
|
|---|
| 30 | canBegin,
|
|---|
| 31 | duration,
|
|---|
| 32 | easing,
|
|---|
| 33 | begin,
|
|---|
| 34 | onAnimationEnd,
|
|---|
| 35 | onAnimationStart: onAnimationStartFromProps,
|
|---|
| 36 | children
|
|---|
| 37 | } = props;
|
|---|
| 38 | var isActive = isActiveProp === 'auto' ? !_Global.Global.isSsr : isActiveProp;
|
|---|
| 39 | var animationManager = (0, _useAnimationManager.useAnimationManager)(animationId + attributeName, props.animationManager);
|
|---|
| 40 | var [style, setStyle] = (0, _react.useState)(() => {
|
|---|
| 41 | if (!isActive) {
|
|---|
| 42 | return to;
|
|---|
| 43 | }
|
|---|
| 44 | return from;
|
|---|
| 45 | });
|
|---|
| 46 | var initialized = (0, _react.useRef)(false);
|
|---|
| 47 | var onAnimationStart = (0, _react.useCallback)(() => {
|
|---|
| 48 | setStyle(from);
|
|---|
| 49 | onAnimationStartFromProps();
|
|---|
| 50 | }, [from, onAnimationStartFromProps]);
|
|---|
| 51 | (0, _react.useEffect)(() => {
|
|---|
| 52 | if (!isActive || !canBegin) {
|
|---|
| 53 | return _DataUtils.noop;
|
|---|
| 54 | }
|
|---|
| 55 | initialized.current = true;
|
|---|
| 56 | var unsubscribe = animationManager.subscribe(setStyle);
|
|---|
| 57 | animationManager.start([onAnimationStart, begin, to, duration, onAnimationEnd]);
|
|---|
| 58 | return () => {
|
|---|
| 59 | animationManager.stop();
|
|---|
| 60 | if (unsubscribe) {
|
|---|
| 61 | unsubscribe();
|
|---|
| 62 | }
|
|---|
| 63 | onAnimationEnd();
|
|---|
| 64 | };
|
|---|
| 65 | }, [isActive, canBegin, duration, easing, begin, onAnimationStart, onAnimationEnd, animationManager, to, from]);
|
|---|
| 66 | if (!isActive) {
|
|---|
| 67 | /*
|
|---|
| 68 | * With isActive=false, the component always renders with the final style, immediately,
|
|---|
| 69 | * and ignores all other props.
|
|---|
| 70 | * Also there is no transition applied.
|
|---|
| 71 | */
|
|---|
| 72 | return children({
|
|---|
| 73 | [attributeName]: to
|
|---|
| 74 | });
|
|---|
| 75 | }
|
|---|
| 76 | if (!canBegin) {
|
|---|
| 77 | return children({
|
|---|
| 78 | [attributeName]: from
|
|---|
| 79 | });
|
|---|
| 80 | }
|
|---|
| 81 | if (initialized.current) {
|
|---|
| 82 | var transition = (0, _util.getTransitionVal)([attributeName], duration, easing);
|
|---|
| 83 | return children({
|
|---|
| 84 | transition,
|
|---|
| 85 | [attributeName]: style
|
|---|
| 86 | });
|
|---|
| 87 | }
|
|---|
| 88 | return children({
|
|---|
| 89 | [attributeName]: from
|
|---|
| 90 | });
|
|---|
| 91 | } |
|---|