GGLinnk/foris-js
1
0
Fork 0
mirror of https://gitlab.nic.cz/turris/reforis/foris-js.git synced 2024-12-25 00:11:36 +01:00
Code Issues Releases Activity

Add closing bootstrap modal using ESC

Browse Source
This commit is contained in:
Aleksandr Gumroian 2020-09-18 11:26:04 +02:00
parent bdc8726791
commit 913a7d7b75
No known key found for this signature in database
GPG Key ID: 9E77849C64F0A733
1 changed files with 15 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/bootstrap/Modal.js
View File

@ -1,11 +1,11 @@
/* /*
* Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/) * Copyright (C) 2020 CZ.NIC z.s.p.o. (http://www.nic.cz/)
* *
* This is free software, licensed under the GNU General Public License v3. * This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information. * See /LICENSE for more information.
*/ */
import React, { useRef } from "react"; import React, { useRef, useEffect } from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { Portal } from "../utils/Portal"; import { Portal } from "../utils/Portal";
@ -31,6 +31,19 @@ export function Modal({ shown, setShown, scrollable, children }) {
useClickOutside(dialogRef, () => setShown(false)); useClickOutside(dialogRef, () => setShown(false));
useEffect(() => {
const handleEsc = (event) => {
if (event.keyCode === 27) {
setShown(false);
}
};
window.addEventListener("keydown", handleEsc);
return () => {
window.removeEventListener("keydown", handleEsc);
};
}, [setShown]);
return ( return (
<Portal containerId="modal-container"> <Portal containerId="modal-container">
<div className={`modal fade ${shown ? "show" : ""}`} role="dialog"> <div className={`modal fade ${shown ? "show" : ""}`} role="dialog">