1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
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}/>;
};
|
