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 | 1x | import { BetType } from '../../EventDataTable.types';
import { Pressable, Text, View } from 'react-native';
import { BetslipHelpers, cn } from '@sb/libs';
import useEventDataTable from '@sb/hooks/Widgets/eventDataTable/useEventDataTable';
import React, { useId } from 'react';
import { useBetStore } from '@sb/stores';
import { OddChange } from '@sb/types';
import { Skeleton } from '@sb/ui/components/atoms/Skeleton/mobile/Skeleton.native';
interface BetButtonGroupProps {
betType: BetType;
oddChange?: OddChange[];
betInfoStore?: {
id: string;
teams: {
home: string;
away: string;
};
date: string | undefined;
time: string | undefined;
};
}
const BetButtonGroup = ({ betType, betInfoStore, oddChange }: BetButtonGroupProps) => {
const { selectedIndex, cfg, listValue } = useEventDataTable(betType, betInfoStore?.id);
const groupID = useId();
const { addBet, removeBetByBetId } = useBetStore();
const handleOnClick = (index: number, arg: string, buttonId: string) => {
if (betInfoStore) {
if (selectedIndex.includes(index)) {
removeBetByBetId(buttonId);
} else {
addBet(BetslipHelpers.formatBet(arg, betType, betInfoStore, buttonId));
}
}
};
if (!cfg)
return (
<View className={'mr-2 flex flex-row justify-end gap-1'}>
<Skeleton width={40} height={40} className={'bg-primary-background rounded-l-md'} />
<Skeleton width={40} height={40} className={'bg-primary-background'} />
<Skeleton width={40} height={40} className={'bg-primary-background rounded-r-md'} />
</View>
);
return (
<View
className="flex flex-1 flex-row items-center justify-center gap-0.5 pr-1.5"
key={betType.type}
>
{cfg?.kargs ? (
<Text className="text-text-main pr-4 text-left font-normal">
{betType[cfg.kargs as keyof BetType]}
</Text>
) : null}
{cfg.args.map((arg, index) => {
const buttonId = `${groupID}-${index}`;
const roundedCornerClass =
index === 0 ? 'rounded-l-[4px]' : index === listValue ? 'rounded-r-[4px]' : '';
const betStatus = oddChange?.filter((value) => value.index === index);
return (
<Pressable
key={buttonId}
onPress={() => handleOnClick(index, arg, buttonId)}
className={`${selectedIndex.includes(index) ? 'bg-accent' : 'bg-tertiary'} relative flex-1 items-center py-3 ${roundedCornerClass}`}
>
{betStatus && betStatus.length > 0 && betStatus[0].status === 'Green' && (
<View
className={`border-r-checkbox-status-complete absolute right-0 top-0 h-0 w-0 ${roundedCornerClass} border-b-[15px] border-r-[15px] border-b-transparent`}
/>
)}
<Text
className={cn(
'text-center',
selectedIndex.includes(index)
? 'bg-accent text-primary font-Bold'
: 'text-text-main font-normal'
)}
>
{betType[arg as keyof BetType]}
</Text>
{betStatus && betStatus.length > 0 && betStatus[0].status === 'Red' && (
<View
className={`absolute bottom-0 right-0 h-0 w-0 rotate-90 ${roundedCornerClass} border-r-status-error border-b-[15px] border-r-[15px] border-b-transparent`}
/>
)}
</Pressable>
);
})}
</View>
);
};
export default BetButtonGroup;
|