2020-12-13 14:04:25 +01:00
|
|
|
import { StyleConstants } from '@utils/styles/constants'
|
2021-01-03 02:00:26 +01:00
|
|
|
import React, { createRef, useCallback, useContext, useEffect } from 'react'
|
2020-12-27 16:25:29 +01:00
|
|
|
import { Animated, StyleSheet, View } from 'react-native'
|
|
|
|
import AccountInformationAvatar from './Information/Avatar'
|
|
|
|
import AccountInformationName from './Information/Name'
|
|
|
|
import AccountInformationAccount from './Information/Account'
|
|
|
|
import AccountInformationCreated from './Information/Created'
|
|
|
|
import AccountInformationStats from './Information/Stats'
|
|
|
|
import AccountInformationActions from './Information/Actions'
|
|
|
|
import AccountInformationFields from './Information/Fields'
|
|
|
|
import AccountInformationNotes from './Information/Notes'
|
2021-01-03 02:00:26 +01:00
|
|
|
import AccountContext from './utils/createContext'
|
2020-11-22 00:46:23 +01:00
|
|
|
|
|
|
|
export interface Props {
|
|
|
|
account: Mastodon.Account | undefined
|
2020-12-21 22:58:53 +01:00
|
|
|
disableActions?: boolean
|
2020-11-22 00:46:23 +01:00
|
|
|
}
|
|
|
|
|
2020-12-21 22:58:53 +01:00
|
|
|
const AccountInformation: React.FC<Props> = ({
|
|
|
|
account,
|
|
|
|
disableActions = false
|
|
|
|
}) => {
|
2021-01-03 02:00:26 +01:00
|
|
|
const { accountDispatch } = useContext(AccountContext)
|
2020-12-17 09:44:03 +01:00
|
|
|
const shimmerAvatarRef = createRef<any>()
|
|
|
|
const shimmerNameRef = createRef<any>()
|
|
|
|
const shimmerAccountRef = createRef<any>()
|
|
|
|
const shimmerCreatedRef = createRef<any>()
|
2020-12-27 16:25:29 +01:00
|
|
|
const shimmerStatsRef = createRef<any>()
|
2020-12-14 23:44:57 +01:00
|
|
|
useEffect(() => {
|
|
|
|
const informationAnimated = Animated.stagger(400, [
|
|
|
|
Animated.parallel([
|
2020-12-27 16:25:29 +01:00
|
|
|
shimmerAvatarRef.current?.getAnimated(),
|
|
|
|
shimmerNameRef.current?.getAnimated(),
|
|
|
|
shimmerAccountRef.current?.getAnimated(),
|
|
|
|
shimmerCreatedRef.current?.getAnimated(),
|
|
|
|
shimmerStatsRef.current?.ref1.getAnimated(),
|
|
|
|
shimmerStatsRef.current?.ref2.getAnimated(),
|
|
|
|
shimmerStatsRef.current?.ref3.getAnimated()
|
2020-12-14 23:44:57 +01:00
|
|
|
])
|
|
|
|
])
|
|
|
|
Animated.loop(informationAnimated).start()
|
|
|
|
}, [])
|
|
|
|
|
2020-12-27 16:25:29 +01:00
|
|
|
const onLayout = useCallback(
|
|
|
|
({ nativeEvent }) =>
|
|
|
|
accountDispatch &&
|
|
|
|
accountDispatch({
|
|
|
|
type: 'informationLayout',
|
|
|
|
payload: {
|
|
|
|
y: nativeEvent.layout.y,
|
|
|
|
height: nativeEvent.layout.height
|
2020-12-21 21:47:15 +01:00
|
|
|
}
|
2020-12-27 16:25:29 +01:00
|
|
|
}),
|
|
|
|
[]
|
2020-12-21 21:47:15 +01:00
|
|
|
)
|
|
|
|
|
2020-11-22 00:46:23 +01:00
|
|
|
return (
|
2020-12-27 16:25:29 +01:00
|
|
|
<View style={styles.base} onLayout={onLayout}>
|
2020-11-22 00:46:23 +01:00
|
|
|
{/* <Text>Moved or not: {account.moved}</Text> */}
|
2020-12-21 21:47:15 +01:00
|
|
|
<View style={styles.avatarAndActions}>
|
2020-12-27 16:25:29 +01:00
|
|
|
<AccountInformationAvatar ref={shimmerAvatarRef} account={account} />
|
2020-12-29 12:36:21 +01:00
|
|
|
{!disableActions ? (
|
|
|
|
<AccountInformationActions account={account} />
|
|
|
|
) : null}
|
2020-12-21 21:47:15 +01:00
|
|
|
</View>
|
2020-11-22 00:46:23 +01:00
|
|
|
|
2020-12-27 16:25:29 +01:00
|
|
|
<AccountInformationName ref={shimmerNameRef} account={account} />
|
2020-12-14 23:44:57 +01:00
|
|
|
|
2020-12-27 16:25:29 +01:00
|
|
|
<AccountInformationAccount ref={shimmerAccountRef} account={account} />
|
2020-11-22 00:46:23 +01:00
|
|
|
|
2020-12-29 12:36:21 +01:00
|
|
|
{account?.fields && account.fields.length > 0 ? (
|
2020-12-27 16:25:29 +01:00
|
|
|
<AccountInformationFields account={account} />
|
2020-12-29 12:36:21 +01:00
|
|
|
) : null}
|
2020-11-23 00:07:32 +01:00
|
|
|
|
2020-12-29 12:36:21 +01:00
|
|
|
{account?.note &&
|
|
|
|
account.note.length > 0 &&
|
|
|
|
account.note !== '<p></p>' ? (
|
2020-12-26 23:05:17 +01:00
|
|
|
// Empty notes might generate empty p tag
|
2020-12-27 16:25:29 +01:00
|
|
|
<AccountInformationNotes account={account} />
|
2020-12-29 12:36:21 +01:00
|
|
|
) : null}
|
2020-11-23 00:07:32 +01:00
|
|
|
|
2020-12-27 16:25:29 +01:00
|
|
|
<AccountInformationCreated ref={shimmerCreatedRef} account={account} />
|
2020-11-22 00:46:23 +01:00
|
|
|
|
2020-12-27 16:25:29 +01:00
|
|
|
<AccountInformationStats ref={shimmerStatsRef} account={account} />
|
2020-11-22 00:46:23 +01:00
|
|
|
</View>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
const styles = StyleSheet.create({
|
2020-12-21 21:47:15 +01:00
|
|
|
base: {
|
2020-12-17 09:44:03 +01:00
|
|
|
marginTop: -StyleConstants.Spacing.Global.PagePadding * 3,
|
2020-11-30 00:24:53 +01:00
|
|
|
padding: StyleConstants.Spacing.Global.PagePadding
|
2020-11-23 00:07:32 +01:00
|
|
|
},
|
2020-12-21 21:47:15 +01:00
|
|
|
avatarAndActions: {
|
|
|
|
flexDirection: 'row',
|
|
|
|
justifyContent: 'space-between'
|
2020-11-22 00:46:23 +01:00
|
|
|
}
|
|
|
|
})
|
|
|
|
|
2021-01-03 02:00:26 +01:00
|
|
|
export default React.memo(
|
|
|
|
AccountInformation,
|
|
|
|
(_, next) => next.account === undefined
|
|
|
|
)
|