import React, { Component } from 'react';
import {
View, Text, StyleSheet, Image, ScrollView, TouchableHighlight
} from 'react-native';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import Modal from 'react-native-modal';
import { responsive } from 'react-native-responsive-ui';
import equal from 'deep-equal';
import TextInput from '../TextInput';
import Button from '../Button';
import I18n from '../../i18n';
import sharedStyles from '../../views/Styles';
import { isIOS } from '../../utils/deviceInfo';
import { canUploadFile } from '../../utils/media';
import {
COLOR_PRIMARY, COLOR_BACKGROUND_CONTAINER, COLOR_WHITE, COLOR_DANGER
} from '../../constants/colors';
import { CustomIcon } from '../../lib/Icons';
const cancelButtonColor = COLOR_BACKGROUND_CONTAINER;
const styles = StyleSheet.create({
modal: {
alignItems: 'center'
},
titleContainer: {
flexDirection: 'row',
paddingHorizontal: 16,
paddingTop: 16
},
title: {
fontSize: 14,
...sharedStyles.textColorTitle,
...sharedStyles.textBold
},
container: {
height: 430,
backgroundColor: COLOR_WHITE,
flexDirection: 'column'
},
scrollView: {
flex: 1,
padding: 16
},
image: {
height: 150,
flex: 1,
marginBottom: 16,
resizeMode: 'contain'
},
buttonContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
padding: 16,
backgroundColor: COLOR_BACKGROUND_CONTAINER
},
button: {
marginBottom: 0
},
androidButton: {
paddingHorizontal: 15,
justifyContent: 'center',
height: 48,
borderRadius: 2
},
androidButtonText: {
fontSize: 18,
textAlign: 'center'
},
fileIcon: {
color: COLOR_PRIMARY,
margin: 20,
flex: 1,
textAlign: 'center'
},
errorIcon: {
color: COLOR_DANGER
},
fileMime: {
...sharedStyles.textColorTitle,
...sharedStyles.textBold,
textAlign: 'center',
fontSize: 20,
marginBottom: 20
},
errorContainer: {
margin: 20,
flex: 1,
textAlign: 'center',
justifyContent: 'center',
alignItems: 'center'
},
video: {
flex: 1,
borderRadius: 4,
height: 150,
backgroundColor: '#1f2329',
marginBottom: 6,
alignItems: 'center',
justifyContent: 'center'
}
});
@responsive
@connect(state => ({
FileUpload_MediaTypeWhiteList: state.settings.FileUpload_MediaTypeWhiteList,
FileUpload_MaxFileSize: state.settings.FileUpload_MaxFileSize
}))
export default class UploadModal extends Component {
static propTypes = {
isVisible: PropTypes.bool,
file: PropTypes.object,
close: PropTypes.func,
submit: PropTypes.func,
window: PropTypes.object,
FileUpload_MediaTypeWhiteList: PropTypes.string,
FileUpload_MaxFileSize: PropTypes.number
}
state = {
name: '',
description: '',
file: {}
};
static getDerivedStateFromProps(props, state) {
if (!equal(props.file, state.file) && props.file && props.file.path) {
return {
file: props.file,
name: props.file.filename || 'Filename',
description: ''
};
}
return null;
}
shouldComponentUpdate(nextProps, nextState) {
const { name, description, file } = this.state;
const { window, isVisible } = this.props;
if (nextState.name !== name) {
return true;
}
if (nextState.description !== description) {
return true;
}
if (nextProps.isVisible !== isVisible) {
return true;
}
if (nextProps.window.width !== window.width) {
return true;
}
if (!equal(nextState.file, file)) {
return true;
}
return false;
}
canUploadFile = () => {
const { FileUpload_MediaTypeWhiteList, FileUpload_MaxFileSize, file } = this.props;
if (!(file && file.path)) {
return true;
}
if (file.size > FileUpload_MaxFileSize) {
return false;
}
// if white list is empty, all media types are enabled
if (!FileUpload_MediaTypeWhiteList) {
return true;
}
const allowedMime = FileUpload_MediaTypeWhiteList.split(',');
if (allowedMime.includes(file.mime)) {
return true;
}
const wildCardGlob = '/*';
const wildCards = allowedMime.filter(item => item.indexOf(wildCardGlob) > 0);
if (wildCards.includes(file.mime.replace(/(\/.*)$/, wildCardGlob))) {
return true;
}
return false;
}
submit = () => {
const { file, submit } = this.props;
const { name, description } = this.state;
submit({ ...file, name, description });
}
renderError = () => {
const { file, FileUpload_MaxFileSize, close } = this.props;
const { window: { width } } = this.props;
const errorMessage = (FileUpload_MaxFileSize < file.size)
? 'error-file-too-large'
: 'error-invalid-file-type';
return (
{I18n.t(errorMessage)}
{ file.mime }
{
(isIOS)
? (
)
: (
{I18n.t('Cancel')}
)
}
);
}
renderButtons = () => {
const { close } = this.props;
if (isIOS) {
return (
);
}
// FIXME: RNGH don't work well on Android modals: https://github.com/kmagiera/react-native-gesture-handler/issues/139
return (
{I18n.t('Cancel')}
{I18n.t('Send')}
);
}
renderPreview() {
const { file } = this.props;
if (file.mime && file.mime.match(/image/)) {
return ();
}
if (file.mime && file.mime.match(/video/)) {
return (
);
}
return ();
}
render() {
const {
window: { width }, isVisible, close, file, FileUpload_MediaTypeWhiteList, FileUpload_MaxFileSize
} = this.props;
const { name, description } = this.state;
const showError = !canUploadFile(file, { FileUpload_MediaTypeWhiteList, FileUpload_MaxFileSize });
return (
{(showError) ? this.renderError()
: (
{I18n.t('Upload_file_question_mark')}
{this.renderPreview()}
this.setState({ name: value })}
/>
this.setState({ description: value })}
/>
{this.renderButtons()}
)}
);
}
}