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.

ProfilePersonalCard.tsx 2.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. import { useNavigation } from '@react-navigation/core';
  2. import React from 'react';
  3. import { StyleSheet } from 'react-native';
  4. import {
  5. Avatar,
  6. Button,
  7. Card,
  8. Divider,
  9. List,
  10. useTheme,
  11. } from 'react-native-paper';
  12. import Urls from '../../../constants/Urls';
  13. import { ProfileDataType } from '../../../screens/Amicale/ProfileScreen';
  14. import i18n from 'i18n-js';
  15. type Props = {
  16. profile?: ProfileDataType;
  17. };
  18. const styles = StyleSheet.create({
  19. card: {
  20. margin: 10,
  21. },
  22. icon: {
  23. backgroundColor: 'transparent',
  24. },
  25. editButton: {
  26. marginLeft: 'auto',
  27. },
  28. mascot: {
  29. width: 60,
  30. },
  31. title: {
  32. marginLeft: 10,
  33. },
  34. });
  35. function getFieldValue(field?: string): string {
  36. return field ? field : i18n.t('screens.profile.noData');
  37. }
  38. export default function ProfilePersonalCard(props: Props) {
  39. const { profile } = props;
  40. const theme = useTheme();
  41. const navigation = useNavigation();
  42. function getPersonalListItem(field: string | undefined, icon: string) {
  43. const title = field != null ? getFieldValue(field) : ':(';
  44. const subtitle = field != null ? '' : getFieldValue(field);
  45. return (
  46. <List.Item
  47. title={title}
  48. description={subtitle}
  49. left={(leftProps) => (
  50. <List.Icon
  51. style={leftProps.style}
  52. icon={icon}
  53. color={field != null ? leftProps.color : theme.colors.textDisabled}
  54. />
  55. )}
  56. />
  57. );
  58. }
  59. return (
  60. <Card style={styles.card}>
  61. <Card.Title
  62. title={`${profile?.first_name} ${profile?.last_name}`}
  63. subtitle={profile?.email}
  64. left={(iconProps) => (
  65. <Avatar.Icon
  66. size={iconProps.size}
  67. icon="account"
  68. color={theme.colors.primary}
  69. style={styles.icon}
  70. />
  71. )}
  72. />
  73. <Card.Content>
  74. <Divider />
  75. <List.Section>
  76. <List.Subheader>
  77. {i18n.t('screens.profile.personalInformation')}
  78. </List.Subheader>
  79. {getPersonalListItem(profile?.birthday, 'cake-variant')}
  80. {getPersonalListItem(profile?.phone, 'phone')}
  81. {getPersonalListItem(profile?.email, 'email')}
  82. {getPersonalListItem(profile?.branch, 'school')}
  83. </List.Section>
  84. <Divider />
  85. <Card.Actions>
  86. <Button
  87. icon="account-edit"
  88. mode="contained"
  89. onPress={() => {
  90. navigation.navigate('website', {
  91. host: Urls.websites.amicale,
  92. path: profile?.link,
  93. title: i18n.t('screens.websites.amicale'),
  94. });
  95. }}
  96. style={styles.editButton}
  97. >
  98. {i18n.t('screens.profile.editInformation')}
  99. </Button>
  100. </Card.Actions>
  101. </Card.Content>
  102. </Card>
  103. );
  104. }