blob: 993fa163f468dfca05b29296e73ab50aa45d6f2a (
plain)
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
|
import React, { useRef, useState, useEffect } from "react";
import styles from "./ToolTip.module.css";
const ToolTip = ({ isOpen, setIsOpen, textAreaRef }) => {
const toolTipRef = useRef(null);
const handleClickOutside = (event) => {
if (toolTipRef.current && !toolTipRef.current.contains(event.target)) {
setIsOpen(false);
}
};
const handleKeyDown = (event) => {
if (
isOpen &&
(event.key === "Escape" ||
(event.ctrlKey && (event.key === "k" || event.key === "l")))
) {
setIsOpen(false);
if (textAreaRef.current) {
textAreaRef.current.focus();
}
}
};
useEffect(() => {
document.addEventListener("mousedown", handleClickOutside);
document.addEventListener("keydown", handleKeyDown);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
document.removeEventListener("keydown", handleKeyDown);
};
}, [isOpen]);
return (
isOpen && (
<div ref={toolTipRef} className={`${styles.container} ${styles.active}`}>
<img
className={styles.container__triangle}
src="/assets/icons/triangle.png"
/>
<div className={styles.container__content}>
<p className={styles.container__title}>Keyboard Shortcuts</p>
<p className={styles.container__text}>
Press <span className={styles.container__key}>Ctrl+K</span> to view
keyboard shortcuts.
</p>
<span
className={styles.container__btn}
onClick={() => setIsOpen(false)}
>
Close
</span>
</div>
</div>
)
);
};
export default ToolTip;
|