56 lines
1.3 KiB
TypeScript
56 lines
1.3 KiB
TypeScript
import type { ButtonProps } from '@mui/material';
|
||
import type { FC, RefObject } from 'react';
|
||
|
||
import { Button } from '@mui/material';
|
||
|
||
import type { IncomeListItem } from '@/entity/incomes/item';
|
||
|
||
import { EditIncomeItemForm } from '@/entity/incomes/item';
|
||
import { DataTestId } from '@/shared/constants';
|
||
import { Modal } from '@/shared/ui/Modal';
|
||
|
||
import { useIncomeItemButton } from '../hooks/useIncomeItemButton';
|
||
|
||
type EditIncomeItemButtonProps = ButtonProps & {
|
||
item: IncomeListItem;
|
||
ref?: RefObject<HTMLButtonElement>;
|
||
};
|
||
|
||
const EditIncomeItemButton: FC<EditIncomeItemButtonProps> = (props) => {
|
||
const {
|
||
item,
|
||
onClick,
|
||
ref,
|
||
...restProps
|
||
} = props;
|
||
|
||
const {
|
||
isOpen,
|
||
isPending,
|
||
onClickHandler,
|
||
onCloseModalHandler,
|
||
onFormSubmitHandler,
|
||
} = useIncomeItemButton({ item, onClick });
|
||
|
||
return (
|
||
<>
|
||
<Button
|
||
data-testid={DataTestId.EDIT_INCOME_ITEM_BUTTON}
|
||
disabled={isPending}
|
||
onClick={onClickHandler}
|
||
ref={ref}
|
||
size="small"
|
||
{...restProps}
|
||
>
|
||
Редактировать
|
||
</Button>
|
||
|
||
<Modal onClose={onCloseModalHandler} open={isOpen || isPending}>
|
||
<EditIncomeItemForm disabled={isPending} item={item} onSubmit={onFormSubmitHandler} />
|
||
</Modal>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default EditIncomeItemButton;
|