Fix post-meta truncation on android

zio/stable
Paul Frazee 2022-12-20 14:50:04 -06:00
parent 0a2c3e6b51
commit 297664bfe2
1 changed files with 25 additions and 6 deletions

View File

@ -20,6 +20,24 @@ interface PostMetaOpts {
} }
export function PostMeta(opts: PostMetaOpts) { export function PostMeta(opts: PostMetaOpts) {
let displayName = opts.authorDisplayName || opts.authorHandle
let handle = opts.authorHandle
// HACK
// Android simply cannot handle the truncation case we need
// so we have to do it manually here
// -prf
if (displayName.length + handle.length > 26) {
if (displayName.length > 26) {
displayName = displayName.slice(0, 23) + '...'
} else {
handle = handle.slice(0, 23 - displayName.length) + '...'
if (handle.endsWith('....')) {
handle = handle.slice(0, -4) + '...'
}
}
}
return ( return (
<View style={styles.meta}> <View style={styles.meta}>
<Link <Link
@ -27,10 +45,12 @@ export function PostMeta(opts: PostMetaOpts) {
href={opts.authorHref} href={opts.authorHref}
title={opts.authorHandle}> title={opts.authorHandle}>
<Text style={[s.f17, s.bold, s.black]} numberOfLines={1}> <Text style={[s.f17, s.bold, s.black]} numberOfLines={1}>
{opts.authorDisplayName || opts.authorHandle} {displayName}
<Text style={[s.f15, s.gray5, s.normal, s.black]} numberOfLines={1}> {handle ? (
&nbsp;{opts.authorHandle} <Text style={[s.f15, s.gray5, s.normal, s.black]}>
&nbsp;{handle}
</Text> </Text>
) : undefined}
</Text> </Text>
</Link> </Link>
<Text style={[styles.metaItem, s.f15, s.gray5]}> <Text style={[styles.metaItem, s.f15, s.gray5]}>
@ -38,7 +58,7 @@ export function PostMeta(opts: PostMetaOpts) {
</Text> </Text>
<View style={s.flex1} /> <View style={s.flex1} />
<PostDropdownBtn <PostDropdownBtn
style={styles.metaItem} style={[styles.metaItem, s.pl5]}
itemHref={opts.itemHref} itemHref={opts.itemHref}
itemTitle={opts.itemTitle} itemTitle={opts.itemTitle}
isAuthor={opts.isAuthor} isAuthor={opts.isAuthor}
@ -59,6 +79,5 @@ const styles = StyleSheet.create({
}, },
metaItem: { metaItem: {
paddingRight: 5, paddingRight: 5,
maxWidth: '75%',
}, },
}) })