2023-12-15 17:34:50 +03:00
|
|
|
|
import clsx from 'clsx';
|
|
|
|
|
|
2023-08-22 17:52:59 +03:00
|
|
|
|
interface SubmitButtonProps
|
2023-12-17 20:19:28 +03:00
|
|
|
|
extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'title'> {
|
2023-08-22 17:52:59 +03:00
|
|
|
|
text?: string
|
|
|
|
|
tooltip?: string
|
2023-07-16 20:25:55 +03:00
|
|
|
|
loading?: boolean
|
2023-07-22 03:18:48 +03:00
|
|
|
|
icon?: React.ReactNode
|
2023-09-15 23:29:52 +03:00
|
|
|
|
dimensions?: string
|
2023-07-15 17:46:19 +03:00
|
|
|
|
}
|
|
|
|
|
|
2023-08-22 17:52:59 +03:00
|
|
|
|
function SubmitButton({
|
2023-12-17 20:19:28 +03:00
|
|
|
|
text = 'ОК', icon, disabled, tooltip, loading, className,
|
2023-11-30 02:14:24 +03:00
|
|
|
|
dimensions = 'w-fit h-fit', ...restProps
|
2023-08-22 17:52:59 +03:00
|
|
|
|
}: SubmitButtonProps) {
|
2023-07-15 17:46:19 +03:00
|
|
|
|
return (
|
2023-11-06 02:20:16 +03:00
|
|
|
|
<button type='submit'
|
|
|
|
|
title={tooltip}
|
2023-12-15 17:34:50 +03:00
|
|
|
|
className={clsx(
|
2023-12-17 20:19:28 +03:00
|
|
|
|
'px-3 py-2 inline-flex items-center gap-2 align-middle justify-center',
|
2023-12-15 17:34:50 +03:00
|
|
|
|
'border',
|
|
|
|
|
'font-semibold',
|
|
|
|
|
'clr-btn-primary',
|
|
|
|
|
'select-none disabled:cursor-not-allowed',
|
|
|
|
|
loading && 'cursor-progress',
|
2023-12-17 20:19:28 +03:00
|
|
|
|
dimensions,
|
|
|
|
|
className
|
2023-12-15 17:34:50 +03:00
|
|
|
|
)}
|
2023-11-06 02:20:16 +03:00
|
|
|
|
disabled={disabled ?? loading}
|
2023-11-30 02:14:24 +03:00
|
|
|
|
{...restProps}
|
2023-11-06 02:20:16 +03:00
|
|
|
|
>
|
2023-11-27 11:33:34 +03:00
|
|
|
|
{icon ? <span>{icon}</span> : null}
|
|
|
|
|
{text ? <span>{text}</span> : null}
|
2023-11-06 02:20:16 +03:00
|
|
|
|
</button>);
|
2023-07-15 17:46:19 +03:00
|
|
|
|
}
|
|
|
|
|
|
2023-12-13 14:32:57 +03:00
|
|
|
|
export default SubmitButton;
|