選択できるのは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. 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. if(event.type != "dismissed")
  60. {
  61. onDatePicker(false);
  62. onDateChange(new Date(value));
  63. }else{onDatePicker(false);}
  64. }}
  65. />
  66. }
  67. </View>
  68. <Pressable
  69. style={depense_form_styles.button_add}
  70. onPress={() =>
  71. {
  72. if(null != depenseValue)
  73. {
  74. if(update_depense)
  75. {
  76. sqlite_exec_parameterised(
  77. "UPDATE expense SET value = ?, description = ?, date = ? WHERE id = ?",
  78. [depenseValue, descriptionValue, depenseDate.valueOf(), props.depense.id],
  79. (res) => {
  80. props.onUpdateDepense(false)
  81. }
  82. );
  83. }
  84. else
  85. {
  86. sqlite_exec_parameterised(
  87. "INSERT INTO expense (value, description, date) values (?, ?, ?)",
  88. [depenseValue, descriptionValue, depenseDate.valueOf()], (res) => {
  89. props.onAddDepense(false);
  90. }
  91. );
  92. }
  93. props.fetchDepenses();
  94. }
  95. }}>
  96. <Text>{update_depense ? "Update" : "Add"}</Text>
  97. </Pressable>
  98. {
  99. update_depense ?
  100. <Pressable
  101. style={ [depense_form_styles.button_add, depense_form_styles.button_delete]}
  102. onPress={ () => {
  103. console.log("delete");
  104. Alert.alert(
  105. "Delete ?",
  106. "Ciao bye bye ?",
  107. [
  108. {text: "Oopsie", style: "cancel"},
  109. {text: "Oui oui", style: "destructive", onPress: () => {
  110. sqlite_exec_parameterised(
  111. "DELETE FROM expense WHERE id = ?",
  112. [props.depense.id],(res) =>
  113. {
  114. props.fetchDepenses();
  115. }
  116. )
  117. }}
  118. ])
  119. }}
  120. >
  121. <Text>💣</Text>
  122. </Pressable> :
  123. <View/>
  124. }
  125. </View>
  126. );
  127. }
  128. const depense_form_styles = StyleSheet.create({
  129. form_area: {
  130. backgroundColor: '#ffffff',
  131. zIndex: 10,
  132. elevation: 10,
  133. margin: 5,
  134. // marginTop: '50%',
  135. display: 'flex',
  136. flexDirection: 'column',
  137. justifyContent: "space-between",
  138. borderWidth: 1,
  139. },
  140. form_entry :{
  141. display: 'flex',
  142. flexDirection: 'row',
  143. },
  144. input :{
  145. width: "50%",
  146. borderWidth: 1,
  147. textAlign: 'center',
  148. },
  149. button_add: {
  150. borderWidth: 1,
  151. padding: 10,
  152. margin: 1,
  153. },
  154. button_delete: {
  155. position: 'absolute',
  156. right: 1,
  157. borderColor: "#CC5555",
  158. }
  159. })