Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.

depense_form.js 5.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. import React from 'react';
  2. import { StyleSheet, Text, View, TextInput, Button, Pressable } from 'react-native';
  3. import { sqlite_exec_parameterised } from '../../db/query';
  4. import DateTimePicker from '@react-native-community/datetimepicker';
  5. export default function DepenseForm(props){
  6. const [depenseValue, onValueEdit] =
  7. React.useState(props.depense ? props.depense.value : null);
  8. const [descriptionValue, onDescriptionEdit] =
  9. React.useState(props.depense ? props.depense.description : null);
  10. const [depenseDate, onDateChange] =
  11. React.useState(props.depense ? new Date(props.depense.date) : new Date())
  12. const [timePickerDisplay, onDatePicker] =
  13. React.useState(false)
  14. let update_depense = null != props.depense;
  15. const toggleDateInput = () => {
  16. onDatePicker(true);
  17. }
  18. return (
  19. <View style={ depense_form_styles.form_area }>
  20. <Text> {update_depense ? "Modifier" : "Nouvelle dépense"}</Text>
  21. <View style={ depense_form_styles.form_entry }>
  22. <Text> 💸</Text>
  23. <TextInput
  24. value={update_depense ? depenseValue.toString() : depenseValue ? depenseValue : ""}
  25. keyboardType="numeric"
  26. style={ depense_form_styles.input }
  27. onChangeText={ (value) => {
  28. onValueEdit(value);
  29. }}
  30. />
  31. </View>
  32. <View style={ depense_form_styles.form_entry }>
  33. <Text> 📃</Text>
  34. <TextInput
  35. value={update_depense ? descriptionValue : descriptionValue ? descriptionValue : ""}
  36. style={ depense_form_styles.input }
  37. onChangeText={ (value) => {
  38. onDescriptionEdit(value);
  39. }}
  40. />
  41. </View>
  42. <View style={ depense_form_styles.form_entry }>
  43. <Text> 📅</Text>
  44. <TextInput
  45. onPressIn={ () => toggleDateInput()}
  46. value={ depenseDate.toDateString() } style={ depense_form_styles.input }
  47. onChangeText={ (value) => {
  48. onDescriptionEdit(value);
  49. }}
  50. />
  51. {/* https://github.com/react-native-datetimepicker/datetimepicker */}
  52. { timePickerDisplay && <DateTimePicker
  53. testID="dateTimePicker"
  54. value={depenseDate}
  55. mode={"date"}
  56. is24Hour={true}
  57. display="default"
  58. onChange={(event, value) => {
  59. onDatePicker(false);
  60. onDateChange(new Date(value));
  61. }}
  62. />
  63. }
  64. </View>
  65. <Pressable
  66. style={depense_form_styles.button_add}
  67. onPress={() =>
  68. {
  69. if(null != depenseValue)
  70. {
  71. if(update_depense)
  72. {
  73. sqlite_exec_parameterised(
  74. "UPDATE expense SET value = ?, description = ?, date = ? WHERE id = ?",
  75. [depenseValue, descriptionValue, depenseDate.valueOf(), props.depense.id],
  76. (res) => {
  77. props.onUpdateDepense(false)
  78. }
  79. );
  80. }
  81. else
  82. {
  83. sqlite_exec_parameterised(
  84. "INSERT INTO expense (value, description, date) values (?, ?, ?)",
  85. [depenseValue, descriptionValue, depenseDate.valueOf()], (res) => {
  86. props.onAddDepense(false);
  87. }
  88. );
  89. }
  90. props.fetchDepenses();
  91. }
  92. }}>
  93. <Text>{update_depense ? "Update" : "Add"}</Text>
  94. </Pressable>
  95. </View>
  96. );
  97. }
  98. const depense_form_styles = StyleSheet.create({
  99. form_area: {
  100. backgroundColor: '#ffffff',
  101. zIndex: 10,
  102. elevation: 10,
  103. margin: 5,
  104. // marginTop: '50%',
  105. display: 'flex',
  106. flexDirection: 'column',
  107. justifyContent: "space-between",
  108. borderWidth: 1,
  109. },
  110. form_entry :{
  111. display: 'flex',
  112. flexDirection: 'row',
  113. },
  114. input :{
  115. width: "50%",
  116. borderWidth: 1,
  117. textAlign: 'center',
  118. },
  119. button_add: {
  120. borderWidth: 1,
  121. padding: 10,
  122. },
  123. })