Application Android et IOS pour l'amicale des élèves
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

EventDashboardItem.tsx 2.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. /*
  2. * Copyright (c) 2019 - 2020 Arnaud Vergnet.
  3. *
  4. * This file is part of Campus INSAT.
  5. *
  6. * Campus INSAT is free software: you can redistribute it and/or modify
  7. * it under the terms of the GNU General Public License as published by
  8. * the Free Software Foundation, either version 3 of the License, or
  9. * (at your option) any later version.
  10. *
  11. * Campus INSAT is distributed in the hope that it will be useful,
  12. * but WITHOUT ANY WARRANTY; without even the implied warranty of
  13. * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  14. * GNU General Public License for more details.
  15. *
  16. * You should have received a copy of the GNU General Public License
  17. * along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
  18. */
  19. import * as React from 'react';
  20. import {
  21. Avatar,
  22. Card,
  23. Text,
  24. TouchableRipple,
  25. useTheme,
  26. } from 'react-native-paper';
  27. import {StyleSheet, View} from 'react-native';
  28. import i18n from 'i18n-js';
  29. type PropsType = {
  30. eventNumber: number;
  31. clickAction: () => void;
  32. children?: React.ReactNode;
  33. };
  34. const styles = StyleSheet.create({
  35. card: {
  36. width: 'auto',
  37. marginLeft: 10,
  38. marginRight: 10,
  39. marginTop: 10,
  40. overflow: 'hidden',
  41. },
  42. avatar: {
  43. backgroundColor: 'transparent',
  44. },
  45. });
  46. /**
  47. * Component used to display a dashboard item containing a preview event
  48. */
  49. function EventDashBoardItem(props: PropsType) {
  50. const theme = useTheme();
  51. const isAvailable = props.eventNumber > 0;
  52. const iconColor = isAvailable
  53. ? theme.colors.planningColor
  54. : theme.colors.textDisabled;
  55. const textColor = isAvailable ? theme.colors.text : theme.colors.textDisabled;
  56. let subtitle;
  57. if (isAvailable) {
  58. subtitle = (
  59. <Text>
  60. <Text style={{fontWeight: 'bold'}}>{props.eventNumber}</Text>
  61. <Text>
  62. {props.eventNumber > 1
  63. ? i18n.t('screens.home.dashboard.todayEventsSubtitlePlural')
  64. : i18n.t('screens.home.dashboard.todayEventsSubtitle')}
  65. </Text>
  66. </Text>
  67. );
  68. } else {
  69. subtitle = i18n.t('screens.home.dashboard.todayEventsSubtitleNA');
  70. }
  71. return (
  72. <Card style={styles.card}>
  73. <TouchableRipple style={{flex: 1}} onPress={props.clickAction}>
  74. <View>
  75. <Card.Title
  76. title={i18n.t('screens.home.dashboard.todayEventsTitle')}
  77. titleStyle={{color: textColor}}
  78. subtitle={subtitle}
  79. subtitleStyle={{color: textColor}}
  80. left={(iconProps) => (
  81. <Avatar.Icon
  82. icon="calendar-range"
  83. color={iconColor}
  84. size={iconProps.size}
  85. style={styles.avatar}
  86. />
  87. )}
  88. />
  89. <Card.Content>{props.children}</Card.Content>
  90. </View>
  91. </TouchableRipple>
  92. </Card>
  93. );
  94. }
  95. const areEqual = (prevProps: PropsType, nextProps: PropsType): boolean => {
  96. return nextProps.eventNumber !== prevProps.eventNumber;
  97. };
  98. export default React.memo(EventDashBoardItem, areEqual);