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.8KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  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="numeric"
  24. value={(displayValue).toString()}
  25. style={title_bar_styles.input}
  26. onChangeText={(value) => onDurationEdit(value)}
  27. onEndEditing={() => {
  28. props.onChangeObjective(parseInt(parseInt( currentEditValue ) / expenseMultiplicator));
  29. onDurationEdit(null);
  30. }}
  31. />
  32. <Text>(/{props.durationMode})</Text>
  33. </View>
  34. <View style={{
  35. alignItems: 'flex-end',
  36. flexDirection: 'row'
  37. }}>
  38. <TitleBarButton
  39. currentDurationMode={props.durationMode}
  40. onChangeDuration={props.onChangeDuration}
  41. onDurationEdit={onDurationEdit}
  42. durationMode="days"/>
  43. <TitleBarButton
  44. currentDurationMode={props.durationMode}
  45. onChangeDuration={props.onChangeDuration}
  46. onDurationEdit={onDurationEdit}
  47. durationMode="weeks"/>
  48. <TitleBarButton
  49. currentDurationMode={props.durationMode}
  50. onChangeDuration={props.onChangeDuration}
  51. onDurationEdit={onDurationEdit}
  52. durationMode="months"/>
  53. <TitleBarButton
  54. currentDurationMode={props.durationMode}
  55. onChangeDuration={props.onChangeDuration}
  56. onDurationEdit={onDurationEdit}
  57. durationMode="year"/>
  58. </View>
  59. </View>
  60. );
  61. }
  62. const title_bar_styles = StyleSheet.create({
  63. controlBar: {
  64. flexDirection: "row",
  65. justifyContent: 'space-between',
  66. alignItems: 'center',
  67. borderBottomWidth: 0.5,
  68. paddingBottom: 5,
  69. },
  70. input: {
  71. borderWidth: 0.5,
  72. width: 100,
  73. },
  74. highlighted: {
  75. backgroundColor: "#ff8899",
  76. borderWidth: 3
  77. }
  78. });
  79. export default TitleBar;