@lunit/oui/dist/components/Button/Button.js

Lunit Oncology UI components

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { Box } from '@mui/system';
import BaseButton from './BaseButton';
import { CircularProgress } from '../Progress';
import theme from '../../theme';
import { isIconButton } from './Button.utils';
function Button(props) {
    if (isIconButton(props)) {
        const { icon, loading, onClick, disableRipple = true, focusOutline = false, ...otherProps } = props;
        return (_jsx(BaseButton, { ...otherProps, isIconOnly: true, disableRipple: disableRipple, focusOutline: focusOutline, onClick: loading
                ? (e) => {
                    e.preventDefault();
                }
                : onClick, children: loading ? (_jsx(CircularProgress, { circleColor: theme.palette.neutralGrey[0], size: 20, sx: {
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                } })) : (icon) }));
    }
    const { icon, label, size, focusOutline = false, disableRipple = true, loading, onClick, ...otherProps } = props;
    return (_jsx(BaseButton, { isIconOnly: false, variant: otherProps.variant ?? 'contained', disableRipple: disableRipple, size: size, color: otherProps.color, focusOutline: focusOutline, onClick: loading
            ? (e) => {
                e.preventDefault();
            }
            : onClick, sx: loading
            ? {
                '&:not(.loadingCircle)': {
                    color: 'transparent',
                },
            }
            : {}, ...otherProps, children: _jsxs(_Fragment, { children: [icon, label, loading && (_jsx(Box, { className: "loadingCircle", sx: {
                        position: 'absolute',
                        top: '50%',
                        left: '50%',
                        transform: 'translate3d(-50%, -50%, 0)',
                    }, children: _jsx(CircularProgress, { circleColor: theme.palette.neutralGrey[0], size: 20, sx: {
                            display: 'flex',
                            justifyContent: 'center',
                            alignItems: 'center',
                        } }) }))] }) }));
}
export default Button;