created user avatar container

This commit is contained in:
u-e 2018-12-07 14:35:03 +03:00
parent e46e614d1a
commit 0233aaa179
10 changed files with 52 additions and 25 deletions

View File

@ -19,7 +19,6 @@ export default EStyleSheet.create({
marginLeft: 12,
},
textInput: {
height: 60,
flex: 0.7,
},
icon: {
@ -27,6 +26,6 @@ export default EStyleSheet.create({
fontSize: 25,
top: 18,
left: 8,
color:"$iconColor",
color: '$iconColor',
},
});

View File

@ -14,8 +14,6 @@ import { getReputation } from '../../../utils/user';
// Component
import { HeaderView } from '..';
const DEFAULT_IMAGE = require('../../../assets/avatar_default.png');
/*
* Props Name Description Value
*@props --> props name here description here Value Type Here
@ -48,18 +46,15 @@ class HeaderContainer extends Component {
const {
isLoggedIn, currentAccount, selectedUser, isReverse, isLoginDone,
} = this.props;
let avatar;
let displayName;
let userName;
let reputation;
if (isReverse && selectedUser) {
avatar = selectedUser.avatar ? { uri: selectedUser.avatar } : DEFAULT_IMAGE;
displayName = selectedUser.display_name;
userName = selectedUser.name;
reputation = getReputation(selectedUser.reputation);
} else if (!isReverse) {
avatar = currentAccount.avatar ? { uri: currentAccount.avatar } : DEFAULT_IMAGE;
displayName = currentAccount.display_name;
userName = currentAccount.name;
reputation = getReputation(currentAccount.reputation);
@ -72,7 +67,6 @@ class HeaderContainer extends Component {
isLoggedIn={isLoggedIn}
isReverse={isReverse}
isLoginDone={isLoginDone}
avatar={avatar}
displayName={displayName}
userName={userName}
reputation={reputation}

View File

@ -49,9 +49,6 @@ export default EStyleSheet.create({
fontSize: 12,
},
avatar: {
width: 32,
height: 32,
borderRadius: 32 / 2,
alignSelf: 'flex-end',
marginRight: 12,
},

View File

@ -1,6 +1,6 @@
import React, { Component } from 'react';
import {
View, StatusBar, Text, SafeAreaView, TouchableOpacity, Image,
View, Text, SafeAreaView, TouchableOpacity,
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import { injectIntl } from 'react-intl';
@ -8,12 +8,10 @@ import { injectIntl } from 'react-intl';
// Components
import { SearchModal } from '../../searchModal';
import { IconButton } from '../../iconButton';
import { UserAvatar } from '../../userAvatar';
// Styles
import styles from './headerStyles';
const DEFAULT_IMAGE = require('../../../assets/avatar_default.png');
class HeaderView extends Component {
/* Props
* ------------------------------------------------
@ -38,11 +36,9 @@ class HeaderView extends Component {
render() {
const {
avatar,
displayName,
handleOnPressBackButton,
handleOpenDrawer,
hideStatusBar,
intl,
isLoggedIn,
isLoginDone,
@ -54,7 +50,6 @@ class HeaderView extends Component {
return (
<SafeAreaView style={[styles.container, isReverse && styles.containerReverse]}>
{/* <StatusBar style={ { height: 20}} hidden={hideStatusBar} translucent /> */}
<SearchModal
placeholder={intl.formatMessage({
id: 'header.search',
@ -75,7 +70,7 @@ class HeaderView extends Component {
isReverse ? styles.avatarButtonWrapperReverse : styles.avatarDefault,
]}
>
<Image style={styles.avatar} source={avatar} defaultSource={DEFAULT_IMAGE} />
<UserAvatar style={styles.avatar} userName={userName} />
</LinearGradient>
</TouchableOpacity>
{displayName || userName ? (

View File

@ -26,9 +26,6 @@ export default EStyleSheet.create({
},
userAvatar: {
marginLeft: '$deviceWidth / 10',
width: 64,
height: 64,
borderRadius: 64 / 2,
},
otherUserAvatar: {
marginLeft: -15,

View File

@ -7,6 +7,7 @@ import LinearGradient from 'react-native-linear-gradient';
// Components
import { Icon, IconButton } from '../..';
import { UserAvatar } from '../../userAvatar';
// Constants
import { default as MENU } from '../../../constants/sideMenuItems';
@ -68,7 +69,6 @@ class SideMenuView extends Component {
navigateToRoute, currentAccount, isLoggedIn, switchAccount, intl,
} = this.props;
const { menuItems, isAddAccountIconActive } = this.state;
const _avatar = currentAccount.avatar ? { uri: currentAccount.avatar } : DEFAULT_IMAGE;
return (
<View style={styles.container}>
@ -84,7 +84,11 @@ class SideMenuView extends Component {
>
{isLoggedIn && (
<View style={styles.headerContentWrapper}>
<Image style={styles.userAvatar} source={_avatar} defaultSource={DEFAULT_IMAGE} />
<UserAvatar
userName={currentAccount.username}
size="xl"
style={styles.userAvatar}
/>
<View style={styles.userInfoWrapper}>
{currentAccount.display_name && (
<Text style={styles.username}>{currentAccount.display_name}</Text>

View File

@ -110,7 +110,9 @@ class UpvoteView extends Component {
isVoting: false,
},
() => {
fetchPost();
if (fetchPost) {
fetchPost();
}
},
);
})

View File

@ -0,0 +1,4 @@
import UserAvatar from './view/userAvatarView';
export { UserAvatar };
export default UserAvatar;

View File

@ -0,0 +1,7 @@
import EStyleSheet from 'react-native-extended-stylesheet';
export default EStyleSheet.create({
avatar: {
backgroundColor: '$white',
},
});

View File

@ -0,0 +1,28 @@
import React from 'react';
import { Image } from 'react-native';
import styles from './userAvatarStyles';
const DEFAULT_IMAGE = require('../../../assets/avatar_default.png');
/* Props
* ------------------------------------------------
* @prop { type } name - Description....
*/
const UserAvatarView = ({ userName, size, style }) => {
const imageSize = size === 'xl' ? 'large' : 'medium';
const _avatar = userName ? { uri: `https://steemitimages.com/u/${userName}/avatar/${imageSize}` } : DEFAULT_IMAGE;
let _size = 32;
if(size === 'xl') {
_size = 64
}
return <Image style={[styles.avatar, style, {width: _size, height: _size, borderRadius: _size / 2}]} source={_avatar} />;
};
export default UserAvatarView;
// width: 32,
// height: 32,
// borderRadius: 32 / 2,
// backgroundColor: '$white',