react-pose-15
Version:
A declarative animation library for React 15+
116 lines • 5.23 kB
JavaScript
;
var __assign = (this && this.__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;
};
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)
t[p[i]] = s[p[i]];
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var hey_listen_1 = require("hey-listen");
var getKey = function (child) {
hey_listen_1.invariant(child && child.key !== null, 'Every child of Transition must be given a unique key');
var childKey = typeof child.key === 'number' ? child.key.toString() : child.key;
return childKey.replace('.$', '');
};
var prependProps = function (element, props) {
return React.createElement(element.type, __assign({ key: element.key, ref: element.ref }, props, element.props));
};
var handleTransition = function (_a, _b) {
var displayedChildren = _b.displayedChildren, finishedLeaving = _b.finishedLeaving, hasInitialized = _b.hasInitialized, prevChildren = _b.indexedChildren, scheduleChildRemoval = _b.scheduleChildRemoval;
var incomingChildren = _a.children, preEnterPose = _a.preEnterPose, enterPose = _a.enterPose, exitPose = _a.exitPose, animateOnMount = _a.animateOnMount, enterAfterExit = _a.enterAfterExit, flipMove = _a.flipMove, onRest = _a.onRest, propsForChildren = __rest(_a, ["children", "preEnterPose", "enterPose", "exitPose", "animateOnMount", "enterAfterExit", "flipMove", "onRest"]);
var targetChildren = makeChildList(incomingChildren);
var nextState = {
displayedChildren: [],
indexedChildren: {},
};
if (process.env.NODE_ENV !== 'production') {
hey_listen_1.warning(!propsForChildren.onPoseComplete, "<Transition/> (or <PoseGroup/>) doesn't accept onPoseComplete prop.");
}
var prevKeys = displayedChildren.map(getKey);
var nextKeys = targetChildren.map(getKey);
var hasPropsForChildren = Object.keys(propsForChildren).length !== 0;
var entering = new Set(nextKeys.filter(function (key) { return finishedLeaving.hasOwnProperty(key) || prevKeys.indexOf(key) === -1; }));
entering.forEach(function (key) { return delete finishedLeaving[key]; });
var leaving = [];
var newlyLeaving = {};
prevKeys.forEach(function (key) {
if (entering.has(key)) {
return;
}
var isLeaving = finishedLeaving.hasOwnProperty(key);
if (!isLeaving && nextKeys.indexOf(key) !== -1) {
return;
}
leaving.push(key);
if (!isLeaving) {
finishedLeaving[key] = false;
newlyLeaving[key] = true;
}
});
var moving = new Set(prevKeys.filter(function (key, i) {
if (entering.has(key)) {
return false;
}
var nextIndex = nextKeys.indexOf(key);
return nextIndex !== -1 && i !== nextIndex;
}));
targetChildren.forEach(function (child) {
var newChildProps = {};
if (entering.has(child.key)) {
if (hasInitialized || animateOnMount) {
newChildProps.initialPose = preEnterPose;
}
newChildProps._pose = enterPose;
}
else if (moving.has(child.key) && flipMove) {
newChildProps._pose = [enterPose, 'flip'];
}
else {
newChildProps._pose = enterPose;
}
var newChild = React.cloneElement(child, newChildProps);
nextState.indexedChildren[child.key] = newChild;
nextState.displayedChildren.push(hasPropsForChildren
? prependProps(newChild, propsForChildren)
: newChild);
});
leaving.forEach(function (key) {
var child = prevChildren[key];
var newChild = newlyLeaving[key]
? React.cloneElement(child, {
_pose: exitPose,
onPoseComplete: function (pose) {
scheduleChildRemoval(key);
var onPoseComplete = child.props.onPoseComplete;
onPoseComplete && onPoseComplete(pose);
},
popFromFlow: flipMove,
})
: child;
var insertionIndex = prevKeys.indexOf(key);
nextState.indexedChildren[child.key] = newChild;
nextState.displayedChildren.splice(insertionIndex, 0, hasPropsForChildren
? prependProps(newChild, propsForChildren)
: newChild);
});
return nextState;
};
exports.default = (function (props, state) { return (__assign({ hasInitialized: true }, handleTransition(props, state))); });
var makeChildList = function (children) {
var list = [];
React.Children.forEach(children, function (child) { return child && list.push(child); });
return list;
};
//# sourceMappingURL=children.js.map