@mtec-solutions-org/design-system/dist/components/atoms/button/Button.js

A React Native Web design system library with theme and components

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from "react";
import { StyledButton, StyledButtonText, StyledLoadingContainer, } from "./Button.styles";
import Spinner from "../spinner";
import { SPINNER_COLORS, SPINNER_SIZES, SPINNER_WIDTHS, } from "./Button.constants";
export default function Button({ children, onPress, variant = "primary", size = "md", disabled = false, isLoading = false, loadingText = "", fullWidth = false, }) {
    const isDisabled = useMemo(() => disabled || isLoading, [disabled, isLoading]);
    const spinnerColor = useMemo(() => {
        return SPINNER_COLORS[variant];
    }, [variant]);
    const spinnerSize = useMemo(() => {
        return SPINNER_SIZES[size];
    }, [size]);
    const spinnerWidth = useMemo(() => {
        return SPINNER_WIDTHS[size];
    }, [size]);
    return (_jsx(StyledButton, { onPress: isDisabled ? undefined : onPress, buttonVariant: variant, buttonSize: size, disabled: isDisabled, fullWidth: fullWidth, children: isLoading ? (_jsxs(StyledLoadingContainer, { children: [_jsx(Spinner, { size: spinnerSize, color: spinnerColor, width: spinnerWidth }), _jsx(StyledButtonText, { buttonVariant: variant, buttonSize: size, disabled: isDisabled, children: loadingText })] })) : (_jsx(StyledButtonText, { buttonVariant: variant, buttonSize: size, disabled: isDisabled, children: children })) }));
}