@kisstar/rc-ui/dist/components/transition/CSSTransition.js

UI component library built with React Hooks.

var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React, { useRef, useContext, useMemo, useCallback } from 'react';
import { CSSTransition as ReactCSSTransition } from 'react-transition-group';
import { ConfigContext } from '../config-provider';
/**
 * CSSTransition 主要是对 `react-transition-group` 库中 CSSTransition 组件的二次封装。
 *
 * 新版的 CSSTransition 支持所有原先的功能，同时还结合 `animate.css` 提供默认的动画效果。
 *
 * 以下是几个常用属性的简单说明，更多信息可参考 [React Transition Group](https://reactcommunity.org/react-transition-group/)。
 */
export var CSSTransition = function (props) {
    var children = props.children, classNames = props.classNames, animation = props.animation, nodeRef = props.nodeRef, _a = props.timeout, timeout = _a === void 0 ? 0 : _a, customizePrefixCls = props.prefixCls, restProps = __rest(props, ["children", "classNames", "animation", "nodeRef", "timeout", "prefixCls"]);
    var defaultNodeRef = useRef(null);
    var getPrefixCls = useContext(ConfigContext).getPrefixCls;
    var transitionClasses = useMemo(function () {
        if (!animation)
            return {};
        var retAnimation;
        var prefixCls = getPrefixCls('animate', customizePrefixCls);
        if (!Array.isArray(animation)) {
            retAnimation = [animation, animation];
        }
        else {
            retAnimation = animation;
        }
        return {
            enter: prefixCls + "-animated",
            enterActive: prefixCls + "-" + retAnimation[0],
            exit: prefixCls + "-animated",
            exitActive: prefixCls + "-" + retAnimation[1],
        };
    }, [animation, customizePrefixCls, getPrefixCls]);
    var getChildProps = useCallback(function (oriChildProps) {
        var childProps = {};
        if (!nodeRef) {
            Object.assign(childProps, {
                ref: defaultNodeRef,
            });
        }
        if (animation) {
            var duration = timeout + "ms";
            Object.assign(childProps, {
                style: __assign(__assign({}, oriChildProps.style), { animationDuration: duration, WebkitAnimationDuration: duration }),
            });
        }
        return childProps;
    }, [timeout, animation, nodeRef]);
    return (React.createElement(ReactCSSTransition, __assign({ timeout: timeout, nodeRef: nodeRef || defaultNodeRef, classNames: animation ? transitionClasses : classNames }, restProps), React.cloneElement(children, getChildProps(children.props))));
};
CSSTransition.defaultProps = {
    unmountOnExit: true,
};
export default CSSTransition;