2021-02-11 08:20:41 +00:00
|
|
|
import { useNavigation } from '@react-navigation/native'
|
2021-03-29 09:11:33 +00:00
|
|
|
import { StackNavigationProp } from '@react-navigation/stack'
|
2021-10-05 15:44:14 +00:00
|
|
|
import { NewsItem } from '@skolplattformen/api-skolplattformen'
|
2021-06-16 12:10:06 +00:00
|
|
|
import { StyleService, useStyleSheet } from '@ui-kitten/components'
|
2021-03-30 18:54:28 +00:00
|
|
|
import moment from 'moment'
|
2021-06-16 12:10:06 +00:00
|
|
|
import React, { ReactNode } from 'react'
|
2021-09-12 20:29:26 +00:00
|
|
|
import { Dimensions, Text, TouchableOpacity, View } from 'react-native'
|
2021-05-06 12:35:11 +00:00
|
|
|
import { Layout, Sizing, Typography } from '../styles'
|
2021-02-12 14:13:07 +00:00
|
|
|
import { useChild } from './childContext.component'
|
2021-02-15 12:33:47 +00:00
|
|
|
import { Image } from './image.component'
|
2021-05-06 12:35:11 +00:00
|
|
|
import { RootStackParamList } from './navigation.component'
|
2021-02-14 16:44:50 +00:00
|
|
|
|
2021-03-26 08:38:15 +00:00
|
|
|
interface NewsListItemProps {
|
|
|
|
item: NewsItem
|
2021-04-25 16:38:18 +00:00
|
|
|
children?: ReactNode
|
2021-03-26 08:38:15 +00:00
|
|
|
}
|
|
|
|
|
2021-03-29 09:11:33 +00:00
|
|
|
type NewsListItemNavigationProp = StackNavigationProp<
|
|
|
|
RootStackParamList,
|
|
|
|
'NewsItem'
|
|
|
|
>
|
|
|
|
|
2021-03-25 12:21:15 +00:00
|
|
|
const { width } = Dimensions.get('window')
|
|
|
|
|
2021-04-25 16:38:18 +00:00
|
|
|
export const NewsListItem = ({ item, children }: NewsListItemProps) => {
|
2021-05-06 12:35:11 +00:00
|
|
|
const styles = useStyleSheet(themedStyles)
|
2021-03-29 09:11:33 +00:00
|
|
|
const navigation = useNavigation<NewsListItemNavigationProp>()
|
2021-02-12 14:13:07 +00:00
|
|
|
const child = useChild()
|
2021-09-17 08:27:24 +00:00
|
|
|
const hasDate = item.modified || item.published
|
2021-01-05 14:32:15 +00:00
|
|
|
|
2021-03-30 18:54:28 +00:00
|
|
|
const displayDate = hasDate ? moment(hasDate).fromNow() : null
|
2021-02-19 07:50:14 +00:00
|
|
|
|
2021-01-05 14:32:15 +00:00
|
|
|
return (
|
2021-09-12 20:29:26 +00:00
|
|
|
<TouchableOpacity
|
2021-02-12 14:13:07 +00:00
|
|
|
onPress={() => navigation.navigate('NewsItem', { newsItem: item, child })}
|
2021-02-15 12:33:47 +00:00
|
|
|
>
|
2021-02-19 07:50:14 +00:00
|
|
|
<View style={styles.card}>
|
2021-03-26 08:38:15 +00:00
|
|
|
{width > 320 && item.fullImageUrl ? (
|
2021-05-06 12:35:11 +00:00
|
|
|
<Image
|
2021-05-12 09:16:13 +00:00
|
|
|
accessibilityIgnoresInvertColors={false}
|
2021-05-06 12:35:11 +00:00
|
|
|
src={item.fullImageUrl}
|
|
|
|
// @ts-expect-error Don't know why this linter breaks
|
|
|
|
style={styles.image}
|
|
|
|
/>
|
2021-03-26 08:38:15 +00:00
|
|
|
) : null}
|
2021-02-19 07:50:14 +00:00
|
|
|
<View style={styles.text}>
|
|
|
|
<View>
|
|
|
|
<Text style={styles.title}>{item.header}</Text>
|
|
|
|
<Text style={styles.subtitle}>
|
|
|
|
{item.author}
|
|
|
|
{item.author && displayDate ? ' • ' : ''}
|
|
|
|
{displayDate}
|
|
|
|
</Text>
|
2021-03-26 08:38:15 +00:00
|
|
|
<Text ellipsizeMode="tail" numberOfLines={2} style={styles.intro}>
|
2021-04-25 16:38:18 +00:00
|
|
|
{children ?? item.intro}
|
2021-02-19 07:50:14 +00:00
|
|
|
</Text>
|
|
|
|
</View>
|
|
|
|
</View>
|
|
|
|
</View>
|
2021-09-12 20:29:26 +00:00
|
|
|
</TouchableOpacity>
|
2021-01-05 14:32:15 +00:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2021-05-06 12:35:11 +00:00
|
|
|
const themedStyles = StyleService.create({
|
2021-01-05 14:32:15 +00:00
|
|
|
card: {
|
2021-03-31 08:16:41 +00:00
|
|
|
...Layout.flex.full,
|
|
|
|
...Layout.flex.row,
|
2021-06-16 12:10:06 +00:00
|
|
|
borderRadius: 15,
|
|
|
|
paddingVertical: Sizing.t4,
|
|
|
|
paddingHorizontal: Sizing.t4,
|
|
|
|
marginBottom: Sizing.t3,
|
2021-05-06 12:35:11 +00:00
|
|
|
backgroundColor: 'background-basic-color-1',
|
2021-02-19 07:50:14 +00:00
|
|
|
},
|
|
|
|
text: {
|
2021-03-31 08:16:41 +00:00
|
|
|
...Layout.flex.full,
|
2021-02-19 07:50:14 +00:00
|
|
|
},
|
|
|
|
title: {
|
2021-04-23 11:33:29 +00:00
|
|
|
...Typography.header,
|
|
|
|
marginBottom: Sizing.t1,
|
2021-05-06 12:35:11 +00:00
|
|
|
color: 'text-basic-color',
|
2021-02-19 07:50:14 +00:00
|
|
|
},
|
|
|
|
subtitle: {
|
2021-03-31 08:16:41 +00:00
|
|
|
...Typography.fontSize.xs,
|
|
|
|
marginBottom: Sizing.t2,
|
2021-05-06 12:35:11 +00:00
|
|
|
color: 'text-hint-color',
|
2021-02-19 07:50:14 +00:00
|
|
|
},
|
|
|
|
intro: {
|
2021-03-31 08:16:41 +00:00
|
|
|
...Typography.fontSize.sm,
|
2021-05-06 12:35:11 +00:00
|
|
|
color: 'text-basic-color',
|
2021-01-05 14:32:15 +00:00
|
|
|
},
|
2021-02-14 16:44:50 +00:00
|
|
|
image: {
|
2021-06-16 12:10:06 +00:00
|
|
|
borderRadius: 50,
|
|
|
|
width: 50,
|
|
|
|
height: 50,
|
|
|
|
marginRight: Sizing.t3,
|
2021-02-14 16:44:50 +00:00
|
|
|
},
|
2021-01-05 14:32:15 +00:00
|
|
|
})
|