verdnatura-chat/app/views/ShareView/index.js

253 lines
6.4 KiB
JavaScript
Raw Normal View History

2019-07-18 17:44:02 +00:00
import React from 'react';
import PropTypes from 'prop-types';
import {
View, Text, TextInput, Image
} from 'react-native';
import { connect } from 'react-redux';
import ShareExtension from 'rn-extensions-share';
import {
COLOR_TEXT_DESCRIPTION
} from '../../constants/colors';
import I18n from '../../i18n';
import RocketChat from '../../lib/rocketchat';
import { CustomIcon } from '../../lib/Icons';
import log from '../../utils/log';
import styles from './styles';
import Loading from './Loading';
import database from '../../lib/realm';
import { CustomHeaderButtons, Item } from '../../containers/HeaderButton';
import { isReadOnly, isBlocked } from '../../utils/room';
2019-07-29 16:33:28 +00:00
@connect(({ share }) => ({
user: {
id: share.user && share.user.id,
username: share.user && share.user.username,
token: share.user && share.user.token
},
baseUrl: share ? share.server : ''
2019-07-18 17:44:02 +00:00
}))
export default class ShareView extends React.Component {
static navigationOptions = ({ navigation }) => {
2019-07-29 16:33:28 +00:00
const canSend = navigation.getParam('canSend', true);
2019-07-18 17:44:02 +00:00
return ({
title: I18n.t('Share'),
headerRight:
canSend
? (
<CustomHeaderButtons>
<Item
title={I18n.t('Send')}
onPress={navigation.getParam('sendMessage')}
testID='send-message-share-view'
buttonStyle={styles.send}
/>
</CustomHeaderButtons>
)
: null
});
}
static propTypes = {
navigation: PropTypes.object,
2019-07-29 16:33:28 +00:00
user: PropTypes.shape({
id: PropTypes.string.isRequired,
username: PropTypes.string.isRequired,
token: PropTypes.string.isRequired
}),
baseUrl: PropTypes.string.isRequired
2019-07-18 17:44:02 +00:00
};
constructor(props) {
super(props);
const { navigation } = this.props;
const rid = navigation.getParam('rid', '');
const name = navigation.getParam('name', '');
const value = navigation.getParam('value', '');
const isMedia = navigation.getParam('isMedia', false);
const fileInfo = navigation.getParam('fileInfo', {});
this.rooms = database.objects('subscriptions').filtered('rid = $0', rid);
this.state = {
rid,
value,
isMedia,
name,
fileInfo,
loading: false,
room: this.rooms[0] || { rid },
file: {
name: fileInfo ? fileInfo.name : '',
description: ''
}
};
}
componentDidMount() {
const { room } = this.state;
2019-07-29 16:33:28 +00:00
const { navigation, user } = this.props;
const { username } = user;
2019-07-18 17:44:02 +00:00
navigation.setParams({ sendMessage: this._sendMessage, canSend: !(isReadOnly(room, { username }) || isBlocked(room)) });
}
2019-07-29 16:33:28 +00:00
bytesToSize = bytes => `${ (bytes / 1048576).toFixed(2) }MB`;
2019-07-18 17:44:02 +00:00
_sendMessage = async() => {
const { isMedia } = this.state;
this.setState({ loading: true });
if (isMedia) {
await this.sendMediaMessage();
} else {
await this.sendTextMessage();
}
this.setState({ loading: false });
ShareExtension.close();
}
sendMediaMessage = async() => {
const { rid, fileInfo, file } = this.state;
2019-07-29 16:33:28 +00:00
const { baseUrl: server, user } = this.props;
2019-07-18 17:44:02 +00:00
const { name, description } = file;
2019-07-30 16:15:39 +00:00
const fileMessage = {
name,
description,
size: fileInfo.size,
type: fileInfo.mime,
store: 'Uploads',
path: fileInfo.path
};
2019-07-18 17:44:02 +00:00
if (fileInfo && rid !== '') {
try {
2019-07-29 16:33:28 +00:00
await RocketChat.sendFileMessage(rid, fileMessage, undefined, server, user);
2019-07-18 17:44:02 +00:00
} catch (e) {
log('err_send_media_message', e);
}
}
}
sendTextMessage = async() => {
const { value, rid } = this.state;
2019-07-29 16:33:28 +00:00
const { user } = this.props;
2019-07-18 17:44:02 +00:00
if (value !== '' && rid !== '') {
try {
2019-07-29 16:33:28 +00:00
await RocketChat.sendMessage(rid, value, undefined, user);
2019-07-18 17:44:02 +00:00
} catch (error) {
log('err_share_extension_send_message', error);
}
}
};
renderPreview = () => {
const { fileInfo } = this.state;
const icon = fileInfo.mime.match(/image/)
2019-07-18 17:44:02 +00:00
? <Image source={{ isStatic: true, uri: fileInfo.path }} style={styles.mediaImage} />
: (
<View style={styles.mediaIconContainer}>
<CustomIcon name='file-generic' style={styles.mediaIcon} />
</View>
);
return (
<View style={styles.mediaContent}>
{icon}
<View style={styles.mediaInfo}>
<Text style={styles.mediaText} numberOfLines={1}>{fileInfo.name}</Text>
<Text style={styles.mediaText}>{this.bytesToSize(fileInfo.size)}</Text>
</View>
</View>
);
};
renderMediaContent = () => {
const { fileInfo, file } = this.state;
return fileInfo ? (
<View style={styles.mediaContainer}>
{this.renderPreview()}
<View style={styles.mediaInputContent}>
<TextInput
style={[styles.mediaNameInput, styles.input]}
placeholder={I18n.t('File_name')}
onChangeText={name => this.setState({ file: { ...file, name } })}
underlineColorAndroid='transparent'
defaultValue={file.name}
placeholderTextColor={COLOR_TEXT_DESCRIPTION}
/>
<TextInput
style={[styles.mediaDescriptionInput, styles.input]}
placeholder={I18n.t('File_description')}
onChangeText={description => this.setState({ file: { ...file, description } })}
underlineColorAndroid='transparent'
defaultValue={file.description}
multiline
textAlignVertical='top'
placeholderTextColor={COLOR_TEXT_DESCRIPTION}
autoFocus
/>
</View>
</View>
) : null;
};
renderInput = () => {
const { value } = this.state;
return (
<TextInput
style={[styles.input, styles.textInput]}
placeholder=''
onChangeText={handleText => this.setState({ value: handleText })}
underlineColorAndroid='transparent'
defaultValue={value}
multiline
textAlignVertical='top'
placeholderTextColor={COLOR_TEXT_DESCRIPTION}
autoFocus
/>
);
}
renderError = () => {
const { room } = this.state;
return (
<View style={[styles.container, styles.centered]}>
<Text style={styles.title}>
{
isBlocked(room) ? I18n.t('This_room_is_blocked') : I18n.t('This_room_is_read_only')
}
</Text>
</View>
);
}
render() {
2019-07-29 16:33:28 +00:00
const { user } = this.props;
const { username } = user;
2019-07-18 17:44:02 +00:00
const {
name, loading, isMedia, room
} = this.state;
if (isReadOnly(room, { username }) || isBlocked(room)) {
return this.renderError();
}
return (
<View style={styles.container}>
<View style={isMedia ? styles.toContent : styles.toContentText}>
<Text style={styles.text} numberOfLines={1}>
<Text style={styles.to}>{`${ I18n.t('To') }: `}</Text>
<Text style={styles.name}>{`${ name }`}</Text>
</Text>
</View>
<View style={styles.content}>
{isMedia ? this.renderMediaContent() : this.renderInput()}
</View>
{ loading ? <Loading /> : null }
</View>
);
}
}