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 | 2x 56x 56x 56x 56x 47x 1x 8x 56x 56x 5x 51x 56x 56x 2x 2x | import React from 'react';
import { Text, TextStyle, StyleProp, StyleSheet } from 'react-native';
import { LabelNativeProps } from '../Label.types';
import { useTheme } from '@sb/ui/components/Themes/ThemeProvider';
import { colors } from '@sb/styles/colors';
export const Label: React.FC<LabelNativeProps> = ({
size = 'medium',
variant = 'primary',
style,
children,
accessibilityLabel,
...props
}) => {
const theme = useTheme();
const themeColors = colors[theme.theme];
const getSizeStyle = (size: 'small' | 'medium' | 'large'): TextStyle => {
switch (size) {
case 'small':
return styles.small;
case 'large':
return styles.large;
case 'medium':
default:
return styles.medium;
}
};
const getVariantStyle = (variant: 'primary' | 'secondary'): TextStyle => {
switch (variant) {
case 'secondary':
return {
color: themeColors.colorText_Tertiary,
};
case 'primary':
default:
return {
color: themeColors.colorText_Primary,
};
}
};
const textStyle: StyleProp<TextStyle> = [getSizeStyle(size), getVariantStyle(variant), style];
return (
<Text
style={textStyle}
accessibilityLabel={accessibilityLabel}
accessible={!!accessibilityLabel}
{...props}
>
{children}
</Text>
);
};
export const styles = StyleSheet.create({
base: {
fontWeight: '500',
},
small: {
fontSize: 14,
lineHeight: 20,
},
medium: {
fontSize: 16,
lineHeight: 24,
},
large: {
fontSize: 18,
lineHeight: 28,
},
});
Label.displayName = 'Label';
|