jeanmachine.dev / witchsky.app
forked from jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

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

authored by

Hailey and committed by
GitHub a3c43a74 f8a59e10

+33 -29
+2 -2
src/screens/Messages/Conversation/MessagesList.tsx
··· 386 386 data={convoState.items} 387 387 renderItem={renderItem} 388 388 keyExtractor={keyExtractor} 389 - containWeb={true} 389 + disableFullWindowScroll={true} 390 390 // Prevents wrong position in Firefox when sending a message 391 391 // as well as scroll getting stuck on Chome when scrolling upwards. 392 - disableContentVisibility={true} 392 + disableContainStyle={true} 393 393 disableVirtualization={true} 394 394 style={animatedListStyle} 395 395 // The extra two items account for the header and the footer components
+1 -1
src/screens/StarterPack/Wizard/StepFeeds.tsx
··· 101 101 onEndReachedThreshold={2} 102 102 renderScrollComponent={props => <KeyboardAwareScrollView {...props} />} 103 103 keyboardShouldPersistTaps="handled" 104 - containWeb={true} 104 + disableFullWindowScroll={true} 105 105 sideBorders={false} 106 106 style={{flex: 1}} 107 107 ListEmptyComponent={
+1 -1
src/screens/StarterPack/Wizard/StepProfiles.tsx
··· 80 80 keyExtractor={keyExtractor} 81 81 renderScrollComponent={props => <KeyboardAwareScrollView {...props} />} 82 82 keyboardShouldPersistTaps="handled" 83 - containWeb={true} 83 + disableFullWindowScroll={true} 84 84 sideBorders={false} 85 85 style={[a.flex_1]} 86 86 onEndReached={
+3 -2
src/view/com/util/List.tsx
··· 24 24 refreshing?: boolean 25 25 onRefresh?: () => void 26 26 onItemSeen?: (item: ItemT) => void 27 - containWeb?: boolean 28 27 desktopFixedHeight?: number | boolean 28 + // Web only prop to contain the scroll to the container rather than the window 29 + disableFullWindowScroll?: boolean 29 30 sideBorders?: boolean 30 31 // Web only prop to disable a perf optimization (which would otherwise be on). 31 - disableContentVisibility?: boolean 32 + disableContainStyle?: boolean 32 33 } 33 34 export type ListRef = React.MutableRefObject<FlatList_INTERNAL | null> 34 35
+25 -22
src/view/com/util/List.web.tsx
··· 23 23 onRefresh?: () => void 24 24 onItemSeen?: (item: ItemT) => void 25 25 desktopFixedHeight?: number | boolean 26 - containWeb?: boolean 26 + // Web only prop to contain the scroll to the container rather than the window 27 + disableFullWindowScroll?: boolean 27 28 sideBorders?: boolean 28 - disableContentVisibility?: boolean 29 + // Web only prop to disable a perf optimization (which would otherwise be on). 30 + disableContainStyle?: boolean 29 31 } 30 32 export type ListRef = React.MutableRefObject<any | null> // TODO: Better types. 31 33 ··· 39 41 ListHeaderComponent, 40 42 ListFooterComponent, 41 43 ListEmptyComponent, 42 - containWeb, 44 + disableFullWindowScroll, 43 45 contentContainerStyle, 44 46 data, 45 47 desktopFixedHeight, ··· 58 60 extraData, 59 61 style, 60 62 sideBorders = true, 61 - disableContentVisibility, 63 + disableContainStyle, 62 64 ...props 63 65 }: ListProps<ItemT>, 64 66 ref: React.Ref<ListMethods>, ··· 112 114 } 113 115 114 116 const getScrollableNode = React.useCallback(() => { 115 - if (containWeb) { 117 + if (disableFullWindowScroll) { 116 118 const element = nativeRef.current as HTMLDivElement | null 117 119 if (!element) return 118 120 ··· 182 184 }, 183 185 } 184 186 } 185 - }, [containWeb]) 187 + }, [disableFullWindowScroll]) 186 188 187 189 const nativeRef = React.useRef<HTMLDivElement>(null) 188 190 React.useImperativeHandle( ··· 267 269 return () => { 268 270 element?.removeEventListener('scroll', handleScroll) 269 271 } 270 - }, [isInsideVisibleTree, handleScroll, containWeb, getScrollableNode]) 272 + }, [ 273 + isInsideVisibleTree, 274 + handleScroll, 275 + disableFullWindowScroll, 276 + getScrollableNode, 277 + ]) 271 278 272 279 // --- onScrolledDownChange --- 273 280 const isScrolledDown = useRef(false) ··· 308 315 {...props} 309 316 style={[ 310 317 style, 311 - containWeb && { 318 + disableFullWindowScroll && { 312 319 flex: 1, 313 320 // @ts-expect-error web only 314 321 'overflow-y': 'scroll', ··· 332 339 pal.border, 333 340 ]}> 334 341 <Visibility 335 - root={containWeb ? nativeRef : null} 342 + root={disableFullWindowScroll ? nativeRef : null} 336 343 onVisibleChange={handleAboveTheFoldVisibleChange} 337 344 style={[styles.aboveTheFoldDetector, {height: headerOffset}]} 338 345 /> 339 346 {onStartReached && !isEmpty && ( 340 347 <Visibility 341 - root={containWeb ? nativeRef : null} 348 + root={disableFullWindowScroll ? nativeRef : null} 342 349 onVisibleChange={onHeadVisibilityChange} 343 350 topMargin={(onStartReachedThreshold ?? 0) * 100 + '%'} 344 351 /> ··· 356 363 renderItem={renderItem} 357 364 extraData={extraData} 358 365 onItemSeen={onItemSeen} 359 - disableContentVisibility={disableContentVisibility} 366 + disableContainStyle={disableContainStyle} 360 367 /> 361 368 ) 362 369 })} 363 370 {onEndReached && !isEmpty && ( 364 371 <Visibility 365 - root={containWeb ? nativeRef : null} 372 + root={disableFullWindowScroll ? nativeRef : null} 366 373 onVisibleChange={onTailVisibilityChange} 367 374 bottomMargin={(onEndReachedThreshold ?? 0) * 100 + '%'} 368 375 key={data?.length} ··· 406 413 renderItem, 407 414 extraData: _unused, 408 415 onItemSeen, 409 - disableContentVisibility, 416 + disableContainStyle, 410 417 }: { 411 418 item: ItemT 412 419 index: number ··· 416 423 | ((data: {index: number; item: any; separators: any}) => React.ReactNode) 417 424 extraData: any 418 425 onItemSeen: ((item: any) => void) | undefined 419 - disableContentVisibility?: boolean 426 + disableContainStyle?: boolean 420 427 }): React.ReactNode { 421 428 const rowRef = React.useRef(null) 422 429 const intersectionTimeout = React.useRef<NodeJS.Timer | undefined>(undefined) ··· 465 472 return null 466 473 } 467 474 468 - const shouldDisableContentVisibility = disableContentVisibility || isSafari 475 + const shouldDisableContainStyle = disableContainStyle || isSafari 469 476 return ( 470 477 <View 471 - style={ 472 - shouldDisableContentVisibility 473 - ? undefined 474 - : styles.contentVisibilityAuto 475 - } 478 + style={shouldDisableContainStyle ? undefined : styles.contain} 476 479 ref={rowRef}> 477 480 {renderItem({item, index, separators: null as any})} 478 481 </View> ··· 544 547 marginLeft: 'auto', 545 548 marginRight: 'auto', 546 549 }, 547 - contentVisibilityAuto: { 550 + contain: { 548 551 // @ts-ignore web only 549 - contentVisibility: 'auto', 552 + contain: 'layout paint', 550 553 }, 551 554 minHeightViewport: { 552 555 // @ts-ignore web only
+1 -1
src/view/screens/Storybook/ListContained.tsx
··· 47 47 ) 48 48 }} 49 49 keyExtractor={item => item.id.toString()} 50 - containWeb={true} 50 + disableFullWindowScroll={true} 51 51 style={{flex: 1}} 52 52 onStartReached={() => { 53 53 console.log('Start Reached')