tor-browser

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

DeviceList.js (2692B)

      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  createFactory,
      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/responsive/types.js");
     15 
     16 const Device = createFactory(
     17  require("resource://devtools/client/responsive/components/Device.js")
     18 );
     19 
     20 class DeviceList extends PureComponent {
     21  static get propTypes() {
     22    return {
     23      // Whether or not to show the custom device edit/remove buttons.
     24      devices: PropTypes.shape(Types.devices).isRequired,
     25      isDeviceFormShown: PropTypes.bool.isRequired,
     26      onDeviceCheckboxChange: PropTypes.func.isRequired,
     27      onDeviceFormHide: PropTypes.func.isRequired,
     28      onDeviceFormShow: PropTypes.func.isRequired,
     29      onRemoveCustomDevice: PropTypes.func.isRequired,
     30      type: PropTypes.string.isRequired,
     31    };
     32  }
     33 
     34  renderCustomDevice(device) {
     35    const {
     36      isDeviceFormShown,
     37      type,
     38      onDeviceCheckboxChange,
     39      onRemoveCustomDevice,
     40    } = this.props;
     41 
     42    // Show a remove button for custom devices.
     43    const removeDeviceButton = dom.button({
     44      id: "device-edit-remove",
     45      className: "device-remove-button devtools-button",
     46      onClick: () => {
     47        onRemoveCustomDevice(device);
     48        this.props.onDeviceFormHide();
     49      },
     50    });
     51 
     52    // Show an edit button for custom devices
     53    const editButton = dom.button({
     54      id: "device-edit-button",
     55      className: "devtools-button",
     56      onClick: () => {
     57        this.props.onDeviceFormShow("edit", device);
     58      },
     59    });
     60 
     61    return Device(
     62      {
     63        device,
     64        key: device.name,
     65        type,
     66        onDeviceCheckboxChange,
     67      },
     68      // Don't show the remove/edit buttons for a custom device if the form is open.
     69      !isDeviceFormShown ? editButton : null,
     70      !isDeviceFormShown ? removeDeviceButton : null
     71    );
     72  }
     73 
     74  render() {
     75    const { devices, type, onDeviceCheckboxChange } = this.props;
     76 
     77    return dom.div(
     78      { className: "device-list" },
     79      devices[type].map(device => {
     80        if (type === "custom") {
     81          return this.renderCustomDevice(device);
     82        }
     83 
     84        return Device({
     85          device,
     86          key: device.name,
     87          type,
     88          onDeviceCheckboxChange,
     89        });
     90      })
     91    );
     92  }
     93 }
     94 
     95 module.exports = DeviceList;