change contentVisibility to contain (#4752)

bluesky-social · Jul 8, 2024 · a3c43a7 · a3c43a7
1 parent f8a59e1
commit a3c43a7
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 29 deletions.
diff --git 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
@@ -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={

diff --git 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 => <KeyboardAwareScrollView {...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
@@ -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>
 

diff --git a/src/view/com/util/List.web.tsx b/src/view/com/util/List.web.tsx
@@ -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

diff --git 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')