wip on profile edit form fields

src/components/avatarHeader/avatarHeaderStyles.js

@@ -28,4 +28,19 @@ export default EStyleSheet.create({
     fontSize: 12,
     marginTop: 4,
   },
+  addIcon: {
+    color: '$white',
+    textAlign: 'center',
+  },
+  addButton: {
+    backgroundColor: '$iconColor',
+    width: 20,
+    height: 20,
+    borderRadius: 20 / 2,
+    borderColor: '$white',
+    borderWidth: 1,
+    position: 'absolute',
+    bottom: 0,
+    left: 45,
+  },
 });

src/components/avatarHeader/avatarHeaderView.js

@@ -9,7 +9,7 @@ import { IconButton } from '../iconButton';
 // Styles
 import styles from './avatarHeaderStyles';
 
-const TooltipView = ({ username, name, reputation, navigation }) => (
+const AvatarHeader = ({ username, name, reputation, navigation, avatarUrl }) => (
   <LinearGradient
     start={{ x: 0, y: 0 }}
     end={{ x: 1, y: 0 }}
@@ -25,7 +25,15 @@ const TooltipView = ({ username, name, reputation, navigation }) => (
         size={25}
       />
       <View style={styles.wrapper}>
-        <UserAvatar noAction size="xl" username={username} />
+        <UserAvatar noAction size="xl" username={username} avatarUrl={avatarUrl} />
+        <IconButton
+          iconStyle={styles.addIcon}
+          style={styles.addButton}
+          iconType="MaterialCommunityIcons"
+          name="plus"
+          onPress={() => alert('upload')}
+          size={15}
+        />
         <View style={styles.textWrapper}>
           <Text style={styles.name}>{name}</Text>
           <Text style={styles.username}>{`@${username} (${reputation})`}</Text>
@@ -35,4 +43,4 @@ const TooltipView = ({ username, name, reputation, navigation }) => (
   </LinearGradient>
 );
 
-export default withNavigation(TooltipView);
+export default withNavigation(AvatarHeader);

src/components/formInput/view/formInputStyles.js

@@ -4,8 +4,7 @@ export default EStyleSheet.create({
   wrapper: {
     borderTopLeftRadius: 8,
     borderTopRightRadius: 8,
-    marginHorizontal: 30,
-    marginVertical: 10,
+    marginTop: 16,
     flexDirection: 'row',
     backgroundColor: '$primaryGray',
     height: 60,

src/components/formInput/view/formInputView.js

@@ -30,17 +30,10 @@ class FormInputView extends Component {
       value: '',
       inputBorderColor: '#c1c5c7',
       isValid: true,
-      formInputWidth: '99%',
     };
   }
 
   // Component Life Cycles
-  componentWillMount() {
-    setTimeout(() => {
-      this.setState({ formInputWidth: '100%' });
-    }, 100);
-  }
-
   componentWillReceiveProps(nextProps) {
     const { isValid } = this.props;
 
@@ -65,7 +58,7 @@ class FormInputView extends Component {
   };
 
   render() {
-    const { inputBorderColor, isValid, value, formInputWidth } = this.state;
+    const { inputBorderColor, isValid, value } = this.state;
     const {
       placeholder,
       type,
@@ -75,6 +68,8 @@ class FormInputView extends Component {
       rightIconName,
       secureTextEntry,
       iconType,
+      wrapperStyle,
+      height,
     } = this.props;
     return (
       <View
@@ -83,6 +78,7 @@ class FormInputView extends Component {
           {
             borderBottomColor: isValid ? inputBorderColor : 'red',
           },
+          wrapperStyle,
         ]}
       >
         {isFirstImage && value && value.length > 2 ? (
@@ -97,19 +93,21 @@ class FormInputView extends Component {
             />
           </View>
         ) : (
-          <Icon iconType={iconType || 'MaterialIcons'} name={rightIconName} style={styles.icon} />
+          rightIconName && (
+            <Icon iconType={iconType || 'MaterialIcons'} name={rightIconName} style={styles.icon} />
+          )
         )}
         <View style={styles.textInput}>
           <TextInput
             onFocus={() => this._handleOnFocus()}
             autoCapitalize="none"
             secureTextEntry={secureTextEntry}
+            height={height}
             placeholder={placeholder}
             editable={isEditable || true}
             textContentType={type}
             onChangeText={val => this._handleOnChange(val)}
             value={value}
-            style={{ width: formInputWidth }}
           />
         </View>
 

src/components/index.js

@@ -10,6 +10,7 @@ import { TextInput } from './textInput';
 import ScaleSlider from './scaleSlider/scaleSliderView';
 import UserListItem from './basicUIElements/view/userListItem/userListItem';
 import PostButton from './postButton/postButtonView';
+import ProfileEditForm from './profileEditForm/profileEditFormView';
 
 export {
   CircularButton,
@@ -20,10 +21,11 @@ export {
   Modal,
   NumericKeyboard,
   PinAnimatedInput,
+  PostButton,
+  ProfileEditForm,
   ScaleSlider,
   SideMenu,
   TextButton,
   TextInput,
   UserListItem,
-  PostButton,
 };

src/components/profileEditForm/profileEditFormStyles.js

@@ -0,0 +1,14 @@
+import EStyleSheet from 'react-native-extended-stylesheet';
+
+export default EStyleSheet.create({
+  container: {
+    paddingHorizontal: 32,
+    paddingVertical: 16,
+    backgroundColor: '$primaryBackgroundColor',
+    flex: 1,
+  },
+  formStyle: {
+    backgroundColor: '$white',
+    height: 30,
+  },
+});

src/components/profileEditForm/profileEditFormView.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { withNavigation } from 'react-navigation';
+import { View, Text, Platform } from 'react-native';
+import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
+
+// Components
+import { FormInput } from '../formInput';
+
+// Styles
+import styles from './profileEditFormStyles';
+
+const ProfileEditFormView = ({ avatarUrl, coverUrl, name, about, location, website }) => (
+  <View style={styles.container}>
+    <KeyboardAwareScrollView
+      enableAutoAutomaticScroll={Platform.OS === 'ios'}
+      contentContainerStyle={{ flexGrow: 1 }}
+    >
+      <Text>Profile picture URL</Text>
+      <FormInput
+        wrapperStyle={styles.formStyle}
+        isValid
+        height={30}
+        onChange={value => alert('changed')}
+        placeholder="profile picture url"
+        isEditable
+        type="username"
+        isFirstImage
+        value="sex"
+      />
+    </KeyboardAwareScrollView>
+  </View>
+);
+
+export default withNavigation(ProfileEditFormView);
+
+// placeholder={intl.formatMessage({
+//   id: 'login.username',
+// })}

src/components/textInput/view/textInputView.js

@@ -5,9 +5,9 @@ import { connect } from 'react-redux';
 // Styles
 import styles from './textInputStyles';
 
-const TextInputView = ({ isDarkTheme, innerRef, ...props }) => (
+const TextInputView = ({ isDarkTheme, innerRef, height, ...props }) => (
   <TextInput
-    style={styles.input}
+    style={[styles.input, { minHeight: height }]}
     ref={innerRef}
     keyboardAppearance={isDarkTheme ? 'dark' : 'light'}
     {...props}

src/components/userAvatar/view/userAvatarView.js

@@ -42,12 +42,12 @@ class UserAvatarView extends Component {
   };
 
   render() {
-    const { username, size, style, disableSize, noAction } = this.props;
+    const { username, size, style, disableSize, noAction, avatarUrl } = this.props;
     const imageSize = size === 'xl' ? 'large' : 'small';
     let _size;
     const _avatar = username
       ? { uri: `https://steemitimages.com/u/${username}/avatar/${imageSize}` }
-      : DEFAULT_IMAGE;
+      : avatarUrl || DEFAULT_IMAGE;
 
     if (!disableSize) {
       _size = 32;

src/screens/login/screen/loginScreen.js

@@ -102,7 +102,7 @@ class LoginScreen extends PureComponent {
               onKeyboardWillShow={() => this.setState({ keyboardIsOpen: true })}
               onKeyboardWillHide={() => this.setState({ keyboardIsOpen: false })}
               enableAutoAutomaticScroll={Platform.OS === 'ios'}
-              contentContainerStyle={{ flexGrow: 1 }}
+              contentContainerStyle={styles.formWrapper}
             >
               <FormInput
                 rightIconName="at"

src/screens/login/screen/loginStyles.js

@@ -34,4 +34,9 @@ export default EStyleSheet.create({
   cancelButton: {
     marginRight: 10,
   },
+  formWrapper: {
+    flexGrow: 1,
+    marginHorizontal: 30,
+    marginVertical: 10,
+  },
 });

src/screens/profileEdit/screen/profileEditScreen.js

@@ -5,6 +5,7 @@ import get from 'lodash/get';
 import { ProfileEditContainer } from '../../../containers';
 
 import AvatarHeader from '../../../components/avatarHeader/avatarHeaderView';
+import ProfileEditForm from '../../../components/profileEditForm/profileEditFormView';
 
 class ProfileEditScreen extends PureComponent {
   /* Props
@@ -30,6 +31,15 @@ class ProfileEditScreen extends PureComponent {
               username={get(currentAccount, 'name')}
               name={get(currentAccount, 'about.profile.name')}
               reputation={get(currentAccount, 'reputation')}
+              avatarUrl={null}
+            />
+            <ProfileEditForm
+              about={get(currentAccount, 'about.profile.about')}
+              name={get(currentAccount, 'about.profile.name')}
+              location="location"
+              website="website"
+              coverUrl={get(currentAccount, 'reputation')}
+              avatarUrl={null}
             />
           </Fragment>
         )}