mirror of
https://github.com/ecency/ecency-mobile.git
synced 2024-11-24 08:55:14 +03:00
created payout details popover
This commit is contained in:
u-e
parent
36c0795284
commit
265e510496
@ -7,6 +7,10 @@ import { setUpvotePercent } from '../../../realm/realm';
|
||||
// Services and Actions
|
||||
import { setUpvotePercent as upvoteAction } from '../../../redux/actions/applicationActions';
|
||||
|
||||
// Utils
|
||||
import parseToken from '../../../utils/parseToken';
|
||||
import { getTimeFromNow } from '../../../utils/time';
|
||||
|
||||
// Component
|
||||
import UpvoteView from '../view/upvoteView';
|
||||
|
||||
@ -42,13 +46,18 @@ class UpvoteContainer extends PureComponent {
|
||||
fetchPost,
|
||||
isLoggedIn,
|
||||
isShowPayoutValue,
|
||||
upvotePercent,
|
||||
pinCode,
|
||||
upvotePercent,
|
||||
} = this.props;
|
||||
let author;
|
||||
let authorPayout;
|
||||
let curationPayout;
|
||||
let isDecinedPayout;
|
||||
let isVoted;
|
||||
let payoutDate;
|
||||
let pendingPayout;
|
||||
let permlink;
|
||||
let promotedPayout;
|
||||
let totalPayout;
|
||||
|
||||
if (content) {
|
||||
@ -57,11 +66,20 @@ class UpvoteContainer extends PureComponent {
|
||||
totalPayout = content.total_payout;
|
||||
isDecinedPayout = content.is_declined_payout;
|
||||
({ permlink } = content);
|
||||
pendingPayout = parseToken(content.pending_payout_value).toFixed(3);
|
||||
promotedPayout = parseToken(content.promoted).toFixed(3);
|
||||
authorPayout = parseToken(content.total_payout_value).toFixed(3);
|
||||
curationPayout = parseToken(content.curator_payout_value).toFixed(3);
|
||||
payoutDate = getTimeFromNow(
|
||||
content.last_payout === '1970-01-01T00:00:00' ? content.cashout_time : content.last_payout,
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<UpvoteView
|
||||
author={author}
|
||||
authorPayout={authorPayout}
|
||||
curationPayout={curationPayout}
|
||||
currentAccount={currentAccount}
|
||||
fetchPost={fetchPost}
|
||||
handleSetUpvotePercent={this._setUpvotePercent}
|
||||
@ -69,8 +87,11 @@ class UpvoteContainer extends PureComponent {
|
||||
isLoggedIn={isLoggedIn}
|
||||
isShowPayoutValue={isShowPayoutValue}
|
||||
isVoted={isVoted}
|
||||
payoutDate={payoutDate}
|
||||
pendingPayout={pendingPayout}
|
||||
permlink={permlink}
|
||||
pinCode={pinCode}
|
||||
promotedPayout={promotedPayout}
|
||||
totalPayout={totalPayout}
|
||||
upvotePercent={upvotePercent}
|
||||
/>
|
||||
|
||||
@ -4,13 +4,15 @@ export default EStyleSheet.create({
|
||||
upvoteButton: {
|
||||
flexDirection: 'row',
|
||||
alignSelf: 'center',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
upvoteIcon: {
|
||||
alignSelf: 'flex-start',
|
||||
alignSelf: 'center',
|
||||
fontSize: 20,
|
||||
color: '$primaryBlue',
|
||||
},
|
||||
popover: {
|
||||
popoverSlider: {
|
||||
flexDirection: 'row',
|
||||
width: '$deviceWidth - 20',
|
||||
height: 48,
|
||||
@ -18,6 +20,13 @@ export default EStyleSheet.create({
|
||||
paddingHorizontal: 16,
|
||||
backgroundColor: '$primaryBackgroundColor',
|
||||
},
|
||||
popoverDetails: {
|
||||
flexDirection: 'row',
|
||||
height: 100,
|
||||
borderRadius: 20,
|
||||
paddingHorizontal: 26,
|
||||
backgroundColor: '$primaryBackgroundColor',
|
||||
},
|
||||
track: {
|
||||
height: 2,
|
||||
borderRadius: 1,
|
||||
@ -53,6 +62,13 @@ export default EStyleSheet.create({
|
||||
alignItems: 'center',
|
||||
},
|
||||
arrow: {
|
||||
borderTopColor: '$primaryBackgroundColor',
|
||||
marginLeft: 25,
|
||||
},
|
||||
payoutTextButton: {
|
||||
alignSelf: 'center',
|
||||
},
|
||||
hideArrow: {
|
||||
borderTopColor: 'transparent',
|
||||
},
|
||||
overlay: {
|
||||
@ -68,4 +84,8 @@ export default EStyleSheet.create({
|
||||
textDecorationLine: 'line-through',
|
||||
textDecorationStyle: 'solid',
|
||||
},
|
||||
detailsText: {
|
||||
color: '$primaryDarkGray',
|
||||
fontSize: 10,
|
||||
},
|
||||
});
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import {
|
||||
View, TouchableOpacity, ActivityIndicator, Text, Alert,
|
||||
View, TouchableOpacity, Text, Alert,
|
||||
} from 'react-native';
|
||||
import { injectIntl } from 'react-intl';
|
||||
import { Popover, PopoverController } from 'react-native-modal-popover';
|
||||
import Slider from 'react-native-slider';
|
||||
// Constants
|
||||
|
||||
// Components
|
||||
import { Icon } from '../../icon';
|
||||
import { PulseAnimation } from '../../animations';
|
||||
import { TextButton } from '../../buttons';
|
||||
// STEEM
|
||||
import { upvoteAmount, vote } from '../../../providers/steem/dsteem';
|
||||
|
||||
@ -28,6 +29,7 @@ class UpvoteView extends Component {
|
||||
isVoting: false,
|
||||
isVoted: props.isVoted,
|
||||
amount: '0.00000',
|
||||
isShowDetails: false,
|
||||
};
|
||||
}
|
||||
|
||||
@ -75,7 +77,12 @@ class UpvoteView extends Component {
|
||||
|
||||
_upvoteContent = async () => {
|
||||
const {
|
||||
author, currentAccount, fetchPost, handleSetUpvotePercent, permlink, pinCode,
|
||||
author,
|
||||
currentAccount,
|
||||
fetchPost,
|
||||
handleSetUpvotePercent,
|
||||
permlink,
|
||||
pinCode,
|
||||
} = this.props;
|
||||
const { sliderValue } = this.state;
|
||||
|
||||
@ -90,13 +97,7 @@ class UpvoteView extends Component {
|
||||
|
||||
const weight = sliderValue ? (sliderValue * 100).toFixed(0) * 100 : 0;
|
||||
|
||||
vote(
|
||||
currentAccount,
|
||||
pinCode,
|
||||
author,
|
||||
permlink,
|
||||
weight,
|
||||
)
|
||||
vote(currentAccount, pinCode, author, permlink, weight)
|
||||
.then(() => {
|
||||
this.setState(
|
||||
{
|
||||
@ -119,11 +120,31 @@ class UpvoteView extends Component {
|
||||
});
|
||||
};
|
||||
|
||||
_handleOnPopoverClose = () => {
|
||||
this.popoverOnClose = setTimeout(() => {
|
||||
this.setState({ isShowDetails: false }, () => {
|
||||
clearTimeout(this.popoverOnClose);
|
||||
});
|
||||
}, 300);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { isDecinedPayout, isLoggedIn, isShowPayoutValue, totalPayout } = this.props;
|
||||
const {
|
||||
isVoting, amount, sliderValue, isVoted,
|
||||
isDecinedPayout,
|
||||
isLoggedIn,
|
||||
isShowPayoutValue,
|
||||
totalPayout,
|
||||
pendingPayout,
|
||||
promotedPayout,
|
||||
authorPayout,
|
||||
curationPayout,
|
||||
payoutDate,
|
||||
intl,
|
||||
} = this.props;
|
||||
const {
|
||||
isVoting, amount, sliderValue, isVoted, isShowDetails,
|
||||
} = this.state;
|
||||
|
||||
let iconName = 'ios-arrow-dropup';
|
||||
let iconType;
|
||||
|
||||
@ -169,23 +190,66 @@ class UpvoteView extends Component {
|
||||
name={iconName}
|
||||
/>
|
||||
)}
|
||||
{isShowPayoutValue && (
|
||||
<Text style={[styles.payoutValue, isDecinedPayout && styles.declinedPayout]}>{`$${_totalPayout}`}</Text>
|
||||
)}
|
||||
</Fragment>
|
||||
</TouchableOpacity>
|
||||
<View style={styles.payoutTextButton}>
|
||||
{isShowPayoutValue && (
|
||||
<TextButton
|
||||
style={styles.payoutTextButton}
|
||||
textStyle={[styles.payoutValue, isDecinedPayout && styles.declinedPayout]}
|
||||
text={`$${_totalPayout}`}
|
||||
onPress={() => {
|
||||
openPopover();
|
||||
this.setState({ isShowDetails: true });
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<Popover
|
||||
contentStyle={styles.popover}
|
||||
arrowStyle={styles.arrow}
|
||||
contentStyle={isShowDetails ? styles.popoverDetails : styles.popoverSlider}
|
||||
arrowStyle={isShowDetails ? styles.arrow : styles.hideArrow}
|
||||
backgroundStyle={styles.overlay}
|
||||
visible={popoverVisible}
|
||||
onClose={closePopover}
|
||||
onClose={() => {
|
||||
closePopover();
|
||||
this._handleOnPopoverClose();
|
||||
}}
|
||||
fromRect={popoverAnchorRect}
|
||||
placement="top"
|
||||
supportedOrientations={['portrait', 'landscape']}
|
||||
>
|
||||
<View style={styles.popoverWrapper}>
|
||||
{isShowDetails ? (
|
||||
<View>
|
||||
<Text style={styles.detailsText}>
|
||||
{`${intl.formatMessage({
|
||||
id: 'payout.promoted',
|
||||
})} $${promotedPayout}`}
|
||||
</Text>
|
||||
<Text style={styles.detailsText}>
|
||||
{`${intl.formatMessage({
|
||||
id: 'payout.potential_payout',
|
||||
})} $${pendingPayout}`}
|
||||
</Text>
|
||||
<Text style={styles.detailsText}>
|
||||
{`${intl.formatMessage({
|
||||
id: 'payout.author_payout',
|
||||
})} $${authorPayout}`}
|
||||
</Text>
|
||||
<Text style={styles.detailsText}>
|
||||
{`${intl.formatMessage({
|
||||
id: 'payout.curation_payout',
|
||||
})} $${curationPayout}`}
|
||||
</Text>
|
||||
<Text style={styles.detailsText}>
|
||||
{`${intl.formatMessage({
|
||||
id: 'payout.payout_date',
|
||||
})} ${payoutDate}`}
|
||||
</Text>
|
||||
</View>
|
||||
) : (
|
||||
<Fragment>
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
closePopover();
|
||||
@ -193,9 +257,6 @@ class UpvoteView extends Component {
|
||||
}}
|
||||
style={styles.upvoteButton}
|
||||
>
|
||||
{isVoting ? (
|
||||
<ActivityIndicator />
|
||||
) : (
|
||||
<Icon
|
||||
size={20}
|
||||
style={[styles.upvoteIcon, { color: '#007ee5' }]}
|
||||
@ -203,7 +264,6 @@ class UpvoteView extends Component {
|
||||
iconType={iconType}
|
||||
name={iconName}
|
||||
/>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
<Text style={styles.amount}>{_amount}</Text>
|
||||
<Slider
|
||||
@ -220,6 +280,8 @@ class UpvoteView extends Component {
|
||||
}}
|
||||
/>
|
||||
<Text style={styles.percent}>{_percent}</Text>
|
||||
</Fragment>
|
||||
)}
|
||||
</View>
|
||||
</Popover>
|
||||
</Fragment>
|
||||
@ -229,4 +291,4 @@ class UpvoteView extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
export default UpvoteView;
|
||||
export default injectIntl(UpvoteView);
|
||||
|
||||
@ -172,5 +172,12 @@
|
||||
"already_logged": "You are already logged in, please try to add another account",
|
||||
"invalid_credentials": "Invalid credentials, please check and try again",
|
||||
"unknow_error": "Unknown error, please contact us at support@esteem.app"
|
||||
},
|
||||
"payout": {
|
||||
"potential_payout": "Potential Payout",
|
||||
"promoted": "Promoted",
|
||||
"author_payout": "Author Payout",
|
||||
"curation_payout": "Curation Payout",
|
||||
"payout_date": "Payout"
|
||||
}
|
||||
}
|
||||
|
||||
@ -172,5 +172,12 @@
|
||||
"already_logged": "Вы уже вошли, пожалуйста, попробуйте добавить другой аккаунт",
|
||||
"invalid_credentials": "Некорректные данные, пожалуйста, проверьте и повторите снова",
|
||||
"unknow_error": "Неизвестная ошибка, пожалуйста, напишите на support@esteem.app"
|
||||
},
|
||||
"payout": {
|
||||
"potential_payout": "Потенциальная выплата",
|
||||
"promoted": "Продвижение",
|
||||
"author_payout": "Автору",
|
||||
"curation_payout": "Кураторам",
|
||||
"payout_date": "Выплата"
|
||||
}
|
||||
}
|
||||
|
||||
@ -172,5 +172,12 @@
|
||||
"already_logged": "You are already logged in, please try to add another account",
|
||||
"invalid_credentials": "Invalid credentials, please check and try again",
|
||||
"unknow_error": "Unknown error, please contact us at support@esteem.app"
|
||||
},
|
||||
"payout": {
|
||||
"potential_payout": "Tahmini Ödeme",
|
||||
"promoted": "Sponsor Ödemeleri",
|
||||
"author_payout": "Yazar Ödemeleri",
|
||||
"curation_payout": "Küratör Ödemeleri",
|
||||
"payout_date": "Ödeme"
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user