@helpscout/hsds-react/components/Table/Table.HeaderCell.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = HeaderCell;

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

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

var _classnames = _interopRequireDefault(require("classnames"));

var _lodash = _interopRequireDefault(require("lodash.isnil"));

var _Icon = _interopRequireDefault(require("../Icon"));

var _Table = require("./Table.css");

var _Table2 = require("./Table");

var _Table3 = require("./Table.utils");

var _jsxRuntime = require("react/jsx-runtime");

function HeaderCell(_ref) {
  var column = _ref.column,
      isLoading = _ref.isLoading,
      sortedInfo = _ref.sortedInfo,
      tableRole = _ref.tableRole;
  var sorterBtnId = Array.isArray(column.columnKey) ? column.columnKey.join('_') + "_" + column.sortKey + "_sorter" : column.columnKey + "_" + column.sortKey + "_sorter";

  function isTableSortedByThisColumn() {
    var colKey = Array.isArray(column.columnKey) ? column.sortKey : column.columnKey;
    return !(0, _lodash.default)(sortedInfo) && sortedInfo.order && sortedInfo.columnKey === colKey;
  }

  function getColumnSortStatus() {
    if (isTableSortedByThisColumn()) {
      return sortedInfo.order;
    }

    return 'none';
  }

  function handleClick(e) {
    e.persist();

    if (!isLoading && !(0, _lodash.default)(column.sorter)) {
      var sorterFnResult = Array.isArray(column.columnKey) ? column.sorter(column.sortKey) : column.sorter(column.columnKey);
      /**
       * If the sorter function returns a promise, we refocus the button only when
       * the event was triggered via {enter} key press.
       *
       * The check here only looks for a `then` function as we don't want
       * to run this in all cases (like it would be if we use `Promise.resolve`)
       */

      if (sorterFnResult && typeof sorterFnResult.then === 'function') {
        sorterFnResult.then(function () {
          /**
           * Refocus button only if the event was triggered with keyboard (thus avoid having to setup a separate onKeyDown event)
           *
           * https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail
           *     For click or dblclick events, UIEvent.detail is the current click count.
           *     For mousedown or mouseup events, UIEvent.detail is 1 plus the current click count.
           * => For all other UIEvent objects, UIEvent.detail is always zero.
           */
          if (e.detail === 0) {
            // Due to async DOM stuff going on, get this out of the queue to make sure is the last and actually takes effect
            setTimeout(function () {
              document.getElementById(sorterBtnId).focus();
            }, 0);
          }
        });
      }
    }
  }

  function renderCellContents() {
    var withCustomContent = !(0, _lodash.default)(column.renderHeaderCell);
    var isSortable = !(0, _lodash.default)(column.sorter);

    if (withCustomContent && !isSortable) {
      return (0, _Table3.generateCustomHeaderCell)(column, sortedInfo);
    }

    if (isSortable) {
      var columnSortStatus = getColumnSortStatus();
      var isSorted = isTableSortedByThisColumn();
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.SortableCellUI, {
        align: column.align,
        className: (0, _classnames.default)(_Table2.TABLE_CLASSNAME + "__SortableHeaderCell", columnSortStatus !== 'none' && 'sorted'),
        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Table.SortableCellContentUI, {
          "aria-label": isSorted && tableRole !== 'table' && "Sorted by " + sortedInfo.columnKey + " " + columnSortStatus,
          align: column.align,
          className: _Table2.TABLE_CLASSNAME + "__SortableHeaderCell__title",
          onClick: handleClick,
          id: sorterBtnId,
          children: [withCustomContent ? (0, _Table3.generateCustomHeaderCell)(column, sortedInfo) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
            children: column.title
          }), columnSortStatus !== 'none' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
            name: columnSortStatus === 'descending' ? 'caret-down' : 'caret-up',
            size: 13
          }) : null]
        })
      });
    }

    return column.title;
  }

  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.HeaderCellUI, {
    className: (0, _Table3.generateCellClassNames)(column, 'HeaderCell'),
    align: column.align,
    cellWidth: column.width,
    "aria-sort": tableRole === 'table' ? getColumnSortStatus() : null,
    children: renderCellContents()
  });
}

HeaderCell.propTypes = {
  /** The column */
  column: _propTypes.default.shape(_Table3.columnShape),

  /** Whether tha table is in the loading state */
  isLoading: _propTypes.default.bool,

  /** When sortable, indicates which column tha table is sorted by, and in which order (ascending or descending) */
  sortedInfo: _propTypes.default.shape({
    columnKey: _propTypes.default.string,
    order: _propTypes.default.string
  })
};