import React from 'react'; import { StyleSheet, Text, View, TextInput, Button, Pressable } from 'react-native'; import { sqlite_exec_parameterised } from '../../db/query'; import DateTimePicker from '@react-native-community/datetimepicker'; export default function DepenseForm(props){ const [depenseValue, onValueEdit] = React.useState(props.depense ? props.depense.value : null); const [descriptionValue, onDescriptionEdit] = React.useState(props.depense ? props.depense.description : null); const [depenseDate, onDateChange] = React.useState(props.depense ? new Date(props.depense.date) : new Date()) const [timePickerDisplay, onDatePicker] = React.useState(false) let update_depense = null != props.depense; const toggleDateInput = () => { onDatePicker(true); } return ( {update_depense ? "Modifier" : "Nouvelle dépense"} 💸 { onValueEdit(value); }} /> 📃 { onDescriptionEdit(value); }} /> 📅 toggleDateInput()} value={ depenseDate.toDateString() } style={ depense_form_styles.input } onChangeText={ (value) => { onDescriptionEdit(value); }} /> {/* https://github.com/react-native-datetimepicker/datetimepicker */} { timePickerDisplay && { onDatePicker(false); onDateChange(new Date(value)); }} /> } { if(null != depenseValue) { if(update_depense) { sqlite_exec_parameterised( "UPDATE expense SET value = ?, description = ?, date = ? WHERE id = ?", [depenseValue, descriptionValue, depenseDate.valueOf(), props.depense.id], (res) => { props.onUpdateDepense(false) } ); } else { sqlite_exec_parameterised( "INSERT INTO expense (value, description, date) values (?, ?, ?)", [depenseValue, descriptionValue, depenseDate.valueOf()], (res) => { props.onAddDepense(false); } ); } props.fetchDepenses(); } }}> {update_depense ? "Update" : "Add"} ); } const depense_form_styles = StyleSheet.create({ form_area: { backgroundColor: '#ffffff', zIndex: 10, elevation: 10, margin: 5, // marginTop: '50%', display: 'flex', flexDirection: 'column', justifyContent: "space-between", borderWidth: 1, }, form_entry :{ display: 'flex', flexDirection: 'row', }, input :{ width: "50%", borderWidth: 1, textAlign: 'center', }, button_add: { borderWidth: 1, padding: 10, }, })