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 | 1x 1x 1x 1x 1x 9x 9x 1x | import React, { useState } from 'react';
import { FlatList, ListRenderItemInfo, Pressable, Text, View } from 'react-native';
import { cn } from '@sb/libs';
import { MarketListProps } from '@sb/types';
interface MarketSelectionListProps {
marketList: MarketListProps[];
handleOnPress?: (type: string) => void;
marketTypeFilter?: string;
}
export const MarketSelectionList: React.FC<MarketSelectionListProps> = ({
marketList,
handleOnPress,
}) => {
Iif (!marketList || !Array.isArray(marketList)) return null;
const [selectedIndex, setSelectedIndex] = useState<number | undefined>(0);
const handleOnTypePress = (type: string, idx: number) => {
if (selectedIndex === idx) {
setSelectedIndex(undefined);
} else {
setSelectedIndex(idx);
}
handleOnPress?.(type);
};
const renderMarketSelection = (market: ListRenderItemInfo<MarketListProps>) => {
const isSelected = selectedIndex === market.index;
return (
<Pressable
onPress={() => handleOnTypePress(market.item.betType, market.index)}
className={cn(
'ml-2 rounded-md px-3 py-3',
isSelected ? 'bg-accent' : 'bg-primary-background'
)}
>
<Text
className={cn(isSelected ? 'text-secondary font-Bold' : 'text-text-main font-normal')}
>
{market.item.title}
</Text>
</Pressable>
);
};
return (
<View className={'bg-secondary pb-4 pt-4'}>
<FlatList
data={marketList}
showsHorizontalScrollIndicator={false}
horizontal
renderItem={renderMarketSelection}
/>
</View>
);
};
|