react-component-transition/build/esm/component-transition-list/component-transition-list.js

Easy animations between react component transitions.

import React, { useState } from "react";
import { useChildrenManager } from "./use-children-manager";
import { ComponentTransitionContext } from "../component-transition";
export var ComponentTransitionList = function (_a) {
    var children = _a.children;
    var _b = useState(0), forceUpdate = _b[1];
    var _c = useChildrenManager(children), childrenMapper = _c.childrenMapper, internalKeys = _c.internalKeys, enterKeys = _c.enterKeys, exitKeys = _c.exitKeys, removeExit = _c.removeExit, removeEnter = _c.removeEnter;
    var onExitFinished = function (internalKey) {
        var remaining = removeExit(internalKey);
        if (remaining === 0) {
            forceUpdate(function (counter) { return counter + 1; });
        }
    };
    var onEnterFinished = function (internalKey) {
        removeEnter(internalKey);
    };
    return (React.createElement(React.Fragment, null, internalKeys.map(function (internalKey) {
        var context = {
            contextId: internalKey,
            onExitFinished: onExitFinished,
            onEnterFinished: onEnterFinished,
            enterKeys: enterKeys,
            exitKeys: exitKeys,
        };
        return (React.createElement(ComponentTransitionContext.Provider, { key: internalKey, value: context }, childrenMapper[internalKey]));
    })));
};
ComponentTransitionList.displayName = "ComponentTransitionList";