File size: 2,142 Bytes
6d44341 | 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 | import React from "react";
import {StyleSheet, View, TouchableOpacity, Text} from "react-native";
import {Ionicons} from "@expo/vector-icons";
import moment from "moment";
import {useDB} from "../context/DBcontex";
function Todo({item, color, listId}) {
const {deleteTodo, toggleTodoCompleted} = useDB()
const onDelete = async () => {
await deleteTodo(listId, item)
}
const toggleCompleted = async () => {
await toggleTodoCompleted(listId, item)
}
return (
<View style={[styles.container, {backgroundColor: color}]}>
<View style={{flexDirection: 'row'}}>
<TouchableOpacity style={{alignItems: 'center', justifyContent: 'center'}}
onPress={() => toggleCompleted()}>
<Ionicons name={item.completed ? "ios-square" : "ios-square-outline"} size={41} color="#47dbb9"/>
</TouchableOpacity>
<View style={styles.todoInfo}>
<Text
style={[styles.todoTitle, {textDecorationLine: item.completed ? 'line-through' : 'none'}]}>
{item.title}
</Text>
<Text style={styles.todoDate}>{moment(item.createdAt.toDate()).calendar()}</Text>
</View>
<TouchableOpacity style={{
alignItems: 'center',
justifyContent: 'center'
}} onPress={() => onDelete()}
>
<Ionicons name="trash-outline" size={41} color="#fb634c"/>
</TouchableOpacity>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
marginVertical: 10,
borderRadius: 10,
padding: 5,
},
todoTitle: {
fontSize: 22,
flex: 1,
alignSelf: 'center'
},
todoDate: {
flex: 1,
alignSelf: 'center',
fontSize: 10,
color: 'white'
},
todoInfo: {
flex: 1,
justifyContent: 'space-between',
paddingVertical: 5,
}
});
export default Todo;
|