mirror of
https://github.com/streamyfin/streamyfin.git
synced 2026-07-16 09:23:07 +01:00
feat: filters with bottom sheet
This commit is contained in:
Fredrik Burmester
@@ -1,33 +1,39 @@
|
||||
import * as DropdownMenu from "zeego/dropdown-menu";
|
||||
import { Text } from "@/components/common/Text";
|
||||
import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useAtom } from "jotai";
|
||||
import { useState } from "react";
|
||||
import { TouchableOpacity, View, ViewProps } from "react-native";
|
||||
import { FilterSheet } from "./FilterSheet";
|
||||
|
||||
interface Props extends ViewProps {
|
||||
interface FilterButtonProps<T> extends ViewProps {
|
||||
collectionId: string;
|
||||
queryFn: (params: any) => Promise<any>;
|
||||
queryKey: string;
|
||||
set: (value: string[]) => void;
|
||||
values: string[];
|
||||
set: (value: T[]) => void;
|
||||
values: T[];
|
||||
title: string;
|
||||
searchFilter: (item: T, query: string) => boolean;
|
||||
renderItemLabel: (item: T) => React.ReactNode;
|
||||
showSearch?: boolean;
|
||||
}
|
||||
|
||||
export const FilterButton: React.FC<Props> = ({
|
||||
export const FilterButton = <T,>({
|
||||
collectionId,
|
||||
queryFn,
|
||||
queryKey,
|
||||
set,
|
||||
values,
|
||||
title,
|
||||
renderItemLabel,
|
||||
searchFilter,
|
||||
showSearch = true,
|
||||
...props
|
||||
}) => {
|
||||
const [api] = useAtom(apiAtom);
|
||||
const [user] = useAtom(userAtom);
|
||||
}: FilterButtonProps<T>) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const { data: filters } = useQuery<string[]>({
|
||||
const { data: filters } = useQuery<T[]>({
|
||||
queryKey: [queryKey, collectionId],
|
||||
queryFn,
|
||||
staleTime: 0,
|
||||
@@ -36,52 +42,35 @@ export const FilterButton: React.FC<Props> = ({
|
||||
if (filters?.length === 0) return null;
|
||||
|
||||
return (
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger>
|
||||
<TouchableOpacity>
|
||||
<View
|
||||
className={`
|
||||
<>
|
||||
<TouchableOpacity onPress={() => setOpen(true)}>
|
||||
<View
|
||||
className={`
|
||||
px-3 py-2 rounded-full flex flex-row items-center space-x-2
|
||||
${values.length > 0 ? "bg-purple-600" : "bg-neutral-900"}
|
||||
`}
|
||||
{...props}
|
||||
>
|
||||
<Text>{title}</Text>
|
||||
<Ionicons
|
||||
name="filter"
|
||||
size={16}
|
||||
color="white"
|
||||
style={{ opacity: 0.5 }}
|
||||
/>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Content
|
||||
loop={true}
|
||||
side="bottom"
|
||||
align="start"
|
||||
alignOffset={0}
|
||||
avoidCollisions={true}
|
||||
collisionPadding={8}
|
||||
sideOffset={8}
|
||||
>
|
||||
{filters?.map((g) => (
|
||||
<DropdownMenu.CheckboxItem
|
||||
value={values.includes(g)}
|
||||
onValueChange={(next, previous) => {
|
||||
if (next === "on") {
|
||||
set([...values, g]);
|
||||
} else {
|
||||
set(values.filter((v) => v !== g));
|
||||
}
|
||||
}}
|
||||
key={g}
|
||||
textValue={g}
|
||||
>
|
||||
<DropdownMenu.ItemIndicator />
|
||||
</DropdownMenu.CheckboxItem>
|
||||
))}
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Root>
|
||||
{...props}
|
||||
>
|
||||
<Text>{title}</Text>
|
||||
<Ionicons
|
||||
name="filter"
|
||||
size={16}
|
||||
color="white"
|
||||
style={{ opacity: 0.5 }}
|
||||
/>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
<FilterSheet<T>
|
||||
title={title}
|
||||
open={open}
|
||||
setOpen={setOpen}
|
||||
data={filters}
|
||||
values={values}
|
||||
set={set}
|
||||
renderItemLabel={renderItemLabel}
|
||||
searchFilter={searchFilter}
|
||||
showSearch={showSearch}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
190
components/filters/FilterSheet.tsx
Normal file
190
components/filters/FilterSheet.tsx
Normal file
@@ -0,0 +1,190 @@
|
||||
import {
|
||||
BottomSheetBackdrop,
|
||||
BottomSheetBackdropProps,
|
||||
BottomSheetFlatList,
|
||||
BottomSheetModal,
|
||||
BottomSheetScrollView,
|
||||
BottomSheetView,
|
||||
} from "@gorhom/bottom-sheet";
|
||||
import React, {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
|
||||
import { Text } from "@/components/common/Text";
|
||||
import { StyleSheet, TouchableOpacity, View, ViewProps } from "react-native";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { Button } from "../Button";
|
||||
import { Input } from "../common/Input";
|
||||
|
||||
interface Props<T> extends ViewProps {
|
||||
open: boolean;
|
||||
setOpen: (open: boolean) => void;
|
||||
data?: T[] | null;
|
||||
values: T[];
|
||||
set: (value: T[]) => void;
|
||||
title: string;
|
||||
searchFilter: (item: T, query: string) => boolean;
|
||||
renderItemLabel: (item: T) => React.ReactNode;
|
||||
showSearch?: boolean;
|
||||
}
|
||||
|
||||
const LIMIT = 100;
|
||||
|
||||
export const FilterSheet = <T,>({
|
||||
values,
|
||||
data: _data,
|
||||
open,
|
||||
set,
|
||||
setOpen,
|
||||
title,
|
||||
searchFilter,
|
||||
renderItemLabel,
|
||||
showSearch = true,
|
||||
...props
|
||||
}: Props<T>) => {
|
||||
const bottomSheetModalRef = useRef<BottomSheetModal>(null);
|
||||
const snapPoints = useMemo(() => ["80%"], []);
|
||||
|
||||
const [data, setData] = useState<T[]>([]);
|
||||
const [offset, setOffset] = useState<number>(0);
|
||||
|
||||
const [search, setSearch] = useState<string>("");
|
||||
|
||||
const filteredData = useMemo(() => {
|
||||
if (!search) return _data;
|
||||
const results = [];
|
||||
for (let i = 0; i < (_data?.length || 0); i++) {
|
||||
if (_data && searchFilter(_data[i], search)) {
|
||||
results.push(_data[i]);
|
||||
}
|
||||
}
|
||||
return results.slice(0, 100);
|
||||
}, [search, _data, searchFilter]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!_data || _data.length === 0) return;
|
||||
const tmp = new Set(data);
|
||||
for (let i = offset; i < Math.min(_data.length, offset + LIMIT); i++) {
|
||||
tmp.add(_data[i]);
|
||||
}
|
||||
setData(Array.from(tmp));
|
||||
}, [offset, _data]);
|
||||
|
||||
useEffect(() => {
|
||||
if (open) bottomSheetModalRef.current?.present();
|
||||
else bottomSheetModalRef.current?.dismiss();
|
||||
}, [open]);
|
||||
|
||||
const handleSheetChanges = useCallback((index: number) => {
|
||||
if (index === -1) {
|
||||
setOpen(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const renderData = useMemo(() => {
|
||||
if (search.length > 0 && showSearch) return filteredData;
|
||||
return data;
|
||||
}, [search, filteredData, data]);
|
||||
|
||||
const renderBackdrop = useCallback(
|
||||
(props: BottomSheetBackdropProps) => (
|
||||
<BottomSheetBackdrop
|
||||
{...props}
|
||||
disappearsOnIndex={-1}
|
||||
appearsOnIndex={0}
|
||||
/>
|
||||
),
|
||||
[]
|
||||
);
|
||||
|
||||
return (
|
||||
<BottomSheetModal
|
||||
ref={bottomSheetModalRef}
|
||||
index={0}
|
||||
snapPoints={snapPoints}
|
||||
onChange={handleSheetChanges}
|
||||
backdropComponent={renderBackdrop}
|
||||
handleIndicatorStyle={{
|
||||
backgroundColor: "white",
|
||||
}}
|
||||
backgroundStyle={{
|
||||
backgroundColor: "#171717",
|
||||
}}
|
||||
style={{}}
|
||||
>
|
||||
<BottomSheetScrollView
|
||||
style={{
|
||||
flex: 1,
|
||||
}}
|
||||
>
|
||||
<View className="px-4 mt-2 mb-8">
|
||||
<Text className="font-bold text-2xl">{title}</Text>
|
||||
<Text className="mb-2 text-neutral-500">{_data?.length} items</Text>
|
||||
{showSearch && (
|
||||
<Input
|
||||
placeholder="Search..."
|
||||
className="my-2"
|
||||
value={search}
|
||||
onChangeText={(text) => {
|
||||
setSearch(text);
|
||||
}}
|
||||
returnKeyType="done"
|
||||
/>
|
||||
)}
|
||||
<View
|
||||
style={{
|
||||
borderRadius: 20,
|
||||
overflow: "hidden",
|
||||
}}
|
||||
className="mb-4 flex flex-col rounded-xl overflow-hidden"
|
||||
>
|
||||
{renderData?.map((item, index) => (
|
||||
<>
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
set(
|
||||
values.includes(item)
|
||||
? values.filter((i) => i !== item)
|
||||
: [item]
|
||||
);
|
||||
setTimeout(() => {
|
||||
setOpen(false);
|
||||
}, 250);
|
||||
}}
|
||||
key={index}
|
||||
className=" bg-neutral-800 px-4 py-3 flex flex-row items-center justify-between"
|
||||
>
|
||||
<Text>{renderItemLabel(item)}</Text>
|
||||
{values.includes(item) ? (
|
||||
<Ionicons name="radio-button-on" size={24} color="white" />
|
||||
) : (
|
||||
<Ionicons name="radio-button-off" size={24} color="white" />
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
<View
|
||||
style={{
|
||||
height: StyleSheet.hairlineWidth,
|
||||
}}
|
||||
className="h-1 divide-neutral-700 "
|
||||
></View>
|
||||
</>
|
||||
))}
|
||||
</View>
|
||||
{data.length < (_data?.length || 0) && (
|
||||
<Button
|
||||
onPress={() => {
|
||||
setOffset(offset + 100);
|
||||
}}
|
||||
>
|
||||
Load more
|
||||
</Button>
|
||||
)}
|
||||
</View>
|
||||
</BottomSheetScrollView>
|
||||
</BottomSheetModal>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user