vn-verdnaturachat/app/containers/MessageBox/CommandsPreview/Item.tsx

48 lines
1.4 KiB
TypeScript
Raw Normal View History

import FastImage from '@rocket.chat/react-native-fast-image';
import React, { useContext, useState } from 'react';
2019-12-04 16:39:53 +00:00
import { TouchableOpacity } from 'react-native';
2019-12-04 16:39:53 +00:00
import { themes } from '../../../constants/colors';
import { CustomIcon } from '../../../lib/Icons';
import { useTheme } from '../../../theme';
2019-12-04 16:39:53 +00:00
import ActivityIndicator from '../../ActivityIndicator';
import MessageboxContext from '../Context';
import styles from '../styles';
interface IMessageBoxCommandsPreviewItem {
item: {
type: string;
id: string;
value: string;
};
}
const Item = ({ item }: IMessageBoxCommandsPreviewItem) => {
const context = useContext(MessageboxContext);
const { onPressCommandPreview } = context;
const [loading, setLoading] = useState(true);
const { theme } = useTheme();
return (
<TouchableOpacity
style={styles.commandPreview}
onPress={() => onPressCommandPreview(item)}
testID={`command-preview-item${item.id}`}>
{item.type === 'image' ? (
<FastImage
style={styles.commandPreviewImage}
source={{ uri: item.value }}
resizeMode={FastImage.resizeMode.cover}
onLoadStart={() => setLoading(true)}
onLoad={() => setLoading(false)}>
{loading ? <ActivityIndicator /> : null}
</FastImage>
) : (
<CustomIcon name='attach' size={36} color={themes[theme].actionTintColor} />
)}
</TouchableOpacity>
);
};
export default Item;