@kietpt2003/react-native-core-ui/dist/Buttons/Button.js

React Native Core UI components by KietPT

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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ActivityIndicator, StyleSheet, TouchableOpacity, View, } from 'react-native';
import { colors } from '../themes';
import { scale } from '../utils';
import Text from '../Texts/Text';
const Button = (_a) => {
    var { title, startIcon, startIconStyle, endIcon, endIconStyle, style, titleStyle, activeBgColor = colors.primary, inactiveBgColor = colors.gray_B3B3B3, disabled, isSubmit, indicatorSize, onPress, variant = 'filled', borderColor = colors.primary, titleProps } = _a, rest = __rest(_a, ["title", "startIcon", "startIconStyle", "endIcon", "endIconStyle", "style", "titleStyle", "activeBgColor", "inactiveBgColor", "disabled", "isSubmit", "indicatorSize", "onPress", "variant", "borderColor", "titleProps"]);
    const backgroundColor = disabled
        ? inactiveBgColor
        : variant === 'outline'
            ? colors.white
            : activeBgColor;
    return (_jsxs(TouchableOpacity, Object.assign({}, rest, { disabled: disabled || isSubmit, onPress: onPress, style: [
            styles.btnContainer,
            variant === 'outline' && styles.btnContainerOutline,
            { backgroundColor },
            variant === 'outline' && { borderColor },
            style,
        ], children: [startIcon ? _jsx(View, { style: [styles.viewIconStart, startIconStyle], children: startIcon }) : null, isSubmit ? (_jsx(ActivityIndicator, { size: indicatorSize || 'small', color: variant === 'outline' ? colors.primary : colors.white })) : (_jsx(Text, Object.assign({ style: [
                    styles.textTitle,
                    variant === 'outline' ? styles.textTitleOutline : {},
                    titleStyle,
                ], numberOfLines: 1 }, titleProps, { children: title }))), endIcon ? _jsx(View, { style: [styles.viewIconEnd, endIconStyle], children: endIcon }) : null] })));
};
const styles = StyleSheet.create({
    btnContainer: {
        flexDirection: 'row',
        paddingHorizontal: scale(24),
        paddingVertical: scale(10),
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: scale(5),
    },
    btnContainerOutline: {
        paddingHorizontal: scale(23),
        paddingVertical: scale(9),
        borderWidth: scale(1),
        backgroundColor: colors.white,
        borderColor: colors.primary,
    },
    viewIconStart: {
        marginRight: scale(16),
    },
    viewIconEnd: {
        marginLeft: scale(16),
    },
    textTitle: {
        color: colors.white,
        lineHeight: scale(20),
    },
    textTitleOutline: {
        color: colors.primary,
    },
});
Button.displayName = 'Button';
export default Button;