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 | 1x 6x 2x 1x 1x 6x 6x 6x 6x 6x 6x 1x 5x 6x 2x 1x 1x 1x 6x 6x 6x 6x | import React from 'react';
import { Pressable, Text, View } from 'react-native';
import { DrawerContentComponentProps, DrawerContentScrollView, DrawerItemList } from '@react-navigation/drawer';
import { DrawerProps } from './Drawer.native.types';
import { cn } from '@sb/libs';
import { Cross } from '@sb/ui/components/atoms/Icons/mobile';
export const Drawer: React.FC<DrawerContentComponentProps & DrawerProps> = (props) => {
const renderContent = () => {
if (typeof props.content === 'string') {
return <Text>{props.content}</Text>;
}
return props.content;
};
const getVariantBg = () => {
const bg = props.variant?.match(/bg-(?:\[.*?]|[a-zA-Z0-9-]+)/)?.[0] || '';
return bg !== undefined && bg !== null && bg !== '';
};
const variantContainsBg = getVariantBg();
const renderTitle = () => {
if (React.isValidElement(props.title)) {
return <View>{props.title}</View>;
}
return (
<Text testID="drawer-title" className={'text-text-main fixed font-semibold'}>
{props.title}
</Text>
);
};
const renderHeader = () => {
if (typeof props.header === 'string') {
return (
<View testID="drawer-header">
<Text className={'text-text-main fixed font-semibold'}>{props.header}</Text>
</View>
);
}
Eif (React.isValidElement(props.header)) {
return props.header;
}
return null;
};
const closeDrawer = () => {
props.navigation.closeDrawer();
};
const renderCloseButton = () => (
<Pressable className="justify-end self-end" onPress={closeDrawer}>
<Cross
height={14}
accessibilityLabel="close drawer"
accessibilityHint="closes the drawer menu"
/>
</Pressable>
);
return (
<View className={'h-full'}>
<View className="top-0 mb-2 flex flex-row justify-between p-4">
{renderTitle()}
{renderCloseButton()}
</View>
<DrawerContentScrollView
{...props}
id={props.id}
testID={props.id}
contentContainerStyle={{ paddingTop: 0 }}
className={cn(
props.variant === 'default' && 'bg-secondary',
variantContainsBg && props.variant
)}
>
{props.header && renderHeader()}
{props.content ? renderContent() : <DrawerItemList {...props} />}
</DrawerContentScrollView>
</View>
);
};
|