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 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,
);
const List = nested ? FlatList as unknown as typeof FlashList : FlashList;
const List = nested ? (FlatList as unknown as typeof FlashList) : FlashList;
// @ts-ignore
if (headerProps && !isValidElement(Header)) Header = <Header {...headerProps} />;
@ -114,14 +114,21 @@ export const InfiniteFetchList = <Data, Props, _>({
...contentContainerStyle,
}}
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)}
</View>
)}
data={isFetching ? [...(items || []), ...placeholders] : items}
horizontal={layout.layout === "horizontal"}
keyExtractor={(item: any) => item.id}
numColumns={numColumns}
numColumns={layout.layout === "horizontal" ? 1 : numColumns}
estimatedItemSize={size}
onEndReached={fetchMore ? fetchNextPage : undefined}
onEndReachedThreshold={0.5}

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

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

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

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