mirror of
https://github.com/urosran/cally.git
synced 2025-07-16 01:56:16 +00:00
167 lines
4.5 KiB
TypeScript
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;
|