react-component-transition
Version:
Easy animations between react component transitions.
114 lines (113 loc) • 4.52 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useChildrenManager = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var uniqid_1 = tslib_1.__importDefault(require("uniqid"));
/**
* Returns a new object in the format {[key]: internalKey}.
* @param keysMapper - The main internalKey/key mapper.
*/
var invertMapper = function (keysMapper) {
var _a;
var inverted = {};
for (var _i = 0, _b = Object.keys(keysMapper); _i < _b.length; _i++) {
var key = _b[_i];
var childKey = (_a = keysMapper[key]) === null || _a === void 0 ? void 0 : _a.key;
if (childKey) {
inverted[childKey] = key;
}
}
return inverted;
};
/**
* Returns a 'ChildrenManagerOut' depending on the current children.
* @param children - The current children.
*/
var useChildrenManager = function (children) {
var childrenMapper = react_1.useRef({});
var internalKeys = react_1.useRef([]);
var exitKeys = react_1.useRef([]);
var enterKeys = react_1.useRef([]);
var mounted = react_1.useRef(false);
react_1.useEffect(function () {
mounted.current = true;
}, []);
if (!children) {
return {
childrenMapper: childrenMapper.current,
internalKeys: internalKeys.current,
removeExit: function () { return 0; },
removeEnter: function () { return 0; },
exitKeys: [],
enterKeys: [],
};
}
var inverted = invertMapper(childrenMapper.current);
var internalKeysUpdated = [];
var childrenKeysAssert = {};
var newChildrenIndexes = [];
react_1.default.Children.forEach(children, function (child, i) {
var childKey = child === null || child === void 0 ? void 0 : child.key;
var childInternalKey = inverted[childKey];
if (childrenKeysAssert[childKey]) {
logError("Detected duplicated key `" + childKey + "` in two children. Children keys should be unique.");
return;
}
if (childKey !== undefined && childKey !== null && childInternalKey === undefined) {
var newKey = uniqid_1.default();
internalKeysUpdated.push(newKey);
childrenMapper.current[newKey] = child;
childrenKeysAssert[childKey] = newKey;
newChildrenIndexes.push(i);
if (mounted.current) {
enterKeys.current.push(newKey);
}
}
else if (childInternalKey) {
internalKeysUpdated.push(childInternalKey);
childrenMapper.current[childInternalKey] = child;
childrenKeysAssert[childKey] = childInternalKey;
}
});
var _loop_1 = function (i) {
var exists = internalKeysUpdated.indexOf(internalKeys.current[i]) > -1;
if (exists) {
return "continue";
}
var accumulator = newChildrenIndexes.filter(function (newIndex) { return newIndex <= i; }).length;
var index = i + accumulator;
internalKeysUpdated = tslib_1.__spreadArrays(internalKeysUpdated.slice(0, index), [
internalKeys.current[i]
], internalKeysUpdated.slice(index));
exitKeys.current.push(internalKeys.current[i]);
};
for (var i = 0; i < internalKeys.current.length; i++) {
_loop_1(i);
}
internalKeys.current = internalKeysUpdated;
var removeExit = function (internalKey) {
delete childrenMapper.current[internalKey];
internalKeys.current = internalKeys.current.filter(function (key) { return key !== internalKey; });
exitKeys.current = exitKeys.current.filter(function (key) { return key !== internalKey; });
return exitKeys.current.length;
};
var removeEnter = function (internalKey) {
enterKeys.current = enterKeys.current.filter(function (key) { return key !== internalKey; });
return enterKeys.current.length;
};
return {
childrenMapper: childrenMapper.current,
internalKeys: internalKeys.current,
removeExit: removeExit,
removeEnter: removeEnter,
exitKeys: exitKeys.current,
enterKeys: enterKeys.current,
};
};
exports.useChildrenManager = useChildrenManager;
var logError = function (message) {
if (process.env.NODE_ENV === "development") {
console.error(message);
}
};