@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
156 lines (155 loc) • 6.08 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.NavLink = exports.NavItem = exports.Nav = exports.NavbarCollapse = exports.NavbarToggle = exports.NavbarBrand = exports.Navbar = void 0;
const react_1 = __importDefault(require("react"));
const react_native_1 = require("react-native");
const ThemeProvider_1 = require("../theme/ThemeProvider");
const Navbar = ({ children, variant = 'light', expand = true, fixed, sticky, style, }) => {
const { theme, currentColors } = (0, ThemeProvider_1.useTheme)();
const getNavbarStyles = () => {
const baseStyles = {
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: theme.spacing[3],
paddingVertical: theme.spacing[2],
minHeight: 56,
};
// Variant styles
if (variant === 'dark') {
baseStyles.backgroundColor = currentColors.dark;
}
else {
baseStyles.backgroundColor = currentColors.light;
}
// Fixed/Sticky positioning
if (fixed || sticky) {
baseStyles.position = 'absolute';
baseStyles.left = 0;
baseStyles.right = 0;
baseStyles.zIndex = 1000;
if (fixed === 'top' || sticky === 'top') {
baseStyles.top = 0;
}
else if (fixed === 'bottom') {
baseStyles.bottom = 0;
}
}
return baseStyles;
};
const navbarStyles = getNavbarStyles();
if (fixed || sticky) {
return (<react_native_1.SafeAreaView style={navbarStyles}>
<react_native_1.View style={[{ flex: 1, flexDirection: 'row', alignItems: 'center' }, style]}>
{children}
</react_native_1.View>
</react_native_1.SafeAreaView>);
}
return (<react_native_1.View style={[navbarStyles, style]}>
{children}
</react_native_1.View>);
};
exports.Navbar = Navbar;
const NavbarBrand = ({ children, onPress, style, textStyle, }) => {
const { theme, currentColors } = (0, ThemeProvider_1.useTheme)();
const brandStyles = {
marginRight: theme.spacing[3],
};
const brandTextStyles = {
fontSize: theme.typography.fontSizes.xl,
fontWeight: theme.typography.fontWeights.bold,
color: currentColors.dark,
};
if (onPress) {
return (<react_native_1.TouchableOpacity style={[brandStyles, style]} onPress={onPress}>
{typeof children === 'string' ? (<react_native_1.Text style={[brandTextStyles, textStyle]}>{children}</react_native_1.Text>) : (children)}
</react_native_1.TouchableOpacity>);
}
else {
return (<react_native_1.View style={[brandStyles, style]}>
{typeof children === 'string' ? (<react_native_1.Text style={[brandTextStyles, textStyle]}>{children}</react_native_1.Text>) : (children)}
</react_native_1.View>);
}
};
exports.NavbarBrand = NavbarBrand;
const NavbarToggle = ({ onPress, style, }) => {
var _a;
const { theme, currentColors } = (0, ThemeProvider_1.useTheme)();
const toggleStyles = {
padding: theme.spacing[2],
borderWidth: 1,
borderColor: ((_a = currentColors.gray) === null || _a === void 0 ? void 0 : _a[300]) || currentColors.dark,
borderRadius: theme.borderRadius.base,
};
return (<react_native_1.TouchableOpacity style={[toggleStyles, style]} onPress={onPress}>
<react_native_1.View style={{ width: 18, height: 12 }}>
<react_native_1.View style={{
height: 2,
backgroundColor: currentColors.dark,
marginBottom: 3,
}}/>
<react_native_1.View style={{
height: 2,
backgroundColor: currentColors.dark,
marginBottom: 3,
}}/>
<react_native_1.View style={{
height: 2,
backgroundColor: currentColors.dark,
}}/>
</react_native_1.View>
</react_native_1.TouchableOpacity>);
};
exports.NavbarToggle = NavbarToggle;
const NavbarCollapse = ({ children, isCollapsed, style, }) => {
if (isCollapsed)
return null;
return (<react_native_1.View style={[{ flex: 1 }, style]}>
{children}
</react_native_1.View>);
};
exports.NavbarCollapse = NavbarCollapse;
const Nav = ({ children, variant, fill = false, justified = false, vertical = false, style, }) => {
const { theme } = (0, ThemeProvider_1.useTheme)();
const navStyles = {
flexDirection: vertical ? 'column' : 'row',
};
if (fill || justified) {
navStyles.flex = 1;
}
return (<react_native_1.View style={[navStyles, style]}>
{children}
</react_native_1.View>);
};
exports.Nav = Nav;
const NavItem = ({ children, active = false, disabled = false, onPress, style, textStyle, }) => {
var _a;
const { theme, currentColors } = (0, ThemeProvider_1.useTheme)();
const itemStyles = {
paddingHorizontal: theme.spacing[3],
paddingVertical: theme.spacing[2],
};
const itemTextStyles = {
fontSize: theme.typography.fontSizes.base,
color: disabled
? ((_a = currentColors.gray) === null || _a === void 0 ? void 0 : _a[500]) || currentColors.secondary
: active
? currentColors.primary
: currentColors.dark,
};
if (disabled) {
return (<react_native_1.View style={[itemStyles, style]}>
<react_native_1.Text style={[itemTextStyles, textStyle]}>{children}</react_native_1.Text>
</react_native_1.View>);
}
return (<react_native_1.TouchableOpacity style={[itemStyles, style]} onPress={onPress}>
<react_native_1.Text style={[itemTextStyles, textStyle]}>{children}</react_native_1.Text>
</react_native_1.TouchableOpacity>);
};
exports.NavItem = NavItem;
const NavLink = (props) => {
return <exports.NavItem {...props}/>;
};
exports.NavLink = NavLink;