octo/tooot
octo/tooot
1
0
Fork 0
mirror of https://github.com/tooot-app/app synced 2025-03-13 18:10:12 +01:00
Code Issues Projects Releases Wiki Activity

Refine component account

Browse Source
This commit is contained in:
xmflsct 2022-12-04 12:57:03 +01:00
parent 6146ecf712
commit e1e700543f
2 changed files with 54 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
src/components/Account.tsx
View File

@ -5,22 +5,17 @@ import { TabLocalStackParamList } from '@utils/navigation/navigators'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { PropsWithChildren } from 'react'
import { Pressable, View } from 'react-native'
import { Pressable, PressableProps, View } from 'react-native'
import GracefullyImage from './GracefullyImage'
import Icon from './Icon'
import CustomText from './Text'
export interface Props {
account: Mastodon.Account
Component?: typeof View | typeof Pressable
props?: {}
props?: PressableProps
}
const ComponentAccount: React.FC<PropsWithChildren & Props> = ({
account,
Component,
props,
children
}) => {
const ComponentAccount: React.FC<PropsWithChildren & Props> = ({ account, props, children }) => {
const { colors } = useTheme()
const navigation = useNavigation<StackNavigationProp<TabLocalStackParamList>>()
@ -28,50 +23,62 @@ const ComponentAccount: React.FC<PropsWithChildren & Props> = ({
props = { onPress: () => navigation.push('Tab-Shared-Account', { account }) }
}
return React.createElement(
Component || Pressable,
{
...props,
style: {
return (
<Pressable
{...props}
style={{
flex: 1,
paddingHorizontal: StyleConstants.Spacing.Global.PagePadding,
paddingVertical: StyleConstants.Spacing.M,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center'
}}
children={
<>
<View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
<GracefullyImage
uri={{ original: account.avatar, static: account.avatar_static }}
style={{
width: StyleConstants.Avatar.S,
height: StyleConstants.Avatar.S,
borderRadius: 6,
marginRight: StyleConstants.Spacing.S
}}
/>
<View>
<CustomText numberOfLines={1}>
<ParseEmojis
content={account.display_name || account.username}
emojis={account.emojis}
size='S'
fontBold
/>
</CustomText>
<CustomText
numberOfLines={1}
style={{
marginTop: StyleConstants.Spacing.XS,
color: colors.secondary
}}
>
@{account.acct}
</CustomText>
</View>
</View>
{props.onPress && !props.disabled ? (
<Icon
name='ChevronRight'
size={StyleConstants.Font.Size.L}
color={colors.secondary}
style={{ marginLeft: 8 }}
/>
) : (
children || null
)}
</>
}
},
<View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
<GracefullyImage
uri={{ original: account.avatar, static: account.avatar_static }}
style={{
width: StyleConstants.Avatar.S,
height: StyleConstants.Avatar.S,
borderRadius: 6,
marginRight: StyleConstants.Spacing.S
}}
/>
<View>
<CustomText numberOfLines={1}>
<ParseEmojis
content={account.display_name || account.username}
emojis={account.emojis}
size='S'
fontBold
/>
</CustomText>
<CustomText
numberOfLines={1}
style={{
marginTop: StyleConstants.Spacing.XS,
color: colors.secondary
}}
>
@{account.acct}
</CustomText>
</View>
</View>,
children
/>
)
}

2
src/screens/Tabs/Me/List/Accounts.tsx
View File

@ -57,7 +57,6 @@ const TabMeListAccounts: React.FC<TabMeStackScreenProps<'Tab-Me-List-Accounts'>>
<ComponentAccount
key={index}
account={item}
Component={View}
children={
<Button
type='icon'
@ -68,6 +67,7 @@ const TabMeListAccounts: React.FC<TabMeStackScreenProps<'Tab-Me-List-Accounts'>>
}
/>
}
props={{ disabled: true }}
/>
)}
ListEmptyComponent={