import type {ViewTransitionClass, ViewTransitionProps} from 'shared/ReactTypes';
import type {FiberRoot} from './ReactInternalTypes';
import type {ViewTransitionInstance, Instance} from './ReactFiberConfig';
import {
getCommittingRoot,
getPendingTransitionTypes,
} from './ReactFiberWorkLoop';
export type ViewTransitionState = {
autoName: null | string,
paired: null | ViewTransitionState,
clones: null | Array<Instance>,
ref: null | ViewTransitionInstance,
};
let globalClientIdCounter: number = 0;
export function getViewTransitionName(
props: ViewTransitionProps,
instance: ViewTransitionState,
): string {
if (props.name != null && props.name !== 'auto') {
return props.name;
}
if (instance.autoName !== null) {
return instance.autoName;
}
const root = ((getCommittingRoot(): any): FiberRoot);
const identifierPrefix = root.identifierPrefix;
const globalClientId = globalClientIdCounter++;
const name =
'_' + identifierPrefix + 't_' + globalClientId.toString(32) + '_';
instance.autoName = name;
return name;
}
function getClassNameByType(classByType: ?ViewTransitionClass): ?string {
if (classByType == null || typeof classByType === 'string') {
return classByType;
}
let className: ?string = null;
const activeTypes = getPendingTransitionTypes();
if (activeTypes !== null) {
for (let i = 0; i < activeTypes.length; i++) {
const match = classByType[activeTypes[i]];
if (match != null) {
if (match === 'none') {
return 'none';
}
if (className == null) {
className = match;
} else {
className += ' ' + match;
}
}
}
}
if (className == null) {
return classByType.default;
}
return className;
}
export function getViewTransitionClassName(
defaultClass: ?ViewTransitionClass,
eventClass: ?ViewTransitionClass,
): ?string {
const className: ?string = getClassNameByType(defaultClass);
const eventClassName: ?string = getClassNameByType(eventClass);
if (eventClassName == null) {
return className === 'auto' ? null : className;
}
if (eventClassName === 'auto') {
return null;
}
return eventClassName;
}