123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150 |
- "use strict";
-
- exports.__esModule = true;
- exports.getChildMapping = getChildMapping;
- exports.mergeChildMappings = mergeChildMappings;
- exports.getInitialChildMapping = getInitialChildMapping;
- exports.getNextChildMapping = getNextChildMapping;
-
- var _react = require("react");
-
- /**
- * Given `this.props.children`, return an object mapping key to child.
- *
- * @param {*} children `this.props.children`
- * @return {object} Mapping of key to child
- */
- function getChildMapping(children, mapFn) {
- var mapper = function mapper(child) {
- return mapFn && (0, _react.isValidElement)(child) ? mapFn(child) : child;
- };
-
- var result = Object.create(null);
- if (children) _react.Children.map(children, function (c) {
- return c;
- }).forEach(function (child) {
- // run the map function here instead so that the key is the computed one
- result[child.key] = mapper(child);
- });
- return result;
- }
- /**
- * When you're adding or removing children some may be added or removed in the
- * same render pass. We want to show *both* since we want to simultaneously
- * animate elements in and out. This function takes a previous set of keys
- * and a new set of keys and merges them with its best guess of the correct
- * ordering. In the future we may expose some of the utilities in
- * ReactMultiChild to make this easy, but for now React itself does not
- * directly have this concept of the union of prevChildren and nextChildren
- * so we implement it here.
- *
- * @param {object} prev prev children as returned from
- * `ReactTransitionChildMapping.getChildMapping()`.
- * @param {object} next next children as returned from
- * `ReactTransitionChildMapping.getChildMapping()`.
- * @return {object} a key set that contains all keys in `prev` and all keys
- * in `next` in a reasonable order.
- */
-
-
- function mergeChildMappings(prev, next) {
- prev = prev || {};
- next = next || {};
-
- function getValueForKey(key) {
- return key in next ? next[key] : prev[key];
- } // For each key of `next`, the list of keys to insert before that key in
- // the combined list
-
-
- var nextKeysPending = Object.create(null);
- var pendingKeys = [];
-
- for (var prevKey in prev) {
- if (prevKey in next) {
- if (pendingKeys.length) {
- nextKeysPending[prevKey] = pendingKeys;
- pendingKeys = [];
- }
- } else {
- pendingKeys.push(prevKey);
- }
- }
-
- var i;
- var childMapping = {};
-
- for (var nextKey in next) {
- if (nextKeysPending[nextKey]) {
- for (i = 0; i < nextKeysPending[nextKey].length; i++) {
- var pendingNextKey = nextKeysPending[nextKey][i];
- childMapping[nextKeysPending[nextKey][i]] = getValueForKey(pendingNextKey);
- }
- }
-
- childMapping[nextKey] = getValueForKey(nextKey);
- } // Finally, add the keys which didn't appear before any key in `next`
-
-
- for (i = 0; i < pendingKeys.length; i++) {
- childMapping[pendingKeys[i]] = getValueForKey(pendingKeys[i]);
- }
-
- return childMapping;
- }
-
- function getProp(child, prop, props) {
- return props[prop] != null ? props[prop] : child.props[prop];
- }
-
- function getInitialChildMapping(props, onExited) {
- return getChildMapping(props.children, function (child) {
- return (0, _react.cloneElement)(child, {
- onExited: onExited.bind(null, child),
- in: true,
- appear: getProp(child, 'appear', props),
- enter: getProp(child, 'enter', props),
- exit: getProp(child, 'exit', props)
- });
- });
- }
-
- function getNextChildMapping(nextProps, prevChildMapping, onExited) {
- var nextChildMapping = getChildMapping(nextProps.children);
- var children = mergeChildMappings(prevChildMapping, nextChildMapping);
- Object.keys(children).forEach(function (key) {
- var child = children[key];
- if (!(0, _react.isValidElement)(child)) return;
- var hasPrev = key in prevChildMapping;
- var hasNext = key in nextChildMapping;
- var prevChild = prevChildMapping[key];
- var isLeaving = (0, _react.isValidElement)(prevChild) && !prevChild.props.in; // item is new (entering)
-
- if (hasNext && (!hasPrev || isLeaving)) {
- // console.log('entering', key)
- children[key] = (0, _react.cloneElement)(child, {
- onExited: onExited.bind(null, child),
- in: true,
- exit: getProp(child, 'exit', nextProps),
- enter: getProp(child, 'enter', nextProps)
- });
- } else if (!hasNext && hasPrev && !isLeaving) {
- // item is old (exiting)
- // console.log('leaving', key)
- children[key] = (0, _react.cloneElement)(child, {
- in: false
- });
- } else if (hasNext && hasPrev && (0, _react.isValidElement)(prevChild)) {
- // item hasn't changed transition states
- // copy over the last transition props;
- // console.log('unchanged', key)
- children[key] = (0, _react.cloneElement)(child, {
- onExited: onExited.bind(null, child),
- in: prevChild.props.in,
- exit: getProp(child, 'exit', nextProps),
- enter: getProp(child, 'enter', nextProps)
- });
- }
- });
- return children;
- }
|