From ba1c4834ab23726c065aff31ef09e3578210ff01 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Fri, 19 Apr 2024 03:42:26 +0100 Subject: Add GIF select to composer (#3600) * create dialog with flatlist in it * use alf for composer photos/camera/gif buttons * add gif icons * focus textinput on gif dialog close * add giphy API + gif grid * web support * add consent confirmation * track gif select * desktop web consent styles * use InlineLinkText instead of Link * add error/loading state * hide sideborders on web * disable composer buttons where necessary * skip cardyb and set thumbnail directly * switch legacy analytics to statsig * remove autoplay prop * disable photo/gif buttons if external media is present * memoize listmaybeplaceholder * fix pagination * don't set `value` of TextInput, clear via ref * remove console.log * close modal if press escape * pass alt text in the description * Fix typo * Rm dialog --------- Co-authored-by: Dan Abramov --- src/components/Lists.tsx | 25 +++++++++++++++++++------ 1 file changed, 19 insertions(+), 6 deletions(-) (limited to 'src/components/Lists.tsx') 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 height?: number + style?: StyleProp }) { 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 ? ( @@ -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 -}) { + 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}> @@ -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} -- cgit 1.4.1