Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, {Component} from 'react';
- import { Text, View, StyleSheet, Image, TouchableOpacity, ScrollView } from 'react-native';
- import { connect } from 'react-redux';
- import { Item, Label, Input, Textarea } from 'native-base';
- import { saveImage, savePerfil } from '../../actions/ConfigActions';
- import { handlerImage, handlerBiography, handlerName, handlerEmail, handlerPhone, handlerBirth, handlerGenre, updateProfile } from "../../actions/MyProfileAction";
- import DatePicker from 'react-native-datepicker';
- import BackButton from '../../components/BackButton';
- import ImagePicker from 'react-native-image-picker';
- class AbaPerfil extends Component {
- constructor(props) {
- super(props);
- this.state = {
- selected: "masculino",
- foto: null,
- image: null,
- loading: false,
- date:""
- };
- this.takePhoto = this.takePhoto.bind(this);
- this.onValueChange = this.onValueChange.bind(this);
- }
- async takePhoto() {
- const options = {
- base64: true,
- allowsEditing: false,
- aspect: [4, 3],
- };
- ImagePicker.launchImageLibrary(options, (r) => {
- if (r.uri) {
- let image = 'data:image/jpeg;base64,' + r.data;
- this.props.handlerImage(image);
- this.props.saveImage(this.props.id, image);
- }
- });
- }
- saveChanges() {
- }
- onValueChange(value: string) {
- this.setState({
- selected: value
- });
- }
- render() {
- return (
- <ScrollView>
- <View style={styles.container}>
- <BackButton return={() => this.backProfile()}/>
- <View style={styles.content}>
- <View style={styles.avatarArea}>
- <TouchableOpacity onPress={this.takePhoto}>
- <Image source={this.props.image == null ? require('../../assets/imgProfile.png') : {uri: this.props.image}} style={styles.avatarProfile}/>
- <View style={{position: 'absolute', top: -7, right: -7}}>
- <Image source={require('../../assets/perfil/camera.png')} style={{width: 29, height: 29}} />
- </View>
- </TouchableOpacity>
- </View>
- <View style={styles.bio}>
- <View style={{alignSelf: 'center'}}>
- <Text style={styles.titleBio}>Bio (140 caracteres)</Text>
- <Textarea
- rowSpan={5}
- bordered
- placeholder="Bio"
- value={this.props.bio}
- onChangeText={(text) => this.props.handlerBiography(text)}
- style={styles.bodyBio}
- onSubmitEditing={() => {
- this.firstNameRef._root.focus();
- }}
- returnKeyType={"next"}
- />
- </View>
- </View>
- <View style={styles.textArea}>
- <Item floatingLabel style={styles.formItem}>
- <Label style={styles.formLabel}>Nome Completo</Label>
- <Input
- style={styles.formInput}
- value={this.props.name}
- onChangeText={this.props.handlerName}
- autoCapitalize="none"
- blurOnSubmit={false}
- getRef={input => {
- this.firstNameRef = input;
- }}
- onSubmitEditing={() => {
- this.emailInputRef._root.focus();
- }}
- returnKeyType={"next"}
- />
- </Item>
- <Item floatingLabel style={styles.formItem}>
- <Label style={styles.formLabel}>E-mail</Label>
- <Input
- style={styles.formInput}
- value={this.props.email}
- onChangeText={this.props.handlerEmail}
- autoCapitalize="none"
- blurOnSubmit={false}
- getRef={input => {
- this.emailInputRef = input;
- }}
- onSubmitEditing={() => {
- this.userInputRef._root.focus();
- }}
- returnKeyType={"next"}
- />
- </Item>
- <Item floatingLabel style={styles.formItem}>
- <Label style={styles.formLabel}>Celular</Label>
- <Input
- style={styles.formInput}
- onChangeText={this.props.handlerPhone}
- value={this.props.fone}
- autoCapitalize="none"
- blurOnSubmit={false}
- getRef={input => {
- this.celInputRef = input;
- }}
- onSubmitEditing={() => {
- this.aniverInputRef._root.focus();
- }}
- returnKeyType={"next"}
- />
- </Item>
- <Text style={{fontSize: 12, marginTop: 17}}>Aniversário</Text>
- <DatePicker
- style={{width: 200}}
- date={this.props.aniversario}
- mode="date"
- placeholder="Selecione a data"
- format="YYYY-MM-DD"
- minDate="1950-01-01"
- maxDate="2019-01-01"
- confirmBtnText="Confirm"
- cancelBtnText="Cancel"
- customStyles={{
- dateIcon: {
- position: 'absolute',
- right: 0,
- top: 4,
- marginLeft: 0
- },
- dateInput: {
- marginRight: 36,
- borderTopWidth: 0,
- borderRightWidth: 0,
- borderLeftWidth: 0
- }
- }}
- onDateChange={(date) => this.props.handlerBirth(date)}
- />
- <Item floatingLabel style={styles.formItem}>
- <Label style={styles.formLabel}>Gênero</Label>
- <Input
- style={styles.formInput}
- value={this.props.genero}
- onChangeText={this.props.handlerGenre}
- autoCapitalize="none"
- />
- </Item>
- </View>
- <TouchableOpacity onPress={() => this.props.updateProfile(this.props.bio, this.props.name, this.props.email, this.props.fone, this.props.aniversario, this.props.genero)} style={[styles.button, styles.buttonBg]} >
- <Text style={styles.buttonText}>Salvar</Text>
- </TouchableOpacity>
- </View>
- </View>
- </ScrollView>
- );
- }
- }
- const styles = StyleSheet.create({
- container: {
- flex: 1,
- backgroundColor: '#FFFFFF'
- },
- backButton: {
- alignSelf: 'flex-start'
- },
- backText: {
- width: 26,
- height: 26,
- margin: 5,
- color: '#CCC'
- },
- content: {
- margin: 30
- },
- headerText: {
- color: '#4b5461',
- marginBottom: 5,
- fontWeight: 'bold'
- },
- avatarArea: {
- flexDirection: 'row',
- alignItems: 'center',
- width: '100%',
- justifyContent: 'space-between',
- marginTop: 10
- },
- avatarProfile: {
- width: 100,
- height: 100,
- borderRadius: 20
- },
- persoButton: {
- backgroundColor: '#FFFFFF',
- paddingTop: 10,
- paddingBottom: 10,
- paddingLeft: 20,
- paddingRight: 20,
- shadowColor: "#000",
- shadowOffset: {width: 0, height: 2},
- shadowOpacity: 1,
- shadowRadius: 5.5,
- elevation: 3,
- borderRadius: 20
- },
- bio: {
- width: '100%',
- marginTop: 30,
- marginBottom: 30
- },
- titleBio: {
- color: '#656d78',
- fontWeight: 'bold'
- },
- bodyBio: {
- textAlign: 'justify',
- width: 320,
- color: '#8e99a6'
- },
- textArea: {},
- formItem: {
- marginTop: 17
- },
- formLabel: {
- fontSize: 12
- },
- formInput: {
- fontSize: 14,
- color: '#7b838d',
- fontWeight: 'bold'
- },
- colArea: {
- flexDirection: 'row',
- marginTop: 17,
- borderBottomWidth: 1,
- borderBottomColor: '#CCC'
- },
- button: {
- width: 332,
- height: 54,
- alignItems: 'center',
- justifyContent: 'center',
- alignSelf: 'center',
- borderRadius: 6,
- marginBottom: 20,
- marginTop: 20
- },
- buttonBg: {
- backgroundColor: '#ff3c36'
- },
- buttonText: {
- fontWeight: 'bold',
- fontSize: 20,
- color: '#FFF'
- }
- });
- const mapStateToProps = (state) => {
- return {
- status: state.auth.status,
- PassHide: state.auth.PassHide,
- id: state.MyProfile.id,
- user: state.MyProfile.user,
- name: state.MyProfile.name,
- email: state.MyProfile.email,
- password: state.MyProfile.password,
- fone: state.MyProfile.phone,
- aniversario: state.MyProfile.birth,
- genero: state.MyProfile.genre,
- bio: state.MyProfile.biography,
- image: state.MyProfile.image
- }
- };
- const AbaPerfilConnect = connect(mapStateToProps, {
- saveImage,
- savePerfil,
- handlerImage,
- handlerBiography,
- handlerName,
- handlerEmail,
- handlerPhone,
- handlerBirth,
- handlerGenre,
- updateProfile
- })(AbaPerfil);
- export default AbaPerfilConnect;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement