52 lines
1.2 KiB
TypeScript
52 lines
1.2 KiB
TypeScript
import { AddExpenseItemForm } from '@/entity/expenses/item';
|
||
import { Modal } from '@/shared/ui/Modal';
|
||
|
||
import { useAddExpenseItemButton } from '../hooks/useAddExpenseItemButton';
|
||
|
||
import type { ExpenseList } from '@/entity/expenses/list';
|
||
import type { ButtonHTMLAttributes, FC, RefObject } from 'react';
|
||
|
||
type BaseButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
|
||
|
||
type AddExpenseItemButtonProps = BaseButtonProps & {
|
||
listId: ExpenseList['id'];
|
||
ref?: RefObject<HTMLButtonElement>;
|
||
};
|
||
|
||
const AddExpenseItemButton: FC<AddExpenseItemButtonProps> = (props) => {
|
||
const {
|
||
listId,
|
||
ref,
|
||
onClick,
|
||
...buttonProps
|
||
} = props;
|
||
|
||
const {
|
||
isOpen,
|
||
isPending,
|
||
onClickHandler,
|
||
onCloseModalHandler,
|
||
onFormSubmitHandler,
|
||
} = useAddExpenseItemButton({ listId, onClick });
|
||
|
||
return (
|
||
<>
|
||
<button
|
||
ref={ref}
|
||
type="button"
|
||
onClick={onClickHandler}
|
||
{...buttonProps}
|
||
>
|
||
Добавить элемент
|
||
</button>
|
||
|
||
<Modal open={isOpen} onClose={onCloseModalHandler}>
|
||
<AddExpenseItemForm disabled={isPending} onSubmit={onFormSubmitHandler} />
|
||
</Modal>
|
||
</>
|
||
|
||
);
|
||
};
|
||
|
||
export default AddExpenseItemButton;
|