Advertisement
Guest User

Untitled

a guest
Jan 13th, 2019
154
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.08 KB | None | 0 0
  1. import React, {Component} from 'react';
  2. import { Text, View, StyleSheet, Image, TouchableOpacity, ScrollView } from 'react-native';
  3. import { connect } from 'react-redux';
  4. import { Item, Label, Input, Textarea } from 'native-base';
  5. import { saveImage, savePerfil } from '../../actions/ConfigActions';
  6. import { handlerImage, handlerBiography, handlerName, handlerEmail, handlerPhone, handlerBirth, handlerGenre, updateProfile } from "../../actions/MyProfileAction";
  7. import DatePicker from 'react-native-datepicker';
  8. import BackButton from '../../components/BackButton';
  9. import ImagePicker from 'react-native-image-picker';
  10.  
  11. class AbaPerfil extends Component {
  12. constructor(props) {
  13. super(props);
  14.  
  15. this.state = {
  16. selected: "masculino",
  17. foto: null,
  18. image: null,
  19. loading: false,
  20. date:""
  21. };
  22.  
  23. this.takePhoto = this.takePhoto.bind(this);
  24. this.onValueChange = this.onValueChange.bind(this);
  25. }
  26.  
  27. async takePhoto() {
  28. const options = {
  29. base64: true,
  30. allowsEditing: false,
  31. aspect: [4, 3],
  32. };
  33.  
  34. ImagePicker.launchImageLibrary(options, (r) => {
  35. if (r.uri) {
  36. let image = 'data:image/jpeg;base64,' + r.data;
  37.  
  38. this.props.handlerImage(image);
  39. this.props.saveImage(this.props.id, image);
  40. }
  41. });
  42. }
  43.  
  44. saveChanges() {
  45.  
  46. }
  47.  
  48. onValueChange(value: string) {
  49. this.setState({
  50. selected: value
  51. });
  52. }
  53.  
  54. render() {
  55. return (
  56. <ScrollView>
  57. <View style={styles.container}>
  58. <BackButton return={() => this.backProfile()}/>
  59. <View style={styles.content}>
  60. <View style={styles.avatarArea}>
  61. <TouchableOpacity onPress={this.takePhoto}>
  62. <Image source={this.props.image == null ? require('../../assets/imgProfile.png') : {uri: this.props.image}} style={styles.avatarProfile}/>
  63. <View style={{position: 'absolute', top: -7, right: -7}}>
  64. <Image source={require('../../assets/perfil/camera.png')} style={{width: 29, height: 29}} />
  65. </View>
  66. </TouchableOpacity>
  67. </View>
  68. <View style={styles.bio}>
  69. <View style={{alignSelf: 'center'}}>
  70. <Text style={styles.titleBio}>Bio (140 caracteres)</Text>
  71. <Textarea
  72. rowSpan={5}
  73. bordered
  74. placeholder="Bio"
  75. value={this.props.bio}
  76. onChangeText={(text) => this.props.handlerBiography(text)}
  77. style={styles.bodyBio}
  78. onSubmitEditing={() => {
  79. this.firstNameRef._root.focus();
  80. }}
  81. returnKeyType={"next"}
  82. />
  83. </View>
  84. </View>
  85. <View style={styles.textArea}>
  86. <Item floatingLabel style={styles.formItem}>
  87. <Label style={styles.formLabel}>Nome Completo</Label>
  88. <Input
  89. style={styles.formInput}
  90. value={this.props.name}
  91. onChangeText={this.props.handlerName}
  92. autoCapitalize="none"
  93. blurOnSubmit={false}
  94. getRef={input => {
  95. this.firstNameRef = input;
  96. }}
  97. onSubmitEditing={() => {
  98. this.emailInputRef._root.focus();
  99. }}
  100. returnKeyType={"next"}
  101. />
  102. </Item>
  103. <Item floatingLabel style={styles.formItem}>
  104. <Label style={styles.formLabel}>E-mail</Label>
  105. <Input
  106. style={styles.formInput}
  107. value={this.props.email}
  108. onChangeText={this.props.handlerEmail}
  109. autoCapitalize="none"
  110. blurOnSubmit={false}
  111. getRef={input => {
  112. this.emailInputRef = input;
  113. }}
  114. onSubmitEditing={() => {
  115. this.userInputRef._root.focus();
  116. }}
  117. returnKeyType={"next"}
  118. />
  119. </Item>
  120. <Item floatingLabel style={styles.formItem}>
  121. <Label style={styles.formLabel}>Celular</Label>
  122. <Input
  123. style={styles.formInput}
  124. onChangeText={this.props.handlerPhone}
  125. value={this.props.fone}
  126. autoCapitalize="none"
  127. blurOnSubmit={false}
  128. getRef={input => {
  129. this.celInputRef = input;
  130. }}
  131. onSubmitEditing={() => {
  132. this.aniverInputRef._root.focus();
  133. }}
  134. returnKeyType={"next"}
  135. />
  136. </Item>
  137. <Text style={{fontSize: 12, marginTop: 17}}>Aniversário</Text>
  138. <DatePicker
  139. style={{width: 200}}
  140. date={this.props.aniversario}
  141. mode="date"
  142. placeholder="Selecione a data"
  143. format="YYYY-MM-DD"
  144. minDate="1950-01-01"
  145. maxDate="2019-01-01"
  146. confirmBtnText="Confirm"
  147. cancelBtnText="Cancel"
  148. customStyles={{
  149. dateIcon: {
  150. position: 'absolute',
  151. right: 0,
  152. top: 4,
  153. marginLeft: 0
  154. },
  155. dateInput: {
  156. marginRight: 36,
  157. borderTopWidth: 0,
  158. borderRightWidth: 0,
  159. borderLeftWidth: 0
  160. }
  161. }}
  162. onDateChange={(date) => this.props.handlerBirth(date)}
  163. />
  164. <Item floatingLabel style={styles.formItem}>
  165. <Label style={styles.formLabel}>Gênero</Label>
  166. <Input
  167. style={styles.formInput}
  168. value={this.props.genero}
  169. onChangeText={this.props.handlerGenre}
  170. autoCapitalize="none"
  171. />
  172. </Item>
  173. </View>
  174. <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]} >
  175. <Text style={styles.buttonText}>Salvar</Text>
  176. </TouchableOpacity>
  177. </View>
  178. </View>
  179. </ScrollView>
  180. );
  181. }
  182. }
  183.  
  184. const styles = StyleSheet.create({
  185. container: {
  186. flex: 1,
  187. backgroundColor: '#FFFFFF'
  188. },
  189. backButton: {
  190. alignSelf: 'flex-start'
  191. },
  192. backText: {
  193. width: 26,
  194. height: 26,
  195. margin: 5,
  196. color: '#CCC'
  197. },
  198. content: {
  199. margin: 30
  200. },
  201. headerText: {
  202. color: '#4b5461',
  203. marginBottom: 5,
  204. fontWeight: 'bold'
  205. },
  206. avatarArea: {
  207. flexDirection: 'row',
  208. alignItems: 'center',
  209. width: '100%',
  210. justifyContent: 'space-between',
  211. marginTop: 10
  212. },
  213. avatarProfile: {
  214. width: 100,
  215. height: 100,
  216. borderRadius: 20
  217. },
  218. persoButton: {
  219. backgroundColor: '#FFFFFF',
  220. paddingTop: 10,
  221. paddingBottom: 10,
  222. paddingLeft: 20,
  223. paddingRight: 20,
  224. shadowColor: "#000",
  225. shadowOffset: {width: 0, height: 2},
  226. shadowOpacity: 1,
  227. shadowRadius: 5.5,
  228. elevation: 3,
  229. borderRadius: 20
  230. },
  231. bio: {
  232. width: '100%',
  233. marginTop: 30,
  234. marginBottom: 30
  235. },
  236. titleBio: {
  237. color: '#656d78',
  238. fontWeight: 'bold'
  239. },
  240. bodyBio: {
  241. textAlign: 'justify',
  242. width: 320,
  243. color: '#8e99a6'
  244. },
  245. textArea: {},
  246. formItem: {
  247. marginTop: 17
  248. },
  249. formLabel: {
  250. fontSize: 12
  251. },
  252. formInput: {
  253. fontSize: 14,
  254. color: '#7b838d',
  255. fontWeight: 'bold'
  256. },
  257. colArea: {
  258. flexDirection: 'row',
  259. marginTop: 17,
  260. borderBottomWidth: 1,
  261. borderBottomColor: '#CCC'
  262. },
  263. button: {
  264. width: 332,
  265. height: 54,
  266. alignItems: 'center',
  267. justifyContent: 'center',
  268. alignSelf: 'center',
  269. borderRadius: 6,
  270. marginBottom: 20,
  271. marginTop: 20
  272. },
  273. buttonBg: {
  274. backgroundColor: '#ff3c36'
  275. },
  276. buttonText: {
  277. fontWeight: 'bold',
  278. fontSize: 20,
  279. color: '#FFF'
  280. }
  281. });
  282.  
  283. const mapStateToProps = (state) => {
  284. return {
  285. status: state.auth.status,
  286. PassHide: state.auth.PassHide,
  287. id: state.MyProfile.id,
  288. user: state.MyProfile.user,
  289. name: state.MyProfile.name,
  290. email: state.MyProfile.email,
  291. password: state.MyProfile.password,
  292. fone: state.MyProfile.phone,
  293. aniversario: state.MyProfile.birth,
  294. genero: state.MyProfile.genre,
  295. bio: state.MyProfile.biography,
  296. image: state.MyProfile.image
  297. }
  298. };
  299.  
  300. const AbaPerfilConnect = connect(mapStateToProps, {
  301. saveImage,
  302. savePerfil,
  303. handlerImage,
  304. handlerBiography,
  305. handlerName,
  306. handlerEmail,
  307. handlerPhone,
  308. handlerBirth,
  309. handlerGenre,
  310. updateProfile
  311. })(AbaPerfil);
  312. export default AbaPerfilConnect;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement