@salesforce/design-system-react/module/components/data-table/private/head.js

Salesforce Lightning Design System for React

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); }

/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved */

/* Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
// ### React
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames'; // ## Children

import CellFixed from './cell-fixed';
import Checkbox from '../../checkbox';
import HeaderCell from './header-cell';
import InteractiveElement from '../interactive-element';
import CellContext from '../private/cell-context';
import TableContext from '../private/table-context';
import useContextHelper from './context-helper'; // ## Constants

import { DATA_TABLE_HEAD } from '../../../utilities/constants';
var InteractiveCheckbox = InteractiveElement(Checkbox); // ### Prop Types

var propTypes = {
  assistiveText: PropTypes.shape({
    actionsHeader: PropTypes.string,
    columnSort: PropTypes.string,
    columnSortedAscending: PropTypes.string,
    columnSortedDescending: PropTypes.string,
    selectAllRows: PropTypes.string,
    selectRow: PropTypes.string
  }),
  allSelected: PropTypes.bool,
  headerRefs: PropTypes.func,
  isHidden: PropTypes.bool,
  indeterminateSelected: PropTypes.bool,
  canSelectRows: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['checkbox', 'radio'])]),
  columns: PropTypes.arrayOf(PropTypes.shape({
    Cell: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
    props: PropTypes.object
  })),
  fixedHeader: PropTypes.bool,
  id: PropTypes.string,
  onToggleAll: PropTypes.func,
  onSort: PropTypes.func,
  showRowActions: PropTypes.bool
};

var ActionsHeader = function ActionsHeader(props) {
  var tableContext = useContext(TableContext);
  var cellContext = {
    columnIndex: props.columnIndex,
    rowIndex: 0
  };

  var _useContextHelper = useContextHelper(tableContext, cellContext, props.fixedLayout),
      tabIndex = _useContextHelper.tabIndex,
      hasFocus = _useContextHelper.hasFocus,
      handleFocus = _useContextHelper.handleFocus,
      handleKeyDown = _useContextHelper.handleKeyDown;

  var fixedHeader = props.fixedHeader;

  var getContent = function getContent(style) {
    return /*#__PURE__*/React.createElement("div", {
      className: "slds-th__action",
      style: style
    }, /*#__PURE__*/React.createElement("span", {
      className: "slds-assistive-text"
    }, props.assistiveText));
  };

  return /*#__PURE__*/React.createElement("th", {
    className: classNames({
      'slds-has-focus': hasFocus
    }),
    ref: function ref(_ref) {
      if (props.headerRefs) {
        props.headerRefs(_ref, 'action');
      }

      if (_ref && hasFocus) {
        _ref.focus();
      }
    },
    scope: "col",
    style: {
      height: fixedHeader ? 0 : null,
      lineHeight: fixedHeader ? 0 : null,
      width: '3.25rem'
    },
    onFocus: handleFocus,
    onKeyDown: handleKeyDown,
    tabIndex: tabIndex
  }, getContent(fixedHeader ? {
    height: 0,
    overflow: 'hidden',
    paddingBottom: 0,
    paddingTop: 0,
    visibility: 'hidden'
  } : null), fixedHeader ? /*#__PURE__*/React.createElement(CellFixed, null, getContent({
    lineHeight: 1,
    width: '100%'
  })) : null);
};

var SelectHeader = function SelectHeader(props) {
  var tableContext = useContext(TableContext);
  var cellContext = {
    columnIndex: 0,
    rowIndex: 0
  };

  var _useContextHelper2 = useContextHelper(tableContext, cellContext, props.fixedLayout),
      tabIndex = _useContextHelper2.tabIndex,
      hasFocus = _useContextHelper2.hasFocus,
      handleFocus = _useContextHelper2.handleFocus,
      handleKeyDown = _useContextHelper2.handleKeyDown;

  var fixedHeader = props.fixedHeader,
      canSelectRows = props.canSelectRows;

  var getContent = function getContent(idSuffix, style, ariaHidden) {
    var render = null;

    if (canSelectRows === 'radio') {
      render = !ariaHidden ? /*#__PURE__*/React.createElement("div", {
        className: "slds-truncate slds-assistive-text",
        id: "".concat(props.id, "-column-group-header-row-select"),
        title: props.assistiveText.selectRowGroup
      }, props.assistiveText.selectRowGroup) : null;
    } else if (canSelectRows === true || canSelectRows === 'checkbox') {
      render = /*#__PURE__*/React.createElement("div", {
        className: "slds-th__action slds-th__action_form",
        "aria-hidden": ariaHidden && true,
        style: style
      }, !ariaHidden ? /*#__PURE__*/React.createElement("span", {
        id: "".concat(props.id, "-column-group-header-row-select"),
        className: "slds-assistive-text"
      }, props.assistiveText.selectAllRows) : null, /*#__PURE__*/React.createElement(InteractiveCheckbox, {
        assistiveText: {
          label: props.assistiveText.selectAllRows
        },
        checked: props.allSelected,
        indeterminate: props.indeterminateSelected,
        id: "".concat(props.id, "-").concat(idSuffix) // There is a checkbox for user interaction and a checkbox for positioning. ariaHidden is for the checkbox for positioning and it should be removed from the accessibility tree.
        ,
        name: !ariaHidden ? 'SelectAll' : undefined,
        onChange: props.onToggleAll
      }));
    }

    return render;
  };

  return /*#__PURE__*/React.createElement("th", {
    className: classNames('slds-text-align_right', {
      'slds-has-focus': hasFocus
    }),
    ref: function ref(_ref2) {
      if (props.headerRefs) {
        props.headerRefs(_ref2, 'select');
      }

      if (_ref2 && hasFocus) {
        _ref2.focus();
      }
    },
    scope: "col",
    style: {
      height: fixedHeader ? 0 : null,
      lineHeight: fixedHeader ? 0 : null,
      width: '3.25rem'
    },
    onFocus: handleFocus,
    onKeyDown: handleKeyDown,
    tabIndex: tabIndex
  }, /*#__PURE__*/React.createElement(CellContext.Provider, {
    value: cellContext
  }, getContent('SelectAll-fixed-header', fixedHeader ? {
    display: 'flex',
    height: 0,
    overflow: 'hidden',
    paddingBottom: 0,
    paddingTop: 0,
    visibility: 'hidden'
  } : null, fixedHeader && 'ariaHidden'), fixedHeader ? /*#__PURE__*/React.createElement(CellFixed, null, getContent('SelectAll', {
    display: 'flex',
    justifyContent: 'flex-end',
    lineHeight: 1,
    width: '100%'
  })) : null));
};
/**
 * Used internally, provides header row rendering to the DataTable.
 */


var DataTableHead = function DataTableHead(props) {
  var getActionsHeader = function getActionsHeader() {
    var actionsHeader = null;

    if (props.showRowActions) {
      actionsHeader = /*#__PURE__*/React.createElement(ActionsHeader, {
        assistiveText: props.assistiveText.actionsHeader,
        columnIndex: props.canSelectRows ? props.columns.length + 1 : props.columns.length,
        fixedLayout: props.fixedLayout,
        fixedHeader: props.fixedHeader,
        headerRefs: props.headerRefs
      });
    }

    return actionsHeader;
  };

  var getSelectHeader = function getSelectHeader() {
    var canSelectRows = props.canSelectRows;
    var selectHeader = null;

    if (canSelectRows) {
      selectHeader = /*#__PURE__*/React.createElement(SelectHeader, {
        allSelected: props.allSelected,
        assistiveText: {
          selectAllRows: props.assistiveText.selectAllRows,
          selectRowGroup: props.assistiveText.selectRowGroup
        },
        canSelectRows: canSelectRows,
        fixedHeader: props.fixedHeader,
        fixedLayout: props.fixedLayout,
        headerRefs: props.headerRefs,
        id: props.id,
        indeterminateSelected: props.indeterminateSelected,
        onToggleAll: props.onToggleAll
      });
    }

    return selectHeader;
  };

  var actionsHeader = getActionsHeader();
  var selectHeader = getSelectHeader();
  return /*#__PURE__*/React.createElement("thead", {
    className: classNames({
      'slds-assistive-text': props.isHidden
    })
  }, /*#__PURE__*/React.createElement("tr", {
    className: "slds-line-height_reset"
  }, selectHeader, props.columns.map(function (column, index) {
    return /*#__PURE__*/React.createElement(CellContext.Provider, {
      key: "".concat(props.id, "-").concat(column.props.property),
      value: {
        columnIndex: props.canSelectRows ? index + 1 : index,
        rowIndex: 0
      }
    }, /*#__PURE__*/React.createElement(HeaderCell, _extends({
      assistiveText: props.assistiveText,
      cellRef: function cellRef(ref) {
        if (props.headerRefs) {
          props.headerRefs(ref, index);
        }
      },
      fixedHeader: props.fixedHeader,
      id: "".concat(props.id, "-").concat(column.props.property),
      onSort: props.onSort
    }, column.props)));
  }), actionsHeader));
}; // ### Display Name
// Always use the canonical component name as the React display name.


DataTableHead.displayName = DATA_TABLE_HEAD;
DataTableHead.propTypes = propTypes;
export default DataTableHead;
//# sourceMappingURL=head.js.map