123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110 |
- import { useNavigation } from '@react-navigation/core';
- import React from 'react';
- import { StyleSheet } from 'react-native';
- import {
- Avatar,
- Button,
- Card,
- Divider,
- List,
- useTheme,
- } from 'react-native-paper';
- import Urls from '../../../constants/Urls';
- import { ProfileDataType } from '../../../screens/Amicale/ProfileScreen';
- import i18n from 'i18n-js';
-
- type Props = {
- profile?: ProfileDataType;
- };
-
- const styles = StyleSheet.create({
- card: {
- margin: 10,
- },
- icon: {
- backgroundColor: 'transparent',
- },
- editButton: {
- marginLeft: 'auto',
- },
- mascot: {
- width: 60,
- },
- title: {
- marginLeft: 10,
- },
- });
-
- function getFieldValue(field?: string): string {
- return field ? field : i18n.t('screens.profile.noData');
- }
-
- export default function ProfilePersonalCard(props: Props) {
- const { profile } = props;
- const theme = useTheme();
- const navigation = useNavigation();
-
- function getPersonalListItem(field: string | undefined, icon: string) {
- const title = field != null ? getFieldValue(field) : ':(';
- const subtitle = field != null ? '' : getFieldValue(field);
- return (
- <List.Item
- title={title}
- description={subtitle}
- left={(leftProps) => (
- <List.Icon
- style={leftProps.style}
- icon={icon}
- color={field != null ? leftProps.color : theme.colors.textDisabled}
- />
- )}
- />
- );
- }
-
- return (
- <Card style={styles.card}>
- <Card.Title
- title={`${profile?.first_name} ${profile?.last_name}`}
- subtitle={profile?.email}
- left={(iconProps) => (
- <Avatar.Icon
- size={iconProps.size}
- icon="account"
- color={theme.colors.primary}
- style={styles.icon}
- />
- )}
- />
- <Card.Content>
- <Divider />
- <List.Section>
- <List.Subheader>
- {i18n.t('screens.profile.personalInformation')}
- </List.Subheader>
- {getPersonalListItem(profile?.birthday, 'cake-variant')}
- {getPersonalListItem(profile?.phone, 'phone')}
- {getPersonalListItem(profile?.email, 'email')}
- {getPersonalListItem(profile?.branch, 'school')}
- </List.Section>
- <Divider />
- <Card.Actions>
- <Button
- icon="account-edit"
- mode="contained"
- onPress={() => {
- navigation.navigate('website', {
- host: Urls.websites.amicale,
- path: profile?.link,
- title: i18n.t('screens.websites.amicale'),
- });
- }}
- style={styles.editButton}
- >
- {i18n.t('screens.profile.editInformation')}
- </Button>
- </Card.Actions>
- </Card.Content>
- </Card>
- );
- }
|