Create navigation search component

3 files changed, 113 insertions, 0 deletions

diff --git a/plugins/base/frontend/src/main/components/navigationPaneSearch/clear.svg b/plugins/base/frontend/src/main/components/navigationPaneSearch/clear.svg
new file mode 100644
index 00000000..ad6a2026
--- /dev/null
+++ b/plugins/base/frontend/src/main/components/navigationPaneSearch/clear.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.1374 1.80464L6.94205 5.99996L11.1374 10.1953L10.1947 11.138L5.99935 6.94267L1.80403 11.138L0.861328 10.1953L5.05664 5.99996L0.861328 1.80464L1.80403 0.861938L5.99935 5.05725L10.1947 0.861938L11.1374 1.80464Z" fill="#637282"/>
+</svg>
diff --git a/plugins/base/frontend/src/main/components/navigationPaneSearch/navigationPaneSearch.scss b/plugins/base/frontend/src/main/components/navigationPaneSearch/navigationPaneSearch.scss
new file mode 100644
index 00000000..b5714ca4
--- /dev/null
+++ b/plugins/base/frontend/src/main/components/navigationPaneSearch/navigationPaneSearch.scss
@@ -0,0 +1,37 @@
+@import "src/main/scss/index.scss";
+
+$defaultHeight: 40px;
+
+div#paneSearch {
+
+    width: 248px;
+    margin: 0 auto;
+
+    input#navigation-pane-search {
+        background: $white;
+        border: 1px solid $grey-border;
+        box-sizing: border-box;
+        border-radius: 4px;
+        padding: 8px;
+        height: $defaultHeight;
+    }
+    
+    .navigation-pane-search {
+        width: 100% !important;
+        padding-top: 16px;
+    }
+
+    div.paneSearchInputWrapper {
+        position: relative;
+        span.paneSearchInputClearIcon {
+            position: absolute;
+            top: calc(50% + 2px); //Just to include a border
+            right: 8px;
+            cursor: pointer;
+        }
+    }
+}
+
+.navigation-pane-popup {
+    margin-top: 1.2em;
+}
\ No newline at end of file
diff --git a/plugins/base/frontend/src/main/components/navigationPaneSearch/navigationPaneSearch.tsx b/plugins/base/frontend/src/main/components/navigationPaneSearch/navigationPaneSearch.tsx
new file mode 100644
index 00000000..3174b023
--- /dev/null
+++ b/plugins/base/frontend/src/main/components/navigationPaneSearch/navigationPaneSearch.tsx
@@ -0,0 +1,73 @@
+import React, { useCallback, useState, useEffect } from 'react';
+import {Select, List } from '@jetbrains/ring-ui';
+import { DokkaFuzzyFilterComponent } from '../search/dokkaFuzzyFilter';
+import { IWindow, Option } from '../search/types';
+import './navigationPaneSearch.scss';
+import ClearIcon from 'react-svg-loader!./clear.svg';
+
+export const NavigationPaneSearch = () => {
+    const defaultWidth = 300
+
+    const [navigationList, setNavigationList] = useState<Option[]>([]);
+    const [selected, onSelected] = useState<Option | null>(null);
+    const [minWidth, setMinWidth] = useState<number>(defaultWidth);
+    const [filterValue, setFilterValue] = useState<string>('')
+    
+    const onChangeSelected = useCallback(
+        (element: Option) => {
+            window.location.replace(`${(window as IWindow).pathToRoot}${element.location}`)
+            onSelected(element);
+        },
+        [selected]
+    );
+
+    const onFilter = (filterValue: string, filteredRecords?: Option[]) => {
+        if(filteredRecords){
+            const requiredWidth = Math.max(...filteredRecords.map(e => e.label.length*9), defaultWidth)
+            setMinWidth(requiredWidth)
+        }
+        setFilterValue(filterValue)
+    }
+
+    const onClearClick = () => {
+        setFilterValue('')
+    }
+
+    useEffect(() => {
+        const pathToRoot = (window as IWindow).pathToRoot
+        const url = pathToRoot.endsWith('/') ? `${pathToRoot}scripts/navigation-pane.json` : `${pathToRoot}/scripts/navigation-pane.json`
+        fetch(url)
+            .then(response => response.json())
+            .then((result) => {
+                setNavigationList(result.map((record: Option) => {
+                    return {
+                        ...record,
+                        rgItemType: List.ListProps.Type.CUSTOM
+                    }
+                }))
+            },
+            (error) => {
+                console.error('failed to fetch navigationPane data', error)
+                setNavigationList([])
+            })
+    }, [])
+  
+
+    return <div className={"paneSearchInputWrapper"}>
+            <DokkaFuzzyFilterComponent
+                    id="navigation-pane-search"
+                    className="navigation-pane-search"
+                    inputPlaceholder="Title filter"
+                    clear={true}
+                    type={Select.Type.INPUT_WITHOUT_CONTROLS}
+                    filter={{fuzzy:true, value: filterValue}}
+                    selected={selected}
+                    data={navigationList}
+                    popupClassName={"navigation-pane-popup"}
+                    onSelect={onChangeSelected}
+                    onFilter={onFilter}
+                    minWidth={minWidth}
+                />
+                <span className={"paneSearchInputClearIcon"} onClick={onClearClick}><ClearIcon /></span>
+        </div>
+}
\ No newline at end of file