7e31645e9a
* Add theming system * Add standard Button control and update RadioButtons * Unify radiobutton with design system * Update debug screen to have multiple views * Add ToggleButton * Update error controls to use design system * Add typography to <Text> element * Move DropdownButton into the design system * Clean out old code * Move Text into design system * Add 'inverted' color palette * Move LoadingPlaceholder into the design system
83 lines
2.2 KiB
TypeScript
83 lines
2.2 KiB
TypeScript
import React from 'react'
|
|
import {StyleSheet, View} from 'react-native'
|
|
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
|
import {Link} from '../util/Link'
|
|
import {Text} from './text/Text'
|
|
import {PostDropdownBtn} from './forms/DropdownButton'
|
|
import {s} from '../../lib/styles'
|
|
import {ago} from '../../../lib/strings'
|
|
|
|
interface PostMetaOpts {
|
|
itemHref: string
|
|
itemTitle: string
|
|
authorHref: string
|
|
authorHandle: string
|
|
authorDisplayName: string | undefined
|
|
timestamp: string
|
|
isAuthor: boolean
|
|
onCopyPostText: () => void
|
|
onDeletePost: () => void
|
|
}
|
|
|
|
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 (
|
|
<View style={styles.meta}>
|
|
<Link
|
|
style={styles.metaItem}
|
|
href={opts.authorHref}
|
|
title={opts.authorHandle}>
|
|
<Text style={[s.f17, s.bold, s.black]} numberOfLines={1}>
|
|
{displayName}
|
|
{handle ? (
|
|
<Text style={[s.f15, s.gray5, s.normal, s.black]}>
|
|
{handle}
|
|
</Text>
|
|
) : undefined}
|
|
</Text>
|
|
</Link>
|
|
<Text style={[styles.metaItem, s.f15, s.gray5]}>
|
|
· {ago(opts.timestamp)}
|
|
</Text>
|
|
<View style={s.flex1} />
|
|
<PostDropdownBtn
|
|
style={[styles.metaItem, s.pl5]}
|
|
itemHref={opts.itemHref}
|
|
itemTitle={opts.itemTitle}
|
|
isAuthor={opts.isAuthor}
|
|
onCopyPostText={opts.onCopyPostText}
|
|
onDeletePost={opts.onDeletePost}>
|
|
<FontAwesomeIcon icon="ellipsis-h" size={14} style={[s.mt2, s.mr5]} />
|
|
</PostDropdownBtn>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
meta: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingTop: 2,
|
|
paddingBottom: 2,
|
|
},
|
|
metaItem: {
|
|
paddingRight: 5,
|
|
},
|
|
})
|