tor-browser

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

Range.js (2130B)

      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 // @ts-check
      5 
      6 /**
      7 * @typedef {import("../../@types/perf").ScaleFunctions} ScaleFunctions
      8 */
      9 
     10 /**
     11 * @typedef {object} Props
     12 * @property {number} value
     13 * @property {React.ReactNode} label
     14 * @property {string} id
     15 * @property {ScaleFunctions} scale
     16 * @property {(value: number) => unknown} onChange
     17 * @property {(value: number) => React.ReactNode} display
     18 */
     19 "use strict";
     20 const {
     21  PureComponent,
     22 } = require("resource://devtools/client/shared/vendor/react.mjs");
     23 const {
     24  div,
     25  input,
     26  label,
     27 } = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
     28 
     29 /**
     30 * Provide a numeric range slider UI that works off of custom numeric scales.
     31 *
     32 * @augments React.PureComponent<Props>
     33 */
     34 class Range extends PureComponent {
     35  /**
     36   * @param {React.ChangeEvent<HTMLInputElement>} event
     37   */
     38  handleInput = event => {
     39    event.preventDefault();
     40    const { scale, onChange } = this.props;
     41    const frac = Number(event.target.value) / scale.steps;
     42    onChange(scale.fromFractionToSingleDigitValue(frac));
     43  };
     44 
     45  render() {
     46    const { label: labelText, scale, id, value, display } = this.props;
     47 
     48    const min = "0";
     49    const max = scale.steps;
     50    // Convert the value to the current range.
     51    const rangeValue = scale.fromValueToFraction(value) * max;
     52 
     53    return div(
     54      { className: "perf-settings-range-row" },
     55      label(
     56        {
     57          className: "perf-settings-label",
     58          htmlFor: id,
     59        },
     60        labelText
     61      ),
     62      input({
     63        type: "range",
     64        className: `perf-settings-range-input`,
     65        min,
     66        "aria-valuemin": scale.fromFractionToValue(0),
     67        max,
     68        "aria-valuemax": scale.fromFractionToValue(1),
     69        value: rangeValue,
     70        "aria-valuenow": value,
     71        onChange: this.handleInput,
     72        id,
     73      }),
     74      div({ className: `perf-settings-range-value` }, display(value))
     75    );
     76  }
     77 }
     78 
     79 module.exports = Range;