All files / widgets/EventDataTable/mobile/components DisplayTeams.native.tsx

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
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React from 'react';
import { DisplayTeamsProps } from '@sb/types';
import { Text, View } from 'react-native';
import { HighlightsPoint } from '@sb/ui/components/atoms/Icons/mobile/Icons.native';
 
const DisplayTeams: React.FC<DisplayTeamsProps> = ({ item, favorite, topAlarm }) => {
  const displayHighlightIcon =
    item.onGoing &&
    !item.opponentYellowCard &&
    !item.opponentRedCard &&
    !item.teamRedCard &&
    !item.teamYellowCard;
 
  const renderRedCard = (val: number) => (
    <View className={'bg-status-error mr-1 px-0.5'}>
      <Text className={'text-text-main font-normal'}>{val}</Text>
    </View>
  );
 
  const renderYellowCard = (val: number) => (
    <View className={'bg-accent mr-1 px-0.5'}>
      <Text className={'font-normal'}>{val}</Text>
    </View>
  );
 
  return (
    <View className={`${favorite || topAlarm ? 'ml-2' : 'ml-2'} flex flex-row items-start`}>
      {displayHighlightIcon && (
        <View className={'mr-1 mt-2'}>
          <HighlightsPoint />
        </View>
      )}
      <View className={'flex flex-col'}>
        <View className={'flex flex-row'}>
          {item.teamYellowCard && renderYellowCard(item.teamYellowCard)}
          {item.teamRedCard && renderRedCard(item.teamRedCard)}
          <Text className={'text-text-main font-normal'}>{item.team}</Text>
        </View>
        <View className={'flex flex-row'}>
          {item.opponentYellowCard && renderYellowCard(item.opponentYellowCard)}
          {item.opponentRedCard && renderRedCard(item.opponentRedCard)}
          <Text className={'text-text-main font-normal'}>{item.opponent}</Text>
        </View>
      </View>
    </View>
  );
};
 
export default DisplayTeams;