forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
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
+39
-24
+39
-24
src/view/com/util/List.web.tsx
+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
)