tor-browser

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

FontList.js (2263B)

      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  createElement,
      9  createFactory,
     10  createRef,
     11  Fragment,
     12  PureComponent,
     13 } = require("resource://devtools/client/shared/vendor/react.mjs");
     14 const dom = 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 const Font = createFactory(
     18  require("resource://devtools/client/inspector/fonts/components/Font.js")
     19 );
     20 const FontPreviewInput = createFactory(
     21  require("resource://devtools/client/inspector/fonts/components/FontPreviewInput.js")
     22 );
     23 
     24 const Types = require("resource://devtools/client/inspector/fonts/types.js");
     25 
     26 class FontList extends PureComponent {
     27  static get propTypes() {
     28    return {
     29      fontOptions: PropTypes.shape(Types.fontOptions).isRequired,
     30      fonts: PropTypes.arrayOf(PropTypes.shape(Types.font)).isRequired,
     31      onPreviewTextChange: PropTypes.func.isRequired,
     32      onToggleFontHighlight: PropTypes.func.isRequired,
     33    };
     34  }
     35 
     36  constructor(props) {
     37    super(props);
     38 
     39    this.onPreviewClick = this.onPreviewClick.bind(this);
     40    this.previewInputRef = createRef();
     41  }
     42 
     43  /**
     44   * Handler for clicks on the font preview image.
     45   * Requests the FontPreviewInput component, if one exists, to focus its input field.
     46   */
     47  onPreviewClick() {
     48    this.previewInputRef.current && this.previewInputRef.current.focus();
     49  }
     50 
     51  render() {
     52    const { fonts, fontOptions, onPreviewTextChange, onToggleFontHighlight } =
     53      this.props;
     54 
     55    const { previewText } = fontOptions;
     56    const { onPreviewClick } = this;
     57 
     58    const list = dom.ul(
     59      {
     60        className: "fonts-list",
     61      },
     62      fonts.map(font =>
     63        Font({
     64          key: font.name,
     65          font,
     66          onPreviewClick,
     67          onToggleFontHighlight,
     68        })
     69      )
     70    );
     71 
     72    const previewInput = FontPreviewInput({
     73      ref: this.previewInputRef,
     74      onPreviewTextChange,
     75      previewText,
     76    });
     77 
     78    return createElement(Fragment, null, previewInput, list);
     79  }
     80 }
     81 
     82 module.exports = FontList;