react-native-elements/dist/buttons/ButtonGroup.js

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;
};
import React from 'react';
import { View, TouchableNativeFeedback, TouchableOpacity, Platform, StyleSheet, } from 'react-native';
import { withTheme } from '../config';
import { normalizeText, color } from '../helpers';
import Text from '../text/Text';
const ButtonGroup = (props) => {
    var _a;
    const { theme } = props, rest = __rest(props, ["theme"]);
    const { Component = Platform.select({
        android: TouchableNativeFeedback,
        default: TouchableOpacity,
    }), buttons, onPress = () => null, selectedIndex = null, selectedIndexes = [], selectMultiple = false, containerStyle, innerBorderStyle, buttonStyle, buttonContainerStyle, textStyle, selectedTextStyle, selectedButtonStyle, underlayColor = (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.primary, activeOpacity, onHideUnderlay, onShowUnderlay, setOpacityTo, disabled = false, disabledStyle, disabledTextStyle, disabledSelectedStyle, disabledSelectedTextStyle, vertical = false } = rest, attributes = __rest(rest, ["Component", "buttons", "onPress", "selectedIndex", "selectedIndexes", "selectMultiple", "containerStyle", "innerBorderStyle", "buttonStyle", "buttonContainerStyle", "textStyle", "selectedTextStyle", "selectedButtonStyle", "underlayColor", "activeOpacity", "onHideUnderlay", "onShowUnderlay", "setOpacityTo", "disabled", "disabledStyle", "disabledTextStyle", "disabledSelectedStyle", "disabledSelectedTextStyle", "vertical"]);
    let innerBorderWidth = 1;
    if (innerBorderStyle &&
        Object.prototype.hasOwnProperty.call(innerBorderStyle, 'width')) {
        innerBorderWidth = innerBorderStyle.width;
    }
    return (<View {...attributes} style={StyleSheet.flatten([
        styles.container,
        vertical && styles.verticalContainer,
        containerStyle && containerStyle,
    ])}>
      {buttons === null || buttons === void 0 ? void 0 : buttons.map((button, i) => {
        var _a, _b, _c, _d, _e, _f;
        const isSelected = selectedIndex === i || selectedIndexes.includes(i);
        const isDisabled = disabled === true ||
            (Array.isArray(disabled) && disabled.includes(i));
        return (<View key={i} style={StyleSheet.flatten([
            styles.button,
            vertical && styles.verticalComponent,
            i !== buttons.length - 1 &&
                (vertical
                    ? {
                        borderBottomWidth: innerBorderWidth,
                        borderBottomColor: (innerBorderStyle && innerBorderStyle.color) || ((_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.grey4),
                    }
                    : {
                        borderRightWidth: innerBorderWidth,
                        borderRightColor: (innerBorderStyle && innerBorderStyle.color) || ((_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.grey4),
                    }),
            buttonContainerStyle,
        ])}>
            <Component testID="buttonGroupItem" activeOpacity={activeOpacity} setOpacityTo={setOpacityTo} onHideUnderlay={onHideUnderlay} onShowUnderlay={onShowUnderlay} underlayColor={underlayColor} disabled={isDisabled} onPress={() => {
            if (selectMultiple) {
                if (selectedIndexes.includes(i)) {
                    onPress(selectedIndexes.filter((index) => index !== i));
                }
                else {
                    onPress([...selectedIndexes, i]);
                }
            }
            else {
                onPress(i);
            }
        }} style={styles.button}>
              <View style={StyleSheet.flatten([
            styles.textContainer,
            buttonStyle && buttonStyle,
            isSelected && {
                backgroundColor: (_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.primary,
            },
            isSelected && selectedButtonStyle && selectedButtonStyle,
            isDisabled && styles.disabled,
            isDisabled && disabledStyle,
            isDisabled &&
                isSelected && {
                backgroundColor: (_d = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _d === void 0 ? void 0 : _d.disabled,
            },
            isDisabled && isSelected && disabledSelectedStyle,
        ])}>
                {button.element ? (<button.element />) : (<Text testID="buttonGroupItemText" style={StyleSheet.flatten([
            Object.assign({ fontSize: normalizeText(13), color: (_e = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _e === void 0 ? void 0 : _e.grey2 }, Platform.select({
                android: {},
                default: {
                    fontWeight: '500',
                },
            })),
            textStyle && textStyle,
            isSelected && { color: '#fff' },
            isSelected && selectedTextStyle,
            isDisabled && {
                color: color((_f = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _f === void 0 ? void 0 : _f.disabled)
                    .darken(0.3)
                    .toString(),
            },
            isDisabled && disabledTextStyle,
            isDisabled && isSelected && disabledSelectedTextStyle,
        ])}>
                    {button}
                  </Text>)}
              </View>
            </Component>
          </View>);
    })}
    </View>);
};
const styles = StyleSheet.create({
    button: {
        flex: 1,
    },
    textContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    container: {
        marginHorizontal: 10,
        marginVertical: 5,
        borderColor: '#e3e3e3',
        borderWidth: 1,
        flexDirection: 'row',
        borderRadius: 3,
        overflow: 'hidden',
        backgroundColor: '#fff',
        height: 40,
    },
    verticalContainer: {
        flexDirection: 'column',
        height: null,
    },
    verticalComponent: {
        height: 40,
    },
    disabled: {
        backgroundColor: 'transparent',
    },
});
export { ButtonGroup };
export default withTheme(ButtonGroup, 'ButtonGroup');