Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.

title_bar.js 2.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  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. },
  73. highlighted: {
  74. backgroundColor: "#ff8899",
  75. borderWidth: 3
  76. }
  77. });
  78. export default TitleBar;