nishant-design-system/lib/components/Table/DefaultTableHeader.js

Sense UI components library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.BasicTableHead = exports.BasicHeadCell = void 0;
exports.DefaultTableHeader = DefaultTableHeader;
var React = _interopRequireWildcard(require("react"));
var _classify = _interopRequireDefault(require("../../utils/classify"));
var _makeClassNameComponent = require("../../utils/makeClassNameComponent");
var _Checkbox = require("../Checkbox");
var _Icon = require("../Icon");
var _Text = require("../Text");
var _DefaultRow = require("./DefaultRow");
var _TableModule = _interopRequireDefault(require("./Table.module.css"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

const BasicHeadCell = (0, _makeClassNameComponent.makeClassNameComponent)(_TableModule.default.defaultHeaderCell, 'th');
exports.BasicHeadCell = BasicHeadCell;
const BasicTableHead = (0, _makeClassNameComponent.makeClassNameComponent)(_TableModule.default.defaultTableHead, 'thead');
exports.BasicTableHead = BasicTableHead;
const SortIcon = _ref => {
  let {
    sortDirection,
    color,
    className
  } = _ref;
  if (sortDirection === 'original') {
    return /*#__PURE__*/React.createElement(_Icon.Icon, {
      color: color,
      name: "caret-down",
      size: "small",
      type: "solid",
      className: className
    });
  } else if (sortDirection === 'asc') {
    return /*#__PURE__*/React.createElement(_Icon.Icon, {
      color: color,
      name: "arrow-up",
      size: "small",
      type: "regular",
      className: className
    });
  } else if (sortDirection === 'desc') {
    return /*#__PURE__*/React.createElement(_Icon.Icon, {
      color: color,
      name: "arrow-down",
      size: "small",
      type: "regular",
      className: className
    });
  }
};
function DefaultTableHeader(props) {
  const {
    className,
    sortable = false,
    columns,
    handleSortClick,
    sortKey,
    sortDirection = 'original',
    handleCheckboxClick,
    checked,
    disabled
  } = props;
  const tableHeaderCells = () => /*#__PURE__*/React.createElement(React.Fragment, null, columns.map((columnData, index) => {
    const {
      key,
      label,
      subtext,
      filterIcon,
      filtered,
      className,
      sticky,
      sortable: columnSortable = false
    } = columnData;
    let headerClassName;
    const filterable = Boolean(filterIcon);
    if (sortable && columnSortable || filterable) {
      headerClassName = (0, _classify.default)(_TableModule.default.defaultHeaderCellSortable, {
        [_TableModule.default.filtered]: filtered,
        [_TableModule.default.stickyHeaderCell]: sticky
      }, _TableModule.default[sortDirection], className);
    } else {
      headerClassName = (0, _classify.default)(className, {
        [_TableModule.default.stickyHeaderCell]: sticky
      });
    }
    const headCellClickHandler = () => {
      if (sortable && columnSortable && handleSortClick) {
        handleSortClick(key);
      }
    };
    let columnSortDirection = 'original';
    if (sortKey === key) {
      columnSortDirection = sortDirection;
    }
    return /*#__PURE__*/React.createElement(BasicHeadCell, {
      className: (0, _classify.default)({
        [_TableModule.default.selectedHeader]: sortKey === key && columnSortDirection !== 'original'
      }, headerClassName)
      // eslint-disable-next-line react/no-array-index-key
      ,
      key: index,
      scope: "col",
      onClick: headCellClickHandler
    }, /*#__PURE__*/React.createElement("div", {
      className: (0, _classify.default)(_TableModule.default.labelContents)
    }, /*#__PURE__*/React.createElement("div", {
      className: _TableModule.default.labelContainer
    }, /*#__PURE__*/React.createElement(_Text.SubTitleExtraSmall, {
      color: _Text.TEXT_COLORS.secondary,
      className: (0, _classify.default)({
        [_TableModule.default.selectedHeader]: sortKey === key && columnSortDirection !== 'original'
      })
    }, label), /*#__PURE__*/React.createElement("span", {
      className: _TableModule.default.headerSubtext
    }, subtext && subtext)), (sortable || filterIcon != null) && /*#__PURE__*/React.createElement("div", {
      className: _TableModule.default.headerIconContainer
    }, columnSortable && /*#__PURE__*/React.createElement(SortIcon, {
      color: _Text.TEXT_COLORS.secondary,
      className: (0, _classify.default)(_TableModule.default.sortArrow, {
        [_TableModule.default.selectedSortArrow]: sortKey === key
      }),
      sortDirection: columnSortDirection
    }), filterIcon != null && /*#__PURE__*/React.createElement("div", {
      className: _TableModule.default.filterIcon
    }, filterIcon))));
  }));
  return /*#__PURE__*/React.createElement(BasicTableHead, {
    className: (0, _classify.default)(_TableModule.default.tableHeaderSortable, className)
  }, /*#__PURE__*/React.createElement(_DefaultRow.BasicRow, {
    className: _TableModule.default.defaultHeaderRow
  }, handleCheckboxClick && /*#__PURE__*/React.createElement(BasicHeadCell, {
    scope: "col"
  }, /*#__PURE__*/React.createElement("div", {
    className: _TableModule.default.checkbox
  }, /*#__PURE__*/React.createElement(_Checkbox.Checkbox, {
    value: "all",
    checked: checked === 'true' ? true : false,
    indeterminate: checked === 'mixed',
    onChange: handleCheckboxClick,
    disabled: disabled
  }))), tableHeaderCells()));
}