@vtex/styleguide/lib/EXPERIMENTAL_Table/Sections/Thead.js

> VTEX Styleguide React components ([Docs](https://vtex.github.io/styleguide))

"use strict";

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

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _classnames = require("classnames");

var _classnames2 = _interopRequireDefault(_classnames);

var _testing = require("../context/testing");

var _head = require("../context/head");

var _useTableMeasures = require("../hooks/useTableMeasures");

var _Row = require("./Row");

var _Row2 = _interopRequireDefault(_Row);

var _Cell = require("./Cell");

var _Cell2 = _interopRequireDefault(_Cell);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

function Thead(_ref, ref) {
  var children = _ref.children,
      className = _ref.className,
      restProps = _objectWithoutPropertiesLoose(_ref, ["children", "className"]);

  var _useTestingContext = (0, _testing.useTestingContext)(),
      testId = _useTestingContext.testId;

  var _useHeadContext = (0, _head.useHeadContext)(),
      sorting = _useHeadContext.sorting,
      sticky = _useHeadContext.sticky;

  return _react2.default.createElement("thead", _extends({
    ref: ref,
    "data-testid": testId + "__header",
    className: "w-100 ph4 truncate overflow-x-hidden c-muted-2 f6 " + className
  }, restProps), _react2.default.createElement(_Row2.default, {
    height: _useTableMeasures.TABLE_HEADER_HEIGHT,
    header: true
  }, function (_ref2) {
    var column = _ref2.column,
        receivedProps = _ref2.props;
    var id = column.id,
        title = column.title,
        sortable = column.sortable;
    var currentlySorting = sorting && sorting.sorted && sorting.sorted.by === id;
    var ascending = sorting && sorting.sorted.order !== 'DSC';

    var suffix = sortable && _react2.default.createElement(_Cell2.default.Suffix, {
      sorting: currentlySorting,
      ascending: ascending
    });

    var clickable = sortable ? {
      onClick: function onClick() {
        return sorting == null ? void 0 : sorting.sort(id);
      }
    } : {};

    var props = _extends({}, receivedProps, {}, clickable, {
      className: (0, _classnames2.default)('normal', {
        pointer: sortable
      }),
      sorting: currentlySorting,
      sortable: sortable,
      sticky: sticky,
      header: true
    });

    return children ? children({
      props: props,
      key: id,
      column: column,
      suffix: suffix
    }) : _react2.default.createElement(_Row2.default.Cell, _extends({
      key: id
    }, props), title, suffix);
  }));
}

var ForwardedThead = (0, _react.forwardRef)(Thead);
ForwardedThead.Cell = _Row2.default.Cell;
exports.default = ForwardedThead;