42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import { Image as ImageProps } from '@rocket.chat/message-parser';
|
||
|
|
import { createImageProgress } from 'react-native-image-progress';
|
||
|
|
import * as Progress from 'react-native-progress';
|
||
|
|
import FastImage from '@rocket.chat/react-native-fast-image';
|
||
|
|
|
||
|
|
import { useTheme } from '../../../theme';
|
||
|
|
import { themes } from '../../../constants/colors';
|
||
|
|
import styles from '../../message/styles';
|
||
|
|
|
||
|
|
interface IImageProps {
|
||
|
|
value: ImageProps['value'];
|
||
|
|
}
|
||
|
|
|
||
|
|
type TMessageImage = {
|
||
|
|
img: string;
|
||
|
|
theme: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
const ImageProgress = createImageProgress(FastImage);
|
||
|
|
|
||
|
|
const MessageImage = ({ img, theme }: TMessageImage) => (
|
||
|
|
<ImageProgress
|
||
|
|
style={[styles.inlineImage, { borderColor: themes[theme].borderColor }]}
|
||
|
|
source={{ uri: encodeURI(img) }}
|
||
|
|
resizeMode={FastImage.resizeMode.cover}
|
||
|
|
indicator={Progress.Pie}
|
||
|
|
indicatorProps={{
|
||
|
|
color: themes[theme].actionTintColor
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
|
||
|
|
const Image = ({ value }: IImageProps): JSX.Element => {
|
||
|
|
const { theme } = useTheme();
|
||
|
|
const { src } = value;
|
||
|
|
|
||
|
|
return <MessageImage img={src.value} theme={theme!} />;
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Image;
|