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
|
import React, { useCallback, useEffect, useState } from 'react';
import List from '@jetbrains/ring-ui/components/list/list';
import Select from '@jetbrains/ring-ui/components/select/select';
import '@jetbrains/ring-ui/components/input-size/input-size.css';
import './search.scss';
import { IWindow, Option, Props } from "./types";
import { DokkaSearchAnchor } from "./dokkaSearchAnchor";
import { DokkaFuzzyFilterComponent } from "./dokkaFuzzyFilter";
import { relativizeUrlForRequest } from '../utils/requests';
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">
<DokkaFuzzyFilterComponent
id="pages-search"
selectedLabel="Search"
label="Please type page name"
filter={true}
type={Select.Type.CUSTOM}
clear
renderOptimization
disableScrollToActive
selected={selected}
data={data}
popupClassName={"popup-wrapper"}
onSelect={onChangeSelected}
customAnchor={({ wrapperProps, buttonProps, popup }) =>
<DokkaSearchAnchor wrapperProps={wrapperProps} buttonProps={buttonProps} popup={popup} />
}
/>
</div>
</div>
)
}
export const WithFuzzySearchFilter = () => {
const [navigationList, setNavigationList] = useState<Option[]>([]);
useEffect(() => {
fetch(relativizeUrlForRequest('scripts/pages.json'))
.then(response => response.json())
.then((result) => {
setNavigationList(result.map((record: Option, idx: number) => {
return {
...record,
label: record.name,
key: idx,
type: record.kind,
rgItemType: List.ListProps.Type.CUSTOM
}
}))
},
(error) => {
console.error('failed to fetch pages data', error)
setNavigationList([])
})
}, [])
return <WithFuzzySearchFilterComponent data={navigationList} />;
};
|
