56 lines
1.4 KiB
JavaScript
56 lines
1.4 KiB
JavaScript
import React, { useState, useContext } from "react";
|
|
import { IconButton } from "theme-ui";
|
|
|
|
import SelectMapModal from "../../modals/SelectMapModal";
|
|
import SelectMapIcon from "../../icons/SelectMapIcon";
|
|
|
|
import MapDataContext from "../../contexts/MapDataContext";
|
|
import MapInteractionContext from "../../contexts/MapInteractionContext";
|
|
|
|
function SelectMapButton({
|
|
onMapChange,
|
|
onMapStateChange,
|
|
currentMap,
|
|
currentMapState,
|
|
}) {
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
|
|
const { setPreventMapInteraction } = useContext(MapInteractionContext);
|
|
const { updateMapState } = useContext(MapDataContext);
|
|
function openModal() {
|
|
currentMapState && updateMapState(currentMapState.mapId, currentMapState);
|
|
setIsModalOpen(true);
|
|
setPreventMapInteraction(true);
|
|
}
|
|
function closeModal() {
|
|
setIsModalOpen(false);
|
|
setPreventMapInteraction(false);
|
|
}
|
|
|
|
function handleDone() {
|
|
closeModal();
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<IconButton
|
|
aria-label="Select Map"
|
|
title="Select Map"
|
|
onClick={openModal}
|
|
>
|
|
<SelectMapIcon />
|
|
</IconButton>
|
|
<SelectMapModal
|
|
isOpen={isModalOpen}
|
|
onRequestClose={closeModal}
|
|
onDone={handleDone}
|
|
onMapChange={onMapChange}
|
|
onMapStateChange={onMapStateChange}
|
|
currentMap={currentMap}
|
|
/>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default SelectMapButton;
|