Provide full tooltips on counts when truncated and rounded.
This commit is contained in:
@@ -29,16 +29,28 @@ export function ProfileHeaderMetrics({
|
|||||||
other: 'following',
|
other: 'following',
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const tooltipFormattedCountIfNeeded = (count: number) => {
|
||||||
|
const standardCount = i18n.number(count, {
|
||||||
|
notation: 'standard',
|
||||||
|
})
|
||||||
|
const formattedCount = formatCount(i18n, count)
|
||||||
|
return standardCount !== formattedCount ? {tooltip: standardCount} : {}
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View
|
<View
|
||||||
style={[a.flex_row, a.gap_sm, a.align_center, a.pb_md]}
|
style={[a.flex_row, a.gap_sm, a.align_center, a.pb_md, {zIndex: 10}]}
|
||||||
pointerEvents="box-none">
|
pointerEvents="box-none">
|
||||||
<InlineLinkText
|
<InlineLinkText
|
||||||
testID="profileHeaderFollowersButton"
|
testID="profileHeaderFollowersButton"
|
||||||
style={[a.flex_row, t.atoms.text]}
|
style={[a.flex_row, t.atoms.text]}
|
||||||
to={makeProfileLink(profile, 'followers')}
|
to={makeProfileLink(profile, 'followers')}
|
||||||
label={`${followers} ${pluralizedFollowers}`}>
|
label={`${followers} ${pluralizedFollowers}`}>
|
||||||
<Text style={[a.font_bold, a.text_md]}>{followers} </Text>
|
<Text
|
||||||
|
style={[a.font_bold, a.text_md]}
|
||||||
|
dataSet={tooltipFormattedCountIfNeeded(profile.followersCount || 0)}>
|
||||||
|
{followers}{' '}
|
||||||
|
</Text>
|
||||||
<Text style={[t.atoms.text_contrast_medium, a.text_md]}>
|
<Text style={[t.atoms.text_contrast_medium, a.text_md]}>
|
||||||
{pluralizedFollowers}
|
{pluralizedFollowers}
|
||||||
</Text>
|
</Text>
|
||||||
@@ -48,13 +60,21 @@ export function ProfileHeaderMetrics({
|
|||||||
style={[a.flex_row, t.atoms.text]}
|
style={[a.flex_row, t.atoms.text]}
|
||||||
to={makeProfileLink(profile, 'follows')}
|
to={makeProfileLink(profile, 'follows')}
|
||||||
label={_(msg`${following} following`)}>
|
label={_(msg`${following} following`)}>
|
||||||
<Text style={[a.font_bold, a.text_md]}>{following} </Text>
|
<Text
|
||||||
|
style={[a.font_bold, a.text_md]}
|
||||||
|
dataSet={tooltipFormattedCountIfNeeded(profile.followsCount || 0)}>
|
||||||
|
{following}{' '}
|
||||||
|
</Text>
|
||||||
<Text style={[t.atoms.text_contrast_medium, a.text_md]}>
|
<Text style={[t.atoms.text_contrast_medium, a.text_md]}>
|
||||||
{pluralizedFollowings}
|
{pluralizedFollowings}
|
||||||
</Text>
|
</Text>
|
||||||
</InlineLinkText>
|
</InlineLinkText>
|
||||||
<Text style={[a.font_bold, t.atoms.text, a.text_md]}>
|
<Text>
|
||||||
{formatCount(i18n, profile.postsCount || 0)}{' '}
|
<Text
|
||||||
|
style={[a.font_bold, t.atoms.text, a.text_md]}
|
||||||
|
dataSet={tooltipFormattedCountIfNeeded(profile.postsCount || 0)}>
|
||||||
|
{formatCount(i18n, profile.postsCount || 0)}{' '}
|
||||||
|
</Text>
|
||||||
<Text style={[t.atoms.text_contrast_medium, a.font_normal, a.text_md]}>
|
<Text style={[t.atoms.text_contrast_medium, a.font_normal, a.text_md]}>
|
||||||
{plural(profile.postsCount || 0, {one: 'post', other: 'posts'})}
|
{plural(profile.postsCount || 0, {one: 'post', other: 'posts'})}
|
||||||
</Text>
|
</Text>
|
||||||
|
|||||||
Reference in New Issue
Block a user