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
124
125
126
127
128
129
|
import React, {memo} from 'react'
import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native'
import {AppBskyActorDefs, ModerationDecision, ModerationUI} from '@atproto/api'
import {usePrefetchProfileQuery} from '#/state/queries/profile'
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 {TextLinkOnWebOnly} from './Link'
import {Text} from './text/Text'
import {TimeElapsed} from './TimeElapsed'
import {PreviewableUserAvatar} from './UserAvatar'
interface PostMetaOpts {
author: AppBskyActorDefs.ProfileViewBasic
moderation: ModerationDecision | 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()
const profileLink = makeProfileLink(opts.author)
const onPointerEnter = isWeb
? () => prefetchProfileQuery(opts.author.did)
: undefined
return (
<View style={[styles.container, opts.style]}>
{opts.showAvatar && (
<View style={styles.avatar}>
<PreviewableUserAvatar
size={opts.avatarSize || 16}
did={opts.author.did}
handle={opts.author.handle}
avatar={opts.author.avatar}
moderation={opts.avatarModeration}
type={opts.author.associated?.labeler ? 'labeler' : 'user'}
/>
</View>
)}
<Text numberOfLines={1} style={[styles.maxWidth, pal.textLight]}>
<TextLinkOnWebOnly
type={opts.displayNameType || 'lg-bold'}
style={[pal.text, opts.displayNameStyle]}
lineHeight={1.2}
disableMismatchWarning
text={
<>
{sanitizeDisplayName(
displayName,
opts.moderation?.ui('displayName'),
)}
</>
}
href={profileLink}
onPointerEnter={onPointerEnter}
/>
<TextLinkOnWebOnly
type="md"
disableMismatchWarning
style={[pal.textLight, {flexShrink: 4}]}
text={'\xa0' + sanitizeHandle(handle, '@')}
href={profileLink}
onPointerEnter={onPointerEnter}
anchorNoUnderline
/>
</Text>
{!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: 'flex-end',
paddingBottom: 2,
gap: 4,
zIndex: 1,
flex: 1,
},
avatar: {
alignSelf: 'center',
},
maxWidth: {
flex: isAndroid ? 1 : undefined,
maxWidth: !isAndroid ? '80%' : undefined,
},
})
|
