From a3c43a74712cdd402dc1e36c3c6b487ffaa1589d Mon Sep 17 00:00:00 2001 From: Hailey Date: Mon, 8 Jul 2024 15:16:43 -0700 Subject: [PATCH] change `contentVisibility` to `contain` (#4752) --- .../Messages/Conversation/MessagesList.tsx | 4 +- src/screens/StarterPack/Wizard/StepFeeds.tsx | 2 +- .../StarterPack/Wizard/StepProfiles.tsx | 2 +- src/view/com/util/List.tsx | 5 +- src/view/com/util/List.web.tsx | 47 ++++++++++--------- src/view/screens/Storybook/ListContained.tsx | 2 +- 6 files changed, 33 insertions(+), 29 deletions(-) diff --git a/src/screens/Messages/Conversation/MessagesList.tsx b/src/screens/Messages/Conversation/MessagesList.tsx index f72515ac..11b951e9 100644 --- a/src/screens/Messages/Conversation/MessagesList.tsx +++ b/src/screens/Messages/Conversation/MessagesList.tsx @@ -386,10 +386,10 @@ export function MessagesList({ data={convoState.items} renderItem={renderItem} keyExtractor={keyExtractor} - containWeb={true} + disableFullWindowScroll={true} // Prevents wrong position in Firefox when sending a message // as well as scroll getting stuck on Chome when scrolling upwards. - disableContentVisibility={true} + disableContainStyle={true} disableVirtualization={true} style={animatedListStyle} // The extra two items account for the header and the footer components diff --git a/src/screens/StarterPack/Wizard/StepFeeds.tsx b/src/screens/StarterPack/Wizard/StepFeeds.tsx index 878d17ce..de8d856a 100644 --- a/src/screens/StarterPack/Wizard/StepFeeds.tsx +++ b/src/screens/StarterPack/Wizard/StepFeeds.tsx @@ -101,7 +101,7 @@ export function StepFeeds({moderationOpts}: {moderationOpts: ModerationOpts}) { onEndReachedThreshold={2} renderScrollComponent={props => } keyboardShouldPersistTaps="handled" - containWeb={true} + disableFullWindowScroll={true} sideBorders={false} style={{flex: 1}} ListEmptyComponent={ diff --git a/src/screens/StarterPack/Wizard/StepProfiles.tsx b/src/screens/StarterPack/Wizard/StepProfiles.tsx index f77a46e7..c14de847 100644 --- a/src/screens/StarterPack/Wizard/StepProfiles.tsx +++ b/src/screens/StarterPack/Wizard/StepProfiles.tsx @@ -80,7 +80,7 @@ export function StepProfiles({ keyExtractor={keyExtractor} renderScrollComponent={props => } keyboardShouldPersistTaps="handled" - containWeb={true} + disableFullWindowScroll={true} sideBorders={false} style={[a.flex_1]} onEndReached={ diff --git a/src/view/com/util/List.tsx b/src/view/com/util/List.tsx index ed43ed5f..e1a10e47 100644 --- a/src/view/com/util/List.tsx +++ b/src/view/com/util/List.tsx @@ -24,11 +24,12 @@ export type ListProps = Omit< refreshing?: boolean onRefresh?: () => void onItemSeen?: (item: ItemT) => void - containWeb?: boolean desktopFixedHeight?: number | boolean + // Web only prop to contain the scroll to the container rather than the window + disableFullWindowScroll?: boolean sideBorders?: boolean // Web only prop to disable a perf optimization (which would otherwise be on). - disableContentVisibility?: boolean + disableContainStyle?: boolean } export type ListRef = React.MutableRefObject diff --git a/src/view/com/util/List.web.tsx b/src/view/com/util/List.web.tsx index f2b2add3..12d223db 100644 --- a/src/view/com/util/List.web.tsx +++ b/src/view/com/util/List.web.tsx @@ -23,9 +23,11 @@ export type ListProps = Omit< onRefresh?: () => void onItemSeen?: (item: ItemT) => void desktopFixedHeight?: number | boolean - containWeb?: boolean + // Web only prop to contain the scroll to the container rather than the window + disableFullWindowScroll?: boolean sideBorders?: boolean - disableContentVisibility?: boolean + // Web only prop to disable a perf optimization (which would otherwise be on). + disableContainStyle?: boolean } export type ListRef = React.MutableRefObject // TODO: Better types. @@ -39,7 +41,7 @@ function ListImpl( ListHeaderComponent, ListFooterComponent, ListEmptyComponent, - containWeb, + disableFullWindowScroll, contentContainerStyle, data, desktopFixedHeight, @@ -58,7 +60,7 @@ function ListImpl( extraData, style, sideBorders = true, - disableContentVisibility, + disableContainStyle, ...props }: ListProps, ref: React.Ref, @@ -112,7 +114,7 @@ function ListImpl( } const getScrollableNode = React.useCallback(() => { - if (containWeb) { + if (disableFullWindowScroll) { const element = nativeRef.current as HTMLDivElement | null if (!element) return @@ -182,7 +184,7 @@ function ListImpl( }, } } - }, [containWeb]) + }, [disableFullWindowScroll]) const nativeRef = React.useRef(null) React.useImperativeHandle( @@ -267,7 +269,12 @@ function ListImpl( return () => { element?.removeEventListener('scroll', handleScroll) } - }, [isInsideVisibleTree, handleScroll, containWeb, getScrollableNode]) + }, [ + isInsideVisibleTree, + handleScroll, + disableFullWindowScroll, + getScrollableNode, + ]) // --- onScrolledDownChange --- const isScrolledDown = useRef(false) @@ -308,7 +315,7 @@ function ListImpl( {...props} style={[ style, - containWeb && { + disableFullWindowScroll && { flex: 1, // @ts-expect-error web only 'overflow-y': 'scroll', @@ -332,13 +339,13 @@ function ListImpl( pal.border, ]}> {onStartReached && !isEmpty && ( @@ -356,13 +363,13 @@ function ListImpl( renderItem={renderItem} extraData={extraData} onItemSeen={onItemSeen} - disableContentVisibility={disableContentVisibility} + disableContainStyle={disableContainStyle} /> ) })} {onEndReached && !isEmpty && ( ({ renderItem, extraData: _unused, onItemSeen, - disableContentVisibility, + disableContainStyle, }: { item: ItemT index: number @@ -416,7 +423,7 @@ let Row = function RowImpl({ | ((data: {index: number; item: any; separators: any}) => React.ReactNode) extraData: any onItemSeen: ((item: any) => void) | undefined - disableContentVisibility?: boolean + disableContainStyle?: boolean }): React.ReactNode { const rowRef = React.useRef(null) const intersectionTimeout = React.useRef(undefined) @@ -465,14 +472,10 @@ let Row = function RowImpl({ return null } - const shouldDisableContentVisibility = disableContentVisibility || isSafari + const shouldDisableContainStyle = disableContainStyle || isSafari return ( {renderItem({item, index, separators: null as any})} @@ -544,9 +547,9 @@ const styles = StyleSheet.create({ marginLeft: 'auto', marginRight: 'auto', }, - contentVisibilityAuto: { + contain: { // @ts-ignore web only - contentVisibility: 'auto', + contain: 'layout paint', }, minHeightViewport: { // @ts-ignore web only diff --git a/src/view/screens/Storybook/ListContained.tsx b/src/view/screens/Storybook/ListContained.tsx index b3ea091f..20ec6865 100644 --- a/src/view/screens/Storybook/ListContained.tsx +++ b/src/view/screens/Storybook/ListContained.tsx @@ -47,7 +47,7 @@ export function ListContained() { ) }} keyExtractor={item => item.id.toString()} - containWeb={true} + disableFullWindowScroll={true} style={{flex: 1}} onStartReached={() => { console.log('Start Reached')