diff options
Diffstat (limited to 'plugins/base/frontend/src')
7 files changed, 189 insertions, 0 deletions
diff --git a/plugins/base/frontend/src/main/components/app/index.scss b/plugins/base/frontend/src/main/components/app/index.scss new file mode 100644 index 00000000..c267bc6e --- /dev/null +++ b/plugins/base/frontend/src/main/components/app/index.scss @@ -0,0 +1,21 @@ +@import "src/main/scss/index.scss"; + +html, +.app-root { + height: 100%; +} + +.search-root { + margin: 0; + padding: 0; + + background: var(--ring-content-background-color); + + font-family: var(--ring-font-family); + font-size: var(--ring-font-size); + line-height: var(--ring-line-height); +} + +.search-content { + padding: 24px 41px; +} diff --git a/plugins/base/frontend/src/main/components/app/index.tsx b/plugins/base/frontend/src/main/components/app/index.tsx new file mode 100644 index 00000000..1a51e699 --- /dev/null +++ b/plugins/base/frontend/src/main/components/app/index.tsx @@ -0,0 +1,50 @@ +import React, {useEffect, useRef, useState} 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>)} + </div> +} + +export default App diff --git a/plugins/base/frontend/src/main/components/root.tsx b/plugins/base/frontend/src/main/components/root.tsx new file mode 100644 index 00000000..70ed9550 --- /dev/null +++ b/plugins/base/frontend/src/main/components/root.tsx @@ -0,0 +1,43 @@ +import React from 'react'; +import {render} from 'react-dom'; +import RedBox from 'redbox-react'; + +import App from "./app"; +import './app/index.scss'; + +const appEl = document.getElementById('searchBar'); +const rootEl = document.createElement('div'); + +let renderApp = () => { + render( + <App/>, + rootEl + ); +}; + +// @ts-ignore +if (module.hot) { + const renderAppHot = renderApp; + const renderError = (error: Error) => { + render( + <RedBox error={error}/>, + rootEl + ); + }; + + renderApp = () => { + try { + renderAppHot(); + } catch (error) { + renderError(error); + } + }; + + // @ts-ignore + module.hot.accept('./app', () => { + setTimeout(renderApp); + }); +} + +renderApp(); +appEl!.appendChild(rootEl); diff --git a/plugins/base/frontend/src/main/components/search/search.tsx b/plugins/base/frontend/src/main/components/search/search.tsx new file mode 100644 index 00000000..f0df0c98 --- /dev/null +++ b/plugins/base/frontend/src/main/components/search/search.tsx @@ -0,0 +1,45 @@ +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"; + +const WithFuzzySearchFilterComponent: React.FC<Props> = ({data}: Props) => { + const [selected, onSelected] = useState<Option>(data[0]); + const onChangeSelected = useCallback( + (option: Option) => { + window.location.replace(`${(window as IWindow).pathToRoot}${option.location}?query=${option.name}`) + onSelected(option); + }, + [data] + ); + return ( + <div className="search-container"> + <div className="search"> + <Select + selectedLabel="Search" + label="Please type page name" + filter={{fuzzy: true}} + clear + selected={selected} + data={data} + onSelect={onChangeSelected} + /> + </div> + </div> + ) +} + +export const WithFuzzySearchFilter = () => { + let data: Option[] = []; + const pages = (window as IWindow).pages; + if (pages) { + data = pages.map((page, i) => ({ + ...page, + label: page.name, + key: i + 1, + type: page.kind + })); + } + + return <WithFuzzySearchFilterComponent data={data}/>; +}; diff --git a/plugins/base/frontend/src/main/components/search/types.ts b/plugins/base/frontend/src/main/components/search/types.ts new file mode 100644 index 00000000..2900153a --- /dev/null +++ b/plugins/base/frontend/src/main/components/search/types.ts @@ -0,0 +1,26 @@ +export type Page = { + name: string; + kind: string; + location: string; +} + +export type Option = Page & { + label: string; + key: number; + location: string; + name: string; +} + +export type IWindow = typeof window & { + pathToRoot: string + pages: Page[] +} + +export type Props = { + data: Option[] +}; + + +export type State = { + selected: any +} diff --git a/plugins/base/frontend/src/main/scss/index.scss b/plugins/base/frontend/src/main/scss/index.scss new file mode 100644 index 00000000..74af970d --- /dev/null +++ b/plugins/base/frontend/src/main/scss/index.scss @@ -0,0 +1 @@ +@import "~@jetbrains/ring-ui/components/global/variables.css"; diff --git a/plugins/base/frontend/src/main/types/@jetbrains/index.d.ts b/plugins/base/frontend/src/main/types/@jetbrains/index.d.ts new file mode 100644 index 00000000..1dc9983c --- /dev/null +++ b/plugins/base/frontend/src/main/types/@jetbrains/index.d.ts @@ -0,0 +1,3 @@ +declare module '@jetbrains/ring-ui' { + export const Select: any; +} |