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.

ProfileClubCard.tsx 2.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. import React from 'react';
  2. import { Card, Avatar, Divider, useTheme, List } from 'react-native-paper';
  3. import i18n from 'i18n-js';
  4. import { FlatList, StyleSheet } from 'react-native';
  5. import { ProfileClubType } from '../../../screens/Amicale/ProfileScreen';
  6. import { useNavigation } from '@react-navigation/core';
  7. type Props = {
  8. clubs?: Array<ProfileClubType>;
  9. };
  10. const styles = StyleSheet.create({
  11. card: {
  12. margin: 10,
  13. },
  14. icon: {
  15. backgroundColor: 'transparent',
  16. },
  17. });
  18. export default function ProfileClubCard(props: Props) {
  19. const theme = useTheme();
  20. const navigation = useNavigation();
  21. const clubKeyExtractor = (item: ProfileClubType) => item.name;
  22. const getClubListItem = ({ item }: { item: ProfileClubType }) => {
  23. const onPress = () =>
  24. navigation.navigate('club-information', { clubId: item.id });
  25. let description = i18n.t('screens.profile.isMember');
  26. let icon = (leftProps: {
  27. color: string;
  28. style: {
  29. marginLeft: number;
  30. marginRight: number;
  31. marginVertical?: number;
  32. };
  33. }) => (
  34. <List.Icon
  35. color={leftProps.color}
  36. style={leftProps.style}
  37. icon="chevron-right"
  38. />
  39. );
  40. if (item.is_manager) {
  41. description = i18n.t('screens.profile.isManager');
  42. icon = (leftProps) => (
  43. <List.Icon
  44. style={leftProps.style}
  45. icon="star"
  46. color={theme.colors.primary}
  47. />
  48. );
  49. }
  50. return (
  51. <List.Item
  52. title={item.name}
  53. description={description}
  54. left={icon}
  55. onPress={onPress}
  56. />
  57. );
  58. };
  59. function getClubList(list: Array<ProfileClubType> | undefined) {
  60. if (!list) {
  61. return null;
  62. }
  63. list.sort((a) => (a.is_manager ? -1 : 1));
  64. return (
  65. <FlatList
  66. renderItem={getClubListItem}
  67. keyExtractor={clubKeyExtractor}
  68. data={list}
  69. />
  70. );
  71. }
  72. return (
  73. <Card style={styles.card}>
  74. <Card.Title
  75. title={i18n.t('screens.profile.clubs')}
  76. subtitle={i18n.t('screens.profile.clubsSubtitle')}
  77. left={(iconProps) => (
  78. <Avatar.Icon
  79. size={iconProps.size}
  80. icon="account-group"
  81. color={theme.colors.primary}
  82. style={styles.icon}
  83. />
  84. )}
  85. />
  86. <Card.Content>
  87. <Divider />
  88. {getClubList(props.clubs)}
  89. </Card.Content>
  90. </Card>
  91. );
  92. }