verdnatura-chat/app/containers/MessageBox/UploadModal.js

208 lines
4.9 KiB
JavaScript
Raw Normal View History

import React, { Component } from 'react';
import {
2019-01-29 19:52:56 +00:00
View, Text, StyleSheet, Image, ScrollView, TouchableHighlight
} from 'react-native';
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';
2018-11-19 18:18:15 +00:00
import sharedStyles from '../../views/Styles';
2019-01-29 19:52:56 +00:00
import { isIOS } from '../../utils/deviceInfo';
2019-03-29 19:36:07 +00:00
import { COLOR_PRIMARY, COLOR_BACKGROUND_CONTAINER, COLOR_WHITE } from '../../constants/colors';
2019-03-29 19:36:07 +00:00
const cancelButtonColor = COLOR_BACKGROUND_CONTAINER;
const styles = StyleSheet.create({
2018-11-19 18:18:15 +00:00
modal: {
alignItems: 'center'
},
titleContainer: {
flexDirection: 'row',
paddingHorizontal: 16,
paddingTop: 16
},
title: {
2019-03-29 19:36:07 +00:00
fontSize: 14,
...sharedStyles.textColorTitle,
2018-11-19 18:18:15 +00:00
...sharedStyles.textBold
},
container: {
2018-11-19 18:18:15 +00:00
height: 430,
2019-03-29 19:36:07 +00:00
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,
2019-03-29 19:36:07 +00:00
backgroundColor: COLOR_BACKGROUND_CONTAINER
},
2018-11-19 18:18:15 +00:00
button: {
marginBottom: 0
},
androidButton: {
paddingHorizontal: 15,
justifyContent: 'center',
height: 48,
borderRadius: 2
},
androidButtonText: {
fontSize: 18,
textAlign: 'center'
}
2018-11-19 18:18:15 +00:00
});
@responsive
export default class UploadModal extends Component {
static propTypes = {
isVisible: PropTypes.bool,
file: PropTypes.object,
close: PropTypes.func,
submit: PropTypes.func,
window: PropTypes.object
}
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;
}
2018-11-19 18:18:15 +00:00
submit = () => {
const { file, submit } = this.props;
const { name, description } = this.state;
submit({ ...file, name, description });
}
2018-11-19 18:18:15 +00:00
renderButtons = () => {
const { close } = this.props;
2019-01-29 19:52:56 +00:00
if (isIOS) {
2018-11-19 18:18:15 +00:00
return (
<View style={styles.buttonContainer}>
<Button
title={I18n.t('Cancel')}
type='secondary'
backgroundColor={cancelButtonColor}
style={styles.button}
onPress={close}
/>
<Button
title={I18n.t('Send')}
type='primary'
style={styles.button}
onPress={this.submit}
/>
</View>
);
}
// FIXME: RNGH don't work well on Android modals: https://github.com/kmagiera/react-native-gesture-handler/issues/139
return (
<View style={styles.buttonContainer}>
<TouchableHighlight
onPress={close}
style={[styles.androidButton, { backgroundColor: cancelButtonColor }]}
underlayColor={cancelButtonColor}
activeOpacity={0.5}
>
2019-03-29 19:36:07 +00:00
<Text style={[styles.androidButtonText, { ...sharedStyles.textBold, color: COLOR_PRIMARY }]}>{I18n.t('Cancel')}</Text>
2018-11-19 18:18:15 +00:00
</TouchableHighlight>
<TouchableHighlight
onPress={this.submit}
2019-03-29 19:36:07 +00:00
style={[styles.androidButton, { backgroundColor: COLOR_PRIMARY }]}
underlayColor={COLOR_PRIMARY}
2018-11-19 18:18:15 +00:00
activeOpacity={0.5}
>
2019-03-29 19:36:07 +00:00
<Text style={[styles.androidButtonText, { ...sharedStyles.textMedium, color: COLOR_WHITE }]}>{I18n.t('Send')}</Text>
2018-11-19 18:18:15 +00:00
</TouchableHighlight>
</View>
);
}
render() {
const { window: { width }, isVisible, close } = this.props;
const { name, description, file } = this.state;
return (
<Modal
isVisible={isVisible}
2018-11-19 18:18:15 +00:00
style={styles.modal}
onBackdropPress={close}
onBackButtonPress={close}
animationIn='fadeIn'
animationOut='fadeOut'
useNativeDriver
hideModalContentWhileAnimating
avoidKeyboard
>
<View style={[styles.container, { width: width - 32 }]}>
<View style={styles.titleContainer}>
2018-11-19 18:18:15 +00:00
<Text style={styles.title}>{I18n.t('Upload_file_question_mark')}</Text>
</View>
<ScrollView style={styles.scrollView}>
<Image source={{ isStatic: true, uri: file.path }} style={styles.image} />
<TextInput
placeholder={I18n.t('File_name')}
value={name}
onChangeText={value => this.setState({ name: value })}
/>
<TextInput
placeholder={I18n.t('File_description')}
value={description}
onChangeText={value => this.setState({ description: value })}
/>
</ScrollView>
2018-11-19 18:18:15 +00:00
{this.renderButtons()}
</View>
</Modal>
);
}
}