tooot/src/components/Hashtag.tsx

78 lines
2.1 KiB
TypeScript
Raw Normal View History

2021-01-24 02:25:43 +01:00
import { useNavigation } from '@react-navigation/native'
import { StackNavigationProp } from '@react-navigation/stack'
2022-04-29 23:57:18 +02:00
import { TabLocalStackParamList } from '@utils/navigation/navigators'
2021-01-16 00:00:31 +01:00
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { PropsWithChildren, useState } from 'react'
2022-12-10 20:19:18 +01:00
import { Dimensions, Pressable, View } from 'react-native'
2022-12-03 23:10:20 +01:00
import Sparkline from './Sparkline'
import CustomText from './Text'
2021-01-16 00:00:31 +01:00
export interface Props {
2021-01-24 02:25:43 +01:00
hashtag: Mastodon.Tag
onPress?: () => void
2021-01-16 00:00:31 +01:00
}
2022-12-10 20:19:18 +01:00
const ComponentHashtag: React.FC<PropsWithChildren & Props> = ({
hashtag,
onPress: customOnPress,
children
}) => {
2022-02-12 14:51:01 +01:00
const { colors } = useTheme()
2022-12-03 23:10:20 +01:00
const navigation = useNavigation<StackNavigationProp<TabLocalStackParamList>>()
2021-01-24 02:25:43 +01:00
const onPress = () => {
2023-01-26 23:07:13 +01:00
navigation.push('Tab-Shared-Hashtag', { tag_name: hashtag.name })
}
2021-01-16 00:00:31 +01:00
const padding = StyleConstants.Spacing.Global.PagePadding
2022-12-03 23:10:20 +01:00
const width = Dimensions.get('window').width / 4
const [height, setHeight] = useState<number>(0)
2021-01-16 00:00:31 +01:00
return (
2021-04-09 21:43:12 +02:00
<Pressable
accessibilityRole='button'
2022-12-03 23:10:20 +01:00
style={{
flex: 1,
flexDirection: 'row',
2022-12-10 20:19:18 +01:00
alignItems: 'center',
2022-12-03 23:10:20 +01:00
justifyContent: 'space-between',
padding
}}
2021-04-09 21:43:12 +02:00
onPress={customOnPress || onPress}
>
2022-12-03 23:10:20 +01:00
<CustomText
fontStyle='M'
style={{
flexShrink: 1,
color: colors.primaryDefault,
paddingRight: StyleConstants.Spacing.M
}}
numberOfLines={1}
>
2021-01-24 02:25:43 +01:00
#{hashtag.name}
</CustomText>
{hashtag.history?.length ? (
<View
style={{ flexDirection: 'row', alignItems: 'center', alignSelf: 'stretch' }}
onLayout={({
nativeEvent: {
layout: { height }
}
}) => setHeight(height)}
>
<Sparkline
data={hashtag.history.map(h => parseInt(h.uses)).reverse()}
width={width}
height={height}
margin={children ? StyleConstants.Spacing.S : undefined}
/>
{children}
</View>
) : null}
2021-01-16 00:00:31 +01:00
</Pressable>
)
}
export default ComponentHashtag