TenderReact/src/widgets/EditAuctionModal/EditAuctionModal.tsx
2023-12-19 16:23:03 +03:00

66 lines
2.5 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import React, {useState, useEffect} from "react";
import { ButtonUi, ButtonUiType } from "../../shared/UI/ButtonUi";
import Modal from 'react-bootstrap/Modal';
import Form from 'react-bootstrap/Form';
import { AuctionItem } from "../../types";
interface AddAuctionModalProps {
showModal: boolean,
onHide: () => void,
currentAuction: AuctionItem,
editAuctionItem: (newAuctionName:string, currentEditAuctionId:string) => void
}
export const EditAuctionModal:React.FC<AddAuctionModalProps> = ({showModal, onHide, currentAuction, editAuctionItem}) => {
const [newAuctionName, setNewAuctionName] = useState('')
useEffect(() => {
currentAuction ? setNewAuctionName(currentAuction.name) : setNewAuctionName('')
}, [currentAuction])
const editAuction = () => {
editAuctionItem(newAuctionName, currentAuction.uuid)
onHide()
}
return (
<Modal
show={showModal}
onHide={onHide}
size="lg"
aria-labelledby="contained-modal-title-vcenter"
centered
>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
Редактировать аукцион {currentAuction.uuid}
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form>
<Form.Group className="mb-3" controlId="exampleForm.ControlInput2">
<Form.Label>Название аукциона*</Form.Label>
<Form.Control
type="text"
placeholder="Название аукциона*"
value={newAuctionName}
onChange={(e) => setNewAuctionName(e.target.value)}
autoFocus
/>
</Form.Group>
<Form.Group
className="mb-3"
controlId="exampleForm.ControlTextarea1"
>
<Form.Label>Комментарий к аукциону</Form.Label>
<Form.Control as="textarea" rows={3} />
</Form.Group>
</Form>
</Modal.Body>
<Modal.Footer>
<ButtonUi title={'Сохранить изменения'} variant={ButtonUiType.PRIMARY} event={editAuction}/>
</Modal.Footer>
</Modal>
)
}