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
90
91
92
93
94
95
96
97
98
99
100
101
102
|
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
define(function (require, exports) {
const { Component } = require("devtools/client/shared/vendor/react");
const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
const dom = require("devtools/client/shared/vendor/react-dom-factories");
const { input, div, button } = dom;
// For smooth incremental searching (in case the user is typing quickly).
const searchDelay = 250;
/**
* This object represents a search box located at the
* top right corner of the application.
*/
class SearchBox extends Component {
static get propTypes() {
return {
actions: PropTypes.object,
value: PropTypes.toString,
};
}
constructor(props) {
super(props);
this.onSearch = this.onSearch.bind(this);
this.doSearch = this.doSearch.bind(this);
this.onClearButtonClick = this.onClearButtonClick.bind(this);
this.onKeyDown = this.onKeyDown.bind(this);
this.state = {
value: props.value || "",
};
}
onSearch(event) {
this.setState({
value: event.target.value,
});
const searchBox = event.target;
const win = searchBox.ownerDocument.defaultView;
if (this.searchTimeout) {
win.clearTimeout(this.searchTimeout);
}
const callback = this.doSearch.bind(this, searchBox);
this.searchTimeout = win.setTimeout(callback, searchDelay);
}
doSearch(searchBox) {
this.props.actions.onSearch(searchBox.value);
}
onClearButtonClick() {
this.setState({ value: "" });
this.props.actions.onSearch("");
if (this._searchBoxRef) {
this._searchBoxRef.focus();
}
}
onKeyDown(e) {
switch (e.key) {
case "Escape":
e.preventDefault();
this.onClearButtonClick();
break;
}
}
render() {
const { value } = this.state;
return div(
{ className: "devtools-searchbox" },
input({
className: "searchBox devtools-filterinput",
placeholder: JSONView.Locale["jsonViewer.filterJSON"],
onChange: this.onSearch,
onKeyDown: this.onKeyDown,
value,
ref: c => {
this._searchBoxRef = c;
},
}),
button({
className: "devtools-searchinput-clear",
hidden: !value,
onClick: this.onClearButtonClick,
})
);
}
}
// Exports from this module
exports.SearchBox = SearchBox;
});
|
