2019-03-27 09:36:14 +01:00
|
|
|
/**
|
|
|
|
* React component for a popup content container
|
|
|
|
*
|
|
|
|
* Takes in a prop for rendering the content inside the popup
|
|
|
|
*/
|
2021-08-18 06:51:51 +02:00
|
|
|
import React, { useEffect } from "react";
|
2019-03-27 09:36:14 +01:00
|
|
|
|
2021-06-14 21:42:38 +02:00
|
|
|
interface IProps<T> {
|
2021-09-05 01:09:30 +02:00
|
|
|
content: (props: T) => React.ReactElement;
|
|
|
|
id: string;
|
|
|
|
props: T;
|
2021-09-09 18:52:43 +02:00
|
|
|
removePopup: () => void;
|
2019-03-27 09:36:14 +01:00
|
|
|
}
|
|
|
|
|
2021-06-14 21:42:38 +02:00
|
|
|
export function Popup<T>(props: IProps<T>): React.ReactElement {
|
2021-09-05 01:09:30 +02:00
|
|
|
function keyDown(event: KeyboardEvent): void {
|
2021-09-09 18:52:43 +02:00
|
|
|
if (event.key === "Escape") props.removePopup();
|
2021-09-05 01:09:30 +02:00
|
|
|
}
|
2021-08-18 06:51:51 +02:00
|
|
|
|
2021-09-05 01:09:30 +02:00
|
|
|
useEffect(() => {
|
|
|
|
document.addEventListener("keydown", keyDown);
|
|
|
|
return () => {
|
|
|
|
document.removeEventListener("keydown", keyDown);
|
|
|
|
};
|
|
|
|
});
|
2021-08-18 06:51:51 +02:00
|
|
|
|
2021-09-05 01:09:30 +02:00
|
|
|
return (
|
|
|
|
<div className={"popup-box-content"} id={`${props.id}-content`}>
|
|
|
|
{React.createElement(props.content, props.props)}
|
|
|
|
</div>
|
|
|
|
);
|
2019-03-27 09:36:14 +01:00
|
|
|
}
|