jeanmachine.dev
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Merge branch 'mozzius-expand-author-pressable' into main
+46
-9
+46
-9
src/view/com/notifications/FeedItem.tsx
+46
-9
src/view/com/notifications/FeedItem.tsx
···
22
22
import {NotificationsFeedItemModel} from 'state/models/feeds/notifications'
23
23
import {PostThreadModel} from 'state/models/content/post-thread'
24
24
import {s, colors} from 'lib/styles'
25
-
import {ago} from 'lib/strings/time'
25
+
import {niceDate} from 'lib/strings/time'
26
26
import {sanitizeDisplayName} from 'lib/strings/display-names'
27
27
import {sanitizeHandle} from 'lib/strings/handles'
28
28
import {pluralize} from 'lib/strings/helpers'
···
38
38
import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
39
39
import {formatCount} from '../util/numeric/format'
40
40
import {makeProfileLink} from 'lib/routes/links'
41
+
import {TimeElapsed} from '../util/TimeElapsed'
41
42
42
43
const MAX_AUTHORS = 5
43
44
···
88
89
}, [item])
89
90
90
91
const onToggleAuthorsExpanded = () => {
91
-
setAuthorsExpanded(!isAuthorsExpanded)
92
+
setAuthorsExpanded(currentlyExpanded => !currentlyExpanded)
92
93
}
93
94
94
95
const authors: Author[] = useMemo(() => {
···
179
180
}
180
181
181
182
return (
182
-
// eslint-disable-next-line react-native-a11y/no-nested-touchables
183
183
<Link
184
184
testID={`feedItem-by-${item.author.handle}`}
185
185
style={[
···
211
211
)}
212
212
</View>
213
213
<View style={styles.layoutContent}>
214
-
<Pressable
215
-
onPress={authors.length > 1 ? onToggleAuthorsExpanded : undefined}
216
-
accessible={false}>
214
+
<ExpandListPressable
215
+
hasMultipleAuthors={authors.length > 1}
216
+
onToggleAuthorsExpanded={onToggleAuthorsExpanded}>
217
217
<CondensedAuthorsList
218
218
visible={!isAuthorsExpanded}
219
219
authors={authors}
···
239
239
</>
240
240
) : undefined}
241
241
<Text style={[pal.text]}> {action}</Text>
242
-
<Text style={[pal.textLight]}> {ago(item.indexedAt)}</Text>
242
+
<TimeElapsed timestamp={item.indexedAt}>
243
+
{({timeElapsed}) => (
244
+
<Text
245
+
style={[pal.textLight, styles.pointer]}
246
+
title={niceDate(item.indexedAt)}>
247
+
{' ' + timeElapsed}
248
+
</Text>
249
+
)}
250
+
</TimeElapsed>
243
251
</Text>
244
-
</Pressable>
252
+
</ExpandListPressable>
245
253
{item.isLike || item.isRepost || item.isQuote ? (
246
254
<AdditionalPostText additionalPost={item.additionalPost} />
247
255
) : null}
···
250
258
)
251
259
})
252
260
261
+
function ExpandListPressable({
262
+
hasMultipleAuthors,
263
+
children,
264
+
onToggleAuthorsExpanded,
265
+
}: {
266
+
hasMultipleAuthors: boolean
267
+
children: React.ReactNode
268
+
onToggleAuthorsExpanded: () => void
269
+
}) {
270
+
if (hasMultipleAuthors) {
271
+
return (
272
+
<Pressable
273
+
onPress={onToggleAuthorsExpanded}
274
+
style={[styles.expandedAuthorsTrigger]}
275
+
accessible={false}>
276
+
{children}
277
+
</Pressable>
278
+
)
279
+
} else {
280
+
return <>{children}</>
281
+
}
282
+
}
283
+
253
284
function CondensedAuthorsList({
254
285
visible,
255
286
authors,
···
419
450
overflowHidden: {
420
451
overflow: 'hidden',
421
452
},
453
+
pointer: {
454
+
// @ts-ignore web only
455
+
cursor: 'pointer',
456
+
},
422
457
423
458
outer: {
424
459
padding: 10,
···
466
501
paddingTop: 4,
467
502
paddingLeft: 36,
468
503
},
469
-
504
+
expandedAuthorsTrigger: {
505
+
zIndex: 1,
506
+
},
470
507
expandedAuthorsCloseBtn: {
471
508
flexDirection: 'row',
472
509
alignItems: 'center',