2019-06-10 16:22:35 +00:00
|
|
|
import React from 'react';
|
|
|
|
import { Text, View } from 'react-native';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
|
|
|
|
import Touch from '../../utils/touch';
|
2019-12-04 16:39:53 +00:00
|
|
|
import Avatar from '../../containers/Avatar';
|
2019-06-10 16:22:35 +00:00
|
|
|
import RoomTypeIcon from '../../containers/RoomTypeIcon';
|
2019-07-18 17:44:02 +00:00
|
|
|
import styles, { ROW_HEIGHT } from './styles';
|
2019-12-04 16:39:53 +00:00
|
|
|
import { themes } from '../../constants/colors';
|
2019-07-18 17:44:02 +00:00
|
|
|
|
|
|
|
export { ROW_HEIGHT };
|
2019-06-10 16:22:35 +00:00
|
|
|
|
2019-12-04 16:39:53 +00:00
|
|
|
const DirectoryItemLabel = React.memo(({ text, theme }) => {
|
2019-06-10 16:22:35 +00:00
|
|
|
if (!text) {
|
|
|
|
return null;
|
|
|
|
}
|
2019-12-04 16:39:53 +00:00
|
|
|
return <Text style={[styles.directoryItemLabel, { color: themes[theme].auxiliaryText }]}>{text}</Text>;
|
2019-06-10 16:22:35 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
const DirectoryItem = ({
|
2020-10-30 13:51:04 +00:00
|
|
|
title, description, avatar, onPress, testID, style, rightLabel, type, rid, theme
|
2019-06-10 16:22:35 +00:00
|
|
|
}) => (
|
2019-12-04 16:39:53 +00:00
|
|
|
<Touch
|
|
|
|
onPress={onPress}
|
|
|
|
style={{ backgroundColor: themes[theme].backgroundColor }}
|
|
|
|
testID={testID}
|
|
|
|
theme={theme}
|
|
|
|
>
|
|
|
|
<View style={[styles.directoryItemContainer, styles.directoryItemButton, style]}>
|
2019-06-10 16:22:35 +00:00
|
|
|
<Avatar
|
|
|
|
text={avatar}
|
|
|
|
size={30}
|
|
|
|
type={type}
|
2020-10-30 13:51:04 +00:00
|
|
|
rid={rid}
|
2019-06-10 16:22:35 +00:00
|
|
|
style={styles.directoryItemAvatar}
|
|
|
|
/>
|
|
|
|
<View style={styles.directoryItemTextContainer}>
|
|
|
|
<View style={styles.directoryItemTextTitle}>
|
2019-12-04 16:39:53 +00:00
|
|
|
<RoomTypeIcon type={type} theme={theme} />
|
|
|
|
<Text style={[styles.directoryItemName, { color: themes[theme].titleText }]} numberOfLines={1}>{title}</Text>
|
2019-06-10 16:22:35 +00:00
|
|
|
</View>
|
2019-12-04 16:39:53 +00:00
|
|
|
{ description ? <Text style={[styles.directoryItemUsername, { color: themes[theme].auxiliaryText }]} numberOfLines={1}>{description}</Text> : null }
|
2019-06-10 16:22:35 +00:00
|
|
|
</View>
|
2019-12-04 16:39:53 +00:00
|
|
|
<DirectoryItemLabel text={rightLabel} theme={theme} />
|
2019-06-10 16:22:35 +00:00
|
|
|
</View>
|
|
|
|
</Touch>
|
|
|
|
);
|
|
|
|
|
|
|
|
DirectoryItem.propTypes = {
|
|
|
|
title: PropTypes.string.isRequired,
|
|
|
|
description: PropTypes.string,
|
|
|
|
avatar: PropTypes.string,
|
|
|
|
type: PropTypes.string,
|
|
|
|
onPress: PropTypes.func.isRequired,
|
|
|
|
testID: PropTypes.string.isRequired,
|
|
|
|
style: PropTypes.any,
|
2019-12-04 16:39:53 +00:00
|
|
|
rightLabel: PropTypes.string,
|
2020-10-30 13:51:04 +00:00
|
|
|
rid: PropTypes.string,
|
2019-12-04 16:39:53 +00:00
|
|
|
theme: PropTypes.string
|
2019-06-10 16:22:35 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
DirectoryItemLabel.propTypes = {
|
2019-12-04 16:39:53 +00:00
|
|
|
text: PropTypes.string,
|
|
|
|
theme: PropTypes.string
|
2019-06-10 16:22:35 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
export default DirectoryItem;
|