ecency/ecency-mobile
1
1
Fork 0
mirror of https://github.com/ecency/ecency-mobile.git synced 2024-12-21 12:21:31 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

created profile edit ui

Browse Source
This commit is contained in:
ue 2019-09-07 14:49:04 +03:00
parent 89528df717
commit d1b52d2623
5 changed files with 159 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/formInput/view/formInputView.js
View File

@ -27,7 +27,7 @@ class FormInputView extends Component {
super(props);
this.state = {
value: '',
value: props.value || '',
inputBorderColor: '#c1c5c7',
isValid: true,
};

32
src/components/profileEditForm/profileEditFormStyles.js
View File

@ -10,5 +10,37 @@ export default EStyleSheet.create({
formStyle: {
backgroundColor: '$white',
height: 30,
marginTop: 8,
},
label: {
fontSize: 14,
color: '$primaryDarkText',
fontWeight: '500',
},
formItem: {
marginBottom: 24,
},
coverImg: {
borderRadius: 5,
height: 60,
marginBottom: 12,
alignSelf: 'stretch',
backgroundColor: '#296CC0',
},
coverImageWrapper: {},
addIcon: {
color: '$white',
textAlign: 'center',
},
addButton: {
backgroundColor: '$iconColor',
width: 20,
height: 20,
borderRadius: 20 / 2,
borderColor: '$white',
borderWidth: 1,
position: 'absolute',
bottom: 0,
right: 10,
},
});

114
src/components/profileEditForm/profileEditFormView.js
View File

@ -1,21 +1,34 @@
import React from 'react';
import { withNavigation } from 'react-navigation';
import { View, Text, Platform } from 'react-native';
import { View, TouchableOpacity, Image, Text, Platform } from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
// Images
import LIGHT_COVER_IMAGE from '../../assets/default_cover_image.png';
import DARK_COVER_IMAGE from '../../assets/dark_cover_image.png';
// Components
import { FormInput } from '../formInput';
import { IconButton } from '../iconButton';
// Styles
import styles from './profileEditFormStyles';
const ProfileEditFormView = ({ avatarUrl, coverUrl, name, about, location, website }) => (
const ProfileEditFormView = ({
avatarUrl,
coverUrl,
name,
about,
location,
website,
isDarkTheme,
}) => (
<View style={styles.container}>
<KeyboardAwareScrollView
enableAutoAutomaticScroll={Platform.OS === 'ios'}
contentContainerStyle={{ flexGrow: 1 }}
>
<Text>Profile picture URL</Text>
<View style={styles.formItem}>
<Text style={styles.label}>Profile picture URL</Text>
<FormInput
wrapperStyle={styles.formStyle}
isValid
@ -23,10 +36,97 @@ const ProfileEditFormView = ({ avatarUrl, coverUrl, name, about, location, websi
onChange={value => alert('changed')}
placeholder="profile picture url"
isEditable
type="username"
isFirstImage
value="sex"
type="text"
value={avatarUrl}
/>
</View>
<View style={styles.formItem}>
<Text style={styles.label}>Cover image URL</Text>
<FormInput
wrapperStyle={styles.formStyle}
isValid
height={30}
onChange={value => alert('changed')}
placeholder="Cover image URL"
isEditable
type="text"
value={coverUrl}
/>
</View>
<TouchableOpacity style={styles.coverImgWrapper} onPress={() => alert('upload')}>
<Image
style={styles.coverImg}
source={{ uri: `https://steemitimages.com/400x0/${coverUrl}` }}
defaultSource={isDarkTheme ? DARK_COVER_IMAGE : LIGHT_COVER_IMAGE}
/>
<IconButton
iconStyle={styles.addIcon}
style={styles.addButton}
iconType="MaterialCommunityIcons"
name="plus"
onPress={() => alert('upload')}
size={15}
/>
</TouchableOpacity>
<View style={styles.formItem}>
<Text style={styles.label}>Display Name</Text>
<FormInput
wrapperStyle={styles.formStyle}
isValid
height={30}
onChange={value => alert('changed')}
placeholder="Display name"
isEditable
type="text"
value={name}
/>
</View>
<View style={styles.formItem}>
<Text style={styles.label}>About</Text>
<FormInput
wrapperStyle={styles.formStyle}
isValid
height={30}
onChange={value => alert('changed')}
placeholder="About"
isEditable
type="text"
value={about}
/>
</View>
<View style={styles.formItem}>
<Text style={styles.label}>Location</Text>
<FormInput
wrapperStyle={styles.formStyle}
isValid
height={30}
onChange={value => alert('changed')}
placeholder="Location"
isEditable
type="text"
value={location}
/>
</View>
<View style={styles.formItem}>
<Text style={styles.label}>Website</Text>
<FormInput
wrapperStyle={styles.formStyle}
isValid
height={30}
onChange={value => alert('changed')}
placeholder="Website"
isEditable
type="text"
value={website}
/>
</View>
</KeyboardAwareScrollView>
</View>
);

4
src/containers/profileEditContainer.js
View File

@ -21,12 +21,13 @@ class ProfileEditContainer extends Component {
_handleOnSave = () => {};
render() {
const { children, currentAccount } = this.props;
const { children, currentAccount, isDarkTheme } = this.props;
return (
children &&
children({
currentAccount,
isDarkTheme,
})
);
}
@ -34,6 +35,7 @@ class ProfileEditContainer extends Component {
const mapStateToProps = state => ({
currentAccount: state.account.currentAccount,
isDarkTheme: state.application.isDarkTheme,
});
export default connect(mapStateToProps)(ProfileEditContainer);

15
src/screens/profileEdit/screen/profileEditScreen.js
View File

@ -25,21 +25,22 @@ class ProfileEditScreen extends PureComponent {
render() {
return (
<ProfileEditContainer>
{({ currentAccount }) => (
{({ currentAccount, isDarkTheme }) => (
<Fragment>
<AvatarHeader
username={get(currentAccount, 'name')}
name={get(currentAccount, 'about.profile.name')}
reputation={get(currentAccount, 'reputation')}
avatarUrl={null}
avatarUrl={get(currentAccount, 'avatar')}
/>
<ProfileEditForm
isDarkTheme={isDarkTheme}
about={get(currentAccount, 'about.profile.about')}
name={get(currentAccount, 'about.profile.name')}
location="location"
website="website"
coverUrl={get(currentAccount, 'reputation')}
avatarUrl={null}
name={get(currentAccount, 'about.profile.profile.name')}
location={get(currentAccount, 'about.profile.profile.location')}
website={get(currentAccount, 'about.profile.profile.website')}
coverUrl={get(currentAccount, 'about.profile.cover_image')}
avatarUrl={get(currentAccount, 'avatar')}
/>
</Fragment>
)}