@mskcc/carbon-react/lib/components/DataTable/TableHeader.js

Carbon react components for the MSKCC DSM

/**
 * MSKCC 2021, 2024
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var cx = require('classnames');
var PropTypes = require('prop-types');
var React = require('react');
var iconsReact = require('@carbon/icons-react');
require('./state/sorting.js');
var useId = require('../../internal/useId.js');
var usePrefix = require('../../internal/usePrefix.js');
var sortStates = require('./state/sortStates.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

const defaultScope = 'col';
const translationKeys = {
  buttonDescription: 'carbon.table.header.icon.description'
};
const sortDirections = {
  [sortStates.sortStates.NONE]: 'none',
  [sortStates.sortStates.ASC]: 'ascending',
  [sortStates.sortStates.DESC]: 'descending'
};
const TableHeader = /*#__PURE__*/React__default["default"].forwardRef(function TableHeader(_ref, ref) {
  let {
    className: headerClassName,
    children,
    colSpan,
    isSortable,
    isSortHeader,
    onClick,
    scope = defaultScope,
    sortDirection,
    translateWithId: t,
    id,
    ...rest
  } = _ref;
  const prefix = usePrefix.usePrefix();
  const uniqueId = useId.useId('table-sort');
  if (!isSortable) {
    return /*#__PURE__*/React__default["default"].createElement("th", _rollupPluginBabelHelpers["extends"]({}, rest, {
      id: id,
      className: headerClassName,
      scope: scope,
      colSpan: colSpan,
      ref: ref
    }), children ? /*#__PURE__*/React__default["default"].createElement("div", {
      className: `${prefix}--table-header-label`
    }, children) : null);
  }
  const className = cx__default["default"](headerClassName, {
    [`${prefix}--table-sort`]: true,
    [`${prefix}--table-sort--active`]: isSortHeader && sortDirection !== sortStates.sortStates.NONE,
    [`${prefix}--table-sort--descending`]: isSortHeader && sortDirection === sortStates.sortStates.DESC
  });
  const ariaSort = !isSortHeader || !sortDirection ? 'none' : sortDirections[sortDirection];
  const sortDescription = t && t('carbon.table.header.icon.description', {
    header: children,
    sortDirection,
    isSortHeader,
    sortStates: sortStates.sortStates
  });
  const headerClasses = cx__default["default"](headerClassName, `${prefix}--table-sort__header`);
  return /*#__PURE__*/React__default["default"].createElement("th", {
    id: id,
    "aria-sort": ariaSort,
    className: headerClasses,
    colSpan: colSpan,
    ref: ref,
    scope: scope
  }, /*#__PURE__*/React__default["default"].createElement("div", {
    className: `${prefix}--table-sort__description`,
    id: uniqueId
  }, sortDescription), /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
    type: "button",
    "aria-describedby": uniqueId,
    className: className,
    onClick: onClick
  }, rest), /*#__PURE__*/React__default["default"].createElement("span", {
    className: `${prefix}--table-sort__flex`
  }, /*#__PURE__*/React__default["default"].createElement("div", {
    className: `${prefix}--table-header-label`
  }, children), /*#__PURE__*/React__default["default"].createElement(iconsReact.ArrowUp, {
    size: 20,
    className: `${prefix}--table-sort__icon`
  }), /*#__PURE__*/React__default["default"].createElement(iconsReact.ArrowsVertical, {
    size: 20,
    className: `${prefix}--table-sort__icon-unsorted`
  }))));
});
TableHeader.propTypes = {
  /**
   * Pass in children that will be embedded in the table header label
   */
  children: PropTypes__default["default"].node,
  /**
   * Specify an optional className to be applied to the container node
   */
  className: PropTypes__default["default"].string,
  /**
   * Specify `colSpan` as a non-negative integer value to indicate how
   * many columns the TableHeader cell extends in a table
   */
  colSpan: PropTypes__default["default"].number,
  /**
   * Supply an id to the th element.
   */
  id: PropTypes__default["default"].string,
  /**
   * Specify whether this header is the header by which a table is being sorted
   * by
   */
  isSortHeader: PropTypes__default["default"].bool,
  /**
   * Specify whether this header is one through which a user can sort the table
   */
  isSortable: PropTypes__default["default"].bool,
  /**
   * Hook that is invoked when the header is clicked
   */
  onClick: PropTypes__default["default"].func,
  /**
   * Specify the scope of this table header. You can find more info about this
   * attribute at the following URL:
   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope
   */
  scope: PropTypes__default["default"].string.isRequired,
  /**
   * Specify which direction we are currently sorting by, should be one of DESC,
   * NONE, or ASC.
   */
  sortDirection: PropTypes__default["default"].oneOf(Object.values(sortStates.sortStates)),
  /**
   * Supply a method to translate internal strings with your i18n tool of
   * choice. Translation keys are available on the `translationKeys` field for
   * this component.
   */
  translateWithId: PropTypes__default["default"].func
};
TableHeader.translationKeys = Object.values(translationKeys);
TableHeader.displayName = 'TableHeader';

exports["default"] = TableHeader;