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.

ClubListItem.tsx 3.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  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 {Avatar, Chip, List, withTheme} from 'react-native-paper';
  21. import {View} from 'react-native';
  22. import type {
  23. ClubCategoryType,
  24. ClubType,
  25. } from '../../../screens/Amicale/Clubs/ClubListScreen';
  26. type PropsType = {
  27. onPress: () => void;
  28. categoryTranslator: (id: number) => ClubCategoryType | null;
  29. item: ClubType;
  30. height: number;
  31. theme: ReactNativePaper.Theme;
  32. };
  33. class ClubListItem extends React.Component<PropsType> {
  34. hasManagers: boolean;
  35. constructor(props: PropsType) {
  36. super(props);
  37. this.hasManagers = props.item.responsibles.length > 0;
  38. }
  39. shouldComponentUpdate(): boolean {
  40. return false;
  41. }
  42. getCategoriesRender(categories: Array<number | null>) {
  43. const {props} = this;
  44. const final: Array<React.ReactNode> = [];
  45. categories.forEach((cat: number | null) => {
  46. if (cat != null) {
  47. const category = props.categoryTranslator(cat);
  48. if (category) {
  49. final.push(
  50. <Chip
  51. style={{marginRight: 5, marginBottom: 5}}
  52. key={`${props.item.id}:${category.id}`}>
  53. {category.name}
  54. </Chip>,
  55. );
  56. }
  57. }
  58. });
  59. return <View style={{flexDirection: 'row'}}>{final}</View>;
  60. }
  61. render() {
  62. const {props} = this;
  63. const categoriesRender = () =>
  64. this.getCategoriesRender(props.item.category);
  65. const {colors} = props.theme;
  66. return (
  67. <List.Item
  68. title={props.item.name}
  69. description={categoriesRender}
  70. onPress={props.onPress}
  71. left={() => (
  72. <Avatar.Image
  73. style={{
  74. backgroundColor: 'transparent',
  75. marginLeft: 10,
  76. marginRight: 10,
  77. }}
  78. size={64}
  79. source={{uri: props.item.logo}}
  80. />
  81. )}
  82. right={() => (
  83. <Avatar.Icon
  84. style={{
  85. marginTop: 'auto',
  86. marginBottom: 'auto',
  87. backgroundColor: 'transparent',
  88. }}
  89. size={48}
  90. icon={
  91. this.hasManagers ? 'check-circle-outline' : 'alert-circle-outline'
  92. }
  93. color={this.hasManagers ? colors.success : colors.primary}
  94. />
  95. )}
  96. style={{
  97. height: props.height,
  98. justifyContent: 'center',
  99. }}
  100. />
  101. );
  102. }
  103. }
  104. export default withTheme(ClubListItem);