OSSForks/react
1
0
Fork 0
mirror of https://github.com/zebrajr/react.git synced 2025-12-06 12:20:20 +01:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

Add "auto" class to mean the built-in should run (#32761)

Browse Source 
Stacked on https://github.com/facebook/react/pull/32734

In React a ViewTransition class of `"none"` doesn't just mean that it
has no class but also that it has no ViewTransition name. The default
(`null | undefined`) means that it has no specific class but should run
with the default built-in animation. This adds this as an explicit
string called `"auto"` as well.

That way you can do `<ViewTransition default="foo" enter="auto">` to
override the "foo" just for the "enter" trigger to be the default
built-in animation. Where as if you just specified `null` it would be
like not specifying enter at all which would trigger "foo".
This commit is contained in:
Sebastian Markbåge 2025-03-26 15:02:43 -04:00 committed by GitHub
parent e0c99c4ea1
commit fceb0f80bc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/react-reconciler/src/ReactFiberViewTransitionComponent.js vendored
View File

@ -21,10 +21,14 @@ import {getIsHydrating} from './ReactFiberHydrationContext';
import {getTreeId} from './ReactFiberTreeContext';
export type ViewTransitionClassPerType = {
[transitionType: 'default' | string]: 'none' | string,
[transitionType: 'default' | string]: 'none' | 'auto' | string,
};
export type ViewTransitionClass = 'none' | string | ViewTransitionClassPerType;
export type ViewTransitionClass =
| 'none'
| 'auto'
| string
| ViewTransitionClassPerType;
export type ViewTransitionProps = {
name?: string,
@ -127,7 +131,10 @@ export function getViewTransitionClassName(
const className: ?string = getClassNameByType(defaultClass);
const eventClassName: ?string = getClassNameByType(eventClass);
if (eventClassName == null) {
return className;
return className === 'auto' ? null : className;
}
if (eventClassName === 'auto') {
return null;
}
return eventClassName;
}