1 files changed, 89 insertions, 0 deletions
diff --git a/src/client/views/SearchBox.tsx b/src/client/views/SearchBox.tsx
new file mode 100644
index 000000000..7f388719d
--- /dev/null
+++ b/src/client/views/SearchBox.tsx
@@ -0,0 +1,89 @@
+import * as React from 'react';
+import { observer } from 'mobx-react';
+import { observable, action } from 'mobx';
+import { Utils } from '../../Utils';
+import { MessageStore } from '../../server/Message';
+import { Server } from '../Server';
+import "./SearchBox.scss";
+import { faSearch } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { actionFieldDecorator } from 'mobx/lib/internal';
+
+library.add(faSearch);
+
+@observer
+export class SearchBox extends React.Component {
+    @observable
+    searchString: string = "";
+
+    @observable private _open: boolean = false;
+
+    @action.bound
+    onChange(e: React.ChangeEvent<HTMLInputElement>) {
+        this.searchString = e.target.value;
+
+    }
+
+    submitSearch = () => {
+        Utils.EmitCallback(Server.Socket, MessageStore.SearchFor, this.searchString, (results: string[]) => {
+            for (const result of results) {
+                console.log(result);
+                Utils.GetQueryVariable()
+            }
+        });
+    }
+
+    @action
+    handleClick = (e: Event): void => {
+        var className = (e.target as any).className;
+        var id = (e.target as any).id;
+        console.log(id);
+        //let imgPrev = document.getElementById("img_preview");
+        console.log(className);
+        if (className !== "filter-button" && className !== "filter-form") {
+            console.log("false");
+            this._open = false;
+        }
+
+    }
+
+    componentWillMount() {
+        document.addEventListener('mousedown', this.handleClick, false);
+    }
+
+    componentWillUnmount() {
+        document.removeEventListener('mousedown', this.handleClick, false);
+    }
+
+    @action
+    toggleDisplay = () => {
+        this._open = !this._open;
+    }
+
+    render() {
+        return (
+            <div id="outer">
+                <div className="searchBox" id="outer">
+                    {/* <input value={this.searchString} onChange={this.onChange} />
+                <button onClick={this.submitSearch} /> */}
+
+                    <input value={this.searchString} onChange={this.onChange} type="text" placeholder="Search.." className="search" />
+                    {/* {this._items.filter(prop => prop.description.toLowerCase().indexOf(this._searchString.toLowerCase()) !== -1).
+                    map(prop => <ContextMenuItem {...prop} key={prop.description} />)} */}
+
+                    <button className="filter-button" onClick={this.toggleDisplay}> Filter </button>
+                    <div className="submit-search" ><FontAwesomeIcon style={{ height: "100%" }} icon="search" size="lg" /></div>
+                </div>
+                <div className="filter-form" id="filter" style={this._open ? { display: "flex" } : { display: "none" }}>
+                    <div className="filter-form" id="header">Filter Search Results</div>
+                    <div className="filter-form" id="option">
+                        filter by collection, key, type of node
+                    </div>
+
+                </div>
+            </div>
+
+        );
+    }
+}
+\ No newline at end of file