mirror of
https://github.com/tooot-app/app
synced 2025-04-07 07:01:11 +02:00
Fix #729
This commit is contained in:
parent
93b53ec158
commit
d3f75cfc22
@ -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>
|
||||||
|
@ -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'
|
||||||
|
Loading…
x
Reference in New Issue
Block a user