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

Carbon react components for the MSKCC DSM

/**
 * MSKCC 2021, 2024
 */

import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
import cx from 'classnames';
import PropTypes from 'prop-types';
import React__default from 'react';
import { ArrowUp, ArrowsVertical } from '@carbon/icons-react';
import './state/sorting.js';
import { useId } from '../../internal/useId.js';
import { usePrefix } from '../../internal/usePrefix.js';
import { sortStates } from './state/sortStates.js';

const defaultScope = 'col';
const translationKeys = {
  buttonDescription: 'carbon.table.header.icon.description'
};
const sortDirections = {
  [sortStates.NONE]: 'none',
  [sortStates.ASC]: 'ascending',
  [sortStates.DESC]: 'descending'
};
const TableHeader = /*#__PURE__*/React__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();
  const uniqueId = useId('table-sort');
  if (!isSortable) {
    return /*#__PURE__*/React__default.createElement("th", _extends({}, rest, {
      id: id,
      className: headerClassName,
      scope: scope,
      colSpan: colSpan,
      ref: ref
    }), children ? /*#__PURE__*/React__default.createElement("div", {
      className: `${prefix}--table-header-label`
    }, children) : null);
  }
  const className = cx(headerClassName, {
    [`${prefix}--table-sort`]: true,
    [`${prefix}--table-sort--active`]: isSortHeader && sortDirection !== sortStates.NONE,
    [`${prefix}--table-sort--descending`]: isSortHeader && sortDirection === sortStates.DESC
  });
  const ariaSort = !isSortHeader || !sortDirection ? 'none' : sortDirections[sortDirection];
  const sortDescription = t && t('carbon.table.header.icon.description', {
    header: children,
    sortDirection,
    isSortHeader,
    sortStates
  });
  const headerClasses = cx(headerClassName, `${prefix}--table-sort__header`);
  return /*#__PURE__*/React__default.createElement("th", {
    id: id,
    "aria-sort": ariaSort,
    className: headerClasses,
    colSpan: colSpan,
    ref: ref,
    scope: scope
  }, /*#__PURE__*/React__default.createElement("div", {
    className: `${prefix}--table-sort__description`,
    id: uniqueId
  }, sortDescription), /*#__PURE__*/React__default.createElement("button", _extends({
    type: "button",
    "aria-describedby": uniqueId,
    className: className,
    onClick: onClick
  }, rest), /*#__PURE__*/React__default.createElement("span", {
    className: `${prefix}--table-sort__flex`
  }, /*#__PURE__*/React__default.createElement("div", {
    className: `${prefix}--table-header-label`
  }, children), /*#__PURE__*/React__default.createElement(ArrowUp, {
    size: 20,
    className: `${prefix}--table-sort__icon`
  }), /*#__PURE__*/React__default.createElement(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.node,
  /**
   * Specify an optional className to be applied to the container node
   */
  className: PropTypes.string,
  /**
   * Specify `colSpan` as a non-negative integer value to indicate how
   * many columns the TableHeader cell extends in a table
   */
  colSpan: PropTypes.number,
  /**
   * Supply an id to the th element.
   */
  id: PropTypes.string,
  /**
   * Specify whether this header is the header by which a table is being sorted
   * by
   */
  isSortHeader: PropTypes.bool,
  /**
   * Specify whether this header is one through which a user can sort the table
   */
  isSortable: PropTypes.bool,
  /**
   * Hook that is invoked when the header is clicked
   */
  onClick: PropTypes.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.string.isRequired,
  /**
   * Specify which direction we are currently sorting by, should be one of DESC,
   * NONE, or ASC.
   */
  sortDirection: PropTypes.oneOf(Object.values(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.func
};
TableHeader.translationKeys = Object.values(translationKeys);
TableHeader.displayName = 'TableHeader';

export { TableHeader as default };