terra-table/lib/subcomponents/RowSelectionCell.js

The Terra Table component provides user a way to display data in an accessible table format.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _bind = _interopRequireDefault(require("classnames/bind"));
var _reactIntl = require("react-intl");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _terraThemeContext = _interopRequireDefault(require("terra-theme-context"));
var _GridContext = _interopRequireWildcard(require("../utils/GridContext"));
var _Cell = _interopRequireDefault(require("./Cell"));
var _RowSelectionCellModule = _interopRequireDefault(require("./RowSelectionCell.module.scss"));
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
var cx = _bind.default.bind(_RowSelectionCellModule.default);
var propTypes = {
  /**
   * String identifier of the column in which the Cell will be rendered.
   */
  columnId: _propTypes.default.string.isRequired,
  /**
   * Unique identifier for the parent table
   */
  tableId: _propTypes.default.string.isRequired,
  /**
   * @private
   * The intl object containing translations. This is retrieved from the context automatically by injectIntl.
   */
  intl: _propTypes.default.shape({
    formatMessage: _propTypes.default.func
  }).isRequired,
  /**
   * String identifier of the row in which the Cell will be rendered.
   */
  rowId: _propTypes.default.string.isRequired,
  /**
   * The cell's row position in the table. This is zero based.
   */
  rowIndex: _propTypes.default.number,
  /**
   * The cell's column position in the table. This is zero based.
   */
  columnIndex: _propTypes.default.number,
  /**
   * An identifier for the section.
   */
  sectionId: _propTypes.default.string,
  /**
   * The section's position in the table. This is zero based.
   */
  sectionIndex: _propTypes.default.number,
  /**
   * Boolean indicating whether the cell is currently selected.
   */
  isSelected: _propTypes.default.bool,
  /**
   * Boolean indicating that the cell has been highlighted.
   */
  isHighlighted: _propTypes.default.bool,
  /**
   * String that labels the Row for accessibility. When a row is selected, this is the label that will be read.
   */
  ariaLabel: _propTypes.default.string,
  /**
   * Callback function that will be called when this cell is selected.
   */
  onCellSelect: _propTypes.default.func
};
function RowSelectionCell(props) {
  var rowId = props.rowId,
    columnId = props.columnId,
    tableId = props.tableId,
    rowIndex = props.rowIndex,
    columnIndex = props.columnIndex,
    sectionId = props.sectionId,
    sectionIndex = props.sectionIndex,
    isSelected = props.isSelected,
    isHighlighted = props.isHighlighted,
    ariaLabel = props.ariaLabel,
    onCellSelect = props.onCellSelect,
    intl = props.intl;
  var theme = (0, _react.useContext)(_terraThemeContext.default);
  var gridContext = (0, _react.useContext)(_GridContext.default);
  var isGridContext = gridContext.role === _GridContext.GridConstants.GRID;
  var rowLabel = intl.formatMessage({
    id: 'Terra.table.row-index'
  }, {
    row: rowIndex
  });
  var selectionCheckbox = /*#__PURE__*/_react.default.createElement("input", {
    type: "checkbox",
    "aria-label": ariaLabel || rowLabel,
    readOnly: true,
    tabIndex: isGridContext ? -1 : 0,
    checked: isSelected,
    className: cx('input', theme.className, {
      highlighted: isHighlighted
    })
  });
  return /*#__PURE__*/_react.default.createElement(_Cell.default, {
    rowId: rowId,
    columnId: columnId,
    tableId: tableId,
    key: "".concat(rowId, "_").concat(columnId),
    rowIndex: rowIndex,
    columnIndex: columnIndex,
    sectionId: sectionId,
    sectionIndex: sectionIndex,
    isSelected: false,
    onCellSelect: onCellSelect
  }, selectionCheckbox);
}
RowSelectionCell.propTypes = propTypes;
var _default = exports.default = /*#__PURE__*/_react.default.memo((0, _reactIntl.injectIntl)(RowSelectionCell));