@whitemordred/react-native-bootstrap5/lib/components/ButtonGroup.js

A complete React Native library that replicates Bootstrap 5.3 with 100% feature parity, full theming support, CSS variables, and dark/light mode

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ButtonToolbar = exports.ButtonGroup = void 0;
const react_1 = __importDefault(require("react"));
const react_native_1 = require("react-native");
const ThemeProvider_1 = require("../theme/ThemeProvider");
const ButtonGroup = ({ children, size, vertical = false, style, }) => {
    const { theme } = (0, ThemeProvider_1.useTheme)();
    const getGroupStyles = () => {
        const baseStyles = {
            flexDirection: vertical ? 'column' : 'row',
            borderRadius: theme.borderRadius.base,
            overflow: 'hidden',
        };
        return baseStyles;
    };
    const processChildren = () => {
        return react_1.default.Children.map(children, (child, index) => {
            if (react_1.default.isValidElement(child)) {
                const isFirst = index === 0;
                const isLast = index === react_1.default.Children.count(children) - 1;
                const buttonStyle = {
                    borderRadius: 0,
                    borderRightWidth: vertical ? 1 : (!isLast ? 0 : 1),
                    borderBottomWidth: !vertical ? 1 : (!isLast ? 0 : 1),
                };
                if (isFirst) {
                    if (vertical) {
                        buttonStyle.borderTopLeftRadius = theme.borderRadius.base;
                        buttonStyle.borderTopRightRadius = theme.borderRadius.base;
                    }
                    else {
                        buttonStyle.borderTopLeftRadius = theme.borderRadius.base;
                        buttonStyle.borderBottomLeftRadius = theme.borderRadius.base;
                    }
                }
                if (isLast) {
                    if (vertical) {
                        buttonStyle.borderBottomLeftRadius = theme.borderRadius.base;
                        buttonStyle.borderBottomRightRadius = theme.borderRadius.base;
                    }
                    else {
                        buttonStyle.borderTopRightRadius = theme.borderRadius.base;
                        buttonStyle.borderBottomRightRadius = theme.borderRadius.base;
                    }
                }
                return react_1.default.cloneElement(child, {
                    size: size || child.props.size,
                    style: [buttonStyle, child.props.style],
                });
            }
            return child;
        });
    };
    return (<react_native_1.View style={[styles.buttonGroup, getGroupStyles(), style]}>
      {processChildren()}
    </react_native_1.View>);
};
exports.ButtonGroup = ButtonGroup;
const ButtonToolbar = ({ children, style, }) => {
    return (<react_native_1.View style={[styles.buttonToolbar, style]}>
      {children}
    </react_native_1.View>);
};
exports.ButtonToolbar = ButtonToolbar;
const styles = react_native_1.StyleSheet.create({
    buttonGroup: {
        alignSelf: 'flex-start',
    },
    buttonToolbar: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        gap: 8,
    },
});
exports.default = exports.ButtonGroup;