@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
89 lines (88 loc) • 4.1 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ListGroupItem = exports.ListGroup = void 0;
const react_1 = __importDefault(require("react"));
const react_native_1 = require("react-native");
const ThemeProvider_1 = require("../theme/ThemeProvider");
const ListGroup = ({ children, flush = false, numbered = false, horizontal = false, style, }) => {
var _a;
const { theme, currentColors } = (0, ThemeProvider_1.useTheme)();
const listStyles = {
borderRadius: flush ? 0 : theme.borderRadius.base,
overflow: 'hidden',
};
if (horizontal) {
listStyles.flexDirection = 'row';
}
if (!flush) {
listStyles.borderWidth = 1;
listStyles.borderColor = ((_a = currentColors.gray) === null || _a === void 0 ? void 0 : _a[300]) || currentColors.secondary;
}
const childrenArray = react_1.default.Children.toArray(children);
return (<react_native_1.View style={[listStyles, style]}>
{childrenArray.map((child, index) => {
if (react_1.default.isValidElement(child)) {
return react_1.default.cloneElement(child, Object.assign(Object.assign({ key: `list-item-${index}` }, child.props), { _isFirst: index === 0, _isLast: index === childrenArray.length - 1, _numbered: numbered, _index: numbered ? index + 1 : undefined, _flush: flush, _horizontal: horizontal }));
}
return child;
})}
</react_native_1.View>);
};
exports.ListGroup = ListGroup;
const ListGroupItem = ({ children, active = false, disabled = false, variant, action = false, onPress, style, textStyle, _isFirst = false, _isLast = false, _numbered = false, _index, _flush = false, _horizontal = false, }) => {
var _a, _b, _c;
const { theme, currentColors } = (0, ThemeProvider_1.useTheme)();
const itemStyles = {
paddingVertical: theme.spacing[3],
paddingHorizontal: theme.spacing[3],
flexDirection: 'row',
alignItems: 'center',
};
// Border styles
if (!_flush) {
if (!_isLast) {
if (_horizontal) {
itemStyles.borderRightWidth = 1;
itemStyles.borderRightColor = ((_a = currentColors.gray) === null || _a === void 0 ? void 0 : _a[300]) || currentColors.secondary;
}
else {
itemStyles.borderBottomWidth = 1;
itemStyles.borderBottomColor = ((_b = currentColors.gray) === null || _b === void 0 ? void 0 : _b[300]) || currentColors.secondary;
}
}
}
// Background color
if (active) {
itemStyles.backgroundColor = currentColors.primary;
}
else if (variant) {
const variantColor = currentColors[variant];
if (variantColor) {
itemStyles.backgroundColor = `${variantColor}15`; // 15% opacity
}
}
else {
itemStyles.backgroundColor = currentColors.white;
}
// Text styles
const itemTextStyles = {
fontSize: theme.typography.fontSizes.base,
color: active
? currentColors.white
: disabled
? ((_c = currentColors.gray) === null || _c === void 0 ? void 0 : _c[500]) || currentColors.secondary
: currentColors.dark,
flex: 1,
};
const Component = (action && !disabled && onPress) ? react_native_1.TouchableOpacity : react_native_1.View;
return (<Component style={[itemStyles, style]} onPress={onPress} disabled={disabled}>
{_numbered && _index && (<react_native_1.Text style={Object.assign(Object.assign({}, itemTextStyles), { fontWeight: theme.typography.fontWeights.semibold, marginRight: theme.spacing[2], flex: 0 })}>
{_index}.
</react_native_1.Text>)}
{typeof children === 'string' ? (<react_native_1.Text style={[itemTextStyles, textStyle]}>{children}</react_native_1.Text>) : (children)}
</Component>);
};
exports.ListGroupItem = ListGroupItem;