2020-12-27 16:25:29 +01:00
|
|
|
import { useTheme } from '@root/utils/styles/ThemeManager'
|
2020-12-21 22:58:53 +01:00
|
|
|
import React, { Dispatch, useEffect, useState } from 'react'
|
|
|
|
import { Dimensions, Image, StyleSheet, View } from 'react-native'
|
2020-12-18 00:00:45 +01:00
|
|
|
import { AccountAction, AccountState } from '../Account'
|
2020-11-22 00:46:23 +01:00
|
|
|
|
|
|
|
export interface Props {
|
2020-12-18 00:00:45 +01:00
|
|
|
accountState: AccountState
|
|
|
|
accountDispatch?: Dispatch<AccountAction>
|
|
|
|
account?: Mastodon.Account
|
2020-11-22 00:46:23 +01:00
|
|
|
limitHeight?: boolean
|
|
|
|
}
|
|
|
|
|
2020-12-18 00:00:45 +01:00
|
|
|
const AccountHeader: React.FC<Props> = ({
|
|
|
|
accountState,
|
|
|
|
accountDispatch,
|
|
|
|
account,
|
|
|
|
limitHeight = false
|
|
|
|
}) => {
|
2020-12-27 16:25:29 +01:00
|
|
|
const { theme } = useTheme()
|
2020-12-21 22:58:53 +01:00
|
|
|
const [ratio, setRatio] = useState(accountState.headerRatio)
|
2020-12-17 09:44:03 +01:00
|
|
|
|
2020-12-26 10:39:01 +01:00
|
|
|
let isMounted = false
|
|
|
|
useEffect(() => {
|
|
|
|
isMounted = true
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
isMounted = false
|
|
|
|
}
|
|
|
|
})
|
2020-11-22 00:46:23 +01:00
|
|
|
useEffect(() => {
|
2020-12-21 22:58:53 +01:00
|
|
|
if (
|
|
|
|
account?.header &&
|
|
|
|
!account.header.includes('/headers/original/missing.png')
|
|
|
|
) {
|
2020-12-26 10:39:01 +01:00
|
|
|
isMounted &&
|
|
|
|
Image.getSize(account.header, (width, height) => {
|
|
|
|
if (!limitHeight) {
|
|
|
|
accountDispatch &&
|
|
|
|
accountDispatch({
|
|
|
|
type: 'headerRatio',
|
|
|
|
payload: height / width
|
|
|
|
})
|
|
|
|
}
|
|
|
|
isMounted &&
|
|
|
|
setRatio(limitHeight ? accountState.headerRatio : height / width)
|
|
|
|
})
|
2020-12-27 00:32:51 +01:00
|
|
|
} else {
|
2020-12-27 16:25:29 +01:00
|
|
|
isMounted && setRatio(1 / 3)
|
2020-11-22 00:46:23 +01:00
|
|
|
}
|
2020-12-26 10:39:01 +01:00
|
|
|
}, [account, isMounted])
|
2020-12-18 00:00:45 +01:00
|
|
|
|
2020-11-22 00:46:23 +01:00
|
|
|
const windowWidth = Dimensions.get('window').width
|
|
|
|
|
|
|
|
return (
|
2020-12-27 16:25:29 +01:00
|
|
|
<View
|
|
|
|
style={{
|
|
|
|
height: windowWidth * ratio,
|
|
|
|
backgroundColor: theme.disabled
|
|
|
|
}}
|
|
|
|
>
|
2020-12-21 22:58:53 +01:00
|
|
|
<Image source={{ uri: account?.header }} style={styles.image} />
|
|
|
|
</View>
|
2020-11-22 00:46:23 +01:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
const styles = StyleSheet.create({
|
|
|
|
image: {
|
|
|
|
width: '100%',
|
|
|
|
height: '100%'
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
|
|
|
export default AccountHeader
|