mirror of
https://github.com/ecency/ecency-mobile.git
synced 2024-12-25 06:13:12 +03:00
fixed lenght bug about && added number formatter
This commit is contained in:
parent
610cfa5a23
commit
e7f4597e1e
@ -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>
|
||||
)}
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
@ -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: {
|
||||
|
@ -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,10 +113,9 @@ class ProfileSummaryView extends PureComponent {
|
||||
defaultSource={isDarkTheme ? DARK_COVER_IMAGE : LIGHT_COVER_IMAGE}
|
||||
/>
|
||||
<TouchableOpacity
|
||||
onPress={() =>
|
||||
this.setState({ isShowPercentText: !isShowPercentText }, () => {
|
||||
handleUIChange(!isShowPercentText ? 30 : 0);
|
||||
})
|
||||
onPress={() => this.setState({ isShowPercentText: !isShowPercentText }, () => {
|
||||
handleUIChange(!isShowPercentText ? 30 : 0);
|
||||
})
|
||||
}
|
||||
>
|
||||
<PercentBar
|
||||
@ -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"
|
||||
|
@ -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);
|
||||
|
Loading…
Reference in New Issue
Block a user