Files
cally/components/pages/todos/ToDoItem.tsx
2024-10-12 17:59:43 +02:00

167 lines
4.5 KiB
TypeScript

import {
View,
Text,
Checkbox,
TextField,
TouchableOpacity,
Modal,
Dialog,
Button,
ButtonSize,
} from "react-native-ui-lib";
import React, { useEffect, useState } from "react";
import { IToDo, useToDosContext } from "@/contexts/ToDosContext";
import { Ionicons } from "@expo/vector-icons";
import PointsSlider from "@/components/shared/PointsSlider";
const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
const { updateToDo } = useToDosContext();
const [editing, setEditing] = useState<boolean>(false);
const [points, setPoints] = useState(props.item.points);
const [pointsModalVisible, setPointsModalVisible] = useState<boolean>(false);
const handlePointsChange = (text: string) => {
const numericValue = parseInt(text, 10);
if (!isNaN(numericValue) && numericValue >= 0 && numericValue <= 100) {
setPoints(numericValue);
} else if (text === "") {
setPoints(0);
}
};
return (
<View
centerV
paddingV-10
paddingH-10
marginV-10
style={{
borderRadius: 22,
backgroundColor: props.item.done ? "#e0e0e0" : "white",
opacity: props.item.done ? 0.3 : 1,
}}
>
<View paddingB-5 row spread>
{!editing ? (
<Text
text70R
style={{
textDecorationLine: props.item.done ? "line-through" : "none",
}}
onPress={() => {
if (props.isSettings) {
setEditing(true);
}
}}
>
{props.item.title}
</Text>
) : (
<TextField
value={props.item.title}
text70R
onChangeText={(text) => {
updateToDo(props.item.id, { title: text });
}}
onSubmitEditing={() => {
setEditing(false);
}}
onBlur={() => {
setEditing(false);
}}
/>
)}
<Checkbox
value={props.item.done}
onValueChange={(value) => {
updateToDo(props.item.id, { done: !props.item.done });
}}
/>
</View>
<View centerH paddingV-5>
<View
centerV
height={2}
width={"100%"}
style={{
backgroundColor: props.item.done ? "#b8b8b8" : "#e7e7e7",
}}
centerH
/>
</View>
<View centerH row spread>
{props.item.points && props.item.points > 0 ? (
<TouchableOpacity
onPress={() => {
if (props.isSettings) {
setPointsModalVisible(true);
}
}}
>
<View centerV row>
<Ionicons name="gift-outline" size={20} color="#46a80a" />
<Text color="#46a80a">{props.item.points} points</Text>
</View>
</TouchableOpacity>
) : (
<View />
)}
<View
height={25}
width={25}
backgroundColor="red"
style={{ borderRadius: 50 }}
/>
</View>
<Dialog
visible={pointsModalVisible}
onDismiss={() => setPointsModalVisible(false)}
containerStyle={{
padding: 20,
borderRadius: 15,
backgroundColor: "white",
}}
children={
<View gap-20>
<View row centerV marginL-30>
<Ionicons name="gift-outline" size={22} color="#919191" />
<Text marginH-10 text70>
Reward points
</Text>
</View>
{points && (
<PointsSlider
points={points}
setPoints={setPoints}
handleChange={handlePointsChange}
/>
)}
<View row marginH-30 spread>
<Button
size={ButtonSize.large}
label="Cancel"
backgroundColor="#d9d9d9"
onPress={() => {
setPointsModalVisible(false);
}}
/>
<Button
size={ButtonSize.large}
label="Save points"
backgroundColor="#fd1775"
style={{height: 60, width: 150}}
onPress={() => {
updateToDo(props.item.id, { points: points });
setPointsModalVisible(false);
}}
/>
</View>
</View>
}
/>
</View>
);
};
export default ToDoItem;