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

Use gap in android lists

Browse Source
This commit is contained in:
Zoe Roux 2023-12-10 21:30:31 +01:00
parent 5d26dd1945
commit d5a839b3c6
3 changed files with 18 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,6 +23,7 @@ import { useBreakpointMap, HR } from "@kyoo/primitives";
import { FlashList } from "@shopify/flash-list"; import { FlashList } from "@shopify/flash-list";
import { ComponentProps, ComponentType, isValidElement, ReactElement, useRef } from "react"; import { ComponentProps, ComponentType, isValidElement, ReactElement, useRef } from "react";
import { EmptyView, ErrorView, Layout, WithLoading, addHeader } from "./fetch"; import { EmptyView, ErrorView, Layout, WithLoading, addHeader } from "./fetch";
import { View, DimensionValue } from "react-native";
export const InfiniteFetchList = <Data, Props, _>({ export const InfiniteFetchList = <Data, Props, _>({
query, query,
@ -54,7 +55,7 @@ export const InfiniteFetchList = <Data, Props, _>({
getItemType?: (item: WithLoading<Data>, index: number) => string | number; getItemType?: (item: WithLoading<Data>, index: number) => string | number;
fetchMore?: boolean; fetchMore?: boolean;
}): JSX.Element | null => { }): JSX.Element | null => {
const { numColumns, size } = useBreakpointMap(layout); const { numColumns, size, gap } = useBreakpointMap(layout);
const oldItems = useRef<Data[] | undefined>(); const oldItems = useRef<Data[] | undefined>();
let { items, error, fetchNextPage, hasNextPage, isFetching, refetch, isRefetching } = query; let { items, error, fetchNextPage, hasNextPage, isFetching, refetch, isRefetching } = query;
if (incremental && items) oldItems.current = items; if (incremental && items) oldItems.current = items;
@ -75,10 +76,22 @@ export const InfiniteFetchList = <Data, Props, _>({
if (headerProps && !isValidElement(Header)) Header = <Header {...headerProps} />; if (headerProps && !isValidElement(Header)) Header = <Header {...headerProps} />;
return ( return (
<FlashList <FlashList
renderItem={({ item, index }) => children({ isLoading: false, ...item } as any, index)} contentContainerStyle={{
paddingHorizontal: layout.layout !== "vertical" ? gap / 2 : 0,
}}
renderItem={({ item, index }) => (
<View
style={{
paddingHorizontal: layout.layout !== "vertical" ? gap / 2 : 0,
paddingVertical: layout.layout !== "horizontal" ? gap / 2 : 0,
}}
>
{children({ isLoading: false, ...item } as any, index)}
</View>
)}
data={hasNextPage || isFetching ? [...(items || []), ...placeholders] : items} data={hasNextPage || isFetching ? [...(items || []), ...placeholders] : items}
horizontal={layout.layout === "horizontal"} horizontal={layout.layout === "horizontal"}
keyExtractor={(item: any) => item.id?.toString()} keyExtractor={(item: any) => item.id}
numColumns={numColumns} numColumns={numColumns}
estimatedItemSize={size} estimatedItemSize={size}
onEndReached={fetchMore ? fetchNextPage : undefined} onEndReached={fetchMore ? fetchNextPage : undefined}

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

@ -190,7 +190,7 @@ export const InfiniteFetchList = <Data, _, HeaderProps>({
{...props} {...props}
> >
{(items ?? oldItems.current)?.map((item, i) => ( {(items ?? oldItems.current)?.map((item, i) => (
<Fragment key={(item as any).id?.toString()}> <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)} {children({ ...item, isLoading: false } as any, i)}
</Fragment> </Fragment>

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

@ -27,7 +27,7 @@ import { useYoshiki } from "yoshiki/native";
export type Layout = { export type Layout = {
numColumns: Breakpoint<number>; numColumns: Breakpoint<number>;
size: Breakpoint<number>; size: Breakpoint<number>;
gap: Breakpoint<number | string>; gap: Breakpoint<number>;
layout: "grid" | "horizontal" | "vertical"; layout: "grid" | "horizontal" | "vertical";
}; };