140 lines
3.6 KiB
JavaScript
140 lines
3.6 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { View, Text, StyleSheet } from 'react-native';
|
|
|
|
import { withTheme } from '../../theme';
|
|
import Avatar from '../../containers/Avatar';
|
|
import Touch from '../../utils/touch';
|
|
import sharedStyles from '../Styles';
|
|
import { themes } from '../../constants/colors';
|
|
import Markdown from '../../containers/markdown';
|
|
import { CustomIcon } from '../../lib/Icons';
|
|
import { formatDateThreads, makeThreadName } from '../../utils/room';
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flexDirection: 'row',
|
|
padding: 16
|
|
},
|
|
contentContainer: {
|
|
flexDirection: 'column',
|
|
flex: 1
|
|
},
|
|
titleContainer: {
|
|
flexDirection: 'row',
|
|
marginBottom: 2,
|
|
alignItems: 'center'
|
|
},
|
|
title: {
|
|
flexShrink: 1,
|
|
fontSize: 18,
|
|
...sharedStyles.textMedium
|
|
},
|
|
time: {
|
|
fontSize: 14,
|
|
marginLeft: 4,
|
|
...sharedStyles.textRegular
|
|
},
|
|
avatar: {
|
|
marginRight: 8
|
|
},
|
|
detailsContainer: {
|
|
marginTop: 8,
|
|
flexDirection: 'row'
|
|
},
|
|
detailContainer: {
|
|
marginRight: 8,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center'
|
|
},
|
|
detailText: {
|
|
fontSize: 10,
|
|
marginLeft: 2,
|
|
...sharedStyles.textSemibold
|
|
},
|
|
badgeContainer: {
|
|
marginLeft: 8,
|
|
justifyContent: 'center'
|
|
},
|
|
badge: {
|
|
width: 12,
|
|
height: 12,
|
|
borderRadius: 6
|
|
}
|
|
});
|
|
|
|
const Item = ({
|
|
item, baseUrl, theme, useRealName, user, badgeColor, onPress
|
|
}) => {
|
|
const username = (useRealName && item?.u?.name) || item?.u?.username;
|
|
let time;
|
|
if (item?.ts) {
|
|
time = formatDateThreads(item.ts);
|
|
}
|
|
|
|
let tlm;
|
|
if (item?.tlm) {
|
|
tlm = formatDateThreads(item.tlm);
|
|
}
|
|
|
|
return (
|
|
<Touch theme={theme} onPress={() => onPress(item)} testID={`thread-messages-view-${ item.msg }`} style={{ backgroundColor: themes[theme].backgroundColor }}>
|
|
<View style={styles.container}>
|
|
<Avatar
|
|
style={styles.avatar}
|
|
text={item?.u?.username}
|
|
size={36}
|
|
borderRadius={4}
|
|
baseUrl={baseUrl}
|
|
userId={user?.id}
|
|
token={user?.token}
|
|
theme={theme}
|
|
/>
|
|
<View style={styles.contentContainer}>
|
|
<View style={styles.titleContainer}>
|
|
<Text style={[styles.title, { color: themes[theme].titleText }]} numberOfLines={1}>{username}</Text>
|
|
<Text style={[styles.time, { color: themes[theme].auxiliaryText }]}>{time}</Text>
|
|
</View>
|
|
<Markdown msg={makeThreadName(item)} baseUrl={baseUrl} username={username} theme={theme} numberOfLines={2} preview />
|
|
<View style={styles.detailsContainer}>
|
|
<View style={styles.detailContainer}>
|
|
<CustomIcon name='threads' size={20} color={themes[theme].auxiliaryText} />
|
|
<Text style={[styles.detailText, { color: themes[theme].auxiliaryText }]}>{item?.tcount}</Text>
|
|
</View>
|
|
|
|
<View style={styles.detailContainer}>
|
|
<CustomIcon name='user' size={20} color={themes[theme].auxiliaryText} />
|
|
<Text style={[styles.detailText, { color: themes[theme].auxiliaryText }]}>{item?.replies?.length}</Text>
|
|
</View>
|
|
|
|
<View style={styles.detailContainer}>
|
|
<CustomIcon name='clock' size={20} color={themes[theme].auxiliaryText} />
|
|
<Text style={[styles.detailText, { color: themes[theme].auxiliaryText }]}>{tlm}</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
{badgeColor
|
|
? (
|
|
<View style={styles.badgeContainer}>
|
|
<View style={[styles.badge, { backgroundColor: badgeColor }]} />
|
|
</View>
|
|
)
|
|
: null}
|
|
</View>
|
|
</Touch>
|
|
);
|
|
};
|
|
|
|
Item.propTypes = {
|
|
item: PropTypes.object,
|
|
baseUrl: PropTypes.string,
|
|
theme: PropTypes.string,
|
|
useRealName: PropTypes.bool,
|
|
user: PropTypes.object,
|
|
badgeColor: PropTypes.string,
|
|
onPress: PropTypes.func
|
|
};
|
|
|
|
export default withTheme(Item);
|