2023-08-12 03:22:50 +00:00
|
|
|
import { NavigationProp, useNavigation } from "@react-navigation/native";
|
|
|
|
import { format } from "date-fns";
|
|
|
|
import { useCallback, useMemo } from "react";
|
|
|
|
import { Image } from "react-native";
|
2023-11-14 01:47:08 +00:00
|
|
|
import { List, Text, useTheme } from "react-native-paper";
|
2023-11-12 04:05:37 +00:00
|
|
|
import { StackParams } from "./AppStack";
|
2023-08-12 03:22:50 +00:00
|
|
|
import { DARK_RIPPLE, LIGHT_RIPPLE } from "./constants";
|
|
|
|
import GymSet from "./gym-set";
|
|
|
|
import Settings from "./settings";
|
2022-07-04 11:35:15 +00:00
|
|
|
|
|
|
|
export default function SetItem({
|
|
|
|
item,
|
2022-11-01 03:50:03 +00:00
|
|
|
settings,
|
2022-12-13 09:54:37 +00:00
|
|
|
ids,
|
|
|
|
setIds,
|
2023-10-28 03:10:52 +00:00
|
|
|
disablePress,
|
2023-11-06 02:27:11 +00:00
|
|
|
customBg,
|
2022-07-04 11:35:15 +00:00
|
|
|
}: {
|
2023-08-12 03:22:50 +00:00
|
|
|
item: GymSet;
|
|
|
|
settings: Settings;
|
|
|
|
ids: number[];
|
|
|
|
setIds: (value: number[]) => void;
|
2023-10-28 03:10:52 +00:00
|
|
|
disablePress?: boolean;
|
2023-11-06 02:27:11 +00:00
|
|
|
customBg?: string;
|
2022-07-04 11:35:15 +00:00
|
|
|
}) {
|
2023-11-14 01:47:08 +00:00
|
|
|
const { dark } = useTheme();
|
2023-10-28 02:59:03 +00:00
|
|
|
const navigation = useNavigation<NavigationProp<StackParams>>();
|
2022-07-04 11:35:15 +00:00
|
|
|
|
2022-12-13 09:54:37 +00:00
|
|
|
const longPress = useCallback(() => {
|
2023-08-12 03:22:50 +00:00
|
|
|
if (ids.length > 0) return;
|
|
|
|
setIds([item.id]);
|
|
|
|
}, [ids.length, item.id, setIds]);
|
2022-07-04 11:35:15 +00:00
|
|
|
|
2022-12-13 09:54:37 +00:00
|
|
|
const press = useCallback(() => {
|
2023-10-28 03:10:52 +00:00
|
|
|
if (disablePress) return;
|
2023-08-12 03:22:50 +00:00
|
|
|
if (ids.length === 0) return navigation.navigate("EditSet", { set: item });
|
|
|
|
const removing = ids.find((id) => id === item.id);
|
|
|
|
if (removing) setIds(ids.filter((id) => id !== item.id));
|
|
|
|
else setIds([...ids, item.id]);
|
2023-10-28 03:10:52 +00:00
|
|
|
}, [ids, item, navigation, setIds, disablePress]);
|
2022-07-07 03:13:44 +00:00
|
|
|
|
2022-12-13 09:54:37 +00:00
|
|
|
const backgroundColor = useMemo(() => {
|
2023-08-12 03:22:50 +00:00
|
|
|
if (!ids.includes(item.id)) return;
|
|
|
|
if (dark) return DARK_RIPPLE;
|
|
|
|
return LIGHT_RIPPLE;
|
|
|
|
}, [dark, ids, item.id]);
|
2022-07-08 02:33:56 +00:00
|
|
|
|
2023-11-14 07:44:54 +00:00
|
|
|
const image = useCallback(() => {
|
2023-08-12 03:22:50 +00:00
|
|
|
if (!settings.images || !item.image) return null;
|
2023-07-17 06:38:28 +00:00
|
|
|
return (
|
2023-08-12 03:22:50 +00:00
|
|
|
<Image source={{ uri: item.image }} style={{ height: 75, width: 75 }} />
|
|
|
|
);
|
|
|
|
}, [item.image, settings.images]);
|
2023-07-17 06:38:28 +00:00
|
|
|
|
2022-07-04 11:35:15 +00:00
|
|
|
return (
|
2023-07-07 01:41:48 +00:00
|
|
|
<List.Item
|
|
|
|
onPress={press}
|
|
|
|
title={item.name}
|
2023-11-14 07:44:54 +00:00
|
|
|
description={
|
|
|
|
settings.showDate ? (
|
|
|
|
<Text style={{ color: dark ? "#909090ff" : "#717171ff" }}>
|
|
|
|
{format(new Date(item.created), settings.date || "P")}
|
|
|
|
</Text>
|
|
|
|
) : null
|
|
|
|
}
|
2023-07-07 01:41:48 +00:00
|
|
|
onLongPress={longPress}
|
2023-11-06 02:27:11 +00:00
|
|
|
style={{ backgroundColor: customBg || backgroundColor }}
|
2023-11-14 07:44:54 +00:00
|
|
|
left={image}
|
|
|
|
right={() => (
|
|
|
|
<Text
|
|
|
|
style={{
|
|
|
|
alignSelf: "center",
|
|
|
|
color: dark ? "#909090ff" : "#717171ff",
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{`${item.reps} x ${item.weight}${item.unit || "kg"}`}
|
|
|
|
</Text>
|
|
|
|
)}
|
2023-07-07 01:41:48 +00:00
|
|
|
/>
|
2023-08-12 03:22:50 +00:00
|
|
|
);
|
2022-07-04 11:35:15 +00:00
|
|
|
}
|