1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
import React, { useRef, useEffect } from "react";
import styles from "./Modal.module.css";
const Modal = ({
openModal,
setOpenModal,
onSuccessClick,
onCancelClick,
textAreaRef,
}) => {
const modalRef = useRef(null);
useEffect(() => {
const handleClickOutside = (event) => {
if (modalRef.current && !modalRef.current.contains(event.target)) {
setOpenModal(false);
if (textAreaRef.current) {
setTimeout(() => {
textAreaRef.current.focus();
}, 0);
}
}
};
const handleKeyDown = (event) => {
if (event.key === "Escape") {
setOpenModal(false);
if (textAreaRef.current) {
setTimeout(() => {
textAreaRef.current.focus();
}, 0);
}
} else if (
(event.key.toLowerCase() === "y" ||
event.key.toLowerCase() === "enter") &&
openModal
) {
onSuccessClick();
event.preventDefault();
setOpenModal(false);
} else if (event.key.toLowerCase() === "n" && openModal) {
onCancelClick();
setOpenModal(false);
}
};
document.addEventListener("mousedown", handleClickOutside);
document.addEventListener("keydown", handleKeyDown);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
document.removeEventListener("keydown", handleKeyDown);
};
}, [openModal]);
return (
openModal && (
<div className={`${styles.background} ${openModal && styles.active}`}>
<div ref={modalRef} className={styles.container}>
<button
className={styles.container__close}
onClick={() => setOpenModal(false)}
>
<span>✗</span>
</button>
<p className={styles.container__title}>
Encrypt content?{" "}
<span className={styles.container__title__span}>[Y/n]</span>
</p>
<div className={styles.container__actions}>
<button onClick={onSuccessClick}>Yes</button>
<button onClick={onCancelClick}>No</button>
</div>
</div>
</div>
)
);
};
export default Modal;
|