Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

title_bar.js 2.4KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. import React from 'react';
  2. import { StyleSheet, Text, View, TextInput, Button } from 'react-native';
  3. function TitleBar(props){
  4. let expenseMultiplicator = 1;
  5. if (props.durationMode === "year")
  6. expenseMultiplicator = 365
  7. if (props.durationMode === "weeks")
  8. expenseMultiplicator = 7
  9. if(props.durationMode === "months")
  10. expenseMultiplicator = 30
  11. const [currentEditValue, onDurationEdit] = React.useState(null);
  12. let displayValue = currentEditValue
  13. if(null == displayValue)
  14. displayValue = expenseMultiplicator*props.dailyExpense
  15. return (
  16. <View style={styles.controlBar}>
  17. <View style={{
  18. flexDirection: 'row'
  19. }}>
  20. <Text>Objectif</Text>
  21. <TextInput
  22. keyboardType="numeric"
  23. value={(displayValue).toString()}
  24. style={styles.input}
  25. onChangeText={(value) => onDurationEdit(value)}
  26. onEndEditing={() => {
  27. props.onChangeObjective(parseInt(parseInt( currentEditValue ) / expenseMultiplicator));
  28. onDurationEdit(null);
  29. }}
  30. />
  31. <Text>(/{props.durationMode})</Text>
  32. </View>
  33. <View style={{
  34. alignItems: 'flex-end',
  35. flexDirection: 'row'
  36. }}>
  37. <Button
  38. onPress={() => props.onChangeDuration("days")}
  39. title={"Jour"}></Button>
  40. <Button
  41. onPress={() => {
  42. props.onChangeDuration("weeks");
  43. onDurationEdit(null);
  44. }}
  45. title={"Semaine"}></Button>
  46. <Button
  47. title={"Mois"}
  48. onPress={() => {
  49. props.onChangeDuration("months");
  50. onDurationEdit(null);
  51. }}></Button>
  52. <Button
  53. title={"Année"}
  54. onPress={() => {
  55. props.onChangeDuration("year")
  56. onDurationEdit(null);
  57. }}></Button>
  58. </View>
  59. </View>
  60. );
  61. }
  62. const styles = StyleSheet.create({
  63. controlBar: {
  64. flexDirection: "row",
  65. justifyContent: 'space-between',
  66. alignItems: 'center'
  67. },
  68. input: {
  69. borderWidth: 0.5
  70. }
  71. });
  72. export default TitleBar;