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

FormContainer

This commit is contained in:
Diego Mello 2020-03-26 15:20:26 -03:00
parent 2384ba2f0f
commit 4253840d5e
7 changed files with 153 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
app/containers/AppVersion.js Normal file
View File

@ -0,0 +1,34 @@
import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import PropTypes from 'prop-types';
import { themes } from '../constants/colors';
import sharedStyles from '../views/Styles';
import { getReadableVersion } from '../utils/deviceInfo';
const styles = StyleSheet.create({
container: {
alignItems: 'center',
justifyContent: 'flex-end',
backgroundColor: '#ccc'
},
text: {
...sharedStyles.textRegular,
fontSize: 13
},
bold: {
...sharedStyles.textSemibold
}
});
const Check = React.memo(({ theme }) => (
<View style={styles.container}>
<Text style={[styles.text, { color: themes[theme].auxiliaryText }]}>App Version: <Text style={styles.bold}>{getReadableVersion}</Text></Text>
</View>
));
Check.propTypes = {
theme: PropTypes.string
};
export default Check;

66
app/containers/FormContainer.js Normal file
View File

@ -0,0 +1,66 @@
import React from 'react';
import { Text, ScrollView, Keyboard, Image, StyleSheet, TouchableOpacity, View, Alert } from 'react-native';
import PropTypes from 'prop-types';
import { SafeAreaView } from 'react-navigation';
import { themes } from '../constants/colors';
import sharedStyles from '../views/Styles';
import scrollPersistTaps from '../utils/scrollPersistTaps';
import KeyboardView from '../presentation/KeyboardView';
import StatusBar from './StatusBar';
import AppVersion from './AppVersion';
const styles = StyleSheet.create({
title: {
...sharedStyles.textBold,
fontSize: 22,
letterSpacing: 0,
textAlign: 'auto'
},
inputContainer: {
marginTop: 24,
marginBottom: 32
},
backButton: {
position: 'absolute',
paddingHorizontal: 9,
left: 15
},
certificatePicker: {
flex: 1,
marginTop: 40,
alignItems: 'center',
justifyContent: 'center'
},
chooseCertificateTitle: {
fontSize: 15,
...sharedStyles.textRegular
},
chooseCertificate: {
fontSize: 15,
...sharedStyles.textSemibold
}
});
const FormContainer = ({ children, theme }) => (
<KeyboardView
style={{ backgroundColor: themes[theme].backgroundColor }}
contentContainerStyle={sharedStyles.container}
keyboardVerticalOffset={128}
// key='login-view'
>
<StatusBar theme={theme} />
<ScrollView {...scrollPersistTaps} style={sharedStyles.container} contentContainerStyle={[sharedStyles.containerScrollView, { height: '100%' }]}>
<SafeAreaView style={sharedStyles.container} testID='new-server-view'>
{children}
</SafeAreaView>
<AppVersion theme={theme} />
</ScrollView>
</KeyboardView>
);
FormContainer.propTypes = {
theme: PropTypes.string
};
export default FormContainer;

2
app/i18n/locales/en.js
View File

@ -238,6 +238,7 @@ export default {
Invite_users: 'Invite users',
Join_the_community: 'Join the community',
Join: 'Join',
Join_your_workspace: 'Join your workspace',
Just_invited_people_can_access_this_channel: 'Just invited people can access this channel',
Language: 'Language',
last_message: 'last message',
@ -486,6 +487,7 @@ export default {
Welcome: 'Welcome',
Whats_your_2fa: 'What\'s your 2FA code?',
Without_Servers: 'Without Servers',
Workspaces: 'Workspaces',
Write_External_Permission_Message: 'Rocket Chat needs access to your gallery so you can save images.',
Write_External_Permission: 'Gallery Permission',
Yes_action_it: 'Yes, {{action}} it!',

53
app/views/NewServerView.js
View File

@ -18,34 +18,30 @@ import sharedStyles from './Styles';
import scrollPersistTaps from '../utils/scrollPersistTaps';
import Button from '../containers/Button';
import TextInput from '../containers/TextInput';
import FormContainer from '../containers/FormContainer';
import I18n from '../i18n';
import { verticalScale, moderateScale } from '../utils/scaling';
import KeyboardView from '../presentation/KeyboardView';
import { isIOS, isNotch, isTablet } from '../utils/deviceInfo';
import { CustomIcon } from '../lib/Icons';
import StatusBar from '../containers/StatusBar';
import AppVersion from '../containers/AppVersion';
import { themes } from '../constants/colors';
import log from '../utils/log';
import { animateNextTransition } from '../utils/layoutAnimation';
import { withTheme } from '../theme';
import { setBasicAuth, BASIC_AUTH_KEY } from '../utils/fetch';
import { themedHeader } from '../utils/navigation';
const styles = StyleSheet.create({
image: {
alignSelf: 'center',
marginVertical: verticalScale(20),
width: 210,
height: 171
},
title: {
...sharedStyles.textBold,
fontSize: moderateScale(22),
fontSize: 22,
letterSpacing: 0,
alignSelf: 'center'
textAlign: 'auto'
},
inputContainer: {
marginTop: 25,
marginBottom: 15
marginTop: 24,
marginBottom: 32
},
backButton: {
position: 'absolute',
@ -68,11 +64,10 @@ const styles = StyleSheet.create({
}
});
const defaultServer = 'https://open.rocket.chat';
class NewServerView extends React.Component {
static navigationOptions = () => ({
header: null
static navigationOptions = ({ screenProps }) => ({
title: I18n.t('Workspaces'),
...themedHeader(screenProps.theme)
})
static propTypes = {
@ -97,7 +92,6 @@ class NewServerView extends React.Component {
this.state = {
text: server || '',
autoFocus: !server,
certificate: null
};
}
@ -292,24 +286,15 @@ class NewServerView extends React.Component {
render() {
const { connecting, theme } = this.props;
const { text, autoFocus } = this.state;
const { text } = this.state;
return (
<KeyboardView
style={{ backgroundColor: themes[theme].backgroundColor }}
contentContainerStyle={sharedStyles.container}
keyboardVerticalOffset={128}
key='login-view'
>
<StatusBar theme={theme} />
<ScrollView {...scrollPersistTaps} contentContainerStyle={sharedStyles.containerScrollView}>
<SafeAreaView style={sharedStyles.container} testID='new-server-view'>
<Image style={styles.image} source={{ uri: 'new_server' }} />
<Text style={[styles.title, { color: themes[theme].titleText }]}>{I18n.t('Sign_in_your_server')}</Text>
<FormContainer theme={theme}>
<Text style={[styles.title, { color: themes[theme].titleText }]}>{I18n.t('Join_your_workspace')}</Text>
<View style={isTablet && sharedStyles.tabletScreenContent}>
<TextInput
autoFocus={autoFocus}
label='Enter workspace URL'
placeholder='Ex. your-company.rocket.chat'
containerStyle={styles.inputContainer}
placeholder={defaultServer}
value={text}
returnKeyType='send'
onChangeText={this.onChangeText}
@ -329,12 +314,10 @@ class NewServerView extends React.Component {
testID='new-server-view-button'
theme={theme}
/>
{ isIOS ? this.renderCertificatePicker() : null }
</View>
</SafeAreaView>
</ScrollView>
{this.renderBack()}
</KeyboardView>
{ isIOS ? this.renderCertificatePicker() : null }
{/* <AppVersion theme={theme} /> */}
</FormContainer>
);
}
}

46
app/views/OnboardingView/index.js
View File

@ -4,7 +4,7 @@ import {
} from 'react-native';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { SafeAreaView } from 'react-navigation';
import { SafeAreaView, ScrollView } from 'react-navigation';
import Orientation from 'react-native-orientation-locker';
import { selectServerRequest, serverInitAdd, serverFinishAdd } from '../../actions/server';
@ -16,9 +16,11 @@ import { isIOS, isNotch, isTablet } from '../../utils/deviceInfo';
import EventEmitter from '../../utils/events';
import { CustomIcon } from '../../lib/Icons';
import StatusBar from '../../containers/StatusBar';
import AppVersion from '../../containers/AppVersion';
import { themes } from '../../constants/colors';
import { withTheme } from '../../theme';
import sharedStyles from '../Styles';
import FormContainer from '../../containers/FormContainer';
class OnboardingView extends React.Component {
static navigationOptions = () => ({
@ -139,64 +141,30 @@ class OnboardingView extends React.Component {
render() {
const { theme } = this.props;
return (
<SafeAreaView
style={[
styles.container,
{ backgroundColor: themes[theme].backgroundColor }
]}
testID='onboarding-view'
>
<StatusBar theme={theme} />
<View style={isTablet && sharedStyles.tabletScreenContent}>
<FormContainer theme={theme}>
<View style={[sharedStyles.container, isTablet && sharedStyles.tabletScreenContent]}>
<Image style={styles.onboarding} source={{ uri: 'logo' }} fadeDuration={0} />
<Text style={[styles.title, { color: themes[theme].titleText }]}>{I18n.t('Onboarding_title')}</Text>
<Text style={[styles.subtitle, { color: themes[theme].controlText }]}>{I18n.t('Onboarding_subtitle')}</Text>
<Text style={[styles.description, { color: themes[theme].auxiliaryText }]}>{I18n.t('Onboarding_description')}</Text>
<View style={[styles.buttonsContainer]}>
{/* <Button
type='secondary'
title={I18n.t('Connect_to_a_server')}
icon={<CustomIcon name='permalink' size={30} color={themes[theme].actionTintColor} />}
onPress={this.connectServer}
testID='connect-server-button'
theme={theme}
/>
<Button
type='secondary'
title={I18n.t('Join_the_community')}
subtitle='open.rocket.chat'
icon={<Image source={{ uri: 'logo_onboarding' }} style={{ width: 32, height: 27 }} fadeDuration={0} />}
onPress={this.joinCommunity}
testID='join-community-button'
theme={theme}
/>
<Button
type='primary'
title={I18n.t('Create_a_new_workspace')}
icon={<CustomIcon name='plus' size={30} color={themes[theme].buttonText} />}
onPress={this.createWorkspace}
testID='create-workspace-button'
theme={theme}
/> */}
<Button
title={I18n.t('Onboarding_join_workspace')}
type='primary'
style={styles.button}
onPress={this.connectServer}
theme={theme}
/>
<Button
title={I18n.t('Create_a_new_workspace')}
type='secondary'
style={styles.button}
backgroundColor={themes[theme].chatComponentBackground}
onPress={this.createWorkspace}
theme={theme}
/>
</View>
</View>
{this.renderClose()}
</SafeAreaView>
{/* {this.renderClose()} */}
</FormContainer>
);
}
}

3
app/views/OnboardingView/styles.js
View File

@ -41,8 +41,7 @@ export default StyleSheet.create({
},
buttonsContainer: {
marginBottom: verticalScale(10),
marginTop: verticalScale(30),
marginHorizontal: 16
marginTop: verticalScale(30)
},
closeModal: {
position: 'absolute',

3
app/views/Styles.js
View File

@ -4,7 +4,8 @@ import { MAX_SCREEN_CONTENT_WIDTH, MAX_CONTENT_WIDTH } from '../constants/tablet
export default StyleSheet.create({
container: {
flex: 1
flex: 1,
flexDirection: 'column'
},
containerScrollView: {
padding: 15,