blob: 7f388719d7fa6ffcc83b43ebfd3aa63c060d7092 (
plain)
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
76
77
78
79
80
81
82
83
84
85
86
87
88
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>
);
}
}
|
