1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
import {ModerationUI} from '@atproto/api'
import {usePalette} from 'lib/hooks/usePalette'
import {makeProfileLink} from 'lib/routes/links'
import {sanitizeDisplayName} from 'lib/strings/display-names'
import {sanitizeHandle} from 'lib/strings/handles'
import {niceDate} from 'lib/strings/time'
import {TypographyVariant} from 'lib/ThemeContext'
import {isAndroid, isWeb} from 'platform/detection'
import React, {memo} from 'react'
import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native'
import {usePrefetchProfileQuery} from '#/state/queries/profile'
import {TextLinkOnWebOnly} from './Link'
import {Text} from './text/Text'
import {TimeElapsed} from './TimeElapsed'
import {UserAvatar} from './UserAvatar'
interface PostMetaOpts {
author: {
avatar?: string
did: string
handle: string
displayName?: string | undefined
}
authorHasWarning: boolean
postHref: string
timestamp: string
showAvatar?: boolean
avatarModeration?: ModerationUI
avatarSize?: number
displayNameType?: TypographyVariant
displayNameStyle?: StyleProp<TextStyle>
style?: StyleProp<ViewStyle>
}
let PostMeta = (opts: PostMetaOpts): React.ReactNode => {
const pal = usePalette('default')
const displayName = opts.author.displayName || opts.author.handle
const handle = opts.author.handle
const prefetchProfileQuery = usePrefetchProfileQuery()
return (
<View style={[styles.container, opts.style]}>
{opts.showAvatar && (
<View style={styles.avatar}>
<UserAvatar
avatar={opts.author.avatar}
size={opts.avatarSize || 16}
moderation={opts.avatarModeration}
/>
</View>
)}
<View style={styles.maxWidth}>
<TextLinkOnWebOnly
type={opts.displayNameType || 'lg-bold'}
style={[pal.text, opts.displayNameStyle]}
numberOfLines={1}
lineHeight={1.2}
text={
<>
{sanitizeDisplayName(displayName)}
<Text
type="md"
numberOfLines={1}
lineHeight={1.2}
style={pal.textLight}>
{sanitizeHandle(handle, '@')}
</Text>
</>
}
href={makeProfileLink(opts.author)}
onPointerEnter={
isWeb ? () => prefetchProfileQuery(opts.author.did) : undefined
}
/>
</View>
{!isAndroid && (
<Text
type="md"
style={pal.textLight}
lineHeight={1.2}
accessible={false}>
·
</Text>
)}
<TimeElapsed timestamp={opts.timestamp}>
{({timeElapsed}) => (
<TextLinkOnWebOnly
type="md"
style={pal.textLight}
lineHeight={1.2}
text={timeElapsed}
accessibilityLabel={niceDate(opts.timestamp)}
title={niceDate(opts.timestamp)}
accessibilityHint=""
href={opts.postHref}
/>
)}
</TimeElapsed>
</View>
)
}
PostMeta = memo(PostMeta)
export {PostMeta}
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
alignItems: 'center',
paddingBottom: 2,
gap: 4,
zIndex: 1,
flex: 1,
},
avatar: {
alignSelf: 'center',
},
maxWidth: {
flex: isAndroid ? 1 : undefined,
maxWidth: !isAndroid ? '80%' : undefined,
},
})
|
