3b7a6df617
* Add icons for file types * Compress image files for file type icons * Add constants for file types * Add utils for file metadata * Add actions & reducers for fetching file attachments * Render file attachments in posts * Add reducers for handling files requests * Refactor getFileType in file utils * Refactor getFileIconPath in file utils * Refactor getFormattedFileSize in file utils * Trim trailing whitespace in getTruncatedFilename * Style file attachment metadata * Remove entity store reducer for files fetch failure * Change filesForPost to fileIdsForPost in files store * Use a selector for getFilesForPost * Memoize getFilesForPost selector * Dispatch postId with getFilesForPost * Add test for getFilesForPost * Upload seed file in getFilesForPost test * Display correct icon for image attachments * Fix reducers for receiving files for post Expect response data to be array not object * Style attachment post * Merge headers (defaults + opts) in Client.doFetch * Upload file as FormData * Use form-data lib instead of built-in polyfill * Associate file with post in getFilesForPost test * Improve assertions in getFilesForPost test * Check for createPost failure in getFilesForPost test * Use correct post id in getFilesForPost test * Use client not action to create post in getFilesForPost test * Fix file upload in getFilesForPost test * Add assertion for name of uploaded file * Update attachment post style * Fix spelling of loadFilesForPostIfNecessary * Remove eslint-disable no-magic-numbers from file_utils.js * Remove unused index prop from FileAttachment * Clarify code for merging headers in Client.getOptions * Dynamically truncate file attachment names * Extract component for FileAttachmentIcon * Use white bg for FileAttachmentIcon to match webapp styles * Match webapp styles for file attachment borders * Move file icon path lookup to FileAttachmentIcon * Use more logical ordering for file type lookup
107 lines
2.9 KiB
JavaScript
107 lines
2.9 KiB
JavaScript
// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
|
|
// See License.txt for license information.
|
|
|
|
import React, {
|
|
Component,
|
|
PropTypes
|
|
} from 'react';
|
|
|
|
import {
|
|
Text,
|
|
View,
|
|
StyleSheet
|
|
} from 'react-native';
|
|
|
|
import Icon from 'react-native-vector-icons/FontAwesome';
|
|
|
|
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
|
|
import * as Utils from 'service/utils/file_utils.js';
|
|
|
|
import FileAttachmentIcon from './file_attachment_icon';
|
|
|
|
const getStyleSheet = makeStyleSheetFromTheme((theme) => {
|
|
return StyleSheet.create({
|
|
downloadIcon: {
|
|
color: changeOpacity(theme.centerChannelColor, 0.7),
|
|
marginRight: 5
|
|
},
|
|
fileDownloadContainer: {
|
|
flexDirection: 'row',
|
|
marginTop: 3
|
|
},
|
|
fileInfo: {
|
|
marginLeft: 2,
|
|
fontSize: 14,
|
|
color: changeOpacity(theme.centerChannelColor, 0.5)
|
|
},
|
|
fileInfoContainer: {
|
|
flex: 1,
|
|
paddingHorizontal: 8,
|
|
paddingVertical: 5,
|
|
borderLeftWidth: 1,
|
|
borderLeftColor: changeOpacity(theme.centerChannelColor, 0.2)
|
|
},
|
|
fileName: {
|
|
flexDirection: 'column',
|
|
flexWrap: 'wrap',
|
|
marginLeft: 2,
|
|
fontSize: 14,
|
|
color: theme.centerChannelColor
|
|
},
|
|
fileWrapper: {
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
marginTop: 10,
|
|
borderWidth: 1,
|
|
borderColor: changeOpacity(theme.centerChannelColor, 0.2)
|
|
}
|
|
});
|
|
});
|
|
|
|
export default class FileAttachment extends Component {
|
|
static propTypes = {
|
|
file: PropTypes.object.isRequired,
|
|
theme: PropTypes.object.isRequired
|
|
};
|
|
|
|
renderFileInfo() {
|
|
const {file, theme} = this.props;
|
|
const style = getStyleSheet(theme);
|
|
|
|
return (
|
|
<View style={style.fileInfoContainer}>
|
|
<Text
|
|
numberOfLines={4}
|
|
style={style.fileName}
|
|
>
|
|
{file.name.trim()}
|
|
</Text>
|
|
<View style={style.fileDownloadContainer}>
|
|
<Icon
|
|
name='download'
|
|
size={16}
|
|
style={style.downloadIcon}
|
|
/>
|
|
<Text style={style.fileInfo}>
|
|
{`${file.extension.toUpperCase()} ${Utils.getFormattedFileSize(file)}`}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
render() {
|
|
const {file, theme} = this.props;
|
|
const style = getStyleSheet(theme);
|
|
|
|
return (
|
|
<View style={style.fileWrapper}>
|
|
<FileAttachmentIcon
|
|
file={file}
|
|
theme={theme}
|
|
/>
|
|
{this.renderFileInfo()}
|
|
</View>
|
|
);
|
|
}
|
|
}
|