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 | 6x 91x 91x 91x 26x 15x 1x 1x 48x 91x 91x 91x 91x 91x 2x 1x 1x 91x 2x 1x 1x 91x | import React from 'react';
import { CardNativeProps } from './Card.native.types';
import { StyleProp, Text, View, ViewStyle } from 'react-native';
import { cn } from '@sb/libs';
import { useThemeColors } from '@sb/hooks/Utilities/useThemeColors';
export const Card: React.FC<CardNativeProps> = ({
id,
children,
footer,
header,
height,
padding,
shadow,
width,
bordered,
className,
headerClassName,
footerClassName,
...rest
}) => {
const { themedColors } = useThemeColors();
const getPadding = () => {
switch (padding) {
case 'none':
return 'p-0';
case 'small':
return 'p-[8px]';
case 'medium':
return 'p-[15px]';
case 'large':
return 'p-[24px]';
default:
return 'p-0';
}
};
const classContainsBg = () => {
const bg = className?.match(/bg-(?:\[.*?]|[a-zA-Z0-9-]+)/)?.[0] || '';
return bg !== undefined && bg !== null && bg !== '';
};
const cardStyle: StyleProp<ViewStyle> = {
width: width,
height: height,
borderWidth: bordered ? 1 : 0,
shadowColor: shadow === 'none' ? 'transparent' : '#000',
shadowOffset: { width: 2, height: 3 },
shadowOpacity: shadow === 'none' ? 0 : 0.25,
shadowRadius: shadow === 'none' ? 0 : 3.5,
elevation: shadow === 'none' ? 0 : 5, // Android support,
backgroundColor: !classContainsBg() ? themedColors.alternateBackground : undefined,
borderColor: bordered ? themedColors.borderWhite : undefined,
};
const renderHeader = () => {
if (typeof header === 'string') {
return (
<Text className={cn('text-text-active font-semibold', headerClassName)}>{header}</Text>
);
}
return header;
};
const renderFooter = () => {
if (typeof footer === 'string') {
return (
<Text className={cn('text-text-active font-semibold', footerClassName)}>{footer}</Text>
);
}
return footer;
};
return (
<View
testID={id}
accessible
accessibilityRole="summary"
id={id}
style={cardStyle}
className={cn(getPadding(), className)}
{...rest}
>
{header && renderHeader()}
{children}
{footer && renderFooter()}
</View>
);
};
|