f8e67c04ad
* Migrate attachment_image * Migrate action_menu * Migrate action_button * migrate message_attachments * Remove unintended commited file * Fix tsc * Fix tsc * Fix lint * Update references * Make emoji functional component and fix imports * Use ReactNode instead of JSXElement * Convert action menu to FC * Remove unneeded fragments * Remove unneded undefined check * Use undefined instead of nil in calculateDimensions * Make sure height is always defined * Use is valid URL * Add missing types * Lint fixes and remove lodash * Revert package.json changes * Put back fragments since they are actually needed * Fix test * Fix lint * Address feedback
71 lines
2.1 KiB
JavaScript
71 lines
2.1 KiB
JavaScript
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
|
// See LICENSE.txt for license information.
|
|
|
|
import PropTypes from 'prop-types';
|
|
import React from 'react';
|
|
import {StyleSheet, View} from 'react-native';
|
|
|
|
import ProgressiveImage from '@components/progressive_image';
|
|
import TouchableWithFeedback from '@components/touchable_with_feedback';
|
|
import {isGifTooLarge} from '@utils/images';
|
|
|
|
export default class PostAttachmentImage extends React.PureComponent {
|
|
static propTypes = {
|
|
height: PropTypes.number.isRequired,
|
|
id: PropTypes.string,
|
|
imageMetadata: PropTypes.object,
|
|
onError: PropTypes.func.isRequired,
|
|
onImagePress: PropTypes.func.isRequired,
|
|
uri: PropTypes.string,
|
|
width: PropTypes.number.isRequired,
|
|
};
|
|
|
|
static defaultProps = {
|
|
frameCount: 0,
|
|
};
|
|
|
|
handlePress = () => {
|
|
this.props.onImagePress();
|
|
};
|
|
|
|
render() {
|
|
if (isGifTooLarge(this.props.imageMetadata)) {
|
|
return null;
|
|
}
|
|
|
|
// Note that TouchableWithoutFeedback only works if its child is a View
|
|
|
|
return (
|
|
<TouchableWithFeedback
|
|
onPress={this.handlePress}
|
|
style={[styles.imageContainer, {height: this.props.height}]}
|
|
type={'none'}
|
|
>
|
|
<View>
|
|
<ProgressiveImage
|
|
id={this.props.id}
|
|
style={[styles.image, {width: this.props.width, height: this.props.height}]}
|
|
imageUri={this.props.uri}
|
|
resizeMode='contain'
|
|
onError={this.props.onError}
|
|
/>
|
|
</View>
|
|
</TouchableWithFeedback>
|
|
);
|
|
}
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
imageContainer: {
|
|
alignItems: 'flex-start',
|
|
justifyContent: 'flex-start',
|
|
marginBottom: 6,
|
|
marginTop: 10,
|
|
},
|
|
image: {
|
|
alignItems: 'center',
|
|
borderRadius: 3,
|
|
justifyContent: 'center',
|
|
marginVertical: 1,
|
|
},
|
|
});
|