@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
109 lines (108 loc) • 4.24 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.InvalidFeedback = exports.FormText = exports.FormControl = exports.FormLabel = exports.FormGroup = void 0;
const react_1 = __importDefault(require("react"));
const react_native_1 = require("react-native");
const ThemeProvider_1 = require("../theme/ThemeProvider");
const FormGroup = ({ children, style }) => {
const { theme } = (0, ThemeProvider_1.useTheme)();
const groupStyles = {
marginBottom: theme.spacing[3],
};
return (<react_native_1.View style={[groupStyles, style]}>
{children}
</react_native_1.View>);
};
exports.FormGroup = FormGroup;
const FormLabel = ({ children, required = false, style }) => {
const { theme, currentColors } = (0, ThemeProvider_1.useTheme)();
const labelStyles = {
fontSize: theme.typography.fontSizes.base,
fontWeight: theme.typography.fontWeights.medium,
color: currentColors.dark,
marginBottom: theme.spacing[1],
};
return (<react_native_1.Text style={[labelStyles, style]}>
{children}
{required && <react_native_1.Text style={{ color: currentColors.danger }}> *</react_native_1.Text>}
</react_native_1.Text>);
};
exports.FormLabel = FormLabel;
const FormControl = (_a) => {
var { isInvalid = false, size = 'default', style } = _a, props = __rest(_a, ["isInvalid", "size", "style"]);
const { theme, currentColors } = (0, ThemeProvider_1.useTheme)();
const getControlStyles = () => {
const baseStyles = {
borderWidth: 1,
borderRadius: theme.borderRadius.base,
paddingHorizontal: theme.spacing[3],
paddingVertical: theme.spacing[2],
backgroundColor: currentColors.white,
};
// Border color
if (isInvalid) {
baseStyles.borderColor = currentColors.danger;
}
else {
baseStyles.borderColor = theme.colors.gray[300];
}
return baseStyles;
};
const getTextInputProps = () => {
let fontSize = theme.typography.fontSizes.base;
// Size variations
switch (size) {
case 'sm':
fontSize = theme.typography.fontSizes.sm;
break;
case 'lg':
fontSize = theme.typography.fontSizes.lg;
break;
}
return {
fontSize,
color: currentColors.dark,
};
};
const textInputProps = getTextInputProps();
return (<react_native_1.TextInput style={[getControlStyles(), style]} placeholderTextColor={theme.colors.gray[500]} {...textInputProps} {...props}/>);
};
exports.FormControl = FormControl;
const FormText = ({ children, muted = false, style }) => {
const { theme, currentColors } = (0, ThemeProvider_1.useTheme)();
const textStyles = {
fontSize: theme.typography.fontSizes.sm,
color: muted ? theme.colors.gray[600] : currentColors.dark,
marginTop: theme.spacing[1],
};
return (<react_native_1.Text style={[textStyles, style]}>
{children}
</react_native_1.Text>);
};
exports.FormText = FormText;
const InvalidFeedback = ({ children, style }) => {
const { theme, currentColors } = (0, ThemeProvider_1.useTheme)();
const feedbackStyles = {
fontSize: theme.typography.fontSizes.sm,
color: currentColors.danger,
marginTop: theme.spacing[1],
};
return (<react_native_1.Text style={[feedbackStyles, style]}>
{children}
</react_native_1.Text>);
};
exports.InvalidFeedback = InvalidFeedback;