您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

depense_form.js 6.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. import React from 'react';
  2. import { StyleSheet, Text, View, TextInput, Alert, Pressable } from 'react-native';
  3. import { sqlite_exec_parameterised } from '../../db/query';
  4. import DateTimePicker from '@react-native-community/datetimepicker';
  5. import { SafeAreaView } from 'react-native-safe-area-context';
  6. export default function DepenseForm(props){
  7. const [depenseValue, onValueEdit] =
  8. React.useState(props.depense ? props.depense.value : null);
  9. const [descriptionValue, onDescriptionEdit] =
  10. React.useState(props.depense ? props.depense.description : null);
  11. const [depenseDate, onDateChange] =
  12. React.useState(props.depense ? new Date(props.depense.date) : new Date())
  13. const [timePickerDisplay, onDatePicker] =
  14. React.useState(false)
  15. let update_depense = null != props.depense;
  16. return (
  17. <View style={ depense_form_styles.form_area }>
  18. <Text> {update_depense ? "Modifier" : "Nouvelle dépense"}</Text>
  19. <View style={ depense_form_styles.form_entry }>
  20. <Text> 💸</Text>
  21. <TextInput
  22. value={update_depense ? depenseValue.toString() : depenseValue ? depenseValue : ""}
  23. keyboardType="numeric"
  24. style={ depense_form_styles.input }
  25. onChangeText={ (value) => {
  26. onValueEdit(value);
  27. }}
  28. />
  29. </View>
  30. <View style={ depense_form_styles.form_entry }>
  31. <Text> 📃</Text>
  32. <TextInput
  33. value={update_depense ? descriptionValue : descriptionValue ? descriptionValue : ""}
  34. style={ depense_form_styles.input }
  35. onChangeText={ (value) => {
  36. onDescriptionEdit(value);
  37. }}
  38. />
  39. </View>
  40. <View style={ depense_form_styles.form_entry }>
  41. <Text> 📅</Text>
  42. <Pressable onPress={ () => onDatePicker(true)} style={ depense_form_styles.input }>
  43. <Text >
  44. { depenseDate.toDateString() }
  45. </Text>
  46. </Pressable>
  47. </View>
  48. {/* https://github.com/react-native-datetimepicker/datetimepicker */}
  49. { timePickerDisplay && <DateTimePicker
  50. testID="dateTimePicker"
  51. value={depenseDate}
  52. mode={"date"}
  53. is24Hour={true}
  54. display="default"
  55. onChange={(event, value) => {
  56. if(event.type != "dismissed")
  57. {
  58. onDatePicker(false);
  59. onDateChange(new Date(value));
  60. }else{onDatePicker(false);}
  61. }}
  62. />
  63. }
  64. <Pressable
  65. style={depense_form_styles.button_add}
  66. onPress={() =>
  67. {
  68. if(null != depenseValue)
  69. {
  70. if(update_depense)
  71. {
  72. sqlite_exec_parameterised(
  73. "UPDATE expense SET value = ?, description = ?, date = ? WHERE id = ?",
  74. [depenseValue, descriptionValue, depenseDate.valueOf(), props.depense.id],
  75. (res) => {
  76. props.onUpdateDepense(false)
  77. }
  78. );
  79. }
  80. else
  81. {
  82. sqlite_exec_parameterised(
  83. "INSERT INTO expense (value, description, date) values (?, ?, ?)",
  84. [depenseValue, descriptionValue, depenseDate.valueOf()], (res) => {
  85. props.onAddDepense(false);
  86. }
  87. );
  88. }
  89. props.fetchDepenses();
  90. }
  91. }}>
  92. <Text>{update_depense ? "Update" : "Add"}</Text>
  93. </Pressable>
  94. {
  95. update_depense ?
  96. <Pressable
  97. style={ [depense_form_styles.button_add, depense_form_styles.button_delete]}
  98. onPress={ () => {
  99. console.log("delete");
  100. Alert.alert(
  101. "Delete ?",
  102. "Ciao bye bye ?",
  103. [
  104. {text: "Oopsie", style: "cancel"},
  105. {text: "Oui oui", style: "destructive", onPress: () => {
  106. sqlite_exec_parameterised(
  107. "DELETE FROM expense WHERE id = ?",
  108. [props.depense.id],(res) =>
  109. {
  110. props.fetchDepenses();
  111. }
  112. )
  113. }}
  114. ])
  115. }}
  116. >
  117. <Text>💣</Text>
  118. </Pressable> :
  119. <View/>
  120. }
  121. </View>
  122. );
  123. }
  124. const depense_form_styles = StyleSheet.create({
  125. form_area: {
  126. backgroundColor: '#ffffff',
  127. zIndex: 10,
  128. elevation: 10,
  129. margin: 5,
  130. // marginTop: '50%',
  131. display: 'flex',
  132. flexDirection: 'column',
  133. justifyContent: "space-between",
  134. // borderWidth: 5,
  135. borderRadius: 10,
  136. },
  137. form_entry :{
  138. display: 'flex',
  139. flexDirection: 'row',
  140. },
  141. input :{
  142. width: "50%",
  143. borderWidth: 1,
  144. borderRadius: 10,
  145. textAlign: 'center',
  146. },
  147. button_add: {
  148. borderWidth: 1,
  149. borderRadius: 10,
  150. padding: 10,
  151. margin: 1,
  152. },
  153. button_delete: {
  154. position: 'absolute',
  155. right: 1,
  156. borderColor: "#CC5555",
  157. }
  158. })