@atlaskit/dynamic-table/dist/es2019/components/table-head.js

A dynamic table displays rows of data with built-in pagination, sorting, and re-ordering functionality.

import _extends from "@babel/runtime/helpers/extends";
import React from 'react';
import { validateSortKey } from '../internal/validate-sort-key';
import { Head } from '../styled/head';
import RankableHeadCell from './rankable/table-head-cell';
import HeadCell from './table-head-cell';
// eslint-disable-next-line @repo/internal/react/no-class-components
class TableHead extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activeSortButtonId: null
    };
  }
  UNSAFE_componentWillMount() {
    validateSortKey(this.props.sortKey, this.props.head);
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    if (this.props.sortKey !== nextProps.sortKey || this.props.head !== nextProps.head) {
      validateSortKey(nextProps.sortKey, nextProps.head);
    }
  }
  render() {
    const {
      head,
      sortKey,
      sortOrder,
      isFixedSize,
      onSort,
      isRanking,
      isRankable,
      testId
    } = this.props;
    const {
      activeSortButtonId
    } = this.state;
    if (!head) {
      return null;
    }
    const HeadCellComponent = isRankable ? RankableHeadCell : HeadCell;

    // TODO: Remove `rest` props and use only what is explicitly in the API.
    // Some tests use this to pass in onClick and other stuff within the `head`
    // variable here, but considering it's not in the API, it should probably
    // be removed.
    const {
      cells,
      ...rest
    } = head;
    return /*#__PURE__*/React.createElement(Head, _extends({}, rest, {
      isRanking: isRanking,
      testId: testId && `${testId}--head`
    }), /*#__PURE__*/React.createElement("tr", null, cells.map((cell, index) => {
      const {
        ascendingSortTooltip,
        buttonAriaRoleDescription,
        colSpan,
        content,
        descendingSortTooltip,
        isIconOnlyHeader,
        isSortable,
        key,
        shouldTruncate,
        testId: cellTestId,
        width,
        // TODO: Remove `rest` props and use only what is explicitly in
        // the API.
        ...restCellProps
      } = cell;
      const headCellId = `head-cell-${index}`;
      const handleClick = () => {
        this.setState({
          activeSortButtonId: headCellId
        });
        if (isSortable) {
          onSort(cell)();
        }
      };
      return /*#__PURE__*/React.createElement(HeadCellComponent, _extends({
        colSpan: colSpan,
        content: content,
        isFixedSize: isFixedSize,
        isIconOnlyHeader: isIconOnlyHeader,
        isSortable: !!isSortable,
        isRanking: isRanking,
        key: key || index,
        headCellId: headCellId,
        activeSortButtonId: activeSortButtonId,
        onClick: handleClick,
        testId: cellTestId || testId,
        shouldTruncate: shouldTruncate,
        sortOrder: key === sortKey ? sortOrder : undefined,
        width: width,
        ascendingSortTooltip: ascendingSortTooltip,
        descendingSortTooltip: descendingSortTooltip,
        buttonAriaRoleDescription: buttonAriaRoleDescription
      }, restCellProps));
    })));
  }
}

// eslint-disable-next-line @repo/internal/react/require-jsdoc
export default TableHead;