tor-browser

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

SidebarToggle.js (2281B)

      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  Component,
      9 } = require("resource://devtools/client/shared/vendor/react.mjs");
     10 const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
     11 const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.mjs");
     12 
     13 // Shortcuts
     14 const { button } = dom;
     15 
     16 /**
     17 * Sidebar toggle button. This button is used to exapand
     18 * and collapse Sidebar.
     19 */
     20 class SidebarToggle extends Component {
     21  static get propTypes() {
     22    return {
     23      // Set to true if collapsed.
     24      collapsed: PropTypes.bool.isRequired,
     25      // Tooltip text used when the button indicates expanded state.
     26      collapsePaneTitle: PropTypes.string.isRequired,
     27      // Tooltip text used when the button indicates collapsed state.
     28      expandPaneTitle: PropTypes.string.isRequired,
     29      // Click callback
     30      onClick: PropTypes.func.isRequired,
     31      // align toggle button to right
     32      alignRight: PropTypes.bool,
     33      // if set to true toggle-button rotate 90
     34      canVerticalSplit: PropTypes.bool,
     35    };
     36  }
     37 
     38  static get defaultProps() {
     39    return {
     40      alignRight: false,
     41      canVerticalSplit: true,
     42    };
     43  }
     44 
     45  constructor(props) {
     46    super(props);
     47 
     48    this.state = {
     49      collapsed: props.collapsed,
     50    };
     51 
     52    this.onClick = this.onClick.bind(this);
     53  }
     54 
     55  // Events
     56 
     57  onClick(event) {
     58    event.stopPropagation();
     59    this.setState({ collapsed: !this.state.collapsed });
     60    this.props.onClick(event);
     61  }
     62 
     63  // Rendering
     64 
     65  render() {
     66    const title = this.state.collapsed
     67      ? this.props.expandPaneTitle
     68      : this.props.collapsePaneTitle;
     69 
     70    const classNames = ["devtools-button", "sidebar-toggle"];
     71    if (this.state.collapsed) {
     72      classNames.push("pane-collapsed");
     73    }
     74    if (this.props.alignRight) {
     75      classNames.push("alignRight");
     76    }
     77    if (!this.props.canVerticalSplit) {
     78      classNames.push("disableVerticalBehaviour");
     79    }
     80 
     81    return button({
     82      className: classNames.join(" "),
     83      title,
     84      onClick: this.onClick,
     85    });
     86  }
     87 }
     88 
     89 module.exports = SidebarToggle;