diff options
Diffstat (limited to 'core/search-component/src/main')
6 files changed, 147 insertions, 0 deletions
diff --git a/core/search-component/src/main/components/app/index.scss b/core/search-component/src/main/components/app/index.scss new file mode 100644 index 00000000..a7406115 --- /dev/null +++ b/core/search-component/src/main/components/app/index.scss @@ -0,0 +1,21 @@ +@import "src/main/scss/index"; + +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 { + margin: calc(var(--ring-unit) * 4); +} diff --git a/core/search-component/src/main/components/app/index.tsx b/core/search-component/src/main/components/app/index.tsx new file mode 100644 index 00000000..3427c1ce --- /dev/null +++ b/core/search-component/src/main/components/app/index.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import {WithFuzzySearchFilter} from '../search/search'; +import './index.scss'; + +const App: React.FC = () => ( + <div className="search-content"> + <WithFuzzySearchFilter/> + </div> +) + +export default App diff --git a/core/search-component/src/main/components/root.tsx b/core/search-component/src/main/components/root.tsx new file mode 100644 index 00000000..70ed9550 --- /dev/null +++ b/core/search-component/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/core/search-component/src/main/components/search/search.tsx b/core/search-component/src/main/components/search/search.tsx new file mode 100644 index 00000000..f0df0c98 --- /dev/null +++ b/core/search-component/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/core/search-component/src/main/components/search/types.ts b/core/search-component/src/main/components/search/types.ts new file mode 100644 index 00000000..2900153a --- /dev/null +++ b/core/search-component/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/core/search-component/src/main/scss/index.scss b/core/search-component/src/main/scss/index.scss new file mode 100644 index 00000000..74af970d --- /dev/null +++ b/core/search-component/src/main/scss/index.scss @@ -0,0 +1 @@ +@import "~@jetbrains/ring-ui/components/global/variables.css"; |