verdnatura-mirror/Rocket.Chat.ReactNative
verdnatura-mirror
/
Rocket.Chat.ReactNative
mirror of https://github.com/RocketChat/Rocket.Chat.ReactNative
2
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

Refactor

This commit is contained in:
Diego Mello 2017-11-29 13:29:22 -02:00
parent 1d712a8f80
commit f12fdb501c
8 changed files with 113 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/containers/message/Audio.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { View, StyleSheet, TouchableOpacity, Text, Easing } from 'react-native';
import { connect } from 'react-redux';
import Video from 'react-native-video';
import Icon from 'react-native-vector-icons/MaterialIcons';
import Slider from 'react-native-slider';
@ -52,28 +51,24 @@ const styles = StyleSheet.create({
}
});
@connect(state => ({
server: state.server.server,
user: state.login.user
}))
export default class Audio extends React.PureComponent {
static propTypes = {
file: PropTypes.object.isRequired,
server: PropTypes.string.isRequired,
baseUrl: PropTypes.string.isRequired,
user: PropTypes.object.isRequired
}
constructor(props) {
super(props);
const { server, file, user } = this.props;
this.onLoad = this.onLoad.bind(this);
this.onProgress = this.onProgress.bind(this);
this.onEnd = this.onEnd.bind(this);
const { baseUrl, file, user } = props;
this.state = {
currentTime: 0,
duration: 0,
paused: true,
uri: `${ server }${ file.audio_url }?rc_uid=${ user.id }&rc_token=${ user.token }`
uri: `${ baseUrl }${ file.audio_url }?rc_uid=${ user.id }&rc_token=${ user.token }`
};
}

89
app/containers/message/Card.js
View File

@ -1,89 +0,0 @@
import PropTypes from 'prop-types';
import React from 'react';
import Meteor from 'react-native-meteor';
import { connect } from 'react-redux';
import { CachedImage } from 'react-native-img-cache';
import { Text, TouchableOpacity, View } from 'react-native';
import {
Card,
CardImage,
// CardTitle,
CardContent
// CardAction
} from 'react-native-card-view';
import RocketChat from '../../lib/rocketchat';
import PhotoModal from './PhotoModal';
@connect(state => ({
base: state.settings.Site_Url,
canShowList: state.login.token.length || state.login.user.token
}))
export default class Cards extends React.PureComponent {
static propTypes = {
data: PropTypes.object.isRequired,
base: PropTypes.string
}
constructor() {
super();
const user = Meteor.user();
this.state = {
modalVisible: false
};
// TODO
RocketChat.getUserToken().then((token) => {
this.setState({ img: `${ this.props.base }${ this.props.data.image_url }?rc_uid=${ user._id }&rc_token=${ token }` });
});
}
getDescription() {
if (this.props.data.description) {
return <Text style={{ alignSelf: 'center', fontWeight: 'bold' }}>{this.props.data.description}</Text>;
}
}
getImage() {
return (
<View>
<TouchableOpacity onPress={() => this._onPressButton()}>
<Card>
<CardImage style={{ width: 256, height: 256 }}>
<CachedImage
style={{ width: 256, height: 256 }}
source={{ uri: encodeURI(this.state.img) }}
/>
</CardImage>
<CardContent>
<Text style={[{ fontSize: 12, alignSelf: 'center', fontStyle: 'italic' }]}>{this.props.data.title}</Text>
{this.getDescription()}
</CardContent>
</Card>
</TouchableOpacity>
<PhotoModal
title={this.props.data.title}
image={this.state.img}
isVisible={this.state.modalVisible}
onClose={() => this.setState({ modalVisible: false })}
/>
</View>
);
}
getOther() {
return (
<Text style={[{ fontSize: 12, alignSelf: 'center', fontStyle: 'italic' }]}>{this.props.data.title}</Text>
);
}
_onPressButton() {
this.setState({
modalVisible: true
});
}
render() {
return this.state.img ? this.getImage() : this.getOther();
}
}

97
app/containers/message/Image.js Normal file
View File

@ -0,0 +1,97 @@
import PropTypes from 'prop-types';
import React from 'react';
import { CachedImage } from 'react-native-img-cache';
import { Text, TouchableOpacity, View, StyleSheet } from 'react-native';
import PhotoModal from './PhotoModal';
const styles = StyleSheet.create({
button: {
flex: 1,
flexDirection: 'column',
height: 320,
borderColor: '#ccc',
borderWidth: 1,
borderRadius: 6
},
imageContainer: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
image: {
width: 256,
height: 256,
resizeMode: 'cover'
},
labelContainer: {
height: 62,
alignItems: 'center',
justifyContent: 'center'
},
imageName: {
fontSize: 12,
alignSelf: 'center',
fontStyle: 'italic'
},
message: {
alignSelf: 'center',
fontWeight: 'bold'
}
});
export default class extends React.PureComponent {
static propTypes = {
file: PropTypes.object.isRequired,
baseUrl: PropTypes.string.isRequired,
user: PropTypes.object.isRequired
}
constructor(props) {
super(props);
const { baseUrl, file, user } = props;
this.state = {
modalVisible: false,
img: `${ baseUrl }${ file.image_url }?rc_uid=${ user.id }&rc_token=${ user.token }`
};
}
getDescription() {
if (this.props.file.description) {
return <Text style={styles.message}>{this.props.file.description}</Text>;
}
}
_onPressButton() {
this.setState({
modalVisible: true
});
}
render() {
return (
<View>
<TouchableOpacity
onPress={() => this._onPressButton()}
style={styles.button}
>
<View style={styles.imageContainer}>
<CachedImage
style={styles.image}
source={{ uri: encodeURI(this.state.img) }}
/>
</View>
<View style={styles.labelContainer}>
<Text style={styles.imageName}>{this.props.file.title}</Text>
{this.getDescription()}
</View>
</TouchableOpacity>
<PhotoModal
title={this.props.file.title}
image={this.state.img}
isVisible={this.state.modalVisible}
onClose={() => this.setState({ modalVisible: false })}
/>
</View>
);
}
}

10
app/containers/message/Video.js
View File

@ -25,23 +25,19 @@ const styles = StyleSheet.create({
}
});
@connect(state => ({
server: state.server.server,
user: state.login.user
}))
export default class Video extends React.PureComponent {
static propTypes = {
file: PropTypes.object.isRequired,
server: PropTypes.string.isRequired,
baseUrl: PropTypes.string.isRequired,
user: PropTypes.object.isRequired
}
constructor(props) {
super(props);
const { server, file, user } = this.props;
const { baseUrl, file, user } = props;
this.state = {
isVisible: false,
uri: `${ server }${ file.video_url }?rc_uid=${ user.id }&rc_token=${ user.token }`
uri: `${ baseUrl }${ file.video_url }?rc_uid=${ user.id }&rc_token=${ user.token }`
};
}

14
app/containers/message/index.js
View File

@ -4,7 +4,7 @@ import { View, StyleSheet, TouchableOpacity, Text } from 'react-native';
import { connect } from 'react-redux';
import { actionsShow } from '../../actions/messages';
import Card from './Card';
import Image from './Image';
import User from './User';
import Avatar from '../Avatar';
import Audio from './Audio';
@ -44,6 +44,7 @@ export default class Message extends React.Component {
baseUrl: PropTypes.string.isRequired,
Message_TimeFormat: PropTypes.string.isRequired,
message: PropTypes.object.isRequired,
user: PropTypes.object.isRequired,
editing: PropTypes.bool,
actionsShow: PropTypes.func
}
@ -63,16 +64,13 @@ export default class Message extends React.Component {
}
const file = this.props.item.attachments[0];
const { baseUrl, user } = this.props;
if (file.image_type) {
return (
<Card
data={file}
/>
);
return <Image file={file} baseUrl={baseUrl} user={user} />;
} else if (file.audio_type) {
return <Audio file={file} />;
return <Audio file={file} baseUrl={baseUrl} user={user} />;
} else if (file.video_type) {
return <Video file={file} />;
return <Video file={file} baseUrl={baseUrl} user={user} />;
}
return <Text>Other type</Text>;

5
app/views/RoomView.js
View File

@ -55,7 +55,8 @@ const typing = () => <Typing />;
server: state.server.server,
Site_Url: state.settings.Site_Url,
Message_TimeFormat: state.settings.Message_TimeFormat,
loading: state.messages.isFetching
loading: state.messages.isFetching,
user: state.login.user
}),
dispatch => ({
actions: bindActionCreators(actions, dispatch),
@ -67,6 +68,7 @@ export default class RoomView extends React.Component {
static propTypes = {
navigation: PropTypes.object.isRequired,
openRoom: PropTypes.func.isRequired,
user: PropTypes.object.isRequired,
editCancel: PropTypes.func,
rid: PropTypes.string,
server: PropTypes.string,
@ -172,6 +174,7 @@ export default class RoomView extends React.Component {
item={item}
baseUrl={this.props.Site_Url}
Message_TimeFormat={this.props.Message_TimeFormat}
user={this.props.user}
/>
);

2
ios/RocketChatRN.xcodeproj/project.pbxproj
View File

@ -408,7 +408,6 @@
1B0746E708284151B8AD1198 /* Ionicons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = Ionicons.ttf; path = "../node_modules/react-native-vector-icons/Fonts/Ionicons.ttf"; sourceTree = "<group>"; };
20CE3E407E0D4D9E8C9885F2 /* libRCTVideo.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRCTVideo.a; sourceTree = "<group>"; };
22A8B76C8EBA443BB97CE82D /* RNVectorIcons.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = RNVectorIcons.xcodeproj; path = "../node_modules/react-native-vector-icons/RNVectorIcons.xcodeproj"; sourceTree = "<group>"; };
23680D832D8347428720F2D1 /* libRNSound.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRNSound.a; sourceTree = "<group>"; };
2D02E47B1E0B4A5D006451C7 /* RocketChatRN-tvOS.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = "RocketChatRN-tvOS.app"; sourceTree = BUILT_PRODUCTS_DIR; };
2D02E4901E0B4A5D006451C7 /* RocketChatRN-tvOSTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = "RocketChatRN-tvOSTests.xctest"; sourceTree = BUILT_PRODUCTS_DIR; };
2EADB1731B5E47D093292B59 /* MaterialCommunityIcons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = MaterialCommunityIcons.ttf; path = "../node_modules/react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf"; sourceTree = "<group>"; };
@ -765,7 +764,6 @@
DA50CE47374C4C35BE6D9D58 /* libRNSVG.a */,
3B696712EE2345A59F007A88 /* libRNImagePicker.a */,
20CE3E407E0D4D9E8C9885F2 /* libRCTVideo.a */,
23680D832D8347428720F2D1 /* libRNSound.a */,
);
name = "Recovered References";
sourceTree = "<group>";

1
package.json
View File

@ -27,7 +27,6 @@
"react-native-action-button": "^2.8.1",
"react-native-actionsheet": "^2.3.0",
"react-native-animatable": "^1.2.4",
"react-native-card-view": "0.0.3",
"react-native-easy-markdown": "git+https://github.com/lappalj4/react-native-easy-markdown.git",
"react-native-fetch-blob": "^0.10.8",
"react-native-image-picker": "^0.26.7",