Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-05-31 04:04:21 -04:00
Code Issues Packages Projects Releases Wiki Activity

Rework loader in infinite lists

Browse Source
This commit is contained in:
Zoe Roux 2024-05-20 17:52:55 +02:00
parent 9061b2e8d9
commit 9f8b2da76e
No known key found for this signature in database
2 changed files with 12 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -65,7 +65,8 @@ export const InfiniteFetchList = <Data, Props, _, Kind extends number | string>(
query, query,
placeholderCount = 2, placeholderCount = 2,
incremental = false, incremental = false,
children, Render,
Loader,
layout, layout,
empty, empty,
divider = false, divider = false,
@ -82,10 +83,8 @@ export const InfiniteFetchList = <Data, Props, _, Kind extends number | string>(
placeholderCount?: number; placeholderCount?: number;
layout: Layout; layout: Layout;
horizontal?: boolean; horizontal?: boolean;
children: ( Render: (props: { item: Data; index: number }) => ReactElement | null;
item: Data extends Page<infer Item> ? WithLoading<Item> : WithLoading<Data>, Loader: (props: { index: number }) => ReactElement | null;
i: number,
) => ReactElement | null;
empty?: string | JSX.Element; empty?: string | JSX.Element;
incremental?: boolean; incremental?: boolean;
divider?: boolean | ComponentType; divider?: boolean | ComponentType;
@ -111,9 +110,7 @@ export const InfiniteFetchList = <Data, Props, _, Kind extends number | string>(
if (incremental) items ??= oldItems.current; if (incremental) items ??= oldItems.current;
const count = items ? numColumns - (items.length % numColumns) : placeholderCount; const count = items ? numColumns - (items.length % numColumns) : placeholderCount;
const placeholders = [...Array(count === 0 ? numColumns : count)].map( const placeholders = [...Array(count === 0 ? numColumns : count)].fill(null);
(_, i) => ({ id: `gen${i}`, isLoading: true }) as Data,
);
const data = isFetching || !items ? [...(items || []), ...placeholders] : items; const data = isFetching || !items ? [...(items || []), ...placeholders] : items;
const List = nested ? (FlatList as unknown as typeof FlashList) : FlashList; const List = nested ? (FlatList as unknown as typeof FlashList) : FlashList;
@ -137,7 +134,7 @@ export const InfiniteFetchList = <Data, Props, _, Kind extends number | string>(
}, },
]} ]}
> >
{children({ isLoading: false, ...item } as any, index)} {item ? <Render index={index} item={item} /> : <Loader index={index} />}
</View> </View>
)} )}
data={data} data={data}

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

@ -145,7 +145,7 @@ export const InfiniteFetchList = <Data, _, HeaderProps, Kind extends number | st
query, query,
incremental = false, incremental = false,
placeholderCount = 2, placeholderCount = 2,
children, Render,
layout, layout,
empty, empty,
divider: Divider = false, divider: Divider = false,
@ -154,16 +154,15 @@ export const InfiniteFetchList = <Data, _, HeaderProps, Kind extends number | st
getItemType, getItemType,
getItemSize, getItemSize,
nested, nested,
Loader,
...props ...props
}: { }: {
query: ReturnType<typeof useInfiniteFetch<_, Data>>; query: ReturnType<typeof useInfiniteFetch<_, Data>>;
incremental?: boolean; incremental?: boolean;
placeholderCount?: number; placeholderCount?: number;
layout: Layout; layout: Layout;
children: ( Render: (props: { item: Data; index: number }) => ReactElement | null;
item: Data extends Page<infer Item> ? WithLoading<Item> : WithLoading<Data>, Loader: (props: { index: number }) => ReactElement | null;
i: number,
) => ReactElement | null;
empty?: string | JSX.Element; empty?: string | JSX.Element;
divider?: boolean | ComponentType; divider?: boolean | ComponentType;
Header?: ComponentType<{ children: JSX.Element } & HeaderProps> | ReactElement; Header?: ComponentType<{ children: JSX.Element } & HeaderProps> | ReactElement;
@ -193,7 +192,7 @@ export const InfiniteFetchList = <Data, _, HeaderProps, Kind extends number | st
loader={[...Array(placeholderCount)].map((_, i) => ( loader={[...Array(placeholderCount)].map((_, i) => (
<Fragment key={i.toString()}> <Fragment key={i.toString()}>
{Divider && i !== 0 && (Divider === true ? <HR /> : <Divider />)} {Divider && i !== 0 && (Divider === true ? <HR /> : <Divider />)}
{children({ isLoading: true } as any, i)} <Loader index={i} />
</Fragment> </Fragment>
))} ))}
Header={Header} Header={Header}
@ -203,7 +202,7 @@ export const InfiniteFetchList = <Data, _, HeaderProps, Kind extends number | st
{(items ?? oldItems.current)?.map((item, i) => ( {(items ?? oldItems.current)?.map((item, i) => (
<Fragment key={(item as any).id}> <Fragment key={(item as any).id}>
{Divider && i !== 0 && (Divider === true ? <HR /> : <Divider />)} {Divider && i !== 0 && (Divider === true ? <HR /> : <Divider />)}
{children({ ...item, isLoading: false } as any, i)} <Render item={item} index={i} />
</Fragment> </Fragment>
))} ))}
</InfiniteScroll> </InfiniteScroll>