ecency/ecency-mobile
1
1
Fork 0
mirror of https://github.com/ecency/ecency-mobile.git synced 2025-01-05 04:28:03 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added downvote button for slider

Browse Source
This commit is contained in:
Mustafa Buyukcelebi 2019-08-21 14:54:49 +03:00
parent ee43ac7b4e
commit 3df4384360
1 changed files with 60 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/upvote/view/upvoteView.js
View File

@ -35,6 +35,7 @@ class UpvoteView extends Component {
isVoted: get(props, 'isVoted', false), isVoted: get(props, 'isVoted', false),
amount: '0.00000', amount: '0.00000',
isShowDetails: false, isShowDetails: false,
downvote: false,
}; };
} }
@ -80,7 +81,7 @@ class UpvoteView extends Component {
} }
}; };
_upvoteContent = async () => { _upvoteContent = async closePopover => {
const { const {
author, author,
currentAccount, currentAccount,
@ -89,8 +90,10 @@ class UpvoteView extends Component {
permlink, permlink,
pinCode, pinCode,
} = this.props; } = this.props;
const { sliderValue } = this.state; const { sliderValue, downvote } = this.state;
if (!downvote) {
closePopover();
this.setState( this.setState(
{ {
isVoting: true, isVoting: true,
@ -123,6 +126,19 @@ class UpvoteView extends Component {
isVoting: false, isVoting: false,
}); });
}); });
} else {
this.setState({ sliderValue: 1, downvote: false });
}
};
_downvoteContent = () => {
const { downvote } = this.state;
if (downvote) {
// vote action
}
this.setState({ sliderValue: 1, downvote: true });
}; };
_handleOnPopoverClose = () => { _handleOnPopoverClose = () => {
@ -146,7 +162,7 @@ class UpvoteView extends Component {
payoutDate, payoutDate,
intl, intl,
} = this.props; } = this.props;
const { isVoting, amount, sliderValue, isVoted, isShowDetails } = this.state; const { isVoting, amount, sliderValue, isVoted, isShowDetails, downvote } = this.state;
let iconName = 'ios-arrow-dropup'; let iconName = 'ios-arrow-dropup';
let iconType; let iconType;
@ -156,9 +172,10 @@ class UpvoteView extends Component {
iconType = 'AntDesign'; iconType = 'AntDesign';
} }
const _percent = `${(sliderValue * 100).toFixed(0)}%`; const _percent = `${downvote ? '-' : ''}${(sliderValue * 100).toFixed(0)}%`;
const _amount = `$${amount}`; const _amount = `$${amount}`;
const _totalPayout = totalPayout || '0.000'; const _totalPayout = totalPayout || '0.000';
const _sliderColor = downvote ? '#ec8b88' : '#357ce6';
return ( return (
<PopoverController> <PopoverController>
@ -253,8 +270,7 @@ class UpvoteView extends Component {
<Fragment> <Fragment>
<TouchableOpacity <TouchableOpacity
onPress={() => { onPress={() => {
closePopover(); this._upvoteContent(closePopover);
this._upvoteContent();
}} }}
style={styles.upvoteButton} style={styles.upvoteButton}
> >
@ -269,7 +285,7 @@ class UpvoteView extends Component {
<Text style={styles.amount}>{_amount}</Text> <Text style={styles.amount}>{_amount}</Text>
<Slider <Slider
style={styles.slider} style={styles.slider}
minimumTrackTintColor="#357ce6" minimumTrackTintColor={_sliderColor}
trackStyle={styles.track} trackStyle={styles.track}
thumbStyle={styles.thumb} thumbStyle={styles.thumb}
thumbTintColor="#007ee5" thumbTintColor="#007ee5"
@ -281,6 +297,15 @@ class UpvoteView extends Component {
}} }}
/> />
<Text style={styles.percent}>{_percent}</Text> <Text style={styles.percent}>{_percent}</Text>
<TouchableOpacity onPress={this._downvoteContent} style={styles.upvoteButton}>
<Icon
size={20}
style={[styles.upvoteIcon, { color: '#ec8b88' }]}
active={!isLoggedIn}
iconType="AntDesign"
name="downcircle"
/>
</TouchableOpacity>
</Fragment> </Fragment>
)} )}
</View> </View>