2020-11-22 00:46:23 +01:00
|
|
|
|
import React, { useState } from 'react'
|
|
|
|
|
import { Image, StyleSheet, Text, View } from 'react-native'
|
|
|
|
|
import ShimmerPlaceholder from 'react-native-shimmer-placeholder'
|
|
|
|
|
import { Feather } from '@expo/vector-icons'
|
|
|
|
|
|
|
|
|
|
import ParseContent from 'src/components/ParseContent'
|
2020-11-23 00:07:32 +01:00
|
|
|
|
import { useTheme } from 'src/utils/styles/ThemeManager'
|
|
|
|
|
|
|
|
|
|
import constants from 'src/utils/styles/constants'
|
2020-11-22 00:46:23 +01:00
|
|
|
|
|
|
|
|
|
export interface Props {
|
|
|
|
|
account: Mastodon.Account | undefined
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const AccountInformation: React.FC<Props> = ({ account }) => {
|
2020-11-23 00:07:32 +01:00
|
|
|
|
const { theme } = useTheme()
|
2020-11-22 00:46:23 +01:00
|
|
|
|
const [avatarLoaded, setAvatarLoaded] = useState(false)
|
|
|
|
|
|
|
|
|
|
// add emoji support
|
|
|
|
|
return (
|
|
|
|
|
<View style={styles.information}>
|
|
|
|
|
{/* <Text>Moved or not: {account.moved}</Text> */}
|
|
|
|
|
<ShimmerPlaceholder visible={avatarLoaded} width={90} height={90}>
|
|
|
|
|
<Image
|
|
|
|
|
source={{ uri: account?.avatar }}
|
|
|
|
|
style={styles.avatar}
|
|
|
|
|
onLoadEnd={() => setAvatarLoaded(true)}
|
|
|
|
|
/>
|
|
|
|
|
</ShimmerPlaceholder>
|
|
|
|
|
|
2020-11-23 00:07:32 +01:00
|
|
|
|
<Text style={[styles.display_name, { color: theme.primary }]}>
|
2020-11-22 00:46:23 +01:00
|
|
|
|
{account?.display_name || account?.username}
|
|
|
|
|
{account?.bot && (
|
|
|
|
|
<Feather name='hard-drive' style={styles.display_name} />
|
|
|
|
|
)}
|
|
|
|
|
</Text>
|
2020-11-23 00:07:32 +01:00
|
|
|
|
|
|
|
|
|
<Text style={[styles.account, { color: theme.secondary }]}>
|
|
|
|
|
@{account?.acct}
|
2020-11-22 00:46:23 +01:00
|
|
|
|
{account?.locked && <Feather name='lock' />}
|
|
|
|
|
</Text>
|
|
|
|
|
|
2020-11-23 00:07:32 +01:00
|
|
|
|
{account?.fields && (
|
|
|
|
|
<View style={styles.fields}>
|
|
|
|
|
{account.fields.map((field, index) => (
|
|
|
|
|
<View key={index} style={{ flex: 1, flexDirection: 'row' }}>
|
|
|
|
|
<Text
|
|
|
|
|
style={{
|
|
|
|
|
width: '30%',
|
|
|
|
|
alignSelf: 'center',
|
|
|
|
|
color: theme.primary
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<ParseContent
|
|
|
|
|
content={field.name}
|
|
|
|
|
size={constants.FONT_SIZE_M}
|
|
|
|
|
emojis={account.emojis}
|
|
|
|
|
showFullLink
|
|
|
|
|
/>{' '}
|
|
|
|
|
{field.verified_at && <Feather name='check-circle' />}
|
|
|
|
|
</Text>
|
|
|
|
|
<Text style={{ width: '70%', color: theme.primary }}>
|
|
|
|
|
<ParseContent
|
|
|
|
|
content={field.value}
|
|
|
|
|
size={constants.FONT_SIZE_M}
|
|
|
|
|
emojis={account.emojis}
|
|
|
|
|
showFullLink
|
|
|
|
|
/>
|
|
|
|
|
</Text>
|
|
|
|
|
</View>
|
|
|
|
|
))}
|
|
|
|
|
</View>
|
|
|
|
|
)}
|
|
|
|
|
|
2020-11-22 00:46:23 +01:00
|
|
|
|
{account?.note && (
|
2020-11-23 00:07:32 +01:00
|
|
|
|
<View style={styles.note}>
|
|
|
|
|
<ParseContent
|
|
|
|
|
content={account.note}
|
|
|
|
|
size={constants.FONT_SIZE_M}
|
|
|
|
|
emojis={account.emojis}
|
|
|
|
|
/>
|
|
|
|
|
</View>
|
2020-11-22 00:46:23 +01:00
|
|
|
|
)}
|
2020-11-23 00:07:32 +01:00
|
|
|
|
|
2020-11-22 00:46:23 +01:00
|
|
|
|
{account?.created_at && (
|
2020-11-23 00:07:32 +01:00
|
|
|
|
<View style={styles.created_at}>
|
|
|
|
|
<Feather name='calendar' size={constants.FONT_SIZE_M + 2} />
|
|
|
|
|
<Text
|
|
|
|
|
style={{
|
|
|
|
|
color: theme.primary,
|
|
|
|
|
fontSize: constants.FONT_SIZE_M,
|
|
|
|
|
marginLeft: constants.SPACING_XS
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
加入时间:
|
|
|
|
|
{new Date(account.created_at).toLocaleDateString('zh-CN', {
|
|
|
|
|
year: 'numeric',
|
|
|
|
|
month: 'long',
|
|
|
|
|
day: 'numeric'
|
|
|
|
|
})}
|
|
|
|
|
</Text>
|
|
|
|
|
</View>
|
2020-11-22 00:46:23 +01:00
|
|
|
|
)}
|
|
|
|
|
|
2020-11-23 00:07:32 +01:00
|
|
|
|
<View style={styles.summary}>
|
|
|
|
|
<Text style={{ color: theme.primary }}>
|
|
|
|
|
{account?.statuses_count} 条嘟文
|
|
|
|
|
</Text>
|
|
|
|
|
<Text style={{ color: theme.primary }}>
|
|
|
|
|
关注 {account?.followers_count} 人
|
|
|
|
|
</Text>
|
|
|
|
|
<Text style={{ color: theme.primary }}>
|
|
|
|
|
被 {account?.following_count} 人关注
|
|
|
|
|
</Text>
|
|
|
|
|
</View>
|
2020-11-22 00:46:23 +01:00
|
|
|
|
</View>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const styles = StyleSheet.create({
|
2020-11-23 00:07:32 +01:00
|
|
|
|
information: {
|
|
|
|
|
marginTop: -30 - constants.GLOBAL_PAGE_PADDING,
|
|
|
|
|
padding: constants.GLOBAL_PAGE_PADDING
|
|
|
|
|
},
|
2020-11-22 00:46:23 +01:00
|
|
|
|
avatar: {
|
2020-11-23 00:07:32 +01:00
|
|
|
|
width: constants.AVATAR_L,
|
|
|
|
|
height: constants.AVATAR_L,
|
|
|
|
|
borderRadius: 8
|
2020-11-22 00:46:23 +01:00
|
|
|
|
},
|
|
|
|
|
display_name: {
|
2020-11-23 00:07:32 +01:00
|
|
|
|
fontSize: constants.FONT_SIZE_L,
|
2020-11-22 00:46:23 +01:00
|
|
|
|
fontWeight: 'bold',
|
2020-11-23 00:07:32 +01:00
|
|
|
|
marginTop: constants.SPACING_M,
|
|
|
|
|
marginBottom: constants.SPACING_XS
|
2020-11-22 00:46:23 +01:00
|
|
|
|
},
|
|
|
|
|
account: {
|
2020-11-23 00:07:32 +01:00
|
|
|
|
fontSize: constants.FONT_SIZE_M,
|
|
|
|
|
marginBottom: constants.SPACING_S
|
|
|
|
|
},
|
|
|
|
|
fields: {
|
|
|
|
|
marginBottom: constants.SPACING_S
|
|
|
|
|
},
|
|
|
|
|
note: {
|
|
|
|
|
marginBottom: constants.SPACING_M
|
|
|
|
|
},
|
|
|
|
|
created_at: {
|
|
|
|
|
flexDirection: 'row',
|
|
|
|
|
marginBottom: constants.SPACING_M
|
|
|
|
|
},
|
|
|
|
|
summary: {
|
|
|
|
|
flexDirection: 'row',
|
|
|
|
|
justifyContent: 'space-between'
|
2020-11-22 00:46:23 +01:00
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
export default AccountInformation
|