trackDeletedPairViewTransitions() — react Function Reference

Source Code

packages/react-reconciler/src/ReactFiberApplyGesture.js lines 146–211

function trackDeletedPairViewTransitions(deletion: Fiber): void {
  if (
    appearingViewTransitions === null ||
    appearingViewTransitions.size === 0
  ) {
    // We've found all.
    return;
  }
  const pairs = appearingViewTransitions;
  if ((deletion.subtreeFlags & ViewTransitionNamedStatic) === NoFlags) {
    // This has no named view transitions in its subtree.
    return;
  }
  let child = deletion.child;
  while (child !== null) {
    if (child.tag === OffscreenComponent && child.memoizedState !== null) {
      // This tree was already hidden so we skip it.
    } else {
      if (
        child.tag === ViewTransitionComponent &&
        (child.flags & ViewTransitionNamedStatic) !== NoFlags
      ) {
        const props: ViewTransitionProps = child.memoizedProps;
        const name = props.name;
        if (name != null && name !== 'auto') {
          const pair = pairs.get(name);
          if (pair !== undefined) {
            // Delete the entry so that we know when we've found all of them
            // and can stop searching (size reaches zero).
            pairs.delete(name);
            const className: ?string = getViewTransitionClassName(
              props.default,
              props.share,
            );
            if (className !== 'none') {
              // TODO: Since the deleted instance already has layout we could
              // check if it's in the viewport and if not skip the pairing.
              // It would currently cause layout thrash though so if we did that
              // we need to avoid inserting the root of the cloned trees until
              // the end.

              // The "old" instance is actually the one we're inserting.
              const oldInstance: ViewTransitionState = pair;
              // The "new" instance is the already mounted one we're deleting.
              const newInstance: ViewTransitionState = child.stateNode;
              oldInstance.paired = newInstance;
              newInstance.paired = oldInstance;
              const clones = oldInstance.clones;
              if (clones !== null) {
                // If we have clones that means that we've already visited this
                // ViewTransition boundary before and we can now apply the name
                // to those clones. Otherwise, we have to wait until we clone it.
                applyViewTransitionToClones(name, className, clones, child);
              }
            }
            if (pairs.size === 0) {
              break;
            }
          }
        }
      }
      trackDeletedPairViewTransitions(child);
    }
    child = child.sibling;
  }
}