Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-06-23 15:30:34 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fix bottom padding on infinte lists on mobile

Browse Source
This commit is contained in:
Zoe Roux 2024-01-10 14:20:27 +01:00
parent 721d9937e0
commit 1d6d27c0ee
2 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
front/packages/ui/src/fetch-infinite.tsx
View File

@ -30,6 +30,7 @@ const emulateGap = (
gap: number, gap: number,
numColumns: number, numColumns: number,
index: number, index: number,
itemsCount: number
): ViewStyle => { ): ViewStyle => {
let marginLeft = 0; let marginLeft = 0;
let marginRight = 0; let marginRight = 0;
@ -49,6 +50,7 @@ const emulateGap = (
marginLeft, marginLeft,
marginRight, marginRight,
marginTop: layout !== "horizontal" && index >= numColumns ? gap : 0, marginTop: layout !== "horizontal" && index >= numColumns ? gap : 0,
marginBottom: layout !== "horizontal" && itemsCount - index <= numColumns ? gap : 0,
}; };
}; };
@ -105,6 +107,7 @@ export const InfiniteFetchList = <Data, Props, _, Kind extends number | string>(
const placeholders = [...Array(count === 0 ? numColumns : count)].map( const placeholders = [...Array(count === 0 ? numColumns : count)].map(
(_, i) => ({ id: `gen${i}`, isLoading: true }) as Data, (_, i) => ({ id: `gen${i}`, isLoading: true }) as Data,
); );
const data = isFetching ? [...(items || []), ...placeholders] : items;
const List = nested ? (FlatList as unknown as typeof FlashList) : FlashList; const List = nested ? (FlatList as unknown as typeof FlashList) : FlashList;
@ -119,7 +122,7 @@ export const InfiniteFetchList = <Data, Props, _, Kind extends number | string>(
renderItem={({ item, index }) => ( renderItem={({ item, index }) => (
<View <View
style={[ style={[
emulateGap(layout.layout, gap, numColumns, index), emulateGap(layout.layout, gap, numColumns, index, data?.length ?? 0),
layout.layout === "horizontal" && { layout.layout === "horizontal" && {
width: width:
size * (getItemType && getItemSize ? getItemSize(getItemType(item, index)) : 1), size * (getItemType && getItemSize ? getItemSize(getItemType(item, index)) : 1),
@ -130,7 +133,7 @@ export const InfiniteFetchList = <Data, Props, _, Kind extends number | string>(
{children({ isLoading: false, ...item } as any, index)} {children({ isLoading: false, ...item } as any, index)}
</View> </View>
)} )}
data={isFetching ? [...(items || []), ...placeholders] : items} data={data}
horizontal={layout.layout === "horizontal"} horizontal={layout.layout === "horizontal"}
keyExtractor={(item: any) => item.id} keyExtractor={(item: any) => item.id}
numColumns={layout.layout === "horizontal" ? 1 : numColumns} numColumns={layout.layout === "horizontal" ? 1 : numColumns}

3
front/packages/ui/src/fetch.tsx
View File

@ -33,7 +33,7 @@ export type Layout = {
}; };
export type WithLoading<Item> = export type WithLoading<Item> =
| (Item & { isLoading: false }) | (Item & { isLoading?: false })
| (Partial<Item> & { isLoading: true }); | (Partial<Item> & { isLoading: true });
const isPage = <T = unknown,>(obj: unknown): obj is Page<T> => const isPage = <T = unknown,>(obj: unknown): obj is Page<T> =>
@ -113,7 +113,6 @@ export const EmptyView = ({ message }: { message: string }) => {
<View <View
{...css({ {...css({
flexGrow: 1, flexGrow: 1,
flexShrink: 1,
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
})} })}