1 | import React, {useState, useEffect} from "react";
|
---|
2 | import ModalNameField from "../Components/ModalNameField.jsx";
|
---|
3 | import ModalDescriptionField from "../Components/ModalDescriptionField.jsx";
|
---|
4 | import ModalSaveButton from "../Components/ModalSaveButton.jsx";
|
---|
5 | import Modal from "../Components/Modal.jsx";
|
---|
6 | import ModalRoomTypes from "../Components/ModalRoomTypes.jsx";
|
---|
7 | import useModalState from "../Hooks/useModalState.jsx";
|
---|
8 | import {useModalEvent} from "../Hooks/useModalEvent.jsx";
|
---|
9 |
|
---|
10 | export default function RoomModal({map,roomTypes}) {
|
---|
11 | const {
|
---|
12 | modalState: {isOpen,setIsOpen,setShape,shapeInfo,setShapeInfo},
|
---|
13 | handlers: {toggleModal,updateModalData,saveDetails}
|
---|
14 | } = useModalState(map);
|
---|
15 |
|
---|
16 |
|
---|
17 | useModalEvent((event) => {
|
---|
18 | const shape = event.detail.room;
|
---|
19 | setShape(shape);
|
---|
20 | setShapeInfo(shape.info);
|
---|
21 | setIsOpen(true);
|
---|
22 |
|
---|
23 | },"openRoomModalEvent")
|
---|
24 |
|
---|
25 |
|
---|
26 |
|
---|
27 | return (
|
---|
28 | <Modal isOpen={isOpen} toggleModal={toggleModal} title={"Enter Room Details"}>
|
---|
29 | <ModalNameField shapeInfo={shapeInfo} updateModalData={updateModalData}/>
|
---|
30 | <ModalRoomTypes updateModalData={updateModalData} shapeInfo={shapeInfo} roomTypes={roomTypes}/>
|
---|
31 | <ModalDescriptionField shapeInfo={shapeInfo} updateModalData={updateModalData}/>
|
---|
32 | <ModalSaveButton saveDetails={saveDetails}/>
|
---|
33 | </Modal>
|
---|
34 | );
|
---|
35 | }
|
---|