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

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.default = void 0;

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

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

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

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

var _Checkbox = _interopRequireDefault(require("../Checkbox"));

var _Table3 = _interopRequireDefault(require("./Table.HeaderCell"));

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

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

function TableHead(_ref) {
  var columns = _ref.columns,
      _ref$dataCy = _ref['data-cy'],
      dataCy = _ref$dataCy === void 0 ? 'TableHead' : _ref$dataCy,
      isLoading = _ref.isLoading,
      selectAllRows = _ref.selectAllRows,
      deselectAllRows = _ref.deselectAllRows,
      onSelectRow = _ref.onSelectRow,
      rows = _ref.rows,
      selected = _ref.selected,
      selectionKey = _ref.selectionKey,
      sortedInfo = _ref.sortedInfo,
      tableRole = _ref.tableRole,
      withSelectableRows = _ref.withSelectableRows;

  function handleChange(_, checked) {
    if (checked) {
      selectAllRows(rows, selectionKey, onSelectRow);
    } else {
      deselectAllRows(onSelectRow);
    }
  }

  return /*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
    "data-cy": dataCy,
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
      className: _Table2.TABLE_CLASSNAME + "__HeaderRow",
      children: [withSelectableRows ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table4.HeaderCellUI, {
        className: "c-Table__Header Column_Selector",
        cellWidth: "43px",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
          checked: selected,
          onChange: handleChange,
          onEnter: handleChange,
          value: "all"
        })
      }) : null, columns.filter(function (column) {
        return column.show;
      }).map(function (column) {
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table3.default, {
          column: column,
          isLoading: isLoading,
          sortedInfo: sortedInfo,
          tableRole: tableRole
        }, (0, _Table.generateCellKey)('headercell', column));
      })]
    })
  });
}

TableHead.propTypes = {
  /** List of columns */
  columns: _propTypes.default.arrayOf(_propTypes.default.shape(_Table.columnShape)),

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

  /** List of Rows (data), which are objects */
  rows: _propTypes.default.arrayOf(_propTypes.default.shape(_Table.dataShape)),
  selected: _propTypes.default.bool,

  /** Customize which key from your data should be used for selection */
  selectionKey: _propTypes.default.string,

  /** 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
  }),

  /** Adds a column with a checkbox for row selection */
  withSelectableRows: _propTypes.default.bool
};
var _default = TableHead;
exports.default = _default;