Rocket.Chat.ReactNative/app/containers/message/Image.js

98 lines
2.7 KiB
JavaScript
Raw Normal View History

import React from 'react';
import { View } from 'react-native';
import PropTypes from 'prop-types';
import FastImage from 'react-native-fast-image';
import equal from 'deep-equal';
2019-04-08 12:35:28 +00:00
import Touchable from 'react-native-platform-touchable';
2019-12-18 21:13:11 +00:00
import { createImageProgress } from 'react-native-image-progress';
import * as Progress from 'react-native-progress';
import Markdown from '../markdown';
import styles from './styles';
import { formatAttachmentUrl } from '../../lib/utils';
2019-11-25 20:01:17 +00:00
import { withSplit } from '../../split';
2019-12-04 16:39:53 +00:00
import { themes } from '../../constants/colors';
2019-11-25 20:01:17 +00:00
import sharedStyles from '../../views/Styles';
2019-12-18 21:13:11 +00:00
const ImageProgress = createImageProgress(FastImage);
2019-12-04 16:39:53 +00:00
const Button = React.memo(({
children, onPress, split, theme
}) => (
<Touchable
onPress={onPress}
2019-11-25 20:01:17 +00:00
style={[styles.imageContainer, split && sharedStyles.tabletContent]}
2019-12-04 16:39:53 +00:00
background={Touchable.Ripple(themes[theme].bannerBackground)}
>
{children}
</Touchable>
));
2020-02-11 14:01:35 +00:00
export const MessageImage = React.memo(({ img, theme }) => (
2019-12-18 21:13:11 +00:00
<ImageProgress
2019-12-04 16:39:53 +00:00
style={[styles.image, { borderColor: themes[theme].borderColor }]}
source={{ uri: encodeURI(img) }}
resizeMode={FastImage.resizeMode.cover}
2019-12-18 21:13:11 +00:00
indicator={Progress.Pie}
indicatorProps={{
color: themes[theme].actionTintColor
}}
/>
));
const ImageContainer = React.memo(({
file, imageUrl, baseUrl, user, showAttachment, getCustomEmoji, split, theme
}) => {
2020-02-11 14:01:35 +00:00
const img = imageUrl || formatAttachmentUrl(file.image_url, user.id, user.token, baseUrl);
if (!img) {
return null;
}
2019-12-18 21:13:11 +00:00
const onPress = () => showAttachment(file);
if (file.description) {
return (
2019-12-04 16:39:53 +00:00
<Button split={split} theme={theme} onPress={onPress}>
<View>
2020-02-11 14:01:35 +00:00
<MessageImage img={img} theme={theme} />
<Markdown msg={file.description} baseUrl={baseUrl} username={user.username} getCustomEmoji={getCustomEmoji} theme={theme} />
</View>
</Button>
);
}
return (
2019-12-04 16:39:53 +00:00
<Button split={split} theme={theme} onPress={onPress}>
2020-02-11 14:01:35 +00:00
<MessageImage img={img} theme={theme} />
</Button>
);
2019-12-04 16:39:53 +00:00
}, (prevProps, nextProps) => equal(prevProps.file, nextProps.file) && prevProps.split === nextProps.split && prevProps.theme === nextProps.theme);
ImageContainer.propTypes = {
file: PropTypes.object,
2020-02-11 14:01:35 +00:00
imageUrl: PropTypes.string,
baseUrl: PropTypes.string,
user: PropTypes.object,
2019-12-18 21:13:11 +00:00
showAttachment: PropTypes.func,
2019-12-04 16:39:53 +00:00
theme: PropTypes.string,
2019-11-25 20:01:17 +00:00
getCustomEmoji: PropTypes.func,
split: PropTypes.bool
};
ImageContainer.displayName = 'MessageImageContainer';
2020-02-11 14:01:35 +00:00
MessageImage.propTypes = {
2019-12-04 16:39:53 +00:00
img: PropTypes.string,
theme: PropTypes.string
};
ImageContainer.displayName = 'MessageImage';
Button.propTypes = {
children: PropTypes.node,
2019-11-25 20:01:17 +00:00
onPress: PropTypes.func,
2019-12-04 16:39:53 +00:00
theme: PropTypes.string,
2019-11-25 20:01:17 +00:00
split: PropTypes.bool
};
ImageContainer.displayName = 'MessageButton';
2019-11-25 20:01:17 +00:00
export default withSplit(ImageContainer);