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

Support nested infinite lists on android

Browse Source
This commit is contained in:
Zoe Roux 2023-12-11 21:57:55 +01:00
parent 545e729f2e
commit 7895b535fa
4 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
front/apps/mobile/app/(app)/index.tsx
View File

@ -18,7 +18,10 @@
* along with Kyoo. If not, see <https://www.gnu.org/licenses/>. * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
*/ */
import { HomePage, BrowsePage } from "@kyoo/ui"; import { HomePage } from "@kyoo/ui";
import { withRoute } from "../utils"; import { withRoute } from "../utils";
export default withRoute(BrowsePage); export default withRoute(HomePage, {
options: { headerTransparent: true, headerStyle: { backgroundColor: "transparent" } },
statusBar: { barStyle: "light-content" },
});

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

@ -23,7 +23,7 @@ import { useBreakpointMap, HR } from "@kyoo/primitives";
import { ContentStyle, FlashList } from "@shopify/flash-list"; import { ContentStyle, 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, ViewStyle } from "react-native"; import { FlatList, View, ViewStyle } from "react-native";
const emulateGap = ( const emulateGap = (
layout: "grid" | "vertical" | "horizontal", layout: "grid" | "vertical" | "horizontal",
@ -64,6 +64,7 @@ export const InfiniteFetchList = <Data, Props, _>({
headerProps, headerProps,
getItemType, getItemType,
fetchMore = true, fetchMore = true,
nested = false,
contentContainerStyle, contentContainerStyle,
...props ...props
}: { }: {
@ -82,6 +83,7 @@ export const InfiniteFetchList = <Data, Props, _>({
headerProps?: Props; headerProps?: Props;
getItemType?: (item: WithLoading<Data>, index: number) => string | number; getItemType?: (item: WithLoading<Data>, index: number) => string | number;
fetchMore?: boolean; fetchMore?: boolean;
nested?: boolean;
contentContainerStyle?: ContentStyle; contentContainerStyle?: ContentStyle;
}): JSX.Element | null => { }): JSX.Element | null => {
const { numColumns, size, gap } = useBreakpointMap(layout); const { numColumns, size, gap } = useBreakpointMap(layout);
@ -101,10 +103,12 @@ 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;
// @ts-ignore // @ts-ignore
if (headerProps && !isValidElement(Header)) Header = <Header {...headerProps} />; if (headerProps && !isValidElement(Header)) Header = <Header {...headerProps} />;
return ( return (
<FlashList <List
contentContainerStyle={{ contentContainerStyle={{
paddingHorizontal: layout.layout !== "vertical" ? gap : 0, paddingHorizontal: layout.layout !== "vertical" ? gap : 0,
...contentContainerStyle, ...contentContainerStyle,
@ -126,6 +130,8 @@ export const InfiniteFetchList = <Data, Props, _>({
ItemSeparatorComponent={divider === true ? HR : divider || null} ItemSeparatorComponent={divider === true ? HR : divider || null}
ListHeaderComponent={Header} ListHeaderComponent={Header}
getItemType={getItemType} getItemType={getItemType}
nestedScrollEnabled={nested}
scrollEnabled={!nested}
{...props} {...props}
/> />
); );

1
front/packages/ui/src/home/recommanded.tsx
View File

@ -226,6 +226,7 @@ export const Recommanded = () => {
layout={ItemDetails.layout} layout={ItemDetails.layout}
placeholderCount={6} placeholderCount={6}
fetchMore={false} fetchMore={false}
nested
contentContainerStyle={{ padding: 0, paddingHorizontal: 0 }} contentContainerStyle={{ padding: 0, paddingHorizontal: 0 }}
> >
{(x) => ( {(x) => (

5
front/packages/ui/src/home/vertical.tsx
View File

@ -18,8 +18,8 @@
* along with Kyoo. If not, see <https://www.gnu.org/licenses/>. * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
*/ */
import { ItemKind, LibraryItem, LibraryItemP, QueryIdentifier, getDisplayDate } from "@kyoo/models"; import { LibraryItem, LibraryItemP, QueryIdentifier } from "@kyoo/models";
import { H3, ts } from "@kyoo/primitives"; import { H3 } from "@kyoo/primitives";
import { View } from "react-native"; import { View } from "react-native";
import { useYoshiki } from "yoshiki/native"; import { useYoshiki } from "yoshiki/native";
import { InfiniteFetch } from "../fetch-infinite"; import { InfiniteFetch } from "../fetch-infinite";
@ -40,6 +40,7 @@ export const VerticalRecommanded = () => {
placeholderCount={3} placeholderCount={3}
layout={{ ...ItemList.layout, layout: "vertical" }} layout={{ ...ItemList.layout, layout: "vertical" }}
fetchMore={false} fetchMore={false}
nested
> >
{(x, i) => <ItemList key={x.id ?? i} {...itemMap(x)} />} {(x, i) => <ItemList key={x.id ?? i} {...itemMap(x)} />}
</InfiniteFetch> </InfiniteFetch>