tor-browser

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

TreeHeader.mjs (2753B)

      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 "resource://devtools/client/shared/vendor/react.mjs";
      6 import PropTypes from "resource://devtools/client/shared/vendor/react-prop-types.mjs";
      7 import * as dom from "resource://devtools/client/shared/vendor/react-dom-factories.mjs";
      8 
      9 const { thead, tr, td, div } = dom;
     10 
     11 /**
     12 * This component is responsible for rendering tree header.
     13 * It's based on <thead> element.
     14 */
     15 class TreeHeader extends Component {
     16  // See also TreeView component for detailed info about properties.
     17  static get propTypes() {
     18    return {
     19      // Custom tree decorator
     20      decorator: PropTypes.object,
     21      // True if the header should be visible
     22      header: PropTypes.bool,
     23      // Array with column definition
     24      columns: PropTypes.array,
     25    };
     26  }
     27 
     28  static get defaultProps() {
     29    return {
     30      columns: [
     31        {
     32          id: "default",
     33        },
     34      ],
     35    };
     36  }
     37 
     38  constructor(props) {
     39    super(props);
     40    this.getHeaderClass = this.getHeaderClass.bind(this);
     41  }
     42 
     43  getHeaderClass(colId) {
     44    const decorator = this.props.decorator;
     45    if (!decorator || !decorator.getHeaderClass) {
     46      return [];
     47    }
     48 
     49    // Decorator can return a simple string or array of strings.
     50    let classNames = decorator.getHeaderClass(colId);
     51    if (!classNames) {
     52      return [];
     53    }
     54 
     55    if (typeof classNames == "string") {
     56      classNames = [classNames];
     57    }
     58 
     59    return classNames;
     60  }
     61 
     62  render() {
     63    const cells = [];
     64    const visible = this.props.header;
     65 
     66    // Render the rest of the columns (if any)
     67    this.props.columns.forEach(col => {
     68      const cellStyle = {
     69        width: col.width ? col.width : "",
     70      };
     71 
     72      let classNames = [];
     73 
     74      if (visible) {
     75        classNames = this.getHeaderClass(col.id);
     76        classNames.push("treeHeaderCell");
     77      }
     78 
     79      cells.push(
     80        td(
     81          {
     82            className: classNames.join(" "),
     83            style: cellStyle,
     84            role: "presentation",
     85            id: col.id,
     86            key: col.id,
     87          },
     88          visible
     89            ? div(
     90                {
     91                  className: "treeHeaderCellBox",
     92                  role: "presentation",
     93                },
     94                col.title
     95              )
     96            : null
     97        )
     98      );
     99    });
    100 
    101    return thead(
    102      {
    103        role: "presentation",
    104      },
    105      tr(
    106        {
    107          className: visible ? "treeHeaderRow" : "",
    108          role: "presentation",
    109        },
    110        cells
    111      )
    112    );
    113  }
    114 }
    115 
    116 // Exports from this module
    117 export default TreeHeader;