tor-browser

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

SearchModifiers.js (2352B)

      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 "use strict";
      6 
      7 const {
      8  Component,
      9 } = require("resource://devtools/client/shared/vendor/react.mjs");
     10 const {
     11  div,
     12  span,
     13  button,
     14 } = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
     15 const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.mjs");
     16 
     17 loader.lazyGetter(this, "l10n", function () {
     18  const { LocalizationHelper } = require("resource://devtools/shared/l10n.js");
     19  return new LocalizationHelper(
     20    "devtools/client/locales/components.properties"
     21  );
     22 });
     23 
     24 const modifierOptions = [
     25  {
     26    value: "regexMatch",
     27    className: "regex-match-btn",
     28    svgName: "regex-match",
     29    tooltip: l10n.getStr("searchModifier.regExpModifier"),
     30  },
     31  {
     32    value: "caseSensitive",
     33    className: "case-sensitive-btn",
     34    svgName: "case-match",
     35    tooltip: l10n.getStr("searchModifier.caseSensitiveModifier"),
     36  },
     37  {
     38    value: "wholeWord",
     39    className: "whole-word-btn",
     40    svgName: "whole-word-match",
     41    tooltip: l10n.getStr("searchModifier.wholeWordModifier"),
     42  },
     43 ];
     44 
     45 class SearchModifiers extends Component {
     46  static get propTypes() {
     47    return {
     48      modifiers: PropTypes.object.isRequired,
     49      onToggleSearchModifier: PropTypes.func.isRequired,
     50    };
     51  }
     52 
     53  #renderSearchModifier({ value, className, svgName, tooltip }) {
     54    const { modifiers, onToggleSearchModifier } = this.props;
     55 
     56    return button(
     57      {
     58        key: `search-modifier-button-${value}`,
     59        className: `${className} ${modifiers?.[value] ? "active" : ""}`,
     60        onMouseDown: () => {
     61          modifiers[value] = !modifiers[value];
     62          onToggleSearchModifier(modifiers);
     63        },
     64        onKeyDown: e => {
     65          if (e.key === "Enter") {
     66            modifiers[value] = !modifiers[value];
     67            onToggleSearchModifier(modifiers);
     68          }
     69        },
     70        title: tooltip,
     71      },
     72      span({ className: svgName })
     73    );
     74  }
     75 
     76  render() {
     77    return div(
     78      { className: "search-modifiers" },
     79      span({ className: "pipe-divider" }),
     80      modifierOptions.map(options => this.#renderSearchModifier(options))
     81    );
     82  }
     83 }
     84 
     85 module.exports = SearchModifiers;