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
|
import React, {useRef, useState, useEffect} from 'react';
import {WithFuzzySearchFilter} from './search';
import './app.css';
function useComponentVisible(initialIsVisible) {
const [isComponentVisible, setIsComponentVisible] = useState(initialIsVisible);
const ref = useRef(null);
const handleHideDropdown = (event) => {
if (event.key === "Escape") {
setIsComponentVisible(false);
}
};
const handleClickOutside = event => {
if (ref.current && !ref.current.contains(event.target)) {
setIsComponentVisible(false);
}
};
useEffect(() => {
document.addEventListener("keydown", handleHideDropdown, false);
document.addEventListener("click", handleClickOutside, false);
return () => {
document.removeEventListener("keydown", handleHideDropdown, false);
document.removeEventListener("click", handleClickOutside, false);
};
});
return { ref, isComponentVisible, setIsComponentVisible };
}
export const AppRoot = () => {
const {
ref,
isComponentVisible,
setIsComponentVisible
} = useComponentVisible(false);
return <div ref={ref} className="search-content">
{isComponentVisible && (<WithFuzzySearchFilter/>)}
{!isComponentVisible && (
<span onClick={() => setIsComponentVisible(true)}>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M19.64 18.36l-6.24-6.24a7.52 7.52 0 1 0-1.28 1.28l6.24 6.24zM7.5 13.4a5.9 5.9 0 1 1 5.9-5.9 5.91 5.91 0 0 1-5.9 5.9z"/></svg>
</span>)}
</div>
}
|
