diff options
Diffstat (limited to 'plugins/base/frontend/src/main/components/app')
-rw-r--r-- | plugins/base/frontend/src/main/components/app/index.scss | 8 | ||||
-rw-r--r-- | plugins/base/frontend/src/main/components/app/index.tsx | 45 |
2 files changed, 10 insertions, 43 deletions
diff --git a/plugins/base/frontend/src/main/components/app/index.scss b/plugins/base/frontend/src/main/components/app/index.scss index c267bc6e..da5042b1 100644 --- a/plugins/base/frontend/src/main/components/app/index.scss +++ b/plugins/base/frontend/src/main/components/app/index.scss @@ -17,5 +17,11 @@ html, } .search-content { - padding: 24px 41px; + padding-top: 24px; + margin: 0 41px; + position: absolute; + top: 0; + right: 0; + z-index: 8; + background-color: #f4f4f4 } diff --git a/plugins/base/frontend/src/main/components/app/index.tsx b/plugins/base/frontend/src/main/components/app/index.tsx index 1a51e699..4081dec4 100644 --- a/plugins/base/frontend/src/main/components/app/index.tsx +++ b/plugins/base/frontend/src/main/components/app/index.tsx @@ -1,49 +1,10 @@ -import React, {useEffect, useRef, useState} from 'react'; +import React from 'react'; import {WithFuzzySearchFilter} from '../search/search'; import './index.scss'; -function useComponentVisible(initialIsVisible: boolean) { - const [isComponentVisible, setIsComponentVisible] = useState(initialIsVisible); - const ref = useRef(null); - - const handleHideDropdown = (event: KeyboardEvent) => { - if (event.key === "Escape") { - setIsComponentVisible(false); - } - }; - - const handleClickOutside = (event : MouseEvent)=> { - // @ts-ignore - 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 }; -} - const App: React.FC = () => { - 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>)} + return <div className="search-content"> + <WithFuzzySearchFilter/> </div> } |