123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116 |
- // @flow
-
- import * as React from 'react';
- import {Avatar, Card, List, ProgressBar, Subheading, withTheme} from "react-native-paper";
- import {FlatList, StyleSheet} from "react-native";
- import i18n from 'i18n-js';
- import type {team} from "../../../screens/Amicale/VoteScreen";
- import type {CustomTheme} from "../../../managers/ThemeManager";
-
-
- type Props = {
- teams: Array<team>,
- dateEnd: string,
- theme: CustomTheme,
- }
-
- class VoteResults extends React.Component<Props> {
-
- totalVotes: number;
- winnerIds: Array<number>;
-
- constructor(props) {
- super();
- props.teams.sort(this.sortByVotes);
- this.getTotalVotes(props.teams);
- this.getWinnerIds(props.teams);
- }
-
- shouldComponentUpdate() {
- return false;
- }
-
- sortByVotes = (a: team, b: team) => b.votes - a.votes;
-
- getTotalVotes(teams: Array<team>) {
- this.totalVotes = 0;
- for (let i = 0; i < teams.length; i++) {
- this.totalVotes += teams[i].votes;
- }
- }
-
- getWinnerIds(teams: Array<team>) {
- let max = teams[0].votes;
- this.winnerIds = [];
- for (let i = 0; i < teams.length; i++) {
- if (teams[i].votes === max)
- this.winnerIds.push(teams[i].id);
- else
- break;
- }
- }
-
- voteKeyExtractor = (item: team) => item.id.toString();
-
- resultRenderItem = ({item}: { item: team }) => {
- const isWinner = this.winnerIds.indexOf(item.id) !== -1;
- const isDraw = this.winnerIds.length > 1;
- const colors = this.props.theme.colors;
- return (
- <Card style={{
- marginTop: 10,
- elevation: isWinner ? 5 : 3,
- }}>
- <List.Item
- title={item.name}
- description={item.votes + ' ' + i18n.t('screens.vote.results.votes')}
- left={props => isWinner
- ? <List.Icon {...props} icon={isDraw ? "trophy-outline" : "trophy"} color={colors.primary}/>
- : null}
- titleStyle={{
- color: isWinner
- ? colors.primary
- : colors.text
- }}
- style={{padding: 0}}
- />
- <ProgressBar progress={item.votes / this.totalVotes} color={colors.primary}/>
- </Card>
- );
- };
-
- render() {
- return (
- <Card style={styles.card}>
- <Card.Title
- title={i18n.t('screens.vote.results.title')}
- subtitle={i18n.t('screens.vote.results.subtitle') + ' ' + this.props.dateEnd}
- left={(props) => <Avatar.Icon
- {...props}
- icon={"podium-gold"}
- />}
- />
- <Card.Content>
- <Subheading>{i18n.t('screens.vote.results.totalVotes') + ' ' + this.totalVotes}</Subheading>
- {/*$FlowFixMe*/}
- <FlatList
- data={this.props.teams}
- keyExtractor={this.voteKeyExtractor}
- renderItem={this.resultRenderItem}
- />
- </Card.Content>
- </Card>
- );
- }
- }
-
- const styles = StyleSheet.create({
- card: {
- margin: 10,
- },
- icon: {
- backgroundColor: 'transparent'
- },
- });
-
- export default withTheme(VoteResults);
|