Skip to content

E
eCartPro-Customer
Commit 7d49bdaa authored by Deni Rinaldi's avatar Deni Rinaldi
Browse files
Options

profil

parent f67c2a6e
Hide whitespace changes
Inline Side-by-side
Showing with 201 additions and 5 deletions
App/Containers/ProfileScreen.js
View file @ 7d49bdaa
......@@ -8,6 +8,8 @@ import { connect } from 'react-redux'
import styles from './Styles/ProfileScreenStyle'
import { Images } from '../Themes'
import BaseText from '../Components/BaseText'
import BaseHeader from '../Components/BaseHeader'
import { TouchableOpacity } from 'react-native-gesture-handler'
class ProfileScreen extends Component {
......@@ -31,12 +33,60 @@ class ProfileScreen extends Component {
componentWillUnmount() {
BackHandler.removeEventListener("hardwareBackPress", this.backAction);
}
render () {
render() {
return (
<View style={{flex: 1, backgroundColor: 'white', justifyContent:'center', alignItems:'center'}}>
<Image source={Images.comingSoon} style={{width: '100%', height: 250, resizeMode:'stretch'}}/>
<BaseText type={"italic"} text={'Under Development'} style={{fontSize: 16, marginLeft: 25, marginTop: -30}}/>
<View style={{ flex: 1, backgroundColor: '#fff' }}>
<BaseHeader leftText={'Data Diri'} />
<View style={{ backgroundColor: '#4cc9f0', borderBottomLeftRadius: 80, borderBottomRightRadius: 80, width: '100%', alignSelf: 'center' }}>
<View style={{ justifyContent: 'center', flexDirection: 'row', marginBottom: 20 }}>
<View style={{ alignSelf: 'center', elevation: 5, width: 100, height: 100, borderRadius: 100, borderWidth: 54, borderColor: 'white', marginTop: 25, backgroundColor: 'red', alignItems: 'center', justifyContent: 'center' }}>
<Image source={Images.beautyProduct} style={{ width: 100, height: 100, borderRadius: 100 }} />
</View>
<View style={{ justifyContent: 'flex-end', elevation: 9 }}>
<Image source={Images.editFoto} style={{ width: 50, height: 50, borderRadius: 40, alignSelf: 'flex-end', marginLeft: -40 }} />
</View>
</View>
</View>
<View style={{ flex: 1 }}>
<View style={{ paddingHorizontal: 40, marginTop: 20 }}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<View>
<BaseText type={"regular"} text={'Nama'} style={{ fontSize: 12, color: '#4b4b4b' }} />
<BaseText type={"bold"} text={'Rizal Firnando'} style={{ fontSize: 14, color: 'black' }} />
</View>
<View style={{ justifyContent: 'center', }}>
<TouchableOpacity style={{ alignSelf: 'center', alignItems: 'center', justifyContent: 'center', borderColor: '#4cc9f0', borderWidth: 1.3, width: 70, height: 24, borderRadius: 5 }} onPress={()=> this.props.navigation.navigate('RincianProfilScreen')}>
<BaseText type={"regular"} text={'Ganti'} style={{ fontSize: 12, color: '#4cc9f0', textAlign: 'center' }} />
</TouchableOpacity>
</View>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 20 }}>
<View>
<BaseText type={"regular"} text={'Email'} style={{ fontSize: 12, color: '#4b4b4b' }} />
<BaseText type={"bold"} text={'rizal.f@gmail.com'} style={{ fontSize: 14, color: 'black' }} />
</View>
<View style={{ justifyContent: 'center', }}>
<TouchableOpacity style={{ alignSelf: 'center', alignItems: 'center', justifyContent: 'center', borderColor: '#4cc9f0', borderWidth: 1.3, width: 70, height: 24, borderRadius: 5 }} onPress={()=> this.props.navigation.navigate('RincianProfilScreen', {intent: 'email'})}>
<BaseText type={"regular"} text={'Ganti'} style={{ fontSize: 12, color: '#4cc9f0', textAlign: 'center' }} />
</TouchableOpacity>
</View>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 20 }}>
<View>
<BaseText type={"regular"} text={'Nomor HP'} style={{ fontSize: 12, color: '#4b4b4b' }} />
<BaseText type={"bold"} text={'08129986899'} style={{ fontSize: 14, color: 'black' }} />
</View>
<View style={{ justifyContent: 'center', }}>
<TouchableOpacity style={{ alignSelf: 'center', alignItems: 'center', justifyContent: 'center', borderColor: '#4cc9f0', borderWidth: 1.3, width: 70, height: 24, borderRadius: 5 }} onPress={()=> this.props.navigation.navigate('RincianProfilScreen', {intent: 'hp'})}>
<BaseText type={"regular"} text={'Ganti'} style={{ fontSize: 12, color: '#4cc9f0', textAlign: 'center' }} />
</TouchableOpacity>
</View>
</View>
</View>
</View>
{/* <Image source={Images.comingSoon} style={{width: '100%', height: 250, resizeMode:'stretch'}}/>
<BaseText type={"italic"} text={'Under Development'} style={{fontSize: 16, marginLeft: 25, marginTop: -30}}/> */}
</View>
)
}
......
App/Containers/RincianProfilScreen.js 0 → 100644
View file @ 7d49bdaa
import React, { Component } from 'react'
import { ScrollView, Text, TouchableOpacity, TextInput } from 'react-native'
import { connect } from 'react-redux'
// Add Actions - replace 'Your' with whatever your reducer is called :)
// import YourActions from '../Redux/YourRedux'
// Styles
import styles from './Styles/RincianProfilScreenStyle'
import { View } from 'react-native-animatable'
import BaseHeader from '../Components/BaseHeader'
import BaseText from '../Components/BaseText'
class RincianProfilScreen extends Component {
constructor(props) {
super(props)
this.state = {
intent: ""
}
}
componentDidMount() {
if (this.props.navigation.state.params) {
if (this.props.navigation.state.params.intent == 'email') {
this.setState({ intent: 'email' })
} else if (this.props.navigation.state.params.intent == 'hp') {
this.setState({ intent: 'hp' })
}
}
}
render() {
return (
<View style={{ flex: 1, backgroundColor: '#4cc9f0' }}>
<BaseHeader leftText={'Rincian Profil'} onBackPress={() => this.props.navigation.goBack()} />
{this.state.intent == 'email' ?
<View style={{ flex: 1, backgroundColor: '#fff', borderTopLeftRadius: 30, borderTopRightRadius: 30, width: '100%' }}>
<View style={{ padding: 40 }}>
<BaseText type={"bold"} text={'Harap diisi sesuai dengan email Anda yang aktif untuk\nmempermudah proses verifikasi'} style={{ fontSize: 12, color: '#4b4b4b', alignSelf: 'center', textAlign: 'center' }} />
<View style={{ marginTop: 30 }}>
<BaseText type={"regular"} text={'Masukkan Email'} style={{ fontSize: 12, color: '#4b4b4b' }} />
<TextInput
placeholder={"Masukkan Email Anda"}
// editable={false}
style={{ fontSize: 14, paddingHorizontal: 0, color: 'black', }}
maxLength={40}
underlineColorAndroid={'#d8d8d8'}
/>
<View style={{ flexDirection: 'row', justifyContent: 'space-around', marginTop: 30, width: '100%' }}>
<TouchableOpacity style={{ backgroundColor: '#fff', height: 45, borderRadius: 30, width: '45%', borderColor: '#4cc9f0', borderWidth: 1 }}>
<BaseText type={"regular"} text={'Tidak'} style={{ fontSize: 16, textAlign: 'center', marginTop: 10, color: '#4cc9f0' }} />
</TouchableOpacity>
<TouchableOpacity style={{ backgroundColor: '#4cc9f0', height: 45, borderRadius: 30, width: '45%' }}>
<BaseText type={"regular"} text={'Simpan'} style={{ fontSize: 16, textAlign: 'center', marginTop: 10, color: 'white' }} />
</TouchableOpacity>
</View>
</View>
</View>
</View>
: this.state.intent == 'hp' ?
<View style={{ flex: 1, backgroundColor: '#fff', borderTopLeftRadius: 30, borderTopRightRadius: 30, width: '100%' }}>
<View style={{ padding: 40 }}>
<BaseText type={"bold"} text={'Harap diisi sesuai dengan nomor handphone Anda yang aktif untuk mempermudah proses verifikasi'} style={{ fontSize: 12, color: '#4b4b4b', alignSelf: 'center', textAlign: 'center' }} />
<View style={{ marginTop: 30 }}>
<BaseText type={"regular"} text={'No. Handphone'} style={{ fontSize: 12, color: '#4b4b4b' }} />
<View style={{ flexDirection: 'row', borderBottomColor: '#d8d8d8', borderBottomWidth: 1 }}>
<View style={{ justifyContent: 'center'}}>
<BaseText type={"regular"} text={'+62'} style={{ fontSize: 14, color: 'black', alignSelf: 'center', textAlign: 'center' }} />
</View>
<View style={{ borderRightColor: '#cecece', borderRightWidth: 1, height: 24, alignSelf: 'center', marginLeft: 10}}/>
<TextInput
placeholder={"8xxxxxxxxxx"}
keyboardType={"phone-pad"}
// editable={false}
style={{ fontSize: 14, paddingHorizontal: 0, color: 'black', marginLeft: 10 }}
maxLength={13}
underlineColorAndroid={'transparent'}
/>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'space-around', marginTop: 30, width: '100%' }}>
<TouchableOpacity style={{ backgroundColor: '#fff', height: 45, borderRadius: 30, width: '45%', borderColor: '#4cc9f0', borderWidth: 1 }}>
<BaseText type={"regular"} text={'Tidak'} style={{ fontSize: 16, textAlign: 'center', marginTop: 10, color: '#4cc9f0' }} />
</TouchableOpacity>
<TouchableOpacity style={{ backgroundColor: '#4cc9f0', height: 45, borderRadius: 30, width: '45%' }}>
<BaseText type={"regular"} text={'Simpan'} style={{ fontSize: 16, textAlign: 'center', marginTop: 10, color: 'white' }} />
</TouchableOpacity>
</View>
</View>
</View>
</View> :
<View style={{ flex: 1, backgroundColor: '#fff', borderTopLeftRadius: 30, borderTopRightRadius: 30, width: '100%' }}>
<View style={{ padding: 40 }}>
<View>
<BaseText type={"regular"} text={'Nama Depan'} style={{ fontSize: 12, color: '#4b4b4b' }} />
<TextInput
placeholder={"Nama Depan"}
// editable={false}
style={{ fontSize: 14, paddingHorizontal: 0, color: 'black', }}
maxLength={40}
underlineColorAndroid={'#d8d8d8'}
/>
</View>
<View style={{ marginTop: 20 }}>
<BaseText type={"regular"} text={'Nama Belakang'} style={{ fontSize: 12, color: '#4b4b4b' }} />
<TextInput
placeholder={"Nama Belakang"}
// editable={false}
style={{ fontSize: 14, paddingHorizontal: 0, color: 'black' }}
maxLength={40}
underlineColorAndroid={'#d8d8d8'}
/>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'space-around', marginTop: 30, width: '100%' }}>
<TouchableOpacity style={{ backgroundColor: '#fff', height: 45, borderRadius: 30, width: '45%', borderColor: '#4cc9f0', borderWidth: 1 }}>
<BaseText type={"regular"} text={'Tidak'} style={{ fontSize: 16, textAlign: 'center', marginTop: 10, color: '#4cc9f0' }} />
</TouchableOpacity>
<TouchableOpacity style={{ backgroundColor: '#4cc9f0', height: 45, borderRadius: 30, width: '45%' }}>
<BaseText type={"regular"} text={'Simpan'} style={{ fontSize: 16, textAlign: 'center', marginTop: 10, color: 'white' }} />
</TouchableOpacity>
</View>
</View>
</View>}
</View>
)
}
}
const mapStateToProps = (state) => {
return {
}
}
const mapDispatchToProps = (dispatch) => {
return {
}
}
export default connect(mapStateToProps, mapDispatchToProps)(RincianProfilScreen)
App/Containers/Styles/RincianProfilScreenStyle.js 0 → 100644
View file @ 7d49bdaa
import { StyleSheet } from 'react-native'
import { ApplicationStyles } from '../../Themes/'
export default StyleSheet.create({
...ApplicationStyles.screen
})
App/Navigation/AppNavigation.js
View file @ 7d49bdaa
import { createAppContainer } from 'react-navigation'
import RincianProfilScreen from '../Containers/RincianProfilScreen'
import AboutAppScreen from '../Containers/AboutAppScreen'
import TermAndPrivacyScreen from '../Containers/TermAndPrivacyScreen'
import AppContactScreen from '../Containers/AppContactScreen'
......@@ -21,6 +22,7 @@ import HomeNavigation from './HomeNavigation'
// Manifest of possible screens
const PrimaryNav = createStackNavigator({
RincianProfilScreen: { screen: RincianProfilScreen },
AboutAppScreen: { screen: AboutAppScreen },
TermAndPrivacyScreen: { screen: TermAndPrivacyScreen },
AppContactScreen: { screen: AppContactScreen },
......
App/Themes/Images.js
View file @ 7d49bdaa
......@@ -17,6 +17,7 @@ const images = {
reward: require('../Images/reward.png'),
dompet: require('../Images/dompet.png'),
failed: require('../Images/failed.png'),
editFoto: require('../Images/editFoto.png'),
//dummy
celana: require('../Images/imageDummy/celana.jpg'),
......
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