49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
import React from "react";
|
|
|
|
import CellData from "./CellData";
|
|
import styles from "../styles/Sidebar.module.css";
|
|
|
|
interface Cell {
|
|
x: number;
|
|
y: number;
|
|
form_id: number;
|
|
}
|
|
|
|
type Props = {
|
|
selectedCell: [number, number] | null;
|
|
setSelectedCell: (cell: [number, number] | null) => void;
|
|
map: React.MutableRefObject<mapboxgl.Map | null>;
|
|
};
|
|
|
|
const Sidebar: React.FC<Props> = ({ selectedCell, setSelectedCell, map }) => {
|
|
const onClose = () => {
|
|
setSelectedCell(null);
|
|
if (map.current) map.current.removeFeatureState({ source: "grid-source" });
|
|
if (map.current && map.current.getLayer("selected-cell-layer")) {
|
|
map.current.removeLayer("selected-cell-layer");
|
|
}
|
|
if (map.current && map.current.getSource("selected-cell-source")) {
|
|
map.current.removeSource("selected-cell-source");
|
|
}
|
|
requestAnimationFrame(() => {
|
|
if (map.current) map.current.resize();
|
|
});
|
|
};
|
|
|
|
return (
|
|
selectedCell && (
|
|
<div className={styles.sidebar}>
|
|
<button className={styles.close} onClick={onClose}>
|
|
✖
|
|
</button>
|
|
<h1>
|
|
Cell {selectedCell[0]}, {selectedCell[1]}
|
|
</h1>
|
|
{selectedCell && <CellData selectedCell={selectedCell} />}
|
|
</div>
|
|
)
|
|
);
|
|
};
|
|
|
|
export default Sidebar;
|