@aibsweb/faceted-search/es/components/pivot-table/pivot-header.js

A generalized faceted search application.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.PivotHeader = exports.headerOrientation = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _Grid = require("react-virtualized/dist/es/Grid");

var _AutoSizer = require("react-virtualized/dist/es/AutoSizer");

require("../../../scss/pivot-header.scss");

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

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

/**
 * An enum that determines a pivot header's orientation. These values are tied to css classes, make
 * sure you change both if you change either.
 */
var headerOrientation = {
  COLUMN: 'horizontal',
  ROW: 'vertical'
};
/**
 * Constructs style objects for component inline styles
 *
 * @param {Object} styleConfiguration parameters used for styling
 */

exports.headerOrientation = headerOrientation;

var constructInlineStyles = function constructInlineStyles(_ref) {
  var orientation = _ref.orientation,
      rowHeight = _ref.rowHeight,
      rowCount = _ref.rowCount,
      columnWidth = _ref.columnWidth,
      columnCount = _ref.columnCount,
      paddingLeft = _ref.paddingLeft,
      marginLeft = _ref.marginLeft;

  if (orientation === headerOrientation.COLUMN) {
    return {
      width: "".concat(columnWidth * columnCount, "px"),
      marginLeft: "".concat(marginLeft, "px"),
      paddingLeft: "".concat(paddingLeft, "px"),
      height: rowHeight
    };
  }

  return {
    width: "".concat(columnWidth, "px"),
    marginLeft: '0px',
    paddingLeft: "".concat(paddingLeft, "px"),
    height: "".concat(rowHeight * rowCount, "px")
  };
};
/**
 * The Pivot Header component
 *
 * @param {object} props
 */


var PivotHeader = function PivotHeader(_ref2) {
  var scrollLeft = _ref2.scrollLeft,
      columnCount = _ref2.columnCount,
      columnWidth = _ref2.columnWidth,
      rowCount = _ref2.rowCount,
      rowHeight = _ref2.rowHeight,
      orientation = _ref2.orientation,
      marginLeft = _ref2.marginLeft,
      paddingLeft = _ref2.paddingLeft,
      onScroll = _ref2.onScroll,
      cellRenderer = _ref2.cellRenderer;
  var inlineStyles = constructInlineStyles({
    orientation: orientation,
    rowHeight: rowHeight,
    rowCount: rowCount,
    columnWidth: columnWidth,
    columnCount: columnCount,
    paddingLeft: paddingLeft,
    marginLeft: marginLeft
  });
  var gridProps = {
    cellRenderer: cellRenderer,
    columnCount: columnCount,
    columnWidth: columnWidth,
    rowCount: rowCount,
    rowHeight: rowHeight,
    scrollLeft: scrollLeft,
    style: {
      overflowX: 'auto',
      overflowY: 'hidden'
    }
  };
  return _react["default"].createElement("div", {
    className: "pivot-header pivot-header--".concat(orientation),
    style: inlineStyles
  }, _react["default"].createElement(_AutoSizer.AutoSizer, null, function (_ref3) {
    var height = _ref3.height,
        width = _ref3.width;
    return _react["default"].createElement(_Grid.Grid, _extends({}, gridProps, {
      height: height,
      width: width,
      onScroll: onScroll
    }));
  }));
};

exports.PivotHeader = PivotHeader;
PivotHeader.propTypes = {
  scrollLeft: _propTypes["default"].number,
  columnCount: _propTypes["default"].number,
  columnWidth: _propTypes["default"].number,
  rowCount: _propTypes["default"].number,
  rowHeight: _propTypes["default"].number,
  orientation: _propTypes["default"].string,
  marginLeft: _propTypes["default"].number,
  paddingLeft: _propTypes["default"].number,
  onScroll: _propTypes["default"].func,
  cellRenderer: _propTypes["default"].func
};
PivotHeader.defaultProps = {
  marginLeft: 0,
  paddingLeft: 0
};