Facebook/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add isHidden to OffscreenInstance

Browse Source 
We need to be able to read whether an offscreen tree is hidden from
an imperative event. We can store this on its OffscreenInstance.

We were already scheduling a commit effect whenever the visibility
changes, in order to toggle the inner effects. So we can reuse that.
This commit is contained in:
Andrew Clark
2022-06-07 19:27:58 -04:00
parent 7e8a020a4a
commit dc5ed00973
5 changed files with 31 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-reconciler/src/ReactFiber.new.js
+3 -1
View File
@@ -715,7 +715,9 @@ export function createFiberFromOffscreen(
const fiber = createFiber(OffscreenComponent, pendingProps, key, mode);
fiber.elementType = REACT_OFFSCREEN_TYPE;
fiber.lanes = lanes;
const primaryChildInstance: OffscreenInstance = {};
const primaryChildInstance: OffscreenInstance = {
isHidden: false,
};
fiber.stateNode = primaryChildInstance;
return fiber;
}
packages/react-reconciler/src/ReactFiber.old.js
+3 -1
View File
@@ -715,7 +715,9 @@ export function createFiberFromOffscreen(
const fiber = createFiber(OffscreenComponent, pendingProps, key, mode);
fiber.elementType = REACT_OFFSCREEN_TYPE;
fiber.lanes = lanes;
const primaryChildInstance: OffscreenInstance = {};
const primaryChildInstance: OffscreenInstance = {
isHidden: false,
};
fiber.stateNode = primaryChildInstance;
return fiber;
}
packages/react-reconciler/src/ReactFiberCommitWork.new.js
+11
View File
@@ -2309,8 +2309,14 @@ function commitMutationEffectsOnFiber(
const offscreenFiber: Fiber = (finishedWork.child: any);
if (offscreenFiber.flags & Visibility) {
const offscreenInstance: OffscreenInstance = offscreenFiber.stateNode;
const newState: OffscreenState | null = offscreenFiber.memoizedState;
const isHidden = newState !== null;
// Track the current state on the Offscreen instance so we can
// read it during an event
offscreenInstance.isHidden = isHidden;
if (isHidden) {
const wasHidden =
offscreenFiber.alternate !== null &&
@@ -2354,10 +2360,15 @@ function commitMutationEffectsOnFiber(
commitReconciliationEffects(finishedWork);
if (flags & Visibility) {
const offscreenInstance: OffscreenInstance = finishedWork.stateNode;
const newState: OffscreenState | null = finishedWork.memoizedState;
const isHidden = newState !== null;
const offscreenBoundary: Fiber = finishedWork;
// Track the current state on the Offscreen instance so we can
// read it during an event
offscreenInstance.isHidden = isHidden;
if (enableSuspenseLayoutEffectSemantics) {
if (isHidden) {
if (!wasHidden) {
packages/react-reconciler/src/ReactFiberCommitWork.old.js
+11
View File
@@ -2309,8 +2309,14 @@ function commitMutationEffectsOnFiber(
const offscreenFiber: Fiber = (finishedWork.child: any);
if (offscreenFiber.flags & Visibility) {
const offscreenInstance: OffscreenInstance = offscreenFiber.stateNode;
const newState: OffscreenState | null = offscreenFiber.memoizedState;
const isHidden = newState !== null;
// Track the current state on the Offscreen instance so we can
// read it during an event
offscreenInstance.isHidden = isHidden;
if (isHidden) {
const wasHidden =
offscreenFiber.alternate !== null &&
@@ -2354,10 +2360,15 @@ function commitMutationEffectsOnFiber(
commitReconciliationEffects(finishedWork);
if (flags & Visibility) {
const offscreenInstance: OffscreenInstance = finishedWork.stateNode;
const newState: OffscreenState | null = finishedWork.memoizedState;
const isHidden = newState !== null;
const offscreenBoundary: Fiber = finishedWork;
// Track the current state on the Offscreen instance so we can
// read it during an event
offscreenInstance.isHidden = isHidden;
if (enableSuspenseLayoutEffectSemantics) {
if (isHidden) {
if (!wasHidden) {
packages/react-reconciler/src/ReactFiberOffscreenComponent.js
Vendored
+3 -1
View File
@@ -38,4 +38,6 @@ export type OffscreenQueue = {|
transitions: Array<Transition> | null,
|} | null;
export type OffscreenInstance = {};
export type OffscreenInstance = {|
isHidden: boolean,
|};