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

Fix horizontal lists on mobile

Browse Source
This commit is contained in:
Zoe Roux 2023-12-11 22:32:12 +01:00
parent 7895b535fa
commit bf68f6b52c
3 changed files with 14 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -103,7 +103,7 @@ export const InfiniteFetchList = <Data, Props, _>({
(_, i) => ({ id: `gen${i}`, isLoading: true }) as Data, (_, i) => ({ id: `gen${i}`, isLoading: true }) as Data,
); );
const List = nested ? FlatList as unknown as typeof FlashList : FlashList; const List = nested ? (FlatList as unknown as typeof FlashList) : FlashList;
// @ts-ignore // @ts-ignore
if (headerProps && !isValidElement(Header)) Header = <Header {...headerProps} />; if (headerProps && !isValidElement(Header)) Header = <Header {...headerProps} />;
@ -114,14 +114,21 @@ export const InfiniteFetchList = <Data, Props, _>({
...contentContainerStyle, ...contentContainerStyle,
}} }}
renderItem={({ item, index }) => ( renderItem={({ item, index }) => (
<View style={emulateGap(layout.layout, gap, numColumns, index)}> <View
style={[
emulateGap(layout.layout, gap, numColumns, index),
layout.layout === "horizontal" && {
width: size,
},
]}
>
{children({ isLoading: false, ...item } as any, index)} {children({ isLoading: false, ...item } as any, index)}
</View> </View>
)} )}
data={isFetching ? [...(items || []), ...placeholders] : items} data={isFetching ? [...(items || []), ...placeholders] : items}
horizontal={layout.layout === "horizontal"} horizontal={layout.layout === "horizontal"}
keyExtractor={(item: any) => item.id} keyExtractor={(item: any) => item.id}
numColumns={numColumns} numColumns={layout.layout === "horizontal" ? 1 : numColumns}
estimatedItemSize={size} estimatedItemSize={size}
onEndReached={fetchMore ? fetchNextPage : undefined} onEndReached={fetchMore ? fetchNextPage : undefined}
onEndReachedThreshold={0.5} onEndReachedThreshold={0.5}

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

@ -32,7 +32,6 @@ import {
} from "react"; } from "react";
import { Stylable, nativeStyleToCss, useYoshiki, ysMap } from "yoshiki"; import { Stylable, nativeStyleToCss, useYoshiki, ysMap } from "yoshiki";
import { EmptyView, ErrorView, Layout, WithLoading, addHeader } from "./fetch"; import { EmptyView, ErrorView, Layout, WithLoading, addHeader } from "./fetch";
import { ViewStyle } from "react-native";
import type { ContentStyle } from "@shopify/flash-list"; import type { ContentStyle } from "@shopify/flash-list";
const InfiniteScroll = <Props,>({ const InfiniteScroll = <Props,>({

12
front/packages/ui/src/home/genre.tsx
View File

@ -20,21 +20,17 @@
import { import {
Genre, Genre,
ItemKind,
LibraryItem, LibraryItem,
LibraryItemP, LibraryItemP,
QueryIdentifier, QueryIdentifier,
getDisplayDate,
useInfiniteFetch, useInfiniteFetch,
} from "@kyoo/models"; } from "@kyoo/models";
import { H3, IconButton, ts } from "@kyoo/primitives"; import { H3, ts } from "@kyoo/primitives";
import { ReactElement, forwardRef, useRef } from "react"; import { useRef } from "react";
import { View } from "react-native"; import { View } from "react-native";
import { px, useYoshiki } from "yoshiki/native"; import { useYoshiki } from "yoshiki/native";
import { ItemGrid } from "../browse/grid"; import { ItemGrid } from "../browse/grid";
import ChevronLeft from "@material-symbols/svg-400/rounded/chevron_left-fill.svg"; import { InfiniteFetchList } from "../fetch-infinite";
import ChevronRight from "@material-symbols/svg-400/rounded/chevron_right-fill.svg";
import { InfiniteFetch, InfiniteFetchList } from "../fetch-infinite";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { itemMap } from "../browse"; import { itemMap } from "../browse";