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 | import {
AmericanFootball,
Ball,
Basketball,
Futsal,
Handball,
IceHockey,
SettingsIcon,
ShowHeaderIcon,
TableTennis,
Tennis,
Volleyball,
} from '@sb/ui/components/atoms/Icons/mobile/Icons.native';
import { Pressable, Text, View } from 'react-native';
import { ExtendedHeaderTemplateProps } from '../../EventDataTable.types';
import { MatchTypes } from '@sb/types';
import React from 'react';
function ExtendedHeaderTemplate({
table,
idx,
showSettingsIcon,
settingIconPress,
showHeaderIcon,
}: ExtendedHeaderTemplateProps) {
// Use component references instead of instantiated JSX to avoid strict completeness
// requirements and potential circular evaluation; provide a runtime fallback.
type IconComponent = typeof Ball;
const sportsIconComponentMap: Partial<Record<MatchTypes, IconComponent>> = {
Fußball: Futsal,
Volleyball: Volleyball,
Basketball: Basketball,
Tennis: Tennis,
Handball: Handball,
TableTennis: TableTennis,
IceHockey: IceHockey,
'American Football': AmericanFootball,
};
const renderSportIcon = (sport?: MatchTypes) => {
const IconComp = (sport && sportsIconComponentMap[sport]) || Ball;
return <IconComp />;
};
const handleOnPress = () => {
settingIconPress?.();
};
return (
<>
{table.visibleHeaderColumns.map((column, i) => {
if (i === 0) {
return (
<View className={'mt-2 flex w-full flex-row items-center px-2'} key={column.key}>
<View className="flex flex-1 flex-row items-center justify-between">
{i === 0 && (
<View className="flex flex-row items-center">
<View className="mr-2">{renderSportIcon(column.key as MatchTypes)}</View>
<Text className={'text-text-main font-Bold text-[16px] uppercase'}>
{column.key}
</Text>
</View>
)}
</View>
{idx === 0 && i === 0 && showHeaderIcon && (
<View className={'flex flex-1 flex-row items-center justify-end pr-1'}>
<Pressable onPress={handleOnPress}>
{showSettingsIcon ? <SettingsIcon /> : <ShowHeaderIcon />}
</Pressable>
</View>
)}
</View>
);
}
})}
</>
);
}
export default ExtendedHeaderTemplate;
|