@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
157 lines (156 loc) • 6.66 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Switch = exports.Radio = exports.Checkbox = void 0;
const react_1 = __importDefault(require("react"));
const react_native_1 = require("react-native");
const ThemeProvider_1 = require("../theme/ThemeProvider");
const Checkbox = ({ children, checked, onChange, disabled = false, indeterminate = false, style, textStyle, }) => {
var _a, _b, _c, _d;
const { theme, currentColors } = (0, ThemeProvider_1.useTheme)();
const checkboxSize = 20;
const checkboxStyles = {
width: checkboxSize,
height: checkboxSize,
borderWidth: 2,
borderRadius: theme.borderRadius.sm,
marginRight: children ? theme.spacing[2] : 0,
justifyContent: 'center',
alignItems: 'center',
};
if (disabled) {
checkboxStyles.backgroundColor = ((_a = currentColors.gray) === null || _a === void 0 ? void 0 : _a[200]) || currentColors.light;
checkboxStyles.borderColor = ((_b = currentColors.gray) === null || _b === void 0 ? void 0 : _b[400]) || currentColors.secondary;
}
else if (checked || indeterminate) {
checkboxStyles.backgroundColor = currentColors.primary;
checkboxStyles.borderColor = currentColors.primary;
}
else {
checkboxStyles.backgroundColor = currentColors.white;
checkboxStyles.borderColor = ((_c = currentColors.gray) === null || _c === void 0 ? void 0 : _c[400]) || currentColors.secondary;
}
const containerStyles = {
flexDirection: 'row',
alignItems: 'center',
};
const labelStyles = {
fontSize: theme.typography.fontSizes.base,
color: disabled
? ((_d = currentColors.gray) === null || _d === void 0 ? void 0 : _d[500]) || currentColors.secondary
: currentColors.dark,
};
const handlePress = () => {
if (!disabled) {
onChange(!checked);
}
};
return (<react_native_1.TouchableOpacity style={[containerStyles, style]} onPress={handlePress} disabled={disabled}>
<react_native_1.View style={checkboxStyles}>
{(checked || indeterminate) && (<react_native_1.Text style={{
color: currentColors.white,
fontSize: 14,
fontWeight: theme.typography.fontWeights.bold,
}}>
{indeterminate ? '−' : '✓'}
</react_native_1.Text>)}
</react_native_1.View>
{children && (<react_native_1.Text style={[labelStyles, textStyle]}>{children}</react_native_1.Text>)}
</react_native_1.TouchableOpacity>);
};
exports.Checkbox = Checkbox;
const Radio = ({ children, selected, onChange, disabled = false, style, textStyle, }) => {
var _a, _b, _c, _d, _e;
const { theme, currentColors } = (0, ThemeProvider_1.useTheme)();
const radioSize = 20;
const radioStyles = {
width: radioSize,
height: radioSize,
borderWidth: 2,
borderRadius: radioSize / 2,
marginRight: children ? theme.spacing[2] : 0,
justifyContent: 'center',
alignItems: 'center',
};
if (disabled) {
radioStyles.backgroundColor = ((_a = currentColors.gray) === null || _a === void 0 ? void 0 : _a[200]) || currentColors.light;
radioStyles.borderColor = ((_b = currentColors.gray) === null || _b === void 0 ? void 0 : _b[400]) || currentColors.secondary;
}
else if (selected) {
radioStyles.borderColor = currentColors.primary;
}
else {
radioStyles.backgroundColor = currentColors.white;
radioStyles.borderColor = ((_c = currentColors.gray) === null || _c === void 0 ? void 0 : _c[400]) || currentColors.secondary;
}
const containerStyles = {
flexDirection: 'row',
alignItems: 'center',
};
const labelStyles = {
fontSize: theme.typography.fontSizes.base,
color: disabled
? ((_d = currentColors.gray) === null || _d === void 0 ? void 0 : _d[500]) || currentColors.secondary
: currentColors.dark,
};
const handlePress = () => {
if (!disabled) {
onChange(true);
}
};
return (<react_native_1.TouchableOpacity style={[containerStyles, style]} onPress={handlePress} disabled={disabled}>
<react_native_1.View style={radioStyles}>
{selected && (<react_native_1.View style={{
width: radioSize - 8,
height: radioSize - 8,
borderRadius: (radioSize - 8) / 2,
backgroundColor: disabled
? ((_e = currentColors.gray) === null || _e === void 0 ? void 0 : _e[500]) || currentColors.secondary
: currentColors.primary,
}}/>)}
</react_native_1.View>
{children && (<react_native_1.Text style={[labelStyles, textStyle]}>{children}</react_native_1.Text>)}
</react_native_1.TouchableOpacity>);
};
exports.Radio = Radio;
const Switch = ({ checked, onChange, disabled = false, size = 'sm', style, }) => {
var _a, _b;
const { theme, currentColors } = (0, ThemeProvider_1.useTheme)();
const switchWidth = size === 'lg' ? 60 : size === 'sm' ? 40 : 50;
const switchHeight = size === 'lg' ? 32 : size === 'sm' ? 22 : 26;
const thumbSize = size === 'lg' ? 28 : size === 'sm' ? 18 : 22;
const switchStyles = {
width: switchWidth,
height: switchHeight,
borderRadius: switchHeight / 2,
justifyContent: 'center',
paddingHorizontal: 2,
};
if (disabled) {
switchStyles.backgroundColor = ((_a = currentColors.gray) === null || _a === void 0 ? void 0 : _a[300]) || currentColors.secondary;
}
else if (checked) {
switchStyles.backgroundColor = currentColors.primary;
}
else {
switchStyles.backgroundColor = ((_b = currentColors.gray) === null || _b === void 0 ? void 0 : _b[400]) || currentColors.secondary;
}
const thumbStyles = {
width: thumbSize,
height: thumbSize,
borderRadius: thumbSize / 2,
backgroundColor: currentColors.white,
alignSelf: checked ? 'flex-end' : 'flex-start',
};
const handlePress = () => {
if (!disabled) {
onChange(!checked);
}
};
return (<react_native_1.TouchableOpacity style={[switchStyles, style]} onPress={handlePress} disabled={disabled}>
<react_native_1.View style={thumbStyles}/>
</react_native_1.TouchableOpacity>);
};
exports.Switch = Switch;