diff options
Diffstat (limited to 'src/components/Lists.tsx')
-rw-r--r-- | src/components/Lists.tsx | 25 |
1 files changed, 19 insertions, 6 deletions
diff --git a/src/components/Lists.tsx b/src/components/Lists.tsx index 89913b12b..b5419697b 100644 --- a/src/components/Lists.tsx +++ b/src/components/Lists.tsx @@ -1,11 +1,11 @@ -import React from 'react' -import {View} from 'react-native' +import React, {memo} from 'react' +import {StyleProp, View, ViewStyle} from 'react-native' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' import {cleanError} from 'lib/strings/errors' import {CenteredView} from 'view/com/util/Views' -import {atoms as a, useBreakpoints, useTheme} from '#/alf' +import {atoms as a, flatten, useBreakpoints, useTheme} from '#/alf' import {Button, ButtonText} from '#/components/Button' import {Error} from '#/components/Error' import {Loader} from '#/components/Loader' @@ -16,11 +16,13 @@ export function ListFooter({ error, onRetry, height, + style, }: { isFetchingNextPage?: boolean error?: string onRetry?: () => Promise<unknown> height?: number + style?: StyleProp<ViewStyle> }) { const t = useTheme() @@ -33,6 +35,7 @@ export function ListFooter({ a.pb_lg, t.atoms.border_contrast_low, {height: height ?? 180, paddingTop: 30}, + flatten(style), ]}> {isFetchingNextPage ? ( <Loader size="xl" /> @@ -120,7 +123,7 @@ export function ListHeaderDesktop({ ) } -export function ListMaybePlaceholder({ +let ListMaybePlaceholder = ({ isLoading, noEmpty, isError, @@ -130,6 +133,8 @@ export function ListMaybePlaceholder({ errorMessage, emptyType = 'page', onRetry, + onGoBack, + sideBorders, }: { isLoading: boolean noEmpty?: boolean @@ -140,7 +145,9 @@ export function ListMaybePlaceholder({ errorMessage?: string emptyType?: 'page' | 'results' onRetry?: () => Promise<unknown> -}) { + onGoBack?: () => void + sideBorders?: boolean +}): React.ReactNode => { const t = useTheme() const {_} = useLingui() const {gtMobile, gtTablet} = useBreakpoints() @@ -155,7 +162,7 @@ export function ListMaybePlaceholder({ t.atoms.border_contrast_low, {paddingTop: 175, paddingBottom: 110}, ]} - sideBorders={gtMobile} + sideBorders={sideBorders ?? gtMobile} topBorder={!gtTablet}> <View style={[a.w_full, a.align_center, {top: 100}]}> <Loader size="xl" /> @@ -170,6 +177,8 @@ export function ListMaybePlaceholder({ title={errorTitle ?? _(msg`Oops!`)} message={errorMessage ?? _(`Something went wrong!`)} onRetry={onRetry} + onGoBack={onGoBack} + sideBorders={sideBorders} /> ) } @@ -188,9 +197,13 @@ export function ListMaybePlaceholder({ _(msg`We're sorry! We can't find the page you were looking for.`) } onRetry={onRetry} + onGoBack={onGoBack} + sideBorders={sideBorders} /> ) } return null } +ListMaybePlaceholder = memo(ListMaybePlaceholder) +export {ListMaybePlaceholder} |