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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  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;
  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: ClubCategoryType = props.categoryTranslator(cat);
  48. final.push(
  49. <Chip
  50. style={{marginRight: 5, marginBottom: 5}}
  51. key={`${props.item.id}:${category.id}`}>
  52. {category.name}
  53. </Chip>,
  54. );
  55. }
  56. });
  57. return <View style={{flexDirection: 'row'}}>{final}</View>;
  58. }
  59. render() {
  60. const {props} = this;
  61. const categoriesRender = () =>
  62. this.getCategoriesRender(props.item.category);
  63. const {colors} = props.theme;
  64. return (
  65. <List.Item
  66. title={props.item.name}
  67. description={categoriesRender}
  68. onPress={props.onPress}
  69. left={() => (
  70. <Avatar.Image
  71. style={{
  72. backgroundColor: 'transparent',
  73. marginLeft: 10,
  74. marginRight: 10,
  75. }}
  76. size={64}
  77. source={{uri: props.item.logo}}
  78. />
  79. )}
  80. right={() => (
  81. <Avatar.Icon
  82. style={{
  83. marginTop: 'auto',
  84. marginBottom: 'auto',
  85. backgroundColor: 'transparent',
  86. }}
  87. size={48}
  88. icon={
  89. this.hasManagers ? 'check-circle-outline' : 'alert-circle-outline'
  90. }
  91. color={this.hasManagers ? colors.success : colors.primary}
  92. />
  93. )}
  94. style={{
  95. height: props.height,
  96. justifyContent: 'center',
  97. }}
  98. />
  99. );
  100. }
  101. }
  102. export default withTheme(ClubListItem);