@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
119 lines (118 loc) • 4.93 kB
JavaScript
;
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = void 0;
const react_1 = __importDefault(require("react"));
const react_native_1 = require("react-native");
const ThemeProvider_1 = require("../theme/ThemeProvider");
const Modal = (_a) => {
var { children, visible, onClose, size = 'default', centered = false, backdrop = true, style } = _a, props = __rest(_a, ["children", "visible", "onClose", "size", "centered", "backdrop", "style"]);
const { theme, currentColors } = (0, ThemeProvider_1.useTheme)();
const getModalWidth = () => {
switch (size) {
case 'sm':
return 300;
case 'lg':
return 800;
case 'xl':
return 1140;
default:
return 500;
}
};
const overlayStyles = {
flex: 1,
backgroundColor: 'rgba(0, 0, 0, 0.5)',
justifyContent: centered ? 'center' : 'flex-start',
alignItems: 'center',
paddingTop: centered ? 0 : 60,
paddingHorizontal: theme.spacing[3],
};
const modalStyles = Object.assign({ backgroundColor: currentColors.white, borderRadius: theme.borderRadius.base, maxWidth: getModalWidth(), width: '100%', maxHeight: '80%' }, theme.shadows.lg);
const handleBackdropPress = () => {
if (backdrop && onClose) {
onClose();
}
};
return (<react_native_1.Modal visible={visible} transparent animationType="fade" onRequestClose={onClose} {...props}>
<react_native_1.TouchableOpacity style={overlayStyles} activeOpacity={1} onPress={handleBackdropPress}>
<react_native_1.TouchableOpacity style={[modalStyles, style]} activeOpacity={1}>
{children}
</react_native_1.TouchableOpacity>
</react_native_1.TouchableOpacity>
</react_native_1.Modal>);
};
exports.Modal = Modal;
const ModalHeader = ({ children, onClose, style, textStyle, }) => {
var _a;
const { theme, currentColors } = (0, ThemeProvider_1.useTheme)();
const headerStyles = {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
padding: theme.spacing[3],
borderBottomWidth: 1,
borderBottomColor: theme.colors.gray[300],
};
const titleStyles = {
fontSize: theme.typography.fontSizes.lg,
fontWeight: theme.typography.fontWeights.semibold,
color: currentColors.dark,
flex: 1,
};
const closeButtonStyles = {
padding: theme.spacing[1],
marginLeft: theme.spacing[2],
};
const closeTextStyles = {
fontSize: theme.typography.fontSizes['2xl'],
color: ((_a = currentColors.gray) === null || _a === void 0 ? void 0 : _a[600]) || currentColors.dark,
fontWeight: theme.typography.fontWeights.light,
};
return (<react_native_1.View style={[headerStyles, style]}>
{typeof children === 'string' ? (<react_native_1.Text style={[titleStyles, textStyle]}>{children}</react_native_1.Text>) : (<react_native_1.View style={{ flex: 1 }}>{children}</react_native_1.View>)}
{onClose && (<react_native_1.TouchableOpacity style={closeButtonStyles} onPress={onClose}>
<react_native_1.Text style={closeTextStyles}>×</react_native_1.Text>
</react_native_1.TouchableOpacity>)}
</react_native_1.View>);
};
exports.ModalHeader = ModalHeader;
const ModalBody = ({ children, style }) => {
const { theme } = (0, ThemeProvider_1.useTheme)();
const bodyStyles = {
padding: theme.spacing[3],
flex: 1,
};
return (<react_native_1.View style={[bodyStyles, style]}>
{children}
</react_native_1.View>);
};
exports.ModalBody = ModalBody;
const ModalFooter = ({ children, style }) => {
const { theme } = (0, ThemeProvider_1.useTheme)();
const footerStyles = {
flexDirection: 'row',
justifyContent: 'flex-end',
alignItems: 'center',
padding: theme.spacing[3],
borderTopWidth: 1,
borderTopColor: theme.colors.gray[300],
};
return (<react_native_1.View style={[footerStyles, style]}>
{children}
</react_native_1.View>);
};
exports.ModalFooter = ModalFooter;