ToDo/ToDoItems.js at main · heewls/ToDo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
import { StyleSheet, Text, View, TouchableOpacity, TextInput } from "react-native";
import { Fontisto } from "@expo/vector-icons";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { theme } from "./colors";

export default function ToDoItems({
    deleteToDo,
    onEditText,
    doneToDo,
    working,
    toDos,
    editKey,
    editToDo,
    onBlur,
    setEdit,
    edit,
}) {
    return (
        <>
            {Object.keys(toDos)
                .reverse()
                .map((key) =>
                    toDos[key].working === working ? (
                        <View style={{ ...styles.toDo, backgroundColor: working ? theme.grey : theme.green }} key={key}>
                            <View style={{ flex: 1, flexDirection: "row", alignItems: "center" }}>
                                <TouchableOpacity onPress={() => doneToDo(key)}>
                                    <MaterialCommunityIcons
                                        name={toDos[key].done ? "checkbox-marked" : "checkbox-blank-outline"}
                                        size={28}
                                        color={theme.white}
                                        style={{ marginRight: 10 }}
                                    />
                                </TouchableOpacity>
                                {editKey === key ? (
                                    <TextInput
                                        autoFocus={true}
                                        onSubmitEditing={editToDo}
                                        onChangeText={setEdit}
                                        returnKeyType="done"
                                        value={edit}
                                        style={{ color: theme.white, fontSize: 16, maxWidth: "90%" }}
                                        onBlur={onBlur}
                                        blurOnSubmit
                                        multiline
                                    />
                                ) : (
                                    <Text
                                        style={{
                                            ...styles.toDoText,
                                            textDecorationLine: toDos[key].done ? "line-through" : "none",
                                            opacity: toDos[key].done ? 0.2 : 1,
                                        }}
                                    >
                                        {toDos[key].text}
                                    </Text>
                                )}
                            </View>
                            {editKey !== key && (
                                <View style={{ flexDirection: "row" }}>
                                    <TouchableOpacity onPress={() => onEditText(key)}>
                                        <MaterialCommunityIcons
                                            name="pencil"
                                            style={{ opacity: 0.5, marginRight: 10 }}
                                            size={24}
                                            color={theme.white}
                                        />
                                    </TouchableOpacity>
                                    <TouchableOpacity onPress={() => deleteToDo(key)}>
                                        <Fontisto name="trash" style={{ opacity: 0.5 }} size={22} color={theme.white} />
                                    </TouchableOpacity>
                                </View>
                            )}
                        </View>
                    ) : null
                )}
        </>
    );
}

const styles = StyleSheet.create({
    toDo: {
        marginBottom: 10,
        paddingVertical: 20,
        paddingHorizontal: 15,
        borderRadius: 15,
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
    },
    toDoText: {
        color: theme.white,
        fontSize: 18,
        fontWeight: "500",
        maxWidth: "86%",
        marginRight: 10,
    },
});