diff options
author | Filip Zybała <fzybala@virtuslab.com> | 2020-05-12 14:58:05 +0200 |
---|---|---|
committer | Paweł Marks <Kordyjan@users.noreply.github.com> | 2020-05-21 15:26:00 +0200 |
commit | 25d826bb75a78eb674a63aed19f55e92d7ff8bca (patch) | |
tree | 72c0c1a04dd4cb301ee8d7a59fce90d5baea4662 /plugins/base/search-component/src/main/js/search/app-root.js | |
parent | 2ee83d06c9cc534b4f226dd30f294bc0588e8b4e (diff) | |
download | dokka-25d826bb75a78eb674a63aed19f55e92d7ff8bca.tar.gz dokka-25d826bb75a78eb674a63aed19f55e92d7ff8bca.tar.bz2 dokka-25d826bb75a78eb674a63aed19f55e92d7ff8bca.zip |
Migrated resources to base-plugin
Diffstat (limited to 'plugins/base/search-component/src/main/js/search/app-root.js')
-rw-r--r-- | plugins/base/search-component/src/main/js/search/app-root.js | 47 |
1 files changed, 47 insertions, 0 deletions
diff --git a/plugins/base/search-component/src/main/js/search/app-root.js b/plugins/base/search-component/src/main/js/search/app-root.js new file mode 100644 index 00000000..5d650581 --- /dev/null +++ b/plugins/base/search-component/src/main/js/search/app-root.js @@ -0,0 +1,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, true); + document.addEventListener("click", handleClickOutside, true); + return () => { + document.removeEventListener("keydown", handleHideDropdown, true); + document.removeEventListener("click", handleClickOutside, true); + }; + }); + + 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> +}
\ No newline at end of file |