sergiodt
/
vn-verdnaturachat
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Init support to iPhone X

This commit is contained in:
Rodrigo Nascimento 2017-11-13 10:49:19 -02:00
parent 994a087ba4
commit 50c50a790a
No known key found for this signature in database
GPG Key ID: CFCE33B7B01AC335
15 changed files with 1548 additions and 1299 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/containers/Banner.js
View File

@ -31,9 +31,9 @@ export default class Banner extends React.PureComponent {
offline: PropTypes.bool
}
componentWillMount() {
this.state = {
this.setState({
slow: false
};
});
this.timer = setTimeout(() => this.setState({ slow: true }), 5000);
}
componentWillUnmount() {

30
app/containers/MessageBox.js
View File

@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { View, TextInput, StyleSheet } from 'react-native';
import { View, TextInput, StyleSheet, SafeAreaView } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import ImagePicker from 'react-native-image-picker';
import RocketChat from '../lib/rocketchat';
@ -10,7 +10,9 @@ const styles = StyleSheet.create({
paddingTop: 1,
borderTopWidth: 1,
borderTopColor: '#ccc',
backgroundColor: '#fff',
backgroundColor: '#fff'
},
safeAreaView: {
flexDirection: 'row',
alignItems: 'center'
},
@ -77,17 +79,19 @@ export default class MessageBox extends React.PureComponent {
render() {
return (
<View style={styles.textBox}>
<Icon style={styles.fileButton} name='add-circle-outline' onPress={this.addFile} />
<TextInput
ref={component => this.component = component}
style={styles.textBoxInput}
returnKeyType='send'
onSubmitEditing={event => this.submit(event.nativeEvent.text)}
blurOnSubmit={false}
placeholder='New message'
underlineColorAndroid='transparent'
defaultValue={''}
/>
<SafeAreaView style={styles.safeAreaView}>
<Icon style={styles.fileButton} name='add-circle-outline' onPress={this.addFile} />
<TextInput
ref={component => this.component = component}
style={styles.textBoxInput}
returnKeyType='send'
onSubmitEditing={event => this.submit(event.nativeEvent.text)}
blurOnSubmit={false}
placeholder='New message'
underlineColorAndroid='transparent'
defaultValue=''
/>
</SafeAreaView>
</View>
);
}

2
app/containers/Sidebar.js
View File

@ -53,7 +53,7 @@ export default class Sidebar extends Component {
componentWillMount() {
realm.addListener('change', this.updateState);
this.state = this.getState();
this.setState(this.getState());
}
componentWillUnmount() {

6
app/presentation/Loading.js
View File

@ -45,14 +45,16 @@ export default class Loading extends Component {
toValue: 0.8,
duration: 1000,
useNativeDriver: true
}),
}
),
Animated.timing(
this.scale,
{
toValue: 1,
duration: 1000,
useNativeDriver: true
})
}
)
]).start(() => {
this.animate();
});

16
app/presentation/RoomItem.js
View File

@ -76,7 +76,7 @@ export default class RoomItem extends React.PureComponent {
unread: PropTypes.number,
baseUrl: PropTypes.string,
onPress: PropTypes.func,
dateFormat: PropTypes.string.isRequired
dateFormat: PropTypes.string
}
get icon() {
@ -126,12 +126,24 @@ export default class RoomItem extends React.PureComponent {
render() {
const { unread, name, _updatedAt } = this.props;
if (_updatedAt) {
return (
<TouchableOpacity onPress={this.props.onPress} style={styles.container}>
{this.icon}
<View style={styles.roomNameView}>
<Text style={styles.roomName} ellipsizeMode='tail' numberOfLines={1}>{ name }</Text>
<Text style={styles.update} ellipsizeMode='tail' numberOfLines={1}>{ moment(_updatedAt).format(this.props.dateFormat) }</Text>
</View>
{this.renderNumber(unread)}
</TouchableOpacity>
);
}
return (
<TouchableOpacity onPress={this.props.onPress} style={styles.container}>
{this.icon}
<View style={styles.roomNameView}>
<Text style={styles.roomName} ellipsizeMode='tail' numberOfLines={1}>{ name }</Text>
<Text style={styles.update} ellipsizeMode='tail' numberOfLines={1}>{ moment(_updatedAt).format(this.props.dateFormat) }</Text>
</View>
{this.renderNumber(unread)}
</TouchableOpacity>

6
app/views/CreateChannelView.js
View File

@ -1,7 +1,7 @@
import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { TextInput, View, Text, Switch, TouchableOpacity } from 'react-native';
import { TextInput, View, Text, Switch, TouchableOpacity, SafeAreaView } from 'react-native';
import { createChannelRequest } from '../actions/createChannel';
import styles from './Styles';
import KeyboardView from '../presentation/KeyboardView';
@ -94,7 +94,7 @@ export default class CreateChannelView extends React.Component {
style={[styles.defaultViewBackground, { flex: 1 }]}
contentContainerStyle={styles.defaultView}
>
<View style={styles.formContainer}>
<SafeAreaView style={styles.formContainer}>
<Text style={styles.label_white}>Channel Name</Text>
<TextInput
value={this.state.channelName}
@ -139,7 +139,7 @@ export default class CreateChannelView extends React.Component {
{this.props.result.isFetching ? 'LOADING' : 'CREATE'}!
</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
</KeyboardView>
);
}

48
app/views/ForgotPasswordView.js
View File

@ -1,7 +1,7 @@
import React from 'react';
import Spinner from 'react-native-loading-spinner-overlay';
import PropTypes from 'prop-types';
import { Text, TextInput, View, TouchableOpacity, Alert } from 'react-native';
import { Text, TextInput, View, TouchableOpacity, Alert, SafeAreaView } from 'react-native';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as loginActions from '../actions/login';
@ -72,32 +72,34 @@ class ForgotPasswordView extends React.Component {
contentContainerStyle={styles.container}
keyboardVerticalOffset={128}
>
<View style={styles.loginView}>
<View style={styles.formContainer}>
<TextInput
style={[styles.input_white, this.state.invalidEmail ? { borderColor: 'red' } : {}]}
onChangeText={email => this.validate(email)}
keyboardType='email-address'
autoCorrect={false}
returnKeyType='next'
autoCapitalize='none'
underlineColorAndroid='transparent'
onSubmitEditing={() => this.resetPassword()}
placeholder='Email'
/>
<SafeAreaView>
<View style={styles.loginView}>
<View style={styles.formContainer}>
<TextInput
style={[styles.input_white, this.state.invalidEmail ? { borderColor: 'red' } : {}]}
onChangeText={email => this.validate(email)}
keyboardType='email-address'
autoCorrect={false}
returnKeyType='next'
autoCapitalize='none'
underlineColorAndroid='transparent'
onSubmitEditing={() => this.resetPassword()}
placeholder='Email'
/>
<TouchableOpacity style={styles.buttonContainer} onPress={this.resetPassword}>
<Text style={styles.button}>RESET PASSWORD</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.buttonContainer} onPress={this.resetPassword}>
<Text style={styles.button}>RESET PASSWORD</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.buttonContainer} onPress={this.backLogin}>
<Text style={styles.button}>BACK TO LOGIN</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.buttonContainer} onPress={this.backLogin}>
<Text style={styles.button}>BACK TO LOGIN</Text>
</TouchableOpacity>
{this.props.login.failure && <Text style={styles.error}>{this.props.login.error.reason}</Text>}
{this.props.login.failure && <Text style={styles.error}>{this.props.login.error.reason}</Text>}
</View>
<Spinner visible={this.props.login.isFetching} textContent="Loading..." textStyle={{ color: '#FFF' }} />
</View>
<Spinner visible={this.props.login.isFetching} textContent={'Loading...'} textStyle={{ color: '#FFF' }} />
</View>
</SafeAreaView>
</KeyboardView>
);
}

22
app/views/ListServerView.js
View File

@ -3,7 +3,7 @@ import React from 'react';
import Icon from 'react-native-vector-icons/Ionicons';
import PropTypes from 'prop-types';
import Zeroconf from 'react-native-zeroconf';
import { View, Text, SectionList, StyleSheet } from 'react-native';
import { View, Text, SectionList, StyleSheet, SafeAreaView } from 'react-native';
import { connect } from 'react-redux';
import { setServer } from '../actions/server';
import realm from '../lib/realm';
@ -93,7 +93,7 @@ export default class ListServerView extends React.Component {
zeroconf.scan('http', 'tcp', 'local.');
this.state = this.getState();
this.setState(this.getState());
}
componentDidUpdate() {
@ -184,14 +184,16 @@ export default class ListServerView extends React.Component {
return (
<View style={styles.view}>
<Banner />
<SectionList
style={styles.list}
sections={this.state.sections}
renderItem={this.renderItem}
renderSectionHeader={this.renderSectionHeader}
keyExtractor={item => item.id}
ItemSeparatorComponent={this.renderSeparator}
/>
<SafeAreaView style={styles.view}>
<SectionList
style={styles.list}
sections={this.state.sections}
renderItem={this.renderItem}
renderSectionHeader={this.renderSectionHeader}
keyExtractor={item => item.id}
ItemSeparatorComponent={this.renderSeparator}
/>
</SafeAreaView>
</View>
);
}

80
app/views/LoginView.js
View File

@ -3,7 +3,7 @@ import React from 'react';
import Spinner from 'react-native-loading-spinner-overlay';
import PropTypes from 'prop-types';
import { Keyboard, Text, TextInput, View, TouchableOpacity } from 'react-native';
import { Keyboard, Text, TextInput, View, TouchableOpacity, SafeAreaView } from 'react-native';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
// import * as actions from '../actions';
@ -78,50 +78,52 @@ class LoginView extends React.Component {
contentContainerStyle={styles.container}
keyboardVerticalOffset={128}
>
<View style={styles.loginView}>
<View style={styles.formContainer}>
<TextInput
style={styles.input_white}
onChangeText={username => this.setState({ username })}
keyboardType='email-address'
autoCorrect={false}
returnKeyType='next'
autoCapitalize='none'
underlineColorAndroid='transparent'
onSubmitEditing={() => { this.password.focus(); }}
placeholder={this.props.Accounts_EmailOrUsernamePlaceholder || 'Email or username'}
/>
<TextInput
ref={(e) => { this.password = e; }}
style={styles.input_white}
onChangeText={password => this.setState({ password })}
secureTextEntry
autoCorrect={false}
returnKeyType='done'
autoCapitalize='none'
underlineColorAndroid='transparent'
onSubmitEditing={this.submit}
placeholder={this.props.Accounts_PasswordPlaceholder || 'Password'}
/>
<SafeAreaView>
<View style={styles.loginView}>
<View style={styles.formContainer}>
<TextInput
style={styles.input_white}
onChangeText={username => this.setState({ username })}
keyboardType='email-address'
autoCorrect={false}
returnKeyType='next'
autoCapitalize='none'
underlineColorAndroid='transparent'
onSubmitEditing={() => { this.password.focus(); }}
placeholder={this.props.Accounts_EmailOrUsernamePlaceholder || 'Email or username'}
/>
<TextInput
ref={(e) => { this.password = e; }}
style={styles.input_white}
onChangeText={password => this.setState({ password })}
secureTextEntry
autoCorrect={false}
returnKeyType='done'
autoCapitalize='none'
underlineColorAndroid='transparent'
onSubmitEditing={this.submit}
placeholder={this.props.Accounts_PasswordPlaceholder || 'Password'}
/>
{this.renderTOTP()}
{this.renderTOTP()}
<TouchableOpacity style={styles.buttonContainer}>
<Text style={styles.button} onPress={this.submit}>LOGIN</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.buttonContainer}>
<Text style={styles.button} onPress={this.submit}>LOGIN</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.buttonContainer}>
<Text style={styles.button} onPress={this.register}>REGISTER</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.buttonContainer}>
<Text style={styles.button} onPress={this.register}>REGISTER</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.buttonContainer} onPress={this.forgotPassword}>
<Text style={styles.button}>FORGOT MY PASSWORD</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.buttonContainer} onPress={this.forgotPassword}>
<Text style={styles.button}>FORGOT MY PASSWORD</Text>
</TouchableOpacity>
{this.props.login.failure && <Text style={styles.error}>{this.props.login.error.reason}</Text>}
{this.props.login.failure && <Text style={styles.error}>{this.props.login.error.reason}</Text>}
</View>
<Spinner visible={this.props.login.isFetching} textContent='Loading...' textStyle={{ color: '#FFF' }} />
</View>
<Spinner visible={this.props.login.isFetching} textContent={'Loading...'} textStyle={{ color: '#FFF' }} />
</View>
</SafeAreaView>
</KeyboardView>
);
}

32
app/views/RegisterView.js
View File

@ -3,7 +3,7 @@ import React from 'react';
import Spinner from 'react-native-loading-spinner-overlay';
import PropTypes from 'prop-types';
import { Keyboard, Text, TextInput, View, TouchableOpacity } from 'react-native';
import { Keyboard, Text, TextInput, View, TouchableOpacity, SafeAreaView } from 'react-native';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as loginActions from '../actions/login';
@ -37,7 +37,9 @@ class RegisterView extends React.Component {
}
_valid() {
const { name, email, password, confirmPassword } = this.state;
const {
name, email, password, confirmPassword
} = this.state;
return name.trim() && email.trim() &&
password && confirmPassword && password === confirmPassword;
}
@ -45,12 +47,16 @@ class RegisterView extends React.Component {
return this.props.login.failure && /Email/.test(this.props.login.error.reason);
}
submit = () => {
const { name, email, password, code } = this.state;
const {
name, email, password, code
} = this.state;
if (!this._valid()) {
return;
}
this.props.registerSubmit({ name, email, pass: password, code });
this.props.registerSubmit({
name, email, pass: password, code
});
Keyboard.dismiss();
}
usernameSubmit = () => {
@ -125,7 +131,8 @@ class RegisterView extends React.Component {
: { color: placeholderTextColor }
]}
onPress={this.submit}
>REGISTER</Text>
>REGISTER
</Text>
</TouchableOpacity>
{this.props.login.failure && <Text style={styles.error}>{this.props.login.error.reason}</Text>}
@ -155,7 +162,8 @@ class RegisterView extends React.Component {
<Text
style={styles.button}
onPress={this.usernameSubmit}
>REGISTER</Text>
>REGISTER
</Text>
</TouchableOpacity>
{this.props.login.failure && <Text style={styles.error}>{this.props.login.error.reason}</Text>}
@ -166,11 +174,13 @@ class RegisterView extends React.Component {
render() {
return (
<KeyboardView contentContainerStyle={styles.container}>
<View style={styles.loginView}>
{this._renderRegister()}
{this._renderUsername()}
<Spinner visible={this.props.login.isFetching} textContent={'Loading...'} textStyle={{ color: '#FFF' }} />
</View>
<SafeAreaView>
<View style={styles.loginView}>
{this._renderRegister()}
{this._renderUsername()}
<Spinner visible={this.props.login.isFetching} textContent='Loading...' textStyle={{ color: '#FFF' }} />
</View>
</SafeAreaView>
</KeyboardView>
);
}

27
app/views/RoomView.js
View File

@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Text, View, StyleSheet, Button, InteractionManager } from 'react-native';
import { Text, View, StyleSheet, Button, InteractionManager, SafeAreaView } from 'react-native';
import { ListView } from 'realm/react-native';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
@ -19,6 +19,9 @@ const styles = StyleSheet.create({
flex: 1,
backgroundColor: '#fff'
},
safeAreaView: {
flex: 1
},
list: {
flex: 1,
transform: [{ scaleY: -1 }]
@ -195,16 +198,18 @@ export default class RoomView extends React.Component {
return (
<KeyboardView contentContainerStyle={styles.container} keyboardVerticalOffset={64}>
{this.renderBanner()}
<ListView
enableEmptySections
style={styles.list}
onEndReachedThreshold={10}
renderFooter={this.renderHeader}
onEndReached={this.onEndReached}
dataSource={this.state.dataSource}
renderRow={item => this.renderItem({ item })}
initialListSize={10}
/>
<SafeAreaView style={styles.safeAreaView}>
<ListView
enableEmptySections
style={styles.list}
onEndReachedThreshold={10}
renderFooter={this.renderHeader}
onEndReached={this.onEndReached}
dataSource={this.state.dataSource}
renderRow={item => this.renderItem({ item })}
initialListSize={10}
/>
</SafeAreaView>
{this.renderFooter()}
</KeyboardView>
);

17
app/views/RoomsListView.js
View File

@ -3,7 +3,7 @@ import { ListView } from 'realm/react-native';
import React from 'react';
import PropTypes from 'prop-types';
import Icon from 'react-native-vector-icons/Ionicons';
import { View, StyleSheet, TextInput } from 'react-native';
import { View, StyleSheet, TextInput, SafeAreaView } from 'react-native';
import { connect } from 'react-redux';
import * as actions from '../actions';
import * as server from '../actions/connect';
@ -51,6 +51,9 @@ const styles = StyleSheet.create({
padding: 5,
paddingLeft: 10,
color: '#aaa'
},
safeAreaView: {
backgroundColor: '#fff'
}
});
@ -90,10 +93,10 @@ export default class RoomsListView extends React.Component {
componentWillMount() {
this.data.addListener(this.updateState);
this.state = {
this.setState({
...this.state,
dataSource: ds.cloneWithRows(this.data)
};
});
}
componentWillReceiveProps(props) {
@ -243,7 +246,7 @@ export default class RoomsListView extends React.Component {
key={item._id}
type={item.t}
baseUrl={this.props.Site_Url}
dateFormat={'MM-DD-YYYY HH:mm:ss'}
dateFormat='MM-DD-YYYY HH:mm:ss'
onPress={() => this._onPressItem(item._id, item)}
/>
)
@ -271,7 +274,9 @@ export default class RoomsListView extends React.Component {
render = () => (
<View style={styles.container}>
<Banner />
{this.renderList()}
{this.renderCreateButtons()}
<SafeAreaView style={styles.safeAreaView}>
{this.renderList()}
{this.renderCreateButtons()}
</SafeAreaView>
</View>)
}

11
app/views/SelectUsersView.js
View File

@ -3,7 +3,7 @@ import { ListView } from 'realm/react-native';
import React from 'react';
import PropTypes from 'prop-types';
import Icon from 'react-native-vector-icons/Ionicons';
import { View, StyleSheet, TextInput, Text, TouchableOpacity } from 'react-native';
import { View, StyleSheet, TextInput, Text, TouchableOpacity, SafeAreaView } from 'react-native';
import { connect } from 'react-redux';
import * as actions from '../actions';
import * as server from '../actions/connect';
@ -20,6 +20,9 @@ const styles = StyleSheet.create({
alignItems: 'stretch',
justifyContent: 'center'
},
safeAreaView: {
backgroundColor: '#FFFFFF'
},
list: {
width: '100%',
backgroundColor: '#FFFFFF'
@ -264,8 +267,10 @@ export default class RoomsListView extends React.Component {
render = () => (
<View style={styles.container}>
<Banner />
{this.renderList()}
{this.renderCreateButton()}
<SafeAreaView style={styles.safeAreaView}>
{this.renderList()}
{this.renderCreateButton()}
</SafeAreaView>
</View>
);
}

2514
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

32
package.json
View File

@ -18,9 +18,9 @@
"babel-polyfill": "^6.26.0",
"moment": "^2.19.2",
"prop-types": "^15.6.0",
"react": "16.0.0-alpha.12",
"react": "16.1.0",
"react-emojione": "^3.1.10",
"react-native": "0.46.1",
"react-native": "0.50.3",
"react-native-action-button": "^2.8.1",
"react-native-animatable": "^1.2.4",
"react-native-card-view": "0.0.3",
@ -28,13 +28,13 @@
"react-native-fetch-blob": "^0.10.8",
"react-native-image-picker": "^0.26.7",
"react-native-img-cache": "^1.5.0",
"react-native-keyboard-aware-scroll-view": "^0.3.0",
"react-native-keyboard-aware-scroll-view": "^0.4.1",
"react-native-loading-spinner-overlay": "^0.5.2",
"react-native-meteor": "^1.2.0",
"react-native-modal": "^3.1.0",
"react-native-modal": "^4.1.1",
"react-native-optimized-flatlist": "^1.0.3",
"react-native-svg": "^5.4.1",
"react-native-svg-image": "^1.1.4",
"react-native-svg": "^6.0.0",
"react-native-svg-image": "^2.0.1",
"react-native-vector-icons": "^4.4.2",
"react-native-zeroconf": "^0.8.3",
"react-navigation": "^1.0.0-beta.19",
@ -43,7 +43,7 @@
"redux": "^3.7.2",
"redux-immutable-state-invariant": "^2.1.0",
"redux-logger": "^3.0.6",
"redux-saga": "^0.15.6",
"redux-saga": "^0.16.0",
"regenerator-runtime": "^0.11.0",
"remote-redux-devtools": "^0.5.12",
"strip-ansi": "^4.0.0"
@ -51,20 +51,20 @@
"devDependencies": {
"@storybook/addon-storyshots": "^3.2.15",
"@storybook/react-native": "^3.2.15",
"babel-eslint": "^7.2.3",
"babel-jest": "20.0.3",
"babel-preset-react-native": "2.1.0",
"codecov": "^2.3.0",
"babel-eslint": "^8.0.2",
"babel-jest": "21.2.0",
"babel-preset-react-native": "4.0.0",
"codecov": "^3.0.0",
"eslint": "^4.11.0",
"eslint-config-airbnb": "^15.1.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-react": "^7.4.0",
"eslint-plugin-react-native": "^3.1.0",
"jest": "20.0.4",
"jest-cli": "^20.0.4",
"react-dom": "16.0.0-alpha.12",
"react-test-renderer": "16.0.0-alpha.12"
"jest": "21.2.1",
"jest-cli": "^21.2.1",
"react-dom": "16.1.0",
"react-test-renderer": "16.1.0"
},
"jest": {
"preset": "react-native",