aboutsummaryrefslogtreecommitdiff
path: root/plugins/base/search-component/src/main
diff options
context:
space:
mode:
authorFilip Zybała <fzybala@virtuslab.com>2020-05-12 14:58:05 +0200
committerPaweł Marks <Kordyjan@users.noreply.github.com>2020-05-21 15:26:00 +0200
commit25d826bb75a78eb674a63aed19f55e92d7ff8bca (patch)
tree72c0c1a04dd4cb301ee8d7a59fce90d5baea4662 /plugins/base/search-component/src/main
parent2ee83d06c9cc534b4f226dd30f294bc0588e8b4e (diff)
downloaddokka-25d826bb75a78eb674a63aed19f55e92d7ff8bca.tar.gz
dokka-25d826bb75a78eb674a63aed19f55e92d7ff8bca.tar.bz2
dokka-25d826bb75a78eb674a63aed19f55e92d7ff8bca.zip
Migrated resources to base-plugin
Diffstat (limited to 'plugins/base/search-component/src/main')
-rw-r--r--plugins/base/search-component/src/main/js/search/app-root.js47
-rw-r--r--plugins/base/search-component/src/main/js/search/app.css21
-rw-r--r--plugins/base/search-component/src/main/js/search/app.js41
-rw-r--r--plugins/base/search-component/src/main/js/search/search.js52
4 files changed, 161 insertions, 0 deletions
diff --git a/plugins/base/search-component/src/main/js/search/app-root.js b/plugins/base/search-component/src/main/js/search/app-root.js
new file mode 100644
index 00000000..5d650581
--- /dev/null
+++ b/plugins/base/search-component/src/main/js/search/app-root.js
@@ -0,0 +1,47 @@
+import React, {useRef, useState, useEffect} from 'react';
+import {WithFuzzySearchFilter} from './search';
+import './app.css';
+
+function useComponentVisible(initialIsVisible) {
+ const [isComponentVisible, setIsComponentVisible] = useState(initialIsVisible);
+ const ref = useRef(null);
+
+ const handleHideDropdown = (event) => {
+ if (event.key === "Escape") {
+ setIsComponentVisible(false);
+ }
+ };
+
+ const handleClickOutside = event => {
+ if (ref.current && !ref.current.contains(event.target)) {
+ setIsComponentVisible(false);
+ }
+ };
+
+ useEffect(() => {
+ document.addEventListener("keydown", handleHideDropdown, true);
+ document.addEventListener("click", handleClickOutside, true);
+ return () => {
+ document.removeEventListener("keydown", handleHideDropdown, true);
+ document.removeEventListener("click", handleClickOutside, true);
+ };
+ });
+
+ return { ref, isComponentVisible, setIsComponentVisible };
+}
+
+export const AppRoot = () => {
+ const {
+ ref,
+ isComponentVisible,
+ setIsComponentVisible
+ } = useComponentVisible(false);
+
+ return <div ref={ref} className="search-content">
+ {isComponentVisible && (<WithFuzzySearchFilter/>)}
+ {!isComponentVisible && (
+ <span onClick={() => setIsComponentVisible(true)}>
+ <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>
+ </span>)}
+ </div>
+} \ No newline at end of file
diff --git a/plugins/base/search-component/src/main/js/search/app.css b/plugins/base/search-component/src/main/js/search/app.css
new file mode 100644
index 00000000..c51d3fe1
--- /dev/null
+++ b/plugins/base/search-component/src/main/js/search/app.css
@@ -0,0 +1,21 @@
+@import "@jetbrains/ring-ui/components/global/variables.css";
+
+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 {
+ padding: 24px 41px;
+}
diff --git a/plugins/base/search-component/src/main/js/search/app.js b/plugins/base/search-component/src/main/js/search/app.js
new file mode 100644
index 00000000..bceffa48
--- /dev/null
+++ b/plugins/base/search-component/src/main/js/search/app.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import {render} from 'react-dom';
+import RedBox from 'redbox-react';
+
+import {AppRoot} from './app-root';
+import './app.css';
+
+const appEl = document.getElementById('searchBar');
+const rootEl = document.createElement('div');
+
+let renderApp = () => {
+ render(
+ <AppRoot/>,
+ rootEl
+ );
+};
+
+if (module.hot) {
+ const renderAppHot = renderApp;
+ const renderError = error => {
+ render(
+ <RedBox error={error}/>,
+ rootEl
+ );
+ };
+
+ renderApp = () => {
+ try {
+ renderAppHot();
+ } catch (error) {
+ renderError(error);
+ }
+ };
+
+ module.hot.accept('./app-root', () => {
+ setTimeout(renderApp);
+ });
+}
+
+renderApp();
+appEl.appendChild(rootEl);
diff --git a/plugins/base/search-component/src/main/js/search/search.js b/plugins/base/search-component/src/main/js/search/search.js
new file mode 100644
index 00000000..a742f11d
--- /dev/null
+++ b/plugins/base/search-component/src/main/js/search/search.js
@@ -0,0 +1,52 @@
+import React, {Component} from 'react';
+import Select from '@jetbrains/ring-ui/components/select/select';
+import '@jetbrains/ring-ui/components/input-size/input-size.scss';
+
+class WithFuzzySearchFilterComponent extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {selected: props.data[0]};
+ }
+
+ clearSelection = () => {
+ this.setState({selected: null});
+ };
+
+ onSelect = option => {
+ window.location.href = `${window.pathToRoot}${option.location}?query${option.name}`;
+ this.setState({selected: option});
+ debugger
+ };
+
+ render() {
+ return (
+ <div className="search-container">
+ <div className="search">
+ <Select
+ selectedLabel="Search"
+ label="Please type page name"
+ filter={{fuzzy: true}}
+ clear
+ selected={this.state.selected}
+ data={this.props.data}
+ onSelect={this.onSelect}
+ />
+ </div>
+ </div>
+ );
+ }
+}
+
+export const WithFuzzySearchFilter = () => {
+ let data = [];
+ if (window.pages) {
+ data = window.pages.map((page, i) => ({
+ ...page,
+ label: page.name,
+ key: i + 1,
+ type: page.kind
+ }));
+ }
+
+ return <WithFuzzySearchFilterComponent data={data}/>;
+};