This commit is contained in:
xmflsct 2023-04-17 23:33:40 +02:00
parent 93b53ec158
commit d3f75cfc22
2 changed files with 22 additions and 10 deletions

View File

@ -4,9 +4,10 @@ import { TabLocalStackParamList } from '@utils/navigation/navigators'
import { StyleConstants } from '@utils/styles/constants' import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager' import { useTheme } from '@utils/styles/ThemeManager'
import React, { PropsWithChildren, useState } from 'react' import React, { PropsWithChildren, useState } from 'react'
import { Dimensions, Pressable, View } from 'react-native' import { Dimensions, Pressable, Text, View } from 'react-native'
import Sparkline from './Sparkline' import Sparkline from './Sparkline'
import CustomText from './Text' import CustomText from './Text'
import { sumBy } from 'lodash'
export interface Props { export interface Props {
hashtag: Mastodon.Tag hashtag: Mastodon.Tag
@ -29,6 +30,8 @@ const ComponentHashtag: React.FC<PropsWithChildren & Props> = ({
const width = Dimensions.get('window').width / 4 const width = Dimensions.get('window').width / 4
const [height, setHeight] = useState<number>(0) const [height, setHeight] = useState<number>(0)
const sum = sumBy(hashtag.history, h => parseInt(h.uses))
return ( return (
<Pressable <Pressable
accessibilityRole='button' accessibilityRole='button'
@ -41,17 +44,24 @@ const ComponentHashtag: React.FC<PropsWithChildren & Props> = ({
}} }}
onPress={customOnPress || onPress} onPress={customOnPress || onPress}
> >
<CustomText <View
fontStyle='M'
style={{ style={{
flexShrink: 1, flexShrink: 1,
color: colors.primaryDefault,
paddingRight: StyleConstants.Spacing.M paddingRight: StyleConstants.Spacing.M
}} }}
numberOfLines={1}
> >
<CustomText fontStyle='M' style={{ color: colors.primaryDefault }} numberOfLines={1}>
#{hashtag.name} #{hashtag.name}
{sum ? (
<>
{' '}
<CustomText fontStyle='S' style={{ color: colors.secondary }}>
({sumBy(hashtag.history, h => parseInt(h.uses))})
</CustomText> </CustomText>
</>
) : null}
</CustomText>
</View>
{hashtag.history?.length ? ( {hashtag.history?.length ? (
<View <View
style={{ flexDirection: 'row', alignItems: 'center', alignSelf: 'stretch' }} style={{ flexDirection: 'row', alignItems: 'center', alignSelf: 'stretch' }}
@ -66,6 +76,7 @@ const ComponentHashtag: React.FC<PropsWithChildren & Props> = ({
width={width} width={width}
height={height} height={height}
margin={children ? StyleConstants.Spacing.S : undefined} margin={children ? StyleConstants.Spacing.S : undefined}
color={!sum ? colors.disabled : undefined}
/> />
{children} {children}
</View> </View>

View File

@ -8,9 +8,10 @@ export interface Props {
width: number width: number
height: number height: number
margin?: number margin?: number
color?: string
} }
const Sparkline: React.FC<Props> = ({ data, width, height, margin = 0 }) => { const Sparkline: React.FC<Props> = ({ data, width, height, margin = 0, color }) => {
const { colors } = useTheme() const { colors } = useTheme()
const dataToPoints = ({ const dataToPoints = ({
@ -70,10 +71,10 @@ const Sparkline: React.FC<Props> = ({ data, width, height, margin = 0 }) => {
return ( return (
<Svg height={height} width={width} style={{ marginRight: margin }} fill='none'> <Svg height={height} width={width} style={{ marginRight: margin }} fill='none'>
<G> <G>
<Path d={'M' + fillPoints.join(' ')} fill={colors.blue} fillOpacity={0.1} /> <Path d={'M' + fillPoints.join(' ')} fill={color || colors.blue} fillOpacity={0.1} />
<Path <Path
d={'M' + linePoints.join(' ')} d={'M' + linePoints.join(' ')}
stroke={colors.blue} stroke={color || colors.blue}
strokeWidth={1} strokeWidth={1}
strokeLinejoin='round' strokeLinejoin='round'
strokeLinecap='round' strokeLinecap='round'