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

fixed lenght bug about && added number formatter

Browse Source
This commit is contained in:
u-e 2018-12-26 14:49:21 +03:00
parent 610cfa5a23
commit e7f4597e1e
6 changed files with 76 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/basicUIElements/view/textWithIcon/textWithIconView.js
View File

@ -4,19 +4,27 @@ import { Icon } from '../../../icon';
import styles from './textWithIconStyles';
const TextWithIcon = ({
iconName, text, isClickable, onPress, iconStyle, iconType,
iconName, text, isClickable, onPress, iconStyle, iconType, iconSize,
}) => (
<View style={styles.container}>
{isClickable || onPress ? (
<TouchableHighlight underlayColor="transparent" onPress={() => onPress && onPress()}>
<View style={styles.wrapper}>
<Icon style={[styles.icon, iconStyle]} name={iconName} iconType={iconType} />
<Icon
style={[styles.icon, iconStyle, iconSize && { fontSize: iconSize }]}
name={iconName}
iconType={iconType}
/>
<Text style={[styles.text]}>{text}</Text>
</View>
</TouchableHighlight>
) : (
<View style={styles.wrapper}>
<Icon style={[styles.icon, iconStyle]} name={iconName} iconType={iconType} />
<Icon
style={[styles.icon, iconStyle, iconSize && { fontSize: iconSize }]}
name={iconName}
iconType={iconType}
/>
<Text style={styles.text}>{text}</Text>
</View>
)}

11
src/components/postCard/view/postCardView.js
View File

@ -5,6 +5,9 @@ import { PostHeaderDescription } from '../../postElements';
import { PostDropdown } from '../../postDropdown';
import { Icon } from '../../icon';
// Utils
import { makeCountFriendly } from '../../../utils/formatter';
// STEEM
import { Upvote } from '../../upvote';
// Styles
@ -59,6 +62,9 @@ class PostCard extends Component {
const _image = content && content.image
? { uri: content.image, priority: FastImage.priority.high }
: DEFAULT_IMAGE;
const reblogedBy = content.reblogged_by && content.reblogged_by[0];
// repeat icon
// text rebloged by ${reblogedBy}
return (
<View style={styles.post}>
@ -72,6 +78,7 @@ class PostCard extends Component {
reputation={content.author_reputation}
size={32}
tag={content.category}
reblogedBy={reblogedBy}
/>
<View style={styles.dropdownWrapper}>
<PostDropdown content={content} />
@ -103,12 +110,12 @@ class PostCard extends Component {
iconType="MaterialIcons"
name="people"
/>
<Text style={styles.comment}>{content.vote_count}</Text>
<Text style={styles.comment}>{makeCountFriendly(content.vote_count)}</Text>
</TouchableOpacity>
</View>
<TouchableOpacity style={styles.commentButton}>
<Icon style={[styles.commentIcon]} iconType="MaterialIcons" name="comment" />
<Text style={styles.comment}>{content.children}</Text>
<Text style={styles.comment}>{makeCountFriendly(content.children)}</Text>
</TouchableOpacity>
</View>
</View>

13
src/components/postElements/headerDescription/view/postHeaderDescription.js
View File

@ -5,7 +5,7 @@ import { withNavigation } from 'react-navigation';
import FastImage from 'react-native-fast-image';
// Components
import { Tag } from '../../../basicUIElements';
import { Tag, TextWithIcon } from '../../../basicUIElements';
// Styles
import styles from './postHeaderDescriptionStyles';
@ -43,7 +43,15 @@ class PostHeaderDescription extends PureComponent {
render() {
const {
date, avatar, name, reputation, size, tag, tagOnPress, isHideImage,
avatar,
date,
isHideImage,
name,
reblogedBy,
reputation,
size,
tag,
tagOnPress,
} = this.props;
const _reputationText = `(${reputation})`;
@ -77,6 +85,7 @@ class PostHeaderDescription extends PureComponent {
</TouchableOpacity>
)}
<Text style={styles.date}>{date}</Text>
{!!reblogedBy && <TextWithIcon text={reblogedBy} iconType="MaterialIcons" iconName="repeat" />}
</View>
);
}

8
src/components/profileSummary/view/profileSummaryStyles.js
View File

@ -22,8 +22,8 @@ export default EStyleSheet.create({
width: '$deviceWidth - 24',
flexDirection: 'row',
justifyContent: 'space-between',
marginBottom: 17,
marginTop: 10,
marginVertical: 10,
height: 30,
},
leftIcons: {
flexDirection: 'row',
@ -35,10 +35,10 @@ export default EStyleSheet.create({
justifyContent: 'flex-end',
},
insetIconStyle: {
marginRight: 12,
marginRight: 20,
},
activityIndicator: {
marginRight: 12,
marginRight: 20,
width: 30,
},
followCountWrapper: {

55
src/components/profileSummary/view/profileSummaryView.js
View File

@ -18,6 +18,9 @@ import { TextWithIcon } from '../../basicUIElements';
import { PercentBar } from '../../percentBar';
import { IconButton } from '../../iconButton';
// Utils
import { makeCountFriendly } from '../../../utils/formatter';
// Styles
import styles from './profileSummaryStyles';
@ -43,8 +46,6 @@ class ProfileSummaryView extends PureComponent {
Linking.openURL(url);
};
// _getFollowCount = ()
render() {
const { isShowPercentText } = this.state;
const {
@ -70,38 +71,41 @@ class ProfileSummaryView extends PureComponent {
percentVP,
handleUIChange,
} = this.props;
const votingPowerHoursText = hoursVP && `• Full in ${hoursVP} hours`;
const votingPowerText = `Voting power: ${percentVP}% ${votingPowerHoursText || ''}`;
const rcPowerHoursText = hoursRC && `• Full in ${hoursRC} hours`;
const rcPowerText = `RCs: ${percentRC}% ${rcPowerHoursText || ''}`;
/* eslint-disable */
const rowLength = location
? location.length
: null + link
? link.length
: null + date
? date.length
: null;
const rowLength = (location ? location.length : 0) + (link ? link.length : 0) + (date ? date.length : 0);
const isColumn = rowLength && DEVICE_WIDTH / rowLength <= 7.3;
const isColumn = rowLength && DEVICE_WIDTH / rowLength <= 15;
const followButtonIcon = !isFollowing ? 'user-follow' : 'user-unfollow';
const followButtonIcon = !isFollowing ? 'account-plus' : 'account-minus';
const ignoreButtonIcon = !isMuted ? 'ban' : 'minus';
const coverImageUrl = `http://img.esteem.app/400x0/${coverImage}`;
return (
<Fragment>
<View style={[isColumn ? styles.textWithIconWrapperColumn : styles.textWithIconWrapper]}>
{!!location && <TextWithIcon text={location} iconName="md-navigate" />}
{!!location && (
<TextWithIcon
text={location}
iconName="near-me"
iconType="MaterialIcons"
iconSize={14}
/>
)}
{!!link && (
<TextWithIcon
isClickable
onPress={() => this._handleOnPressLink(link)}
text={link}
iconName="md-globe"
iconSize={14}
iconName="earth"
iconType="MaterialCommunityIcons"
/>
)}
{!!date && <TextWithIcon text={date} iconName="md-calendar" />}
{!!date && <TextWithIcon text={date} iconName="md-calendar" iconSize={14} />}
</View>
<Image
style={styles.longImage}
@ -109,8 +113,7 @@ class ProfileSummaryView extends PureComponent {
defaultSource={isDarkTheme ? DARK_COVER_IMAGE : LIGHT_COVER_IMAGE}
/>
<TouchableOpacity
onPress={() =>
this.setState({ isShowPercentText: !isShowPercentText }, () => {
onPress={() => this.setState({ isShowPercentText: !isShowPercentText }, () => {
handleUIChange(!isShowPercentText ? 30 : 0);
})
}
@ -138,7 +141,7 @@ class ProfileSummaryView extends PureComponent {
<Fragment>
<TouchableOpacity onPress={() => handleOnFollowsPress(false)}>
<View style={styles.followCountWrapper}>
<Text style={styles.followCount}>{followerCount}</Text>
<Text style={styles.followCount}>{makeCountFriendly(followerCount)}</Text>
<Text style={styles.followText}>
{' '}
{intl.formatMessage({
@ -149,7 +152,7 @@ class ProfileSummaryView extends PureComponent {
</TouchableOpacity>
<TouchableOpacity onPress={() => handleOnFollowsPress(true)}>
<View style={styles.followCountWrapper}>
<Text style={styles.followCount}>{followingCount}</Text>
<Text style={styles.followCount}>{makeCountFriendly(followingCount)}</Text>
<Text style={styles.followText}>
{intl.formatMessage({
id: 'profile.following',
@ -165,9 +168,9 @@ class ProfileSummaryView extends PureComponent {
<Fragment>
<IconButton
backgroundColor="transparent"
name="heart"
iconType="SimpleLineIcons"
size={16}
name="favorite-border"
iconType="MaterialIcons"
size={20}
style={[styles.insetIconStyle]}
color="#c1c5c7"
/>
@ -177,9 +180,9 @@ class ProfileSummaryView extends PureComponent {
<IconButton
backgroundColor="transparent"
name={followButtonIcon}
iconType="SimpleLineIcons"
onPress={() => handleFollowUnfollowUser(isFollowing ? false : true)}
size={16}
iconType="MaterialCommunityIcons"
onPress={() => handleFollowUnfollowUser(!isFollowing)}
size={20}
style={styles.insetIconStyle}
color="#c1c5c7"
/>
@ -191,7 +194,7 @@ class ProfileSummaryView extends PureComponent {
backgroundColor="transparent"
name={ignoreButtonIcon}
iconType="SimpleLineIcons"
onPress={() => handleMuteUnmuteUser(isMuted ? false : true)}
onPress={() => handleMuteUnmuteUser(!isMuted)}
size={16}
style={styles.insetIconStyle}
color="#c1c5c7"

18
src/utils/formatter.js
View File

@ -1,11 +1,3 @@
// TODO: Move all formats functions here!
// const imgRegex = /(https?:\/\/.*\.(?:tiff?|jpe?g|gif|png|svg|ico))/gim;
// const postRegex = /^https?:\/\/(.*)\/(.*)\/(@[\w\.\d-]+)\/(.*)/i;
// const youTubeRegex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/)([^& \n<]+)(?:[^ \n<]+)?/g;
// const vimeoRegex = /(https?:\/\/)?(www\.)?(?:vimeo)\.com.*(?:videos|video|channels|)\/([\d]+)/i;
// const dTubeRegex = /(https?:\/\/d.tube.#!\/v\/)(\w+)\/(\w+)/g;
export const getPostSummary = (postBody, length, isQuote) => {
if (!postBody) {
return '';
@ -24,3 +16,13 @@ export const getPostSummary = (postBody, length, isQuote) => {
}
return isQuote ? `"${postBody}..."` : `${postBody}...`;
};
export const makeCountFriendly = (value) => {
if (!value) return value;
if (value >= 1000000) return `${intlFormat(value / 1000000)}M`;
if (value >= 1000) return `${intlFormat(value / 1000)}K`;
return intlFormat(value);
};
const intlFormat = num => new Intl.NumberFormat().format(Math.round(num * 10) / 10);