@whitemordred/react-native-bootstrap5
Version:
A complete React Native library that replicates Bootstrap 5.3 with 100% feature parity, full theming support, CSS variables, and dark/light mode
66 lines (65 loc) • 2.56 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Badge = void 0;
const react_1 = __importDefault(require("react"));
const react_native_1 = require("react-native");
const ThemeProvider_1 = require("../theme/ThemeProvider");
const Badge = ({ children, variant = 'primary', pill = false, style, textStyle, }) => {
const { theme, currentColors } = (0, ThemeProvider_1.useTheme)();
const isOutline = variant.startsWith('outline-');
const baseVariant = isOutline ? variant.replace('outline-', '') : variant;
const getBadgeStyles = () => {
const baseStyles = {
paddingHorizontal: theme.spacing[2],
paddingVertical: theme.spacing[1],
borderRadius: pill ? theme.borderRadius.full : theme.borderRadius.base,
alignSelf: 'flex-start',
justifyContent: 'center',
alignItems: 'center',
minWidth: 20,
minHeight: 20,
};
if (isOutline) {
baseStyles.backgroundColor = 'transparent';
baseStyles.borderWidth = 1;
baseStyles.borderColor = currentColors[baseVariant] || currentColors.primary;
}
else {
baseStyles.backgroundColor = currentColors[baseVariant] || currentColors.primary;
}
return baseStyles;
};
const getTextStyles = () => {
const baseTextStyles = {
fontSize: theme.typography.fontSizes.xs,
fontWeight: theme.typography.fontWeights.semibold,
};
if (isOutline) {
baseTextStyles.color = currentColors[baseVariant] || currentColors.primary;
}
else {
// Determine text color based on variant
if (baseVariant === 'light') {
baseTextStyles.color = currentColors.dark;
}
else if (baseVariant === 'warning') {
baseTextStyles.color = currentColors.dark;
}
else {
baseTextStyles.color = currentColors.white;
}
}
return baseTextStyles;
};
const badgeStyles = getBadgeStyles();
const badgeTextStyles = getTextStyles();
return (<react_native_1.View style={[badgeStyles, style]}>
<react_native_1.Text style={[badgeTextStyles, textStyle]}>
{children}
</react_native_1.Text>
</react_native_1.View>);
};
exports.Badge = Badge;