2025-07-16 17:53:50 +01:00
|
|
|
import React from 'react';
|
|
|
|
import { Button } from '@mantine/core';
|
|
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
|
|
|
|
export interface OperationButtonProps {
|
|
|
|
onClick?: () => void;
|
|
|
|
isLoading?: boolean;
|
|
|
|
disabled?: boolean;
|
|
|
|
loadingText?: string;
|
|
|
|
submitText?: string;
|
|
|
|
variant?: 'filled' | 'outline' | 'subtle';
|
|
|
|
color?: string;
|
|
|
|
fullWidth?: boolean;
|
|
|
|
mt?: string;
|
|
|
|
type?: 'button' | 'submit' | 'reset';
|
2025-08-01 16:08:04 +01:00
|
|
|
'data-testid'?: string;
|
2025-07-16 17:53:50 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
const OperationButton = ({
|
|
|
|
onClick,
|
|
|
|
isLoading = false,
|
|
|
|
disabled = false,
|
|
|
|
loadingText,
|
|
|
|
submitText,
|
|
|
|
variant = 'filled',
|
|
|
|
color = 'blue',
|
2025-08-15 14:43:30 +01:00
|
|
|
fullWidth = false,
|
2025-07-16 17:53:50 +01:00
|
|
|
mt = 'md',
|
2025-08-01 16:08:04 +01:00
|
|
|
type = 'button',
|
|
|
|
'data-testid': dataTestId
|
2025-07-16 17:53:50 +01:00
|
|
|
}: OperationButtonProps) => {
|
|
|
|
const { t } = useTranslation();
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Button
|
|
|
|
type={type}
|
|
|
|
onClick={onClick}
|
|
|
|
fullWidth={fullWidth}
|
2025-08-15 14:43:30 +01:00
|
|
|
mr='md'
|
|
|
|
ml='md'
|
2025-07-16 17:53:50 +01:00
|
|
|
mt={mt}
|
|
|
|
loading={isLoading}
|
|
|
|
disabled={disabled}
|
|
|
|
variant={variant}
|
|
|
|
color={color}
|
2025-08-01 16:08:04 +01:00
|
|
|
data-testid={dataTestId}
|
2025-08-15 14:43:30 +01:00
|
|
|
style={{ minHeight: '2.5rem' }}
|
2025-07-16 17:53:50 +01:00
|
|
|
>
|
2025-08-15 14:43:30 +01:00
|
|
|
{isLoading
|
2025-07-16 17:53:50 +01:00
|
|
|
? (loadingText || t("loading", "Loading..."))
|
|
|
|
: (submitText || t("submit", "Submit"))
|
|
|
|
}
|
|
|
|
</Button>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2025-08-15 14:43:30 +01:00
|
|
|
export default OperationButton;
|