Fix double padding in Dialog.InnerFlatList on web (#5986)

* remove extra padding on web

* pass prop
This commit is contained in:
Samuel Newman
2024-10-29 14:32:10 +02:00
committed by GitHub
parent 2502c91dee
commit 80c5f23da2
3 changed files with 19 additions and 12 deletions
+4 -1
View File
@@ -267,7 +267,10 @@ export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
export const InnerFlatList = React.forwardRef<
ListMethods,
ListProps<any> & {webInnerStyle?: StyleProp<ViewStyle>}
ListProps<any> & {
webInnerStyle?: StyleProp<ViewStyle>
webInnerContentContainerStyle?: StyleProp<ViewStyle>
}
>(function InnerFlatList({style, ...props}, ref) {
const insets = useSafeAreaInsets()
const {nativeSnapPoint, disableDrag, setDisableDrag} = useDialogContext()
+13 -8
View File
@@ -210,21 +210,26 @@ export const ScrollableInner = Inner
export const InnerFlatList = React.forwardRef<
FlatList,
FlatListProps<any> & {label: string} & {webInnerStyle?: StyleProp<ViewStyle>}
>(function InnerFlatList({label, style, webInnerStyle, ...props}, ref) {
FlatListProps<any> & {label: string} & {
webInnerStyle?: StyleProp<ViewStyle>
webInnerContentContainerStyle?: StyleProp<ViewStyle>
}
>(function InnerFlatList(
{label, style, webInnerStyle, webInnerContentContainerStyle, ...props},
ref,
) {
const {gtMobile} = useBreakpoints()
return (
<Inner
label={label}
style={[
a.overflow_hidden,
a.px_0,
// @ts-ignore web only -sfn
{
paddingHorizontal: 0,
maxHeight: 'calc(-36px + 100vh)',
overflow: 'hidden',
},
{maxHeight: 'calc(-36px + 100vh)'},
webInnerStyle,
]}>
]}
contentContainerStyle={[a.px_0, webInnerContentContainerStyle]}>
<FlatList
ref={ref}
style={[gtMobile ? a.px_2xl : a.px_xl, flatten(style)]}
+2 -3
View File
@@ -144,7 +144,7 @@ function GifList({
a.mb_lg,
a.flex_row,
a.align_center,
!gtMobile && isWeb && a.gap_md,
!gtMobile && web(a.gap_md),
]}>
{/* cover top corners */}
<View
@@ -209,6 +209,7 @@ function GifList({
native([a.px_xl, {minHeight: height}]),
web(a.h_full_vh),
]}
style={[web(a.h_full_vh)]}
ListHeaderComponent={
<>
{listHeader}
@@ -238,8 +239,6 @@ function GifList({
onEndReached={onEndReached}
onEndReachedThreshold={4}
keyExtractor={(item: Gif) => item.id}
// @ts-expect-error web only
style={isWeb && {minHeight: '100vh'}}
keyboardDismissMode="on-drag"
ListFooterComponent={
hasData ? (