@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
382 lines (381 loc) • 16.4 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.Divider = exports.Spacer = exports.TextCenter = exports.AlignCenter = exports.JustifyBetween = exports.JustifyCenter = exports.DFlexColumn = exports.DFlexRow = exports.DFlex = exports.UtilityView = exports.BgDark = exports.BgLight = exports.BgInfo = exports.BgWarning = exports.BgDanger = exports.BgSuccess = exports.BgSecondary = exports.BgPrimary = exports.TextMuted = exports.TextInfo = exports.TextWarning = exports.TextDanger = exports.TextSuccess = exports.TextSecondary = exports.TextPrimary = exports.UtilityBox = exports.BorderUtility = exports.BackgroundUtility = exports.TextUtility = void 0;
// Bootstrap 5 Utility Components for React Native
const react_1 = __importDefault(require("react"));
const react_native_1 = require("react-native");
const ThemeProvider_1 = require("../theme/ThemeProvider");
const bootstrapTheme_1 = require("../theme/bootstrapTheme");
const TextUtility = (_a) => {
var { color, style, children } = _a, props = __rest(_a, ["color", "style", "children"]);
const colorStyle = color ? bootstrapTheme_1.bootstrapUtilities.text[color] : {};
return (<react_native_1.Text style={[colorStyle, style]} {...props}>
{children}
</react_native_1.Text>);
};
exports.TextUtility = TextUtility;
const BackgroundUtility = (_a) => {
var { bg, style, children } = _a, props = __rest(_a, ["bg", "style", "children"]);
const bgStyle = bg ? bootstrapTheme_1.bootstrapUtilities.bg[bg] : {};
return (<react_native_1.View style={[bgStyle, style]} {...props}>
{children}
</react_native_1.View>);
};
exports.BackgroundUtility = BackgroundUtility;
const BorderUtility = (_a) => {
var { border, borderWidth = 1, borderStyle = 'solid', rounded, style, children } = _a, props = __rest(_a, ["border", "borderWidth", "borderStyle", "rounded", "style", "children"]);
const { theme } = (0, ThemeProvider_1.useTheme)();
const borderColorStyle = border ? bootstrapTheme_1.bootstrapUtilities.border[border] : {};
let borderRadiusStyle = {};
if (rounded === true) {
borderRadiusStyle = { borderRadius: theme.borderRadius.base };
}
else if (rounded === 'sm') {
borderRadiusStyle = { borderRadius: theme.borderRadius.sm };
}
else if (rounded === 'lg') {
borderRadiusStyle = { borderRadius: theme.borderRadius.lg };
}
else if (rounded === 'xl') {
borderRadiusStyle = { borderRadius: theme.borderRadius.xl };
}
else if (rounded === 'pill') {
borderRadiusStyle = { borderRadius: theme.borderRadius.full };
}
else if (rounded === 'circle') {
borderRadiusStyle = { borderRadius: 999 };
}
const combinedStyle = Object.assign(Object.assign(Object.assign({}, borderColorStyle), { borderWidth,
borderStyle }), borderRadiusStyle);
return (<react_native_1.View style={[combinedStyle, style]} {...props}>
{children}
</react_native_1.View>);
};
exports.BorderUtility = BorderUtility;
const UtilityBox = (_a) => {
var { bg, border, borderWidth = 1, rounded, p, m, px, py, mx, my, shadow, style, children } = _a, props = __rest(_a, ["bg", "border", "borderWidth", "rounded", "p", "m", "px", "py", "mx", "my", "shadow", "style", "children"]);
const { theme } = (0, ThemeProvider_1.useTheme)();
// Background styles
const bgStyle = bg ? bootstrapTheme_1.bootstrapUtilities.bg[bg] : {};
// Border styles
const borderColorStyle = border ? bootstrapTheme_1.bootstrapUtilities.border[border] : {};
// Border radius styles
let borderRadiusStyle = {};
if (rounded === true) {
borderRadiusStyle = { borderRadius: theme.borderRadius.base };
}
else if (rounded === 'sm') {
borderRadiusStyle = { borderRadius: theme.borderRadius.sm };
}
else if (rounded === 'lg') {
borderRadiusStyle = { borderRadius: theme.borderRadius.lg };
}
else if (rounded === 'xl') {
borderRadiusStyle = { borderRadius: theme.borderRadius.xl };
}
else if (rounded === 'pill') {
borderRadiusStyle = { borderRadius: theme.borderRadius.full };
}
else if (rounded === 'circle') {
borderRadiusStyle = { borderRadius: 999 };
}
// Spacing styles
const spacingStyle = {};
if (p !== undefined)
spacingStyle.padding = typeof p === 'number' ? theme.spacing[p] || p : p;
if (m !== undefined)
spacingStyle.margin = typeof m === 'number' ? theme.spacing[m] || m : m;
if (px !== undefined) {
spacingStyle.paddingHorizontal = typeof px === 'number' ? theme.spacing[px] || px : px;
}
if (py !== undefined) {
spacingStyle.paddingVertical = typeof py === 'number' ? theme.spacing[py] || py : py;
}
if (mx !== undefined) {
spacingStyle.marginHorizontal = typeof mx === 'number' ? theme.spacing[mx] || mx : mx;
}
if (my !== undefined) {
spacingStyle.marginVertical = typeof my === 'number' ? theme.spacing[my] || my : my;
}
// Shadow styles
let shadowStyle = {};
if (shadow === true) {
shadowStyle = theme.shadows.base;
}
else if (shadow === 'sm') {
shadowStyle = theme.shadows.sm;
}
else if (shadow === 'lg') {
shadowStyle = theme.shadows.lg;
}
else if (shadow === 'xl') {
shadowStyle = theme.shadows.xl;
}
const combinedStyle = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bgStyle), borderColorStyle), borderRadiusStyle), spacingStyle), shadowStyle), (border ? { borderWidth, borderStyle: 'solid' } : {}));
return (<react_native_1.View style={[combinedStyle, style]} {...props}>
{children}
</react_native_1.View>);
};
exports.UtilityBox = UtilityBox;
// Preset utility components for common use cases
const TextPrimary = (props) => (<exports.TextUtility color="primary" {...props}/>);
exports.TextPrimary = TextPrimary;
const TextSecondary = (props) => (<exports.TextUtility color="secondary" {...props}/>);
exports.TextSecondary = TextSecondary;
const TextSuccess = (props) => (<exports.TextUtility color="success" {...props}/>);
exports.TextSuccess = TextSuccess;
const TextDanger = (props) => (<exports.TextUtility color="danger" {...props}/>);
exports.TextDanger = TextDanger;
const TextWarning = (props) => (<exports.TextUtility color="warning" {...props}/>);
exports.TextWarning = TextWarning;
const TextInfo = (props) => (<exports.TextUtility color="info" {...props}/>);
exports.TextInfo = TextInfo;
const TextMuted = (props) => (<exports.TextUtility color="muted" {...props}/>);
exports.TextMuted = TextMuted;
// Background presets
const BgPrimary = (props) => (<exports.BackgroundUtility bg="primary" {...props}/>);
exports.BgPrimary = BgPrimary;
const BgSecondary = (props) => (<exports.BackgroundUtility bg="secondary" {...props}/>);
exports.BgSecondary = BgSecondary;
const BgSuccess = (props) => (<exports.BackgroundUtility bg="success" {...props}/>);
exports.BgSuccess = BgSuccess;
const BgDanger = (props) => (<exports.BackgroundUtility bg="danger" {...props}/>);
exports.BgDanger = BgDanger;
const BgWarning = (props) => (<exports.BackgroundUtility bg="warning" {...props}/>);
exports.BgWarning = BgWarning;
const BgInfo = (props) => (<exports.BackgroundUtility bg="info" {...props}/>);
exports.BgInfo = BgInfo;
const BgLight = (props) => (<exports.BackgroundUtility bg="light" {...props}/>);
exports.BgLight = BgLight;
const BgDark = (props) => (<exports.BackgroundUtility bg="dark" {...props}/>);
exports.BgDark = BgDark;
const SPACING_SCALE = {
0: 0,
1: 4,
2: 8,
3: 12,
4: 16,
5: 20,
6: 24,
7: 28,
8: 32,
9: 36,
10: 40,
11: 44,
12: 48,
auto: 'auto',
};
const parseSpacingValue = (value) => {
if (typeof value === 'string') {
if (value === 'auto')
return 'auto';
const parsed = parseInt(value, 10);
return SPACING_SCALE[parsed] || parsed;
}
return SPACING_SCALE[value] || value;
};
const UtilityView = ({ children, style,
// Spacing props
m, mt, mb, ml, mr, mx, my, p, pt, pb, pl, pr, px, py,
// Display props
display,
// Flexbox props
flexDirection, justifyContent, alignItems, alignSelf, flex, flexWrap,
// Position props
position, top, bottom, left, right,
// Size props
width, height, minWidth, minHeight, maxWidth, maxHeight,
// Border props
border, borderTop, borderBottom, borderLeft, borderRight, borderRadius, borderColor, borderWidth,
// Background props
backgroundColor,
// Shadow props
shadow, shadowColor, shadowOpacity, shadowRadius, elevation, }) => {
const utilityStyle = {};
// Handle spacing
if (m !== undefined) {
const marginValue = parseSpacingValue(m);
utilityStyle.margin = marginValue;
}
if (mt !== undefined)
utilityStyle.marginTop = parseSpacingValue(mt);
if (mb !== undefined)
utilityStyle.marginBottom = parseSpacingValue(mb);
if (ml !== undefined)
utilityStyle.marginLeft = parseSpacingValue(ml);
if (mr !== undefined)
utilityStyle.marginRight = parseSpacingValue(mr);
if (mx !== undefined) {
const marginValue = parseSpacingValue(mx);
utilityStyle.marginHorizontal = marginValue;
}
if (my !== undefined) {
const marginValue = parseSpacingValue(my);
utilityStyle.marginVertical = marginValue;
}
if (p !== undefined) {
const paddingValue = parseSpacingValue(p);
utilityStyle.padding = paddingValue;
}
if (pt !== undefined)
utilityStyle.paddingTop = parseSpacingValue(pt);
if (pb !== undefined)
utilityStyle.paddingBottom = parseSpacingValue(pb);
if (pl !== undefined)
utilityStyle.paddingLeft = parseSpacingValue(pl);
if (pr !== undefined)
utilityStyle.paddingRight = parseSpacingValue(pr);
if (px !== undefined) {
const paddingValue = parseSpacingValue(px);
utilityStyle.paddingHorizontal = paddingValue;
}
if (py !== undefined) {
const paddingValue = parseSpacingValue(py);
utilityStyle.paddingVertical = paddingValue;
}
// Handle display
if (display === 'flex')
utilityStyle.display = 'flex';
if (display === 'none')
utilityStyle.display = 'none';
// Handle flexbox
if (flexDirection)
utilityStyle.flexDirection = flexDirection;
if (justifyContent)
utilityStyle.justifyContent = justifyContent;
if (alignItems)
utilityStyle.alignItems = alignItems;
if (alignSelf)
utilityStyle.alignSelf = alignSelf;
if (flex !== undefined)
utilityStyle.flex = flex;
if (flexWrap)
utilityStyle.flexWrap = flexWrap;
// Handle position
if (position)
utilityStyle.position = position;
if (top !== undefined)
utilityStyle.top = top;
if (bottom !== undefined)
utilityStyle.bottom = bottom;
if (left !== undefined)
utilityStyle.left = left;
if (right !== undefined)
utilityStyle.right = right;
// Handle size
if (width !== undefined)
utilityStyle.width = width;
if (height !== undefined)
utilityStyle.height = height;
if (minWidth !== undefined)
utilityStyle.minWidth = minWidth;
if (minHeight !== undefined)
utilityStyle.minHeight = minHeight;
if (maxWidth !== undefined)
utilityStyle.maxWidth = maxWidth;
if (maxHeight !== undefined)
utilityStyle.maxHeight = maxHeight;
// Handle borders
if (border) {
utilityStyle.borderWidth = borderWidth || 1;
utilityStyle.borderColor = borderColor || '#dee2e6';
}
if (borderTop) {
utilityStyle.borderTopWidth = borderWidth || 1;
utilityStyle.borderTopColor = borderColor || '#dee2e6';
}
if (borderBottom) {
utilityStyle.borderBottomWidth = borderWidth || 1;
utilityStyle.borderBottomColor = borderColor || '#dee2e6';
}
if (borderLeft) {
utilityStyle.borderLeftWidth = borderWidth || 1;
utilityStyle.borderLeftColor = borderColor || '#dee2e6';
}
if (borderRight) {
utilityStyle.borderRightWidth = borderWidth || 1;
utilityStyle.borderRightColor = borderColor || '#dee2e6';
}
if (borderRadius !== undefined)
utilityStyle.borderRadius = borderRadius;
// Handle background
if (backgroundColor)
utilityStyle.backgroundColor = backgroundColor;
// Handle shadow
if (shadow) {
utilityStyle.shadowColor = shadowColor || '#000';
utilityStyle.shadowOffset = { width: 0, height: 2 };
utilityStyle.shadowOpacity = shadowOpacity || 0.1;
utilityStyle.shadowRadius = shadowRadius || 4;
utilityStyle.elevation = elevation || 3;
}
return (<react_native_1.View style={[utilityStyle, style]}>
{children}
</react_native_1.View>);
};
exports.UtilityView = UtilityView;
// Utility classes as components
const DFlex = ({ children, style }) => (<exports.UtilityView display="flex" style={style} children={children}/>);
exports.DFlex = DFlex;
const DFlexRow = ({ children, style }) => (<exports.UtilityView display="flex" flexDirection="row" style={style} children={children}/>);
exports.DFlexRow = DFlexRow;
const DFlexColumn = ({ children, style }) => (<exports.UtilityView display="flex" flexDirection="column" style={style} children={children}/>);
exports.DFlexColumn = DFlexColumn;
const JustifyCenter = ({ children, style }) => (<exports.UtilityView justifyContent="center" style={style} children={children}/>);
exports.JustifyCenter = JustifyCenter;
const JustifyBetween = ({ children, style }) => (<exports.UtilityView justifyContent="space-between" style={style} children={children}/>);
exports.JustifyBetween = JustifyBetween;
const AlignCenter = ({ children, style }) => (<exports.UtilityView alignItems="center" style={style} children={children}/>);
exports.AlignCenter = AlignCenter;
const TextCenter = ({ children, style }) => (<exports.UtilityView justifyContent="center" alignItems="center" style={style} children={children}/>);
exports.TextCenter = TextCenter;
// Spacing utility components
const Spacer = ({ size = 1, horizontal = false }) => (<exports.UtilityView width={horizontal ? parseSpacingValue(size) : undefined} height={!horizontal ? parseSpacingValue(size) : undefined} children={null}/>);
exports.Spacer = Spacer;
const Divider = ({ style, color = '#dee2e6', thickness = 1, vertical = false }) => (<exports.UtilityView backgroundColor={color} width={vertical ? thickness : '100%'} height={vertical ? '100%' : thickness} style={style} children={null}/>);
exports.Divider = Divider;
exports.default = {
UtilityView: exports.UtilityView,
DFlex: exports.DFlex,
DFlexRow: exports.DFlexRow,
DFlexColumn: exports.DFlexColumn,
JustifyCenter: exports.JustifyCenter,
JustifyBetween: exports.JustifyBetween,
AlignCenter: exports.AlignCenter,
TextCenter: exports.TextCenter,
Spacer: exports.Spacer,
Divider: exports.Divider,
TextUtility: exports.TextUtility,
BackgroundUtility: exports.BackgroundUtility,
BorderUtility: exports.BorderUtility,
UtilityBox: exports.UtilityBox,
TextPrimary: exports.TextPrimary,
TextSecondary: exports.TextSecondary,
TextSuccess: exports.TextSuccess,
TextDanger: exports.TextDanger,
TextWarning: exports.TextWarning,
TextInfo: exports.TextInfo,
TextMuted: exports.TextMuted,
BgPrimary: exports.BgPrimary,
BgSecondary: exports.BgSecondary,
BgSuccess: exports.BgSuccess,
BgDanger: exports.BgDanger,
BgWarning: exports.BgWarning,
BgInfo: exports.BgInfo,
BgLight: exports.BgLight,
BgDark: exports.BgDark,
};