Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-05-24 02:02:36 -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,
numColumns: number,
index: number,
itemsCount: number
): ViewStyle => {
let marginLeft = 0;
let marginRight = 0;
@ -49,6 +50,7 @@ const emulateGap = (
marginLeft,
marginRight,
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(
(_, i) => ({ id: `gen${i}`, isLoading: true }) as Data,
);
const data = isFetching ? [...(items || []), ...placeholders] : items;
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 }) => (
<View
style={[
emulateGap(layout.layout, gap, numColumns, index),
emulateGap(layout.layout, gap, numColumns, index, data?.length ?? 0),
layout.layout === "horizontal" && {
width:
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)}
</View>
)}
data={isFetching ? [...(items || []), ...placeholders] : items}
data={data}
horizontal={layout.layout === "horizontal"}
keyExtractor={(item: any) => item.id}
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> =
| (Item & { isLoading: false })
| (Item & { isLoading?: false })
| (Partial<Item> & { isLoading: true });
const isPage = <T = unknown,>(obj: unknown): obj is Page<T> =>
@ -113,7 +113,6 @@ export const EmptyView = ({ message }: { message: string }) => {
<View
{...css({
flexGrow: 1,
flexShrink: 1,
justifyContent: "center",
alignItems: "center",
})}