@attivio/suit/lib/components/HierarchicalList.js

Attivio SUIT, the Search UI Toolkit, is a library for creating search clients for searching the Attivio platform.

'use strict';

exports.__esModule = true;
exports.default = exports.HierarchicalNode = undefined;

var _class2, _temp;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _DisclosureTriangle = require('./DisclosureTriangle');

var _DisclosureTriangle2 = _interopRequireDefault(_DisclosureTriangle);

var _ObjectUtils = require('../util/ObjectUtils');

var _ObjectUtils2 = _interopRequireDefault(_ObjectUtils);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

/**
 * Class representing a single node in the hierarchical list's tree.
 */
var HierarchicalNode = exports.HierarchicalNode = function HierarchicalNode(contents, key) {
  var children = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];

  _classCallCheck(this, HierarchicalNode);

  this.contents = contents;
  this.key = key;
  this.children = children;
}

/** The contents to render for the node. */

/** A unique key for the node. */

/** Any children of the node. */
;

/**
 * Component to render tree of data in a hierarchical list format where nodes which have children
 * can be opened/closed by the user.
 */
var HierarchicalList = (_temp = _class2 = function (_React$Component) {
  _inherits(HierarchicalList, _React$Component);

  function HierarchicalList(props) {
    _classCallCheck(this, HierarchicalList);

    var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));

    _this.toggleRow = _this.toggleRow.bind(_this);
    return _this;
  }

  HierarchicalList.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
    return !_ObjectUtils2.default.deepEquals(this.props, nextProps);
  };

  HierarchicalList.prototype.toggleRow = function toggleRow(key) {
    var newOpen = !this.props.openNodes.includes(key);
    this.props.onToggle(key, newOpen);
  };

  HierarchicalList.prototype.renderChildren = function renderChildren(parent) {
    var _this2 = this;

    var level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;

    // We only get here if the parent node is open...
    if (parent.children && parent.children.length > 0) {
      var contents = parent.children.map(function (child) {
        // Create a spacer to indent nested items
        var spacerWidth = level > 0 ? level * 20 + 'px' : 0;
        var spacer = _react2.default.createElement('span', {
          style: {
            display: 'inline-block',
            width: spacerWidth
          }
        });

        var hasChildren = child.children && child.children.length > 0;
        var isOpen = hasChildren && _this2.props.openNodes.includes(child.key);

        var thisRow = void 0;
        if (hasChildren) {
          thisRow = _react2.default.createElement(
            'div',
            { key: child.key },
            spacer,
            _react2.default.createElement(_DisclosureTriangle2.default, {
              open: isOpen,
              onToggle: function onToggle() {
                _this2.toggleRow(child.key);
              },
              style: {
                display: 'inline-block',
                width: '20px',
                fontSize: '0.8em',
                color: '#333'
              }
            }),
            child.contents
          );
        } else {
          // No children, include a second spacer to account for the width of the missing disclosure triangle
          thisRow = _react2.default.createElement(
            'div',
            { key: child.key },
            spacer,
            _react2.default.createElement('span', { style: { width: '20px', display: 'inline-block' } }),
            child.contents
          );
        }
        if (hasChildren && isOpen) {
          // There are deeper kids, we need to render them too
          var grandchildren = _this2.renderChildren(child, level + 1);
          grandchildren.unshift(thisRow);
          return grandchildren;
        }
        // No further children... just return the current row.
        return [thisRow];
      });
      return contents;
    }
    return [];
  };

  HierarchicalList.prototype.render = function render() {
    if (this.props.root && this.props.root.children && this.props.root.children.length > 0) {
      var children = this.renderChildren(this.props.root);
      return _react2.default.createElement(
        'div',
        null,
        children
      );
    }

    return null;
  };

  return HierarchicalList;
}(_react2.default.Component), _class2.displayName = 'HierarchicalList', _temp);
exports.default = HierarchicalList;


HierarchicalList.HierarchicalNode = HierarchicalNode;