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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. import React from 'react';
  2. import { StyleSheet, Text, View, TextInput, Button } from 'react-native';
  3. import TitleBarButton from './title_bar/title_bar_button';
  4. function TitleBar(props){
  5. let expenseMultiplicator = 1;
  6. if (props.durationMode === "year")
  7. expenseMultiplicator = 365
  8. if (props.durationMode === "weeks")
  9. expenseMultiplicator = 7
  10. if(props.durationMode === "months")
  11. expenseMultiplicator = 30
  12. const [currentEditValue, onDurationEdit] = React.useState(null);
  13. let displayValue = currentEditValue
  14. if(null == displayValue)
  15. displayValue = expenseMultiplicator*props.dailyExpense
  16. return (
  17. <View style={title_bar_styles.controlBar}>
  18. <View style={{
  19. flexDirection: 'row'
  20. }}>
  21. <Text>Objectif</Text>
  22. <TextInput
  23. keyboardType="number-pad"
  24. enablesReturnKeyAutomatically={true}
  25. returnKeyType="done"
  26. value={(displayValue).toString()}
  27. style={title_bar_styles.input}
  28. onChangeText={(value) => onDurationEdit(value)}
  29. onEndEditing={() => {
  30. props.onChangeObjective(parseInt(parseInt( currentEditValue ) / expenseMultiplicator));
  31. onDurationEdit(null);
  32. }}
  33. />
  34. <Text>(/{props.durationMode})</Text>
  35. </View>
  36. <View style={{
  37. alignItems: 'flex-end',
  38. flexDirection: 'row'
  39. }}>
  40. <TitleBarButton
  41. currentDurationMode={props.durationMode}
  42. onChangeDuration={props.onChangeDuration}
  43. onDurationEdit={onDurationEdit}
  44. durationMode="days"/>
  45. <TitleBarButton
  46. currentDurationMode={props.durationMode}
  47. onChangeDuration={props.onChangeDuration}
  48. onDurationEdit={onDurationEdit}
  49. durationMode="weeks"/>
  50. <TitleBarButton
  51. currentDurationMode={props.durationMode}
  52. onChangeDuration={props.onChangeDuration}
  53. onDurationEdit={onDurationEdit}
  54. durationMode="months"/>
  55. <TitleBarButton
  56. currentDurationMode={props.durationMode}
  57. onChangeDuration={props.onChangeDuration}
  58. onDurationEdit={onDurationEdit}
  59. durationMode="year"/>
  60. </View>
  61. </View>
  62. );
  63. }
  64. const title_bar_styles = StyleSheet.create({
  65. controlBar: {
  66. flexDirection: "row",
  67. justifyContent: 'space-between',
  68. alignItems: 'center',
  69. borderBottomWidth: 0.5,
  70. paddingBottom: 5,
  71. },
  72. input: {
  73. borderWidth: 0.5,
  74. width: 100,
  75. },
  76. highlighted: {
  77. backgroundColor: "#ff8899",
  78. borderWidth: 3
  79. }
  80. });
  81. export default TitleBar;