diff options
Diffstat (limited to 'plugins/base/frontend')
4 files changed, 39 insertions, 44 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> } diff --git a/plugins/base/frontend/src/main/components/search/search.scss b/plugins/base/frontend/src/main/components/search/search.scss new file mode 100644 index 00000000..a891283e --- /dev/null +++ b/plugins/base/frontend/src/main/components/search/search.scss @@ -0,0 +1,14 @@ +.search { + button { + border: none; + fill: #637282; + + &:focus { + outline: none; + } + } +} + +.popup-wrapper { + min-width: calc(100% - 360px) !important; +}
\ No newline at end of file diff --git a/plugins/base/frontend/src/main/components/search/search.tsx b/plugins/base/frontend/src/main/components/search/search.tsx index f0df0c98..b0fdd96a 100644 --- a/plugins/base/frontend/src/main/components/search/search.tsx +++ b/plugins/base/frontend/src/main/components/search/search.tsx @@ -1,7 +1,8 @@ import React, {useCallback, useState} from 'react'; import {Select} from '@jetbrains/ring-ui'; import '@jetbrains/ring-ui/components/input-size/input-size.scss'; -import {IWindow, Option, Props, State} from "./types"; +import './search.scss'; +import {IWindow, Option, Props} from "./types"; const WithFuzzySearchFilterComponent: React.FC<Props> = ({data}: Props) => { const [selected, onSelected] = useState<Option>(data[0]); @@ -12,6 +13,7 @@ const WithFuzzySearchFilterComponent: React.FC<Props> = ({data}: Props) => { }, [data] ); + return ( <div className="search-container"> <div className="search"> @@ -19,10 +21,22 @@ const WithFuzzySearchFilterComponent: React.FC<Props> = ({data}: Props) => { selectedLabel="Search" label="Please type page name" filter={{fuzzy: true}} + type={Select.Type.CUSTOM} clear selected={selected} data={data} + popupClassName={"popup-wrapper"} onSelect={onChangeSelected} + customAnchor={({wrapperProps, buttonProps, popup}) => ( + <span {...wrapperProps}> + <button type="button" {...buttonProps}> + <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> + </button> + {popup} + </span> + )} /> </div> </div> |