verdnatura-chat/app/containers/message/Image.js

90 lines
2.5 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';
import Markdown from '../markdown';
import styles from './styles';
import { formatAttachmentUrl } from '../../lib/utils';
2019-12-11 23:01:12 +00:00
import { withSplit } from '../../split';
import { themes } from '../../constants/colors';
import sharedStyles from '../../views/Styles';
2019-12-11 23:01:12 +00:00
const Button = React.memo(({
children, onPress, split, theme
}) => (
<Touchable
onPress={onPress}
2019-12-11 23:01:12 +00:00
style={[styles.imageContainer, split && sharedStyles.tabletContent]}
background={Touchable.Ripple(themes[theme].bannerBackground)}
>
{children}
</Touchable>
));
2019-12-11 23:01:12 +00:00
const Image = React.memo(({ img, theme }) => (
<FastImage
2019-12-11 23:01:12 +00:00
style={[styles.image, { borderColor: themes[theme].borderColor }]}
source={{ uri: encodeURI(img) }}
resizeMode={FastImage.resizeMode.cover}
/>
));
const ImageContainer = React.memo(({
2019-12-11 23:01:12 +00:00
file, baseUrl, user, useMarkdown, onOpenFileModal, getCustomEmoji, split, theme
}) => {
const img = formatAttachmentUrl(file.image_url, user.id, user.token, baseUrl);
if (!img) {
return null;
}
const onPress = () => onOpenFileModal(file);
if (file.description) {
return (
2019-12-11 23:01:12 +00:00
<Button split={split} theme={theme} onPress={onPress}>
<View>
2019-12-11 23:01:12 +00:00
<Image img={img} theme={theme} />
<Markdown msg={file.description} baseUrl={baseUrl} username={user.username} getCustomEmoji={getCustomEmoji} useMarkdown={useMarkdown} theme={theme} />
</View>
</Button>
);
}
return (
2019-12-11 23:01:12 +00:00
<Button split={split} theme={theme} onPress={onPress}>
<Image img={img} theme={theme} />
</Button>
);
2019-12-11 23:01:12 +00:00
}, (prevProps, nextProps) => equal(prevProps.file, nextProps.file) && prevProps.split === nextProps.split && prevProps.theme === nextProps.theme);
ImageContainer.propTypes = {
file: PropTypes.object,
baseUrl: PropTypes.string,
user: PropTypes.object,
useMarkdown: PropTypes.bool,
onOpenFileModal: PropTypes.func,
2019-12-11 23:01:12 +00:00
theme: PropTypes.string,
getCustomEmoji: PropTypes.func,
split: PropTypes.bool
};
ImageContainer.displayName = 'MessageImageContainer';
Image.propTypes = {
2019-12-11 23:01:12 +00:00
img: PropTypes.string,
theme: PropTypes.string
};
ImageContainer.displayName = 'MessageImage';
Button.propTypes = {
children: PropTypes.node,
2019-12-11 23:01:12 +00:00
onPress: PropTypes.func,
theme: PropTypes.string,
split: PropTypes.bool
};
ImageContainer.displayName = 'MessageButton';
2019-12-11 23:01:12 +00:00
export default withSplit(ImageContainer);