Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 | 1x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 8x 4x 4x 4x 4x 4x 4x 28x 32x 4x 4x | import React, { useMemo } from 'react';
import { LongTermBetProps } from './LongTermBet.native.type';
import { Dimensions, Text, View } from 'react-native';
import { Button } from '@sb/ui/components/atoms/Button/mobile';
import { MatchTypes } from '@sb/types';
import {
AmericanFootball,
Ball,
Basketball,
Futsal,
Handball,
IceHockey,
Medal,
TableTennis,
Tennis,
Volleyball,
} from '@sb/ui/components/atoms/Icons/mobile/Icons.native';
import { Table } from '@sb/ui/components/organisms/Table/mobile/Table.native';
import { sportCategories } from '@sb/constants';
import { useTheme } from '@sb/ui/components/Themes/ThemeProvider';
import { colors } from '@sb/styles/colors';
export const LongTermBet: React.FC<LongTermBetProps> = ({
sports = 'Fußball',
categoryName = 'Fußball',
leagueName,
isHeaderVisible,
onPlaceBet,
}) => {
const deviceDimension = Dimensions.get('screen');
const { theme } = useTheme();
const ICON_COLOR = colors[theme].colorIcon_Fill_Light;
const sportsIconMap: Record<MatchTypes, JSX.Element> = {
All: <Medal color={ICON_COLOR} />,
Fußball: <Futsal color={ICON_COLOR} />,
Volleyball: <Volleyball color={ICON_COLOR} />,
Basketball: <Basketball color={ICON_COLOR} />,
Tennis: <Tennis color={ICON_COLOR} />,
Handball: <Handball color={ICON_COLOR} />,
TableTennis: <TableTennis color={ICON_COLOR} />,
IceHockey: <IceHockey color={ICON_COLOR} />,
'American Football': <AmericanFootball color={ICON_COLOR} />,
};
const ballIcon = <Ball color={ICON_COLOR} />;
const renderSportIcon = (sport?: MatchTypes) => {
return sport ? (sportsIconMap[sport] ?? ballIcon) : ballIcon;
};
const tableTitle = useMemo(() => {
const titleText = leagueName
? `Outrights / ${categoryName} / ${leagueName}`
: `Outrights / ${categoryName}`;
return <Text className="text-text-main font-Bold py-1">{titleText}</Text>;
}, [categoryName, leagueName]);
const normalizeName = (name: string) => name.toLowerCase().replace(/ß/g, 'ss');
const currentSportCategory = useMemo(() => {
return sportCategories.find(
(category) => normalizeName(category.name) === normalizeName(categoryName || 'fußball')
);
}, [categoryName]);
const tableData = useMemo(() => {
Iif (!currentSportCategory) {
return [];
}
const allData = currentSportCategory.countries.flatMap((country) => {
const countryLeagues = Array.isArray(country.league)
? country.league
: [country.league].filter(Boolean);
return countryLeagues.map((leagueName, index) => ({
id: `${country.id}-${index}`,
name: (
<Text className="text-text-main font-normal" numberOfLines={1}>
{typeof leagueName === 'string' ? leagueName : 'Unknown League'}
</Text>
),
country: country.name,
time: (
<View className="flex flex-col items-end">
{/* todo: do not use harcoded value time */}
<Text className="text-text-main font-normal">10.00</Text>
<Text className="text-text-main font-normal">10.00</Text>
</View>
),
offer: (
<Button
label={'Go to offers'}
variant="cyan"
onPress={() => onPlaceBet?.(country.id.toString())}
/>
),
}));
});
return leagueName && allData.length > 0 ? [allData[0]] : allData;
}, [currentSportCategory, leagueName, normalizeName]);
return (
<View>
<View className="flex flex-row items-center gap-2 p-3">
{renderSportIcon(sports)}
<Text className="text-text-main font-Bold">{categoryName}</Text>
</View>
<Table
id="long-term-bet-table"
variant="striped"
className="w-full"
width={'100%'}
expandableHeader={isHeaderVisible}
rowClassName={'items-center'}
columns={[
{
title: tableTitle,
key: 'name',
dataIndex: 'name',
width: deviceDimension.width / 3,
cellClassName: 'items-start flex-1',
},
{ title: '', key: 'time', dataIndex: 'time', width: '10%' },
{ title: '', key: 'offer', dataIndex: 'offer', width: 'auto' },
]}
data={tableData}
/>
</View>
);
};
|