47 lines
1.3 KiB
JavaScript
47 lines
1.3 KiB
JavaScript
import React, { useContext, useState } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { TouchableOpacity } from 'react-native';
|
|
import FastImage from 'react-native-fast-image';
|
|
|
|
import styles from '../styles';
|
|
import { CustomIcon } from '../../../lib/Icons';
|
|
import { themes } from '../../../constants/colors';
|
|
import MessageboxContext from '../Context';
|
|
import ActivityIndicator from '../../ActivityIndicator';
|
|
|
|
const Item = ({ item, theme }) => {
|
|
const context = useContext(MessageboxContext);
|
|
const { onPressCommandPreview } = context;
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
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 theme={theme} /> : null }
|
|
</FastImage>
|
|
)
|
|
: <CustomIcon name='clip' size={36} color={themes[theme].actionTintColor} />
|
|
}
|
|
</TouchableOpacity>
|
|
);
|
|
};
|
|
|
|
Item.propTypes = {
|
|
item: PropTypes.object,
|
|
theme: PropTypes.string
|
|
};
|
|
|
|
export default Item;
|