diff options
Diffstat (limited to 'plugins/base/frontend/src/main/components/search')
3 files changed, 143 insertions, 0 deletions
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..cc5a61ac --- /dev/null +++ b/plugins/base/frontend/src/main/components/search/search.scss @@ -0,0 +1,37 @@ +.search { + button { + border: none; + fill: #637282; + background: #F4F4F4; + + &:focus { + outline: none; + } + } +} + +.popup-wrapper { + min-width: calc(100% - 360px) !important; +} + +.indented { + text-indent: 10px; +} + +.disabled { + color: gray; +} + +.template-wrapper { + display: grid; + grid-template-columns: auto auto; +} + +.template-name { + justify-self: start; +} + +.template-description { + color: gray; + justify-self: end; +}
\ 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 new file mode 100644 index 00000000..c7b36654 --- /dev/null +++ b/plugins/base/frontend/src/main/components/search/search.tsx @@ -0,0 +1,75 @@ +import React, {useCallback, useState} from 'react'; +import {Select} from '@jetbrains/ring-ui'; +import {List} from '@jetbrains/ring-ui'; +import '@jetbrains/ring-ui/components/input-size/input-size.scss'; +import './search.scss'; +import {IWindow, Option, Props, Page} 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}} + 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> + ) +} + +const templateGenerator = (page:Page) => { + let classGenerator = (page:Page) => { + let classes = "" + if(page.level !== undefined) classes = classes + " indented" + if(page.disabled) classes = classes + " disabled" + return classes + } + return <div className="template-wrapper"> + <span className= {classGenerator(page)}>{page.name}</span> + <span className="template-description">{page.description}</span> + </div> +} + +export const WithFuzzySearchFilter = () => { + let data: Option[] = []; + const pages = (window as IWindow).pages; + if (pages) { + data = pages.map((page, i) => ({ + ...page, + label: page.searchKey, + key: i + 1, + type: page.kind, + template: templateGenerator(page), + rgItemType: List.ListProps.Type.CUSTOM + })); + } + + 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..881a16d8 --- /dev/null +++ b/plugins/base/frontend/src/main/components/search/types.ts @@ -0,0 +1,31 @@ +export type Page = { + name: string; + kind: string; + location: string; + searchKey: string; + level: number; + index: string; + description: string; + disabled: boolean; +} + +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 +} |