tor-browser

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

FontPreviewInput.js (1908B)

      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  createRef,
      9  PureComponent,
     10 } = require("resource://devtools/client/shared/vendor/react.mjs");
     11 const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
     12 const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.mjs");
     13 
     14 const Types = require("resource://devtools/client/inspector/fonts/types.js");
     15 const {
     16  getStr,
     17 } = require("resource://devtools/client/inspector/fonts/utils/l10n.js");
     18 
     19 const PREVIEW_TEXT_MAX_LENGTH = 30;
     20 
     21 class FontPreviewInput extends PureComponent {
     22  static get propTypes() {
     23    return {
     24      onPreviewTextChange: PropTypes.func.isRequired,
     25      previewText: Types.fontOptions.previewText.isRequired,
     26    };
     27  }
     28 
     29  constructor(props) {
     30    super(props);
     31 
     32    this.onChange = this.onChange.bind(this);
     33    this.onFocus = this.onFocus.bind(this);
     34    this.inputRef = createRef();
     35 
     36    this.state = {
     37      value: this.props.previewText,
     38    };
     39  }
     40 
     41  onChange(e) {
     42    const value = e.target.value;
     43    this.props.onPreviewTextChange(value);
     44 
     45    this.setState(prevState => {
     46      return { ...prevState, value };
     47    });
     48  }
     49 
     50  onFocus(e) {
     51    e.target.select();
     52  }
     53 
     54  focus() {
     55    this.inputRef.current.focus();
     56  }
     57 
     58  render() {
     59    return dom.div(
     60      {
     61        id: "font-preview-input-container",
     62      },
     63      dom.input({
     64        className: "devtools-searchinput",
     65        onChange: this.onChange,
     66        onFocus: this.onFocus,
     67        maxLength: PREVIEW_TEXT_MAX_LENGTH,
     68        placeholder: getStr("fontinspector.previewTextPlaceholder"),
     69        ref: this.inputRef,
     70        type: "text",
     71        value: this.state.value,
     72      })
     73    );
     74  }
     75 }
     76 
     77 module.exports = FontPreviewInput;