Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

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

add support for `ListEmptyComponent`, allow `undefined` data (#4403)

* add support for `ListEmptyComponent`, allow `undefined` data

* change `header` and `footer` to be in line with `emptyComponent`

* don't render `onEndReached` or `onStartReached` `Visibility` if empty

authored by

Hailey and committed by
GitHub
8788708b 3dc34be9

+39 -24
+39 -24
src/view/com/util/List.web.tsx
··· 38 38 { 39 39 ListHeaderComponent, 40 40 ListFooterComponent, 41 + ListEmptyComponent, 41 42 containWeb, 42 43 contentContainerStyle, 43 44 data, ··· 72 73 ) 73 74 } 74 75 75 - let header: JSX.Element | null = null 76 + const isEmpty = !data || data.length === 0 77 + 78 + let headerComponent: JSX.Element | null = null 76 79 if (ListHeaderComponent != null) { 77 80 if (isValidElement(ListHeaderComponent)) { 78 - header = ListHeaderComponent 81 + headerComponent = ListHeaderComponent 79 82 } else { 80 83 // @ts-ignore Nah it's fine. 81 - header = <ListHeaderComponent /> 84 + headerComponent = <ListHeaderComponent /> 82 85 } 83 86 } 84 87 85 - let footer: JSX.Element | null = null 88 + let footerComponent: JSX.Element | null = null 86 89 if (ListFooterComponent != null) { 87 90 if (isValidElement(ListFooterComponent)) { 88 - footer = ListFooterComponent 91 + footerComponent = ListFooterComponent 89 92 } else { 90 93 // @ts-ignore Nah it's fine. 91 - footer = <ListFooterComponent /> 94 + footerComponent = <ListFooterComponent /> 95 + } 96 + } 97 + 98 + let emptyComponent: JSX.Element | null = null 99 + if (ListEmptyComponent != null) { 100 + if (isValidElement(ListEmptyComponent)) { 101 + emptyComponent = ListEmptyComponent 102 + } else { 103 + // @ts-ignore Nah it's fine. 104 + emptyComponent = <ListEmptyComponent /> 92 105 } 93 106 } 94 107 ··· 323 336 onVisibleChange={handleAboveTheFoldVisibleChange} 324 337 style={[styles.aboveTheFoldDetector, {height: headerOffset}]} 325 338 /> 326 - {onStartReached && ( 339 + {onStartReached && !isEmpty && ( 327 340 <Visibility 328 341 root={containWeb ? nativeRef : null} 329 342 onVisibleChange={onHeadVisibilityChange} 330 343 topMargin={(onStartReachedThreshold ?? 0) * 100 + '%'} 331 344 /> 332 345 )} 333 - {header} 334 - {(data as Array<ItemT>).map((item, index) => { 335 - const key = keyExtractor!(item, index) 336 - return ( 337 - <Row<ItemT> 338 - key={key} 339 - item={item} 340 - index={index} 341 - renderItem={renderItem} 342 - extraData={extraData} 343 - onItemSeen={onItemSeen} 344 - disableContentVisibility={disableContentVisibility} 345 - /> 346 - ) 347 - })} 348 - {onEndReached && ( 346 + {headerComponent} 347 + {isEmpty 348 + ? emptyComponent 349 + : (data as Array<ItemT>)?.map((item, index) => { 350 + const key = keyExtractor!(item, index) 351 + return ( 352 + <Row<ItemT> 353 + key={key} 354 + item={item} 355 + index={index} 356 + renderItem={renderItem} 357 + extraData={extraData} 358 + onItemSeen={onItemSeen} 359 + disableContentVisibility={disableContentVisibility} 360 + /> 361 + ) 362 + })} 363 + {onEndReached && !isEmpty && ( 349 364 <Visibility 350 365 root={containWeb ? nativeRef : null} 351 366 onVisibleChange={onTailVisibilityChange} 352 367 bottomMargin={(onEndReachedThreshold ?? 0) * 100 + '%'} 353 368 /> 354 369 )} 355 - {footer} 370 + {footerComponent} 356 371 </View> 357 372 </View> 358 373 )