137 lines
4.3 KiB
JavaScript
137 lines
4.3 KiB
JavaScript
// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
|
|
// See License.txt for license information.
|
|
|
|
import React, {PropTypes, PureComponent} from 'react';
|
|
import {
|
|
Dimensions,
|
|
Platform,
|
|
ScrollView,
|
|
StyleSheet,
|
|
TouchableOpacity,
|
|
View
|
|
} from 'react-native';
|
|
import Font from 'react-native-vector-icons/Ionicons';
|
|
import {RequestStatus} from 'mattermost-redux/constants';
|
|
|
|
import FileAttachmentImage from 'app/components/file_attachment_list/file_attachment_image';
|
|
import KeyboardLayout from 'app/components/layout/keyboard_layout';
|
|
|
|
const {height: deviceHeight} = Dimensions.get('window');
|
|
|
|
export default class FileUploadPreview extends PureComponent {
|
|
static propTypes = {
|
|
actions: PropTypes.shape({
|
|
addFileToFetchCache: PropTypes.func.isRequired,
|
|
handleClearFiles: PropTypes.func.isRequired,
|
|
handleRemoveFile: PropTypes.func.isRequired
|
|
}).isRequired,
|
|
channelId: PropTypes.string.isRequired,
|
|
channelIsLoading: PropTypes.bool,
|
|
createPostRequestStatus: PropTypes.string.isRequired,
|
|
fetchCache: PropTypes.object.isRequired,
|
|
files: PropTypes.array.isRequired,
|
|
inputHeight: PropTypes.number.isRequired,
|
|
rootId: PropTypes.string,
|
|
uploadFileRequestStatus: PropTypes.string.isRequired
|
|
};
|
|
|
|
componentWillReceiveProps(nextProps) {
|
|
if (this.props.createPostRequestStatus === RequestStatus.STARTED && nextProps.createPostRequestStatus === RequestStatus.SUCCESS) {
|
|
this.props.actions.handleClearFiles(this.props.channelId, this.props.rootId);
|
|
}
|
|
}
|
|
|
|
buildFilePreviews = () => {
|
|
return this.props.files.map((file) => {
|
|
return (
|
|
<View
|
|
key={file.clientId}
|
|
style={style.preview}
|
|
>
|
|
<FileAttachmentImage
|
|
addFileToFetchCache={this.props.actions.addFileToFetchCache}
|
|
fetchCache={this.props.fetchCache}
|
|
file={file}
|
|
/>
|
|
<TouchableOpacity
|
|
style={style.removeButtonWrapper}
|
|
onPress={() => this.props.actions.handleRemoveFile(file.clientId, this.props.channelId, this.props.rootId)}
|
|
>
|
|
<View style={{width: 14, height: 14, borderRadius: 7, backgroundColor: '#fff', position: 'absolute'}}/>
|
|
<Font
|
|
name='ios-close-circle'
|
|
color='#000'
|
|
size={20}
|
|
style={{position: 'absolute'}}
|
|
/>
|
|
</TouchableOpacity>
|
|
</View>
|
|
);
|
|
});
|
|
}
|
|
|
|
render() {
|
|
if (this.props.channelIsLoading || (!this.props.files.length && this.props.uploadFileRequestStatus !== RequestStatus.STARTED)) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<KeyboardLayout style={style.container}>
|
|
<ScrollView
|
|
horizontal={true}
|
|
style={style.scrollView}
|
|
contentContainerStyle={[style.scrollViewContent, {marginBottom: this.props.inputHeight}]}
|
|
>
|
|
{this.buildFilePreviews()}
|
|
</ScrollView>
|
|
</KeyboardLayout>
|
|
);
|
|
}
|
|
}
|
|
|
|
const style = StyleSheet.create({
|
|
container: {
|
|
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
|
height: deviceHeight,
|
|
left: 0,
|
|
bottom: 0,
|
|
position: 'absolute',
|
|
width: '100%'
|
|
},
|
|
preview: {
|
|
justifyContent: 'flex-end',
|
|
height: 115,
|
|
width: 115,
|
|
elevation: 10,
|
|
shadowColor: '#000',
|
|
shadowOpacity: 1,
|
|
shadowRadius: 8,
|
|
shadowOffset: {
|
|
width: 0,
|
|
height: 0
|
|
}
|
|
},
|
|
removeButtonWrapper: {
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
position: 'absolute',
|
|
top: 7,
|
|
right: 7,
|
|
width: 20,
|
|
height: 20,
|
|
borderRadius: 10,
|
|
...Platform.select({
|
|
android: {
|
|
backgroundColor: '#000'
|
|
}
|
|
})
|
|
},
|
|
scrollView: {
|
|
flex: 1,
|
|
marginBottom: 24
|
|
},
|
|
scrollViewContent: {
|
|
alignItems: 'flex-end',
|
|
marginLeft: 16
|
|
}
|
|
});
|