@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
57 lines (56 loc) • 2.59 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.BreadcrumbItem = exports.Breadcrumb = void 0;
const react_1 = __importDefault(require("react"));
const react_native_1 = require("react-native");
const ThemeProvider_1 = require("../theme/ThemeProvider");
const Breadcrumb = ({ children, divider = '/', style, }) => {
const { theme, currentColors } = (0, ThemeProvider_1.useTheme)();
const breadcrumbStyles = {
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: theme.spacing[3],
paddingVertical: theme.spacing[2],
backgroundColor: currentColors.light,
borderRadius: theme.borderRadius.base,
};
const childrenArray = react_1.default.Children.toArray(children);
return (<react_native_1.View style={[breadcrumbStyles, style]}>
{childrenArray.map((child, index) => {
var _a;
const isLast = index === childrenArray.length - 1;
return (<react_1.default.Fragment>
{react_1.default.cloneElement(child, { key: `breadcrumb-${index}` })}
{!isLast && (<react_native_1.Text style={{
marginHorizontal: theme.spacing[2],
color: ((_a = currentColors.gray) === null || _a === void 0 ? void 0 : _a[500]) || currentColors.secondary,
}}>
{divider}
</react_native_1.Text>)}
</react_1.default.Fragment>);
})}
</react_native_1.View>);
};
exports.Breadcrumb = Breadcrumb;
const BreadcrumbItem = ({ children, active = false, onPress, style, textStyle, }) => {
var _a;
const { theme, currentColors } = (0, ThemeProvider_1.useTheme)();
const itemTextStyles = {
fontSize: theme.typography.fontSizes.base,
color: active
? ((_a = currentColors.gray) === null || _a === void 0 ? void 0 : _a[600]) || currentColors.secondary
: currentColors.primary,
};
if (active || !onPress) {
return (<react_native_1.View style={style}>
<react_native_1.Text style={[itemTextStyles, textStyle]}>{children}</react_native_1.Text>
</react_native_1.View>);
}
return (<react_native_1.TouchableOpacity style={style} onPress={onPress}>
<react_native_1.Text style={[itemTextStyles, textStyle]}>{children}</react_native_1.Text>
</react_native_1.TouchableOpacity>);
};
exports.BreadcrumbItem = BreadcrumbItem;