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

week_list.js 2.2KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. import React from 'react';
  2. import { StyleSheet, Text, View, Pressable } from 'react-native';
  3. import DayList from './day_list';
  4. import { LinearGradient } from 'expo-linear-gradient';
  5. export default function WeekList(props)
  6. {
  7. const [ showDays, onToggleDays] = React.useState(false);
  8. let days = []
  9. let objective = props.dailyObjective * 7
  10. let total_payed = 0;
  11. props.days.forEach(element => {
  12. element.expenses.forEach( (expense) => {
  13. total_payed += expense.value;
  14. })
  15. days.push(
  16. <DayList
  17. key={"daylist_"+element.date}
  18. dailyObjective={props.dailyObjective}
  19. fetchDepenses={props.fetchDepenses}
  20. date={element.date}
  21. depenses={element.expenses}
  22. />
  23. )
  24. });
  25. let scale = Math.min(1, total_payed/objective)
  26. return (
  27. <View style={week_list_styles.week_list_container}>
  28. <View>
  29. <LinearGradient
  30. // Background Linear Gradient
  31. colors={[scale > 0 ? '#FFDDDDFF' : '#FFFFFF','#FFFFFF', '#FFFFFF']}
  32. locations={[scale, scale + (scale < 0.95 ? 0.05 : 0), 1]}
  33. start={{ x: 0, y: 0.0 }}
  34. end={{x:1,y:0}}
  35. style={week_list_styles.background}
  36. />
  37. <Pressable
  38. style={week_list_styles.week_header}
  39. onPress={() => {onToggleDays(!showDays)}}>
  40. <Text>{"Week " + props.number}</Text>
  41. <Text>{total_payed+"/"+objective}</Text>
  42. </Pressable>
  43. {showDays ? days : <View/>}
  44. </View>
  45. </View>
  46. );
  47. }
  48. const week_list_styles = StyleSheet.create({
  49. week_list_container: {
  50. borderWidth: 0.5,
  51. margin: 1,
  52. marginTop: 25,
  53. elevation:5,
  54. },
  55. week_header: {
  56. display: 'flex',
  57. flexDirection: 'row',
  58. justifyContent: 'space-between',
  59. marginTop: 5,
  60. marginBottom: 5,
  61. padding: 3,
  62. // elevation: 10,
  63. },
  64. background: {
  65. position: 'absolute',
  66. width: '100%',
  67. height: "100%",
  68. }
  69. });