react-component-transition
Version:
Easy animations between react component transitions.
34 lines (33 loc) • 1.71 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ComponentTransitionList = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var use_children_manager_1 = require("./use-children-manager");
var component_transition_1 = require("../component-transition");
var ComponentTransitionList = function (_a) {
var children = _a.children;
var _b = react_1.useState(0), forceUpdate = _b[1];
var _c = use_children_manager_1.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_1.default.createElement(react_1.default.Fragment, null, internalKeys.map(function (internalKey) {
var context = {
contextId: internalKey,
onExitFinished: onExitFinished,
onEnterFinished: onEnterFinished,
enterKeys: enterKeys,
exitKeys: exitKeys,
};
return (react_1.default.createElement(component_transition_1.ComponentTransitionContext.Provider, { key: internalKey, value: context }, childrenMapper[internalKey]));
})));
};
exports.ComponentTransitionList = ComponentTransitionList;
exports.ComponentTransitionList.displayName = "ComponentTransitionList";