Application Android et IOS pour l'amicale des élèves https://play.google.com/store/apps/details?id=fr.amicaleinsat.application
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 3.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  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. import GENERAL_STYLES from '../../constants/Styles';
  30. type PropsType = {
  31. eventNumber: number;
  32. clickAction: () => void;
  33. children?: React.ReactNode;
  34. };
  35. const styles = StyleSheet.create({
  36. card: {
  37. width: 'auto',
  38. marginLeft: 10,
  39. marginRight: 10,
  40. marginTop: 10,
  41. overflow: 'hidden',
  42. },
  43. avatar: {
  44. backgroundColor: 'transparent',
  45. },
  46. text: {
  47. fontWeight: 'bold',
  48. },
  49. });
  50. /**
  51. * Component used to display a dashboard item containing a preview event
  52. */
  53. function EventDashBoardItem(props: PropsType) {
  54. const theme = useTheme();
  55. const isAvailable = props.eventNumber > 0;
  56. const iconColor = isAvailable
  57. ? theme.colors.planningColor
  58. : theme.colors.textDisabled;
  59. const textColor = isAvailable ? theme.colors.text : theme.colors.textDisabled;
  60. let subtitle;
  61. if (isAvailable) {
  62. subtitle = (
  63. <Text>
  64. <Text style={styles.text}>{props.eventNumber}</Text>
  65. <Text>
  66. {props.eventNumber > 1
  67. ? i18n.t('screens.home.dashboard.todayEventsSubtitlePlural')
  68. : i18n.t('screens.home.dashboard.todayEventsSubtitle')}
  69. </Text>
  70. </Text>
  71. );
  72. } else {
  73. subtitle = i18n.t('screens.home.dashboard.todayEventsSubtitleNA');
  74. }
  75. return (
  76. <Card style={styles.card}>
  77. <TouchableRipple style={GENERAL_STYLES.flex} onPress={props.clickAction}>
  78. <View>
  79. <Card.Title
  80. title={i18n.t('screens.home.dashboard.todayEventsTitle')}
  81. titleStyle={{ color: textColor }}
  82. subtitle={subtitle}
  83. subtitleStyle={{ color: textColor }}
  84. left={(iconProps) => (
  85. <Avatar.Icon
  86. icon="calendar-range"
  87. color={iconColor}
  88. size={iconProps.size}
  89. style={styles.avatar}
  90. />
  91. )}
  92. />
  93. <Card.Content>{props.children}</Card.Content>
  94. </View>
  95. </TouchableRipple>
  96. </Card>
  97. );
  98. }
  99. const areEqual = (prevProps: PropsType, nextProps: PropsType): boolean => {
  100. return nextProps.eventNumber === prevProps.eventNumber;
  101. };
  102. export default React.memo(EventDashBoardItem, areEqual);