48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
import FastImage from 'react-native-fast-image';
|
|
import React, { useContext, useState } from 'react';
|
|
import { TouchableOpacity } from 'react-native';
|
|
|
|
import { themes } from '../../../lib/constants';
|
|
import { CustomIcon } from '../../CustomIcon';
|
|
import { useTheme } from '../../../theme';
|
|
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;
|