tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

SearchBox.mjs (2521B)

      1 /* This Source Code Form is subject to the terms of the Mozilla Public
      2 * License, v. 2.0. If a copy of the MPL was not distributed with this
      3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
      4 
      5 import { Component } from "resource://devtools/client/shared/vendor/react.mjs";
      6 import PropTypes from "resource://devtools/client/shared/vendor/react-prop-types.mjs";
      7 import * as dom from "resource://devtools/client/shared/vendor/react-dom-factories.mjs";
      8 
      9 const { input, div, button } = dom;
     10 
     11 // For smooth incremental searching (in case the user is typing quickly).
     12 const searchDelay = 250;
     13 
     14 /**
     15 * This object represents a search box located at the
     16 * top right corner of the application.
     17 */
     18 class SearchBox extends Component {
     19  static get propTypes() {
     20    return {
     21      actions: PropTypes.object,
     22      value: PropTypes.toString,
     23    };
     24  }
     25 
     26  constructor(props) {
     27    super(props);
     28    this.onSearch = this.onSearch.bind(this);
     29    this.doSearch = this.doSearch.bind(this);
     30    this.onClearButtonClick = this.onClearButtonClick.bind(this);
     31    this.onKeyDown = this.onKeyDown.bind(this);
     32 
     33    this.state = {
     34      value: props.value || "",
     35    };
     36  }
     37 
     38  onSearch(event) {
     39    this.setState({
     40      value: event.target.value,
     41    });
     42    const searchBox = event.target;
     43    const win = searchBox.ownerDocument.defaultView;
     44 
     45    if (this.searchTimeout) {
     46      win.clearTimeout(this.searchTimeout);
     47    }
     48 
     49    const callback = this.doSearch.bind(this, searchBox);
     50    this.searchTimeout = win.setTimeout(callback, searchDelay);
     51  }
     52 
     53  doSearch(searchBox) {
     54    this.props.actions.onSearch(searchBox.value);
     55  }
     56 
     57  onClearButtonClick() {
     58    this.setState({ value: "" });
     59    this.props.actions.onSearch("");
     60    if (this._searchBoxRef) {
     61      this._searchBoxRef.focus();
     62    }
     63  }
     64 
     65  onKeyDown(e) {
     66    switch (e.key) {
     67      case "Escape":
     68        e.preventDefault();
     69        this.onClearButtonClick();
     70        break;
     71    }
     72  }
     73 
     74  render() {
     75    const { value } = this.state;
     76    return div(
     77      { className: "devtools-searchbox" },
     78      input({
     79        className: "searchBox devtools-filterinput",
     80        placeholder: JSONView.Locale["jsonViewer.filterJSON"],
     81        onChange: this.onSearch,
     82        onKeyDown: this.onKeyDown,
     83        value,
     84        ref: c => {
     85          this._searchBoxRef = c;
     86        },
     87      }),
     88      button({
     89        className: "devtools-searchinput-clear",
     90        hidden: !value,
     91        onClick: this.onClearButtonClick,
     92      })
     93    );
     94  }
     95 }
     96 
     97 export default { SearchBox };