aboutsummaryrefslogtreecommitdiff
path: root/plugins/base/frontend/src/main/components/app
diff options
context:
space:
mode:
Diffstat (limited to 'plugins/base/frontend/src/main/components/app')
-rw-r--r--plugins/base/frontend/src/main/components/app/index.scss8
-rw-r--r--plugins/base/frontend/src/main/components/app/index.tsx45
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>
}