@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
117 lines (116 loc) • 4.33 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.InputGroup = exports.InputGroupAppend = exports.InputGroupPrepend = exports.InputGroupText = void 0;
const react_1 = __importDefault(require("react"));
const react_native_1 = require("react-native");
const ThemeProvider_1 = require("../theme/ThemeProvider");
const InputGroupText = ({ children, style, textStyle, }) => {
const { theme } = (0, ThemeProvider_1.useTheme)();
return (<react_native_1.View style={[styles.inputGroupText, {
backgroundColor: theme.colors.gray[100],
borderColor: theme.colors.gray[300],
}, style]}>
<react_native_1.Text style={[styles.inputGroupTextContent, { color: theme.colors.gray[600] }, textStyle]}>
{children}
</react_native_1.Text>
</react_native_1.View>);
};
exports.InputGroupText = InputGroupText;
const InputGroupPrepend = ({ children, style, }) => {
return (<react_native_1.View style={[styles.inputGroupPrepend, style]}>
{children}
</react_native_1.View>);
};
exports.InputGroupPrepend = InputGroupPrepend;
const InputGroupAppend = ({ children, style, }) => {
return (<react_native_1.View style={[styles.inputGroupAppend, style]}>
{children}
</react_native_1.View>);
};
exports.InputGroupAppend = InputGroupAppend;
const InputGroup = ({ children, size, style, }) => {
const { theme } = (0, ThemeProvider_1.useTheme)();
const getSizeStyles = () => {
switch (size) {
case 'sm':
return {
minHeight: 32,
};
case 'lg':
return {
minHeight: 48,
};
default:
return {
minHeight: 40,
};
}
};
const processChildren = () => {
return react_1.default.Children.map(children, (child, index) => {
var _a, _b;
if (react_1.default.isValidElement(child)) {
const isFirst = index === 0;
const isLast = index === react_1.default.Children.count(children) - 1;
let childStyle = {
borderRadius: 0,
};
// Handle border radius for first and last elements
if (isFirst) {
childStyle.borderTopLeftRadius = theme.borderRadius.base;
childStyle.borderBottomLeftRadius = theme.borderRadius.base;
}
if (isLast) {
childStyle.borderTopRightRadius = theme.borderRadius.base;
childStyle.borderBottomRightRadius = theme.borderRadius.base;
}
// Handle borders between elements
if (!isLast) {
childStyle.borderRightWidth = 0;
}
// Apply size to form controls
const childProps = {
style: [childStyle, child.props.style],
};
if (size && ((_b = (_a = child.type) === null || _a === void 0 ? void 0 : _a.name) === null || _b === void 0 ? void 0 : _b.includes('FormControl'))) {
childProps.size = size;
}
return react_1.default.cloneElement(child, childProps);
}
return child;
});
};
return (<react_native_1.View style={[styles.inputGroup, getSizeStyles(), style]}>
{processChildren()}
</react_native_1.View>);
};
exports.InputGroup = InputGroup;
const styles = react_native_1.StyleSheet.create({
inputGroup: {
flexDirection: 'row',
alignItems: 'stretch',
width: '100%',
},
inputGroupPrepend: {
flexDirection: 'row',
},
inputGroupAppend: {
flexDirection: 'row',
},
inputGroupText: {
paddingHorizontal: 12,
paddingVertical: 8,
borderWidth: 1,
justifyContent: 'center',
alignItems: 'center',
minWidth: 40,
},
inputGroupTextContent: {
fontSize: 16,
fontWeight: '400',
},
});
exports.default = exports.InputGroup;