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.

SmallDashboardItem.tsx 2.7KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  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 {Badge, TouchableRipple, useTheme} from 'react-native-paper';
  21. import {Dimensions, Image, View} from 'react-native';
  22. import * as Animatable from 'react-native-animatable';
  23. type PropsType = {
  24. image: string | null;
  25. onPress: () => void | null;
  26. badgeCount: number | null;
  27. };
  28. /**
  29. * Component used to render a small dashboard item
  30. */
  31. function SmallDashboardItem(props: PropsType) {
  32. const itemSize = Dimensions.get('window').width / 8;
  33. const theme = useTheme();
  34. const {image} = props;
  35. return (
  36. <TouchableRipple
  37. onPress={props.onPress}
  38. borderless
  39. style={{
  40. marginLeft: itemSize / 6,
  41. marginRight: itemSize / 6,
  42. }}>
  43. <View
  44. style={{
  45. width: itemSize,
  46. height: itemSize,
  47. }}>
  48. {image ? (
  49. <Image
  50. source={{uri: image}}
  51. style={{
  52. width: '80%',
  53. height: '80%',
  54. marginLeft: 'auto',
  55. marginRight: 'auto',
  56. marginTop: 'auto',
  57. marginBottom: 'auto',
  58. }}
  59. />
  60. ) : null}
  61. {props.badgeCount != null && props.badgeCount > 0 ? (
  62. <Animatable.View
  63. animation="zoomIn"
  64. duration={300}
  65. useNativeDriver
  66. style={{
  67. position: 'absolute',
  68. top: 0,
  69. right: 0,
  70. }}>
  71. <Badge
  72. visible={true}
  73. style={{
  74. backgroundColor: theme.colors.primary,
  75. borderColor: theme.colors.background,
  76. borderWidth: 2,
  77. }}>
  78. {props.badgeCount}
  79. </Badge>
  80. </Animatable.View>
  81. ) : null}
  82. </View>
  83. </TouchableRipple>
  84. );
  85. }
  86. const areEqual = (prevProps: PropsType, nextProps: PropsType): boolean => {
  87. return nextProps.badgeCount !== prevProps.badgeCount;
  88. };
  89. export default React.memo(SmallDashboardItem, areEqual);