Skip to content

C
clone_excelso
Commit 93e94724 authored by Trisno's avatar Trisno
Browse files
Options

design change language

parent ccd3831e
Show whitespace changes
Inline Side-by-side
Showing with 104 additions and 39 deletions
view/ChangeLanguage.js
View file @ 93e94724
...@@ -3,6 +3,8 @@ import { StyleSheet, Text, View, Button, StatusBar, TouchableOpacity, Image } fr ...@@ -3,6 +3,8 @@ import { StyleSheet, Text, View, Button, StatusBar, TouchableOpacity, Image } fr
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import ActionType from '../redux/globalActionType'; import ActionType from '../redux/globalActionType';
import i18n from 'i18n-js'; import i18n from 'i18n-js';
import CheckBox from 'react-native-check-box'
import { FontAwesome, AntDesign, Feather } from '@expo/vector-icons';
class Language extends React.Component { class Language extends React.Component {
constructor(props) { constructor(props) {
...@@ -32,40 +34,103 @@ class Language extends React.Component { ...@@ -32,40 +34,103 @@ class Language extends React.Component {
render() { render() {
console.log(this.props.language)
return ( return (
<View style={styles.container}> <View style={styles.container}>
<View style={styles.header}> <View style={{ flex: 0.2 }} />
<StatusBar barStyle='dark-content' />
<Text style={styles.titleText}> {i18n.t('welcome')}</Text>
</View>
<View style={styles.body}> <View style={styles.body}>
<TouchableOpacity onPress={() => this._changLanguage()}>
<View style={styles.languageBorder}>
<View style={styles.languageSpace}> {
{/* <Image style={styles.icon} source={require('../assets/English-Language-icon.png')}></Image> */} this.props.language == 'en' ? (
<>
<TouchableOpacity style={{ flex: 0.2, flexDirection: 'row', backgroundColor: '#CFB368', margin: 10, marginHorizontal: 50, justifyContent: 'center', alignItems: 'center', borderRadius: 10, paddingVertical: 10, paddingHorizontal: 20 }}
onPress={() => this._changLanguage()}>
<View style={{ flex: 0.3, }}>
<Image style={{ height: 26, width: 40 }} source={require('../assets/images/english-flag.png')} />
</View> </View>
<View style={styles.languageSpace}> <View style={{ flex: 0.4, alignItems: 'center' }}>
<Text>ENG</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Black', color: 'white' }}>ENGLISH</Text>
</View> </View>
<View style={{ flex: 0.2, alignItems: 'flex-end' }}>
<CheckBox
onClick={() => this._changLanguage()}
isChecked={true}
checkedImage={<AntDesign name='checkcircleo' size={30} color={'#fff'} />}
unCheckedImage={<Feather name='circle' size={30} color={'#fff'} />}
/>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity onPress={() => this._changLanguageId()}>
<View style={styles.languageBorder}> <TouchableOpacity style={{ flex: 0.2, flexDirection: 'row', backgroundColor: 'white', margin: 10, marginHorizontal: 50, justifyContent: 'center', alignItems: 'center', borderRadius: 10, borderWidth:1, borderColor:'gray', paddingVertical: 10, paddingHorizontal: 20 }}
<View style={styles.languageSpace}> onPress={() => this._changLanguageId()}>
{/* <Image style={styles.icon} source={require('../assets/Indonesia-Flag-icon.png')}></Image> */} <View style={{ flex: 0.3, }}>
<Image style={{ height: 26, width: 40,borderWidth:1, borderColor:'gray' }} source={require('../assets/images/indonesia-flag.png')} />
</View> </View>
<View style={styles.languageSpace}> <View style={{ flex: 0.4, alignItems: 'center' }}>
<Text>ID</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Black', color: 'gray' }}>INDONESIAN</Text>
</View> </View>
<View style={{ flex: 0.2, alignItems: 'flex-end' }}>
<CheckBox
onClick={() => this._changLanguageId()}
isChecked={false}
checkedImage={<AntDesign name='checkcircleo' size={30} color={'gray'} />}
unCheckedImage={<Feather name='circle' size={30} color={'gray'} />}
/>
</View>
</TouchableOpacity>
</>
) : (
<>
<TouchableOpacity style={{ flex: 0.2, flexDirection: 'row', backgroundColor: 'white', margin: 10, marginHorizontal: 50, justifyContent: 'center', alignItems: 'center', borderRadius: 10, borderWidth:1, borderColor:'gray', paddingVertical: 10, paddingHorizontal: 20 }}
onPress={() => this._changLanguage()}>
<View style={{ flex: 0.3, }}>
<Image style={{ height: 26, width: 40 }} source={require('../assets/images/english-flag.png')} />
</View>
<View style={{ flex: 0.4, alignItems: 'center' }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Black', color: 'gray' }}>ENGLISH</Text>
</View>
<View style={{ flex: 0.2, alignItems: 'flex-end' }}>
<CheckBox
onClick={() => this._changLanguage()}
isChecked={false}
checkedImage={<AntDesign name='checkcircleo' size={30} color={'gray'} />}
unCheckedImage={<Feather name='circle' size={30} color={'gray'} />}
/>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity style={{ flex: 0.2, flexDirection: 'row', backgroundColor: '#CFB368', margin: 10, marginHorizontal: 50, justifyContent: 'center', alignItems: 'center', borderRadius: 10, paddingVertical: 10, paddingHorizontal: 20 }}
onPress={() => this._changLanguageId()}>
<View style={{ flex: 0.3, }}>
<Image style={{ height: 26, width: 40 }} source={require('../assets/images/indonesia-flag.png')} />
</View>
<View style={{ flex: 0.4, alignItems: 'center' }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Black', color: 'white' }}>INDONESIAN</Text>
</View>
<View style={{ flex: 0.2, alignItems: 'flex-end' }}>
<CheckBox
onClick={() => this._changLanguageId()}
isChecked={true}
checkedImage={<AntDesign name='checkcircleo' size={30} color={'#fff'} />}
unCheckedImage={<Feather name='circle' size={30} color={'#fff'} />}
/>
</View>
</TouchableOpacity>
</>
)
}
<TouchableOpacity onPress={() => this.props.navigation.goBack()}>
<View style={styles.button}> <View style={styles.button}>
<Button title="save" onPress={()=>this.props.navigation.goBack()}/> <Text style={{ color: 'white', fontSize: 12, fontFamily: 'Gotham-Black' }}>Save</Text>
</View> </View>
</TouchableOpacity>
</View> </View>
</View> </View>
) )
} }
} }
...@@ -75,7 +140,7 @@ class Language extends React.Component { ...@@ -75,7 +140,7 @@ class Language extends React.Component {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
borderWidth: 1 backgroundColor:'white'
}, },
header: { header: {
flex: 0.2, flex: 0.2,
...@@ -83,31 +148,31 @@ const styles = StyleSheet.create({ ...@@ -83,31 +148,31 @@ const styles = StyleSheet.create({
justifyContent: 'center' justifyContent: 'center'
}, },
body: { body: {
flex: 0.6, flex: 0.8,
flexDirection: 'column', flexDirection: 'column'
borderWidth: 1,
marginLeft: 60,
marginRight: 60,
}, },
titleText: { titleText: {
fontSize: 26, fontSize: 26,
fontWeight: 'bold', fontWeight: 'bold',
}, },
languageBorder: { languageBorder: {
flex: 1,
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
borderWidth: 1, borderWidth: 1,
marginTop: 50,
marginRight: 40,
marginLeft: 40
}, },
languageSpace: { languageSpace: {
marginLeft: 20 marginLeft: 20
}, },
button: { button: {
marginTop: 50, flex: 0.2,
marginLeft: 60, backgroundColor: '#CFB368',
marginRight: 60 marginTop: 20,
marginHorizontal: 80,
borderRadius: 15,
padding: 20,
alignItems: 'center',
justifyContent: 'center'
}, },
icon: { icon: {
height: 60, height: 60,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment