change `contentVisibility` to `contain` (#4752)

zio/stable
Hailey 2024-07-08 15:16:43 -07:00 committed by GitHub
parent f8a59e10dd
commit a3c43a7471
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 33 additions and 29 deletions

View File

@ -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

View File

@ -101,7 +101,7 @@ export function StepFeeds({moderationOpts}: {moderationOpts: ModerationOpts}) {
onEndReachedThreshold={2}
renderScrollComponent={props => <KeyboardAwareScrollView {...props} />}
keyboardShouldPersistTaps="handled"
containWeb={true}
disableFullWindowScroll={true}
sideBorders={false}
style={{flex: 1}}
ListEmptyComponent={

View File

@ -80,7 +80,7 @@ export function StepProfiles({
keyExtractor={keyExtractor}
renderScrollComponent={props => <KeyboardAwareScrollView {...props} />}
keyboardShouldPersistTaps="handled"
containWeb={true}
disableFullWindowScroll={true}
sideBorders={false}
style={[a.flex_1]}
onEndReached={

View File

@ -24,11 +24,12 @@ export type ListProps<ItemT> = 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<FlatList_INTERNAL | null>

View File

@ -23,9 +23,11 @@ export type ListProps<ItemT> = 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<any | null> // TODO: Better types.
@ -39,7 +41,7 @@ function ListImpl<ItemT>(
ListHeaderComponent,
ListFooterComponent,
ListEmptyComponent,
containWeb,
disableFullWindowScroll,
contentContainerStyle,
data,
desktopFixedHeight,
@ -58,7 +60,7 @@ function ListImpl<ItemT>(
extraData,
style,
sideBorders = true,
disableContentVisibility,
disableContainStyle,
...props
}: ListProps<ItemT>,
ref: React.Ref<ListMethods>,
@ -112,7 +114,7 @@ function ListImpl<ItemT>(
}
const getScrollableNode = React.useCallback(() => {
if (containWeb) {
if (disableFullWindowScroll) {
const element = nativeRef.current as HTMLDivElement | null
if (!element) return
@ -182,7 +184,7 @@ function ListImpl<ItemT>(
},
}
}
}, [containWeb])
}, [disableFullWindowScroll])
const nativeRef = React.useRef<HTMLDivElement>(null)
React.useImperativeHandle(
@ -267,7 +269,12 @@ function ListImpl<ItemT>(
return () => {
element?.removeEventListener('scroll', handleScroll)
}
}, [isInsideVisibleTree, handleScroll, containWeb, getScrollableNode])
}, [
isInsideVisibleTree,
handleScroll,
disableFullWindowScroll,
getScrollableNode,
])
// --- onScrolledDownChange ---
const isScrolledDown = useRef(false)
@ -308,7 +315,7 @@ function ListImpl<ItemT>(
{...props}
style={[
style,
containWeb && {
disableFullWindowScroll && {
flex: 1,
// @ts-expect-error web only
'overflow-y': 'scroll',
@ -332,13 +339,13 @@ function ListImpl<ItemT>(
pal.border,
]}>
<Visibility
root={containWeb ? nativeRef : null}
root={disableFullWindowScroll ? nativeRef : null}
onVisibleChange={handleAboveTheFoldVisibleChange}
style={[styles.aboveTheFoldDetector, {height: headerOffset}]}
/>
{onStartReached && !isEmpty && (
<Visibility
root={containWeb ? nativeRef : null}
root={disableFullWindowScroll ? nativeRef : null}
onVisibleChange={onHeadVisibilityChange}
topMargin={(onStartReachedThreshold ?? 0) * 100 + '%'}
/>
@ -356,13 +363,13 @@ function ListImpl<ItemT>(
renderItem={renderItem}
extraData={extraData}
onItemSeen={onItemSeen}
disableContentVisibility={disableContentVisibility}
disableContainStyle={disableContainStyle}
/>
)
})}
{onEndReached && !isEmpty && (
<Visibility
root={containWeb ? nativeRef : null}
root={disableFullWindowScroll ? nativeRef : null}
onVisibleChange={onTailVisibilityChange}
bottomMargin={(onEndReachedThreshold ?? 0) * 100 + '%'}
key={data?.length}
@ -406,7 +413,7 @@ let Row = function RowImpl<ItemT>({
renderItem,
extraData: _unused,
onItemSeen,
disableContentVisibility,
disableContainStyle,
}: {
item: ItemT
index: number
@ -416,7 +423,7 @@ let Row = function RowImpl<ItemT>({
| ((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<NodeJS.Timer | undefined>(undefined)
@ -465,14 +472,10 @@ let Row = function RowImpl<ItemT>({
return null
}
const shouldDisableContentVisibility = disableContentVisibility || isSafari
const shouldDisableContainStyle = disableContainStyle || isSafari
return (
<View
style={
shouldDisableContentVisibility
? undefined
: styles.contentVisibilityAuto
}
style={shouldDisableContainStyle ? undefined : styles.contain}
ref={rowRef}>
{renderItem({item, index, separators: null as any})}
</View>
@ -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

View File

@ -47,7 +47,7 @@ export function ListContained() {
)
}}
keyExtractor={item => item.id.toString()}
containWeb={true}
disableFullWindowScroll={true}
style={{flex: 1}}
onStartReached={() => {
console.log('Start Reached')