index.tsx
2.17 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
import { get } from 'lodash/fp';
import React from 'react';
import { StyleSheet } from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';
import abbreviatePlayerPositon from '../../../../helpers/abbreviatePlayerPositon';
import {
Column,
ItemRow,
PlayerColumn,
PriceWithTrendColumn
} from '../../../ListGrid';
import { CardHeight } from '../../../player-card/constants';
import { BorderRadius } from '../../constants';
interface Props {
data: PlayerEdge;
isOwned: boolean;
activeSort: string;
onPress: () => any;
}
const styles = StyleSheet.create({
itemWrapper: {
height: CardHeight,
borderRadius: BorderRadius
},
player: {
justifyContent: 'center',
width: '100%'
},
column: {
justifyContent: 'center',
alignItems: 'center'
},
priceTrend: {
justifyContent: 'center',
alignItems: 'center'
}
});
const Item: React.FC<Props> = ({
data: { node: playerNode },
onPress,
activeSort,
isOwned
}: Props) => (
<TouchableOpacity onPress={onPress}>
<ItemRow style={styles.itemWrapper} key={playerNode?.id}>
<PlayerColumn
isOwned={isOwned}
name={`${playerNode?.firstName} ${playerNode?.lastName}`}
position={abbreviatePlayerPositon(playerNode?.playerPositions)}
team={get('team.abbreviation', playerNode)}
rating={4.3}
size={4}
style={styles.player}
/>
<Column
size={2}
style={styles.column}
color={activeSort === 'rank' && 'info'}
>
{playerNode?.rank}
</Column>
<Column
size={2.5}
style={styles.column}
color={activeSort === 'fantasyPoints' && 'info'}
>
{playerNode?.fantasyPoints}
</Column>
<Column
size={2.5}
style={styles.column}
color={activeSort === 'fantasyPointsPerGame' && 'info'}
>
{playerNode?.fantasyPointsPerGame}
</Column>
<PriceWithTrendColumn
rise
size={2.3}
style={styles.priceTrend}
height={45}
current={playerNode?.value}
color={activeSort === 'value' && 'info'}
/>
</ItemRow>
</TouchableOpacity>
);
export default Item;