@attivio/suit/es/components/ListWithBarsFacetContents.js

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

var _class, _temp;

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

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; }

import React from 'react';

import SearchFacetBucket from '../api/SearchFacetBucket';

/**
 * Component to display the buckets of a facet in a table with
 * horizontal bars showing relative size.
 */
var ListWithBarsFacetContents = (_temp = _class = function (_React$Component) {
  _inherits(ListWithBarsFacetContents, _React$Component);

  // eslint-disable-line max-len
  function ListWithBarsFacetContents(props) {
    _classCallCheck(this, ListWithBarsFacetContents);

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

    _this.state = {
      allVisible: false
    };
    _this.toggleAllVisible = _this.toggleAllVisible.bind(_this);
    return _this;
  }

  ListWithBarsFacetContents.prototype.toggleAllVisible = function toggleAllVisible() {
    this.setState({
      allVisible: !this.state.allVisible
    });
    if (this.toggleButton) {
      this.toggleButton.blur();
    }
  };

  ListWithBarsFacetContents.prototype.render = function render() {
    var _this2 = this;

    // Calculate the max value for the count
    var maxValue = this.props.buckets.reduce(function (accumulator, currentBucket) {
      return currentBucket.count > accumulator ? currentBucket.count : accumulator;
    }, 0);

    // Now generate the table rows for each bucket
    var bucketRows = this.props.buckets.map(function (bucket) {
      var label = bucket.displayLabel();
      var percent = Math.round(bucket.count / maxValue * 100);
      var percentage = percent + '%';
      var callback = function callback(event) {
        _this2.props.addFacetFilter(bucket);
        event.target.blur();
      };
      var labelValue = _this2.props.noLink ? React.createElement(
        'span',
        null,
        label
      ) : React.createElement(
        'a',
        {
          onClick: callback,
          role: 'button',
          tabIndex: 0
        },
        label
      );
      return React.createElement(
        'tr',
        { key: bucket.bucketKey() },
        React.createElement(
          'td',
          { style: { width: '100px' } },
          labelValue
        ),
        React.createElement(
          'td',
          { style: { paddingRight: '10px' } },
          bucket.count
        ),
        React.createElement(
          'td',
          { className: 'attivio-linksbar-chart' },
          React.createElement(
            'div',
            {
              className: 'attivio-linksbar-chart-percent',
              style: {
                width: percentage,
                backgroundColor: _this2.props.color
              }
            },
            percentage
          )
        )
      );
    });
    // If there are more items than the shortSize and we're not showing all,
    // then truncate the list of rows
    if (!this.state.allVisible && bucketRows.length > this.props.shortSize) {
      bucketRows = bucketRows.slice(0, this.props.shortSize);
    }

    // The "more" row is only there if there are more than this.props.shortSize
    // buckets in the facet. If so, it will say either "More" or "Fewer" depending
    // on this.state.allVisible.
    var moreRow = null;
    if (this.props.buckets && this.props.buckets.length > this.props.shortSize) {
      var label = this.state.allVisible ? this.props.fewerPrompt : this.props.morePrompt;
      moreRow = React.createElement(
        'tr',
        null,
        React.createElement(
          'td',
          { colSpan: 3 },
          React.createElement(
            'a',
            {
              className: 'attivio-facet-more attivio-more',
              onClick: this.toggleAllVisible,
              role: 'button',
              tabIndex: 0,
              ref: function ref(c) {
                _this2.toggleButton = c;
              }
            },
            label
          )
        )
      );
    }

    var className = this.props.right ? 'table attivio-linksbar ' : 'table attivio-linksbar attivio-linksbar-b';

    return React.createElement(
      'table',
      { className: className },
      React.createElement(
        'thead',
        { className: 'sr-only' },
        React.createElement(
          'tr',
          null,
          React.createElement(
            'th',
            null,
            'Facet Value'
          ),
          React.createElement(
            'th',
            null,
            'Count'
          ),
          React.createElement(
            'th',
            null,
            'Percent'
          )
        )
      ),
      React.createElement(
        'tbody',
        null,
        bucketRows,
        moreRow
      )
    );
  };

  return ListWithBarsFacetContents;
}(React.Component), _class.defaultProps = {
  right: false,
  color: '#55B3E3',
  noLink: false,
  shortSize: 5,
  morePrompt: 'More\u2026',
  fewerPrompt: 'Fewer\u2026'
}, _class.displayName = 'ListWithBarsFacetContents', _temp);
export { ListWithBarsFacetContents as default };