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) ? (