@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
160 lines (159 loc) • 6.63 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.Alert = void 0;
const react_1 = __importStar(require("react"));
const react_native_1 = require("react-native");
const ThemeProvider_1 = require("../theme/ThemeProvider");
const Alert = ({ children, variant = 'primary', dismissible = false, show = true, fade = true, onDismiss, heading, icon, border = false, emphasis = false, style, textStyle, headingStyle, }) => {
const { theme, currentColors } = (0, ThemeProvider_1.useTheme)();
const [isVisible, setIsVisible] = (0, react_1.useState)(show);
const fadeAnim = (0, react_1.useState)(new react_native_1.Animated.Value(show ? 1 : 0))[0];
(0, react_1.useEffect)(() => {
if (show && fade) {
setIsVisible(true);
react_native_1.Animated.timing(fadeAnim, {
toValue: 1,
duration: 300,
useNativeDriver: true,
}).start();
}
else if (!show && fade) {
react_native_1.Animated.timing(fadeAnim, {
toValue: 0,
duration: 300,
useNativeDriver: true,
}).start(() => setIsVisible(false));
}
else {
setIsVisible(show);
fadeAnim.setValue(show ? 1 : 0);
}
}, [show, fade]);
const getAlertStyles = () => {
const baseColor = currentColors[variant] || currentColors.primary;
const baseStyles = {
padding: theme.spacing[3],
borderRadius: theme.borderRadius.base,
borderWidth: 1,
flexDirection: 'column',
};
if (emphasis) {
// Bootstrap emphasis style (solid background)
baseStyles.backgroundColor = baseColor;
baseStyles.borderColor = baseColor;
}
else {
// Bootstrap subtle style (light background)
baseStyles.borderColor = baseColor;
baseStyles.backgroundColor = `${baseColor}15`; // 15% opacity
}
// Border variant
if (border) {
baseStyles.borderLeftWidth = 4;
baseStyles.borderLeftColor = baseColor;
baseStyles.borderColor = `${baseColor}30`;
}
return baseStyles;
};
const getTextStyles = () => {
const baseColor = currentColors[variant] || currentColors.primary;
const baseTextStyles = {
fontSize: theme.typography.fontSizes.base,
lineHeight: theme.typography.lineHeights.normal * theme.typography.fontSizes.base,
};
if (emphasis) {
// White text on solid background (except for light/warning variants)
const lightTextVariants = ['light', 'warning', 'yellow'];
baseTextStyles.color = lightTextVariants.includes(variant) ? currentColors.dark : currentColors.white;
}
else {
// Colored text on light background
baseTextStyles.color = baseColor;
}
return baseTextStyles;
};
const getHeadingStyles = () => {
const textStyles = getTextStyles();
return Object.assign(Object.assign({}, textStyles), { fontSize: theme.typography.fontSizes.lg, fontWeight: theme.typography.fontWeights.semibold, marginBottom: theme.spacing[2] });
};
const alertStyles = getAlertStyles();
const alertTextStyles = getTextStyles();
const alertHeadingStyles = getHeadingStyles();
if (!isVisible)
return null;
const alertContent = (<react_native_1.View style={[alertStyles, style]}>
<react_native_1.View style={{ flexDirection: 'row', alignItems: 'flex-start' }}>
{icon && (<react_native_1.View style={{ marginRight: theme.spacing[2] }}>
{icon}
</react_native_1.View>)}
<react_native_1.View style={{ flex: 1 }}>
{heading && (<react_native_1.Text style={[alertHeadingStyles, headingStyle]}>
{heading}
</react_native_1.Text>)}
<react_native_1.Text style={[alertTextStyles, textStyle]}>
{children}
</react_native_1.Text>
</react_native_1.View>
{dismissible && onDismiss && (<react_native_1.TouchableOpacity onPress={() => {
if (fade) {
setIsVisible(false);
setTimeout(onDismiss, 300);
}
else {
onDismiss();
}
}} style={{
padding: theme.spacing[1],
marginLeft: theme.spacing[2],
marginTop: -theme.spacing[1],
marginRight: -theme.spacing[1],
}}>
<react_native_1.Text style={{
fontSize: 24,
color: emphasis ? alertTextStyles.color : (currentColors[variant] || currentColors.primary),
fontWeight: '300',
lineHeight: 24,
}}>
×
</react_native_1.Text>
</react_native_1.TouchableOpacity>)}
</react_native_1.View>
</react_native_1.View>);
return fade ? (<react_native_1.Animated.View style={{ opacity: fadeAnim }}>
{alertContent}
</react_native_1.Animated.View>) : alertContent;
};
exports.Alert = Alert;