mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
13a72e0ccc
Summary: fix https://github.com/facebook/react-native/issues/33705 Fixed the disappearance of items when scrolling after zooming VirtualizedList. example https://github.com/islandryu/zoomVirtualizedList Before modification https://user-images.githubusercontent.com/65934663/166849127-9fc3ba84-5172-4ae1-bd44-dd6312f283ec.mov After modification https://user-images.githubusercontent.com/65934663/166868632-2f78e118-f705-442d-b94e-ff165bed26c7.mov ## Changelog <!-- Help reviewers and the release process by writing your own changelog entry. For an example, see: https://github.com/facebook/react-native/wiki/Changelog --> [General] [Fixed] - Fixed the disappearance of items when scrolling after zooming VirtualizedList. Pull Request resolved: https://github.com/facebook/react-native/pull/33765 Test Plan: Make the VirtualizedList zoomable with a prop such as maximumZoomScale. Apply the patch and make sure that items in the VirtualizedList do not disappear when you scroll after zooming the VirtualizedList. Or apply the patch from this repository and check it. https://github.com/islandryu/zoomVirtualizedList Reviewed By: javache Differential Revision: D36169686 Pulled By: yungsters fbshipit-source-id: 0f86255c2864be13f6d2dc5a58af1d11c9eedac3
158 lines
4.1 KiB
JavaScript
158 lines
4.1 KiB
JavaScript
/**
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @flow strict-local
|
|
* @format
|
|
*/
|
|
|
|
import type VirtualizedList from './VirtualizedList.js';
|
|
import * as React from 'react';
|
|
import {useMemo, useContext} from 'react';
|
|
|
|
type Frame = $ReadOnly<{
|
|
offset: number,
|
|
length: number,
|
|
index: number,
|
|
inLayout: boolean,
|
|
}>;
|
|
|
|
export type ChildListState = $ReadOnly<{
|
|
first: number,
|
|
last: number,
|
|
frames: {[key: number]: Frame},
|
|
}>;
|
|
|
|
// Data propagated through nested lists (regardless of orientation) that is
|
|
// useful for producing diagnostics for usage errors involving nesting (e.g
|
|
// missing/duplicate keys).
|
|
export type ListDebugInfo = $ReadOnly<{
|
|
cellKey: string,
|
|
listKey: string,
|
|
parent: ?ListDebugInfo,
|
|
// We include all ancestors regardless of orientation, so this is not always
|
|
// identical to the child's orientation.
|
|
horizontal: boolean,
|
|
}>;
|
|
|
|
type Context = $ReadOnly<{
|
|
cellKey: ?string,
|
|
getScrollMetrics: () => {
|
|
contentLength: number,
|
|
dOffset: number,
|
|
dt: number,
|
|
offset: number,
|
|
timestamp: number,
|
|
velocity: number,
|
|
visibleLength: number,
|
|
zoomScale: number,
|
|
},
|
|
horizontal: ?boolean,
|
|
getOutermostParentListRef: () => VirtualizedList,
|
|
getNestedChildState: string => ?ChildListState,
|
|
registerAsNestedChild: ({
|
|
cellKey: string,
|
|
key: string,
|
|
ref: VirtualizedList,
|
|
parentDebugInfo: ListDebugInfo,
|
|
}) => ?ChildListState,
|
|
unregisterAsNestedChild: ({
|
|
key: string,
|
|
state: ChildListState,
|
|
}) => void,
|
|
debugInfo: ListDebugInfo,
|
|
}>;
|
|
|
|
export const VirtualizedListContext: React.Context<?Context> =
|
|
React.createContext(null);
|
|
if (__DEV__) {
|
|
VirtualizedListContext.displayName = 'VirtualizedListContext';
|
|
}
|
|
|
|
/**
|
|
* Resets the context. Intended for use by portal-like components (e.g. Modal).
|
|
*/
|
|
export function VirtualizedListContextResetter({
|
|
children,
|
|
}: {
|
|
children: React.Node,
|
|
}): React.Node {
|
|
return (
|
|
<VirtualizedListContext.Provider value={null}>
|
|
{children}
|
|
</VirtualizedListContext.Provider>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Sets the context with memoization. Intended to be used by `VirtualizedList`.
|
|
*/
|
|
export function VirtualizedListContextProvider({
|
|
children,
|
|
value,
|
|
}: {
|
|
children: React.Node,
|
|
value: Context,
|
|
}): React.Node {
|
|
// Avoid setting a newly created context object if the values are identical.
|
|
const context = useMemo(
|
|
() => ({
|
|
cellKey: null,
|
|
getScrollMetrics: value.getScrollMetrics,
|
|
horizontal: value.horizontal,
|
|
getOutermostParentListRef: value.getOutermostParentListRef,
|
|
getNestedChildState: value.getNestedChildState,
|
|
registerAsNestedChild: value.registerAsNestedChild,
|
|
unregisterAsNestedChild: value.unregisterAsNestedChild,
|
|
debugInfo: {
|
|
cellKey: value.debugInfo.cellKey,
|
|
horizontal: value.debugInfo.horizontal,
|
|
listKey: value.debugInfo.listKey,
|
|
parent: value.debugInfo.parent,
|
|
},
|
|
}),
|
|
[
|
|
value.getScrollMetrics,
|
|
value.horizontal,
|
|
value.getOutermostParentListRef,
|
|
value.getNestedChildState,
|
|
value.registerAsNestedChild,
|
|
value.unregisterAsNestedChild,
|
|
value.debugInfo.cellKey,
|
|
value.debugInfo.horizontal,
|
|
value.debugInfo.listKey,
|
|
value.debugInfo.parent,
|
|
],
|
|
);
|
|
return (
|
|
<VirtualizedListContext.Provider value={context}>
|
|
{children}
|
|
</VirtualizedListContext.Provider>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Sets the `cellKey`. Intended to be used by `VirtualizedList` for each cell.
|
|
*/
|
|
export function VirtualizedListCellContextProvider({
|
|
cellKey,
|
|
children,
|
|
}: {
|
|
cellKey: string,
|
|
children: React.Node,
|
|
}): React.Node {
|
|
// Avoid setting a newly created context object if the values are identical.
|
|
const currContext = useContext(VirtualizedListContext);
|
|
const context = useMemo(
|
|
() => (currContext == null ? null : {...currContext, cellKey}),
|
|
[currContext, cellKey],
|
|
);
|
|
return (
|
|
<VirtualizedListContext.Provider value={context}>
|
|
{children}
|
|
</VirtualizedListContext.Provider>
|
|
);
|
|
}
|