tor-browser

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

Dropdown.js (1636B)

      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 import { Component } from "devtools/client/shared/vendor/react";
      6 import { button, div } from "devtools/client/shared/vendor/react-dom-factories";
      7 import PropTypes from "devtools/client/shared/vendor/react-prop-types";
      8 
      9 export class Dropdown extends Component {
     10  constructor(props) {
     11    super(props);
     12    this.state = {
     13      dropdownShown: false,
     14    };
     15  }
     16 
     17  static get propTypes() {
     18    return {
     19      icon: PropTypes.node.isRequired,
     20      panel: PropTypes.node.isRequired,
     21    };
     22  }
     23 
     24  toggleDropdown = () => {
     25    this.setState(prevState => ({
     26      dropdownShown: !prevState.dropdownShown,
     27    }));
     28  };
     29 
     30  renderPanel() {
     31    return div(
     32      {
     33        className: "dropdown",
     34        onClick: this.toggleDropdown,
     35        style: {
     36          display: this.state.dropdownShown ? "block" : "none",
     37        },
     38      },
     39      this.props.panel
     40    );
     41  }
     42 
     43  renderButton() {
     44    return button(
     45      {
     46        className: "dropdown-button",
     47        onClick: this.toggleDropdown,
     48      },
     49      this.props.icon
     50    );
     51  }
     52 
     53  renderMask() {
     54    return div({
     55      className: "dropdown-mask",
     56      onClick: this.toggleDropdown,
     57      style: {
     58        display: this.state.dropdownShown ? "block" : "none",
     59      },
     60    });
     61  }
     62  render() {
     63    return div(
     64      {
     65        className: "dropdown-block",
     66      },
     67      this.renderPanel(),
     68      this.renderButton(),
     69      this.renderMask()
     70    );
     71  }
     72 }
     73 
     74 export default Dropdown;