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 | 1x | import React from 'react';
import { Pressable, Text, View } from 'react-native';
import { Menu, X } from '@sb/ui/components/atoms/Icons/mobile/Icons.native';
import { RadioInput } from '@sb/ui/components/atoms/RadioInput/mobile/RadioInput.native';
import { Button } from '@sb/ui/components/atoms/Button/mobile/Button.native';
import BottomSheet, { BottomSheetBackdrop } from '@gorhom/bottom-sheet';
import { BottomSheetFilteringProps } from '../../EventDataTable.types';
export const BottomSheetFiltering: React.FC<BottomSheetFilteringProps> = ({
bottomSheetRef,
competitionChecked,
handleOnCompetitionChanged,
timeChecked,
handleOnTimeChanged,
handleOnAdvancedPress,
handleOnCompactPress,
onClose,
}) => {
const handleOnSettingClose = () => {
if (bottomSheetRef.current) {
onClose?.();
bottomSheetRef.current.close();
}
};
return (
<BottomSheet
index={-1}
ref={bottomSheetRef}
enableHandlePanningGesture={false}
enableContentPanningGesture={false}
backdropComponent={(props) => (
<BottomSheetBackdrop
{...props}
disappearsOnIndex={-1}
appearsOnIndex={0}
pressBehavior="close"
/>
)}
handleIndicatorStyle={{
backgroundColor: 'white',
}}
snapPoints={[1, 350]}
>
<View className={'flex flex-col p-5'}>
<View className={'flex flex-row items-center justify-end'}>
<Pressable onPress={handleOnSettingClose}>
<X size={15} />
</Pressable>
</View>
<View className={'items-start justify-start py-5'} style={{ borderBottomWidth: 0.2 }}>
<Text className={'text-primary font-Bold text-[16px] uppercase'}>Sortierung</Text>
</View>
<View className={'items-start justify-start gap-[20px] py-5'}>
<RadioInput
label={'Wettbewerb'} // competition
value={''}
unCheckColor={'black'}
checked={competitionChecked}
onChange={handleOnCompetitionChanged}
labelClassNames={'text-primary'}
classNames={'w-full'}
containerClassNames={'items-center w-full justify-between'}
/>
<RadioInput
label={'Zeit'} // time
value={''}
unCheckColor={'black'}
checked={timeChecked}
onChange={handleOnTimeChanged}
labelClassNames={'text-primary'}
classNames={'w-full'}
containerClassNames={'items-center w-full justify-between'}
/>
</View>
<View className={'items-start justify-start py-5'} style={{ borderBottomWidth: 0.2 }}>
<Text className={'text-primary font-Bold text-[16px] uppercase'}>Ansicht</Text>
</View>
<View className={'mt-5 flex flex-row items-center gap-4'}>
<Button
variant={'secondary'}
label={'Erweitert'} // advanced
textStyle={'uppercase font-normal'}
icon={<Menu />}
onPress={() => {
handleOnAdvancedPress();
handleOnSettingClose();
}}
style={{ height: 42, flex: 1 }}
/>
<Button
variant={'ghostDark'}
label={'kompakt'} // compact
icon={<Menu />}
textStyle={'font-Bold uppercase'}
onPress={() => {
handleOnCompactPress();
handleOnSettingClose();
}}
style={{ height: 42, flex: 1 }}
/>
</View>
</View>
</BottomSheet>
);
};
|