zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

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

Browse source 
* 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
This commit is contained in:
Hailey 2024-06-18 17:33:43 -07:00 • committed by GitHub
parent 3dc34be929
commit 8788708bd2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 39 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

63
src/view/com/util/List.web.tsx
View file

@ -38,6 +38,7 @@ function ListImpl<ItemT>(
{
ListHeaderComponent,
ListFooterComponent,
ListEmptyComponent,
containWeb,
contentContainerStyle,
data,
@ -72,23 +73,35 @@ function ListImpl<ItemT>(
)
}
let header: JSX.Element | null = null
const isEmpty = !data || data.length === 0
let headerComponent: JSX.Element | null = null
if (ListHeaderComponent != null) {
if (isValidElement(ListHeaderComponent)) {
header = ListHeaderComponent
headerComponent = ListHeaderComponent
} else {
// @ts-ignore Nah it's fine.
header = <ListHeaderComponent />
headerComponent = <ListHeaderComponent />
}
}
let footer: JSX.Element | null = null
let footerComponent: JSX.Element | null = null
if (ListFooterComponent != null) {
if (isValidElement(ListFooterComponent)) {
footer = ListFooterComponent
footerComponent = ListFooterComponent
} else {
// @ts-ignore Nah it's fine.
footer = <ListFooterComponent />
footerComponent = <ListFooterComponent />
}
}
let emptyComponent: JSX.Element | null = null
if (ListEmptyComponent != null) {
if (isValidElement(ListEmptyComponent)) {
emptyComponent = ListEmptyComponent
} else {
// @ts-ignore Nah it's fine.
emptyComponent = <ListEmptyComponent />
}
}
@ -323,36 +336,38 @@ function ListImpl<ItemT>(
onVisibleChange={handleAboveTheFoldVisibleChange}
style={[styles.aboveTheFoldDetector, {height: headerOffset}]}
/>
{onStartReached && (
{onStartReached && !isEmpty && (
<Visibility
root={containWeb ? nativeRef : null}
onVisibleChange={onHeadVisibilityChange}
topMargin={(onStartReachedThreshold ?? 0) * 100 + '%'}
/>
)}
{header}
{(data as Array<ItemT>).map((item, index) => {
const key = keyExtractor!(item, index)
return (
<Row<ItemT>
key={key}
item={item}
index={index}
renderItem={renderItem}
extraData={extraData}
onItemSeen={onItemSeen}
disableContentVisibility={disableContentVisibility}
/>
)
})}
{onEndReached && (
{headerComponent}
{isEmpty
? emptyComponent
: (data as Array<ItemT>)?.map((item, index) => {
const key = keyExtractor!(item, index)
return (
<Row<ItemT>
key={key}
item={item}
index={index}
renderItem={renderItem}
extraData={extraData}
onItemSeen={onItemSeen}
disableContentVisibility={disableContentVisibility}
/>
)
})}
{onEndReached && !isEmpty && (
<Visibility
root={containWeb ? nativeRef : null}
onVisibleChange={onTailVisibilityChange}
bottomMargin={(onEndReachedThreshold ?? 0) * 100 + '%'}
/>
)}
{footer}
{footerComponent}
</View>
</View>
)