@salesforce/design-system-react/module/components/data-table/private/row.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'; // ### classNames

import classNames from 'classnames'; // ### find

import find from 'lodash.find'; // ## Children

import Checkbox from '../../checkbox';
import Radio from '../../radio'; // ## Constants

import { DATA_TABLE_ROW, DATA_TABLE_ROW_ACTIONS, DATA_TABLE_CELL } from '../../../utilities/constants';
import InteractiveElement from '../interactive-element';
import CellContext from '../private/cell-context';
import TableContext from '../private/table-context';
import contextHelper from './context-helper';
var InteractiveCheckbox = InteractiveElement(Checkbox);
var InteractiveRadio = InteractiveElement(Radio);
var propTypes = {
  assistiveText: PropTypes.shape({
    actionsHeader: PropTypes.string,
    columnSort: PropTypes.string,
    columnSortedAscending: PropTypes.string,
    columnSortedDescending: PropTypes.string,
    selectAllRows: PropTypes.string,
    selectRow: PropTypes.string
  }),
  canSelectRows: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['checkbox', 'radio'])]),
  className: PropTypes.string,
  columns: PropTypes.arrayOf(PropTypes.shape({
    Cell: PropTypes.func,
    props: PropTypes.object
  })),

  /**
   * Use this if you are creating an advanced table (selectable, sortable, or resizable rows)
   */
  fixedLayout: PropTypes.bool,
  id: PropTypes.string.isRequired,
  item: PropTypes.object.isRequired,
  onToggle: PropTypes.func,
  rowActions: PropTypes.element,
  selection: PropTypes.array,
  tableId: PropTypes.string
};
/**
 * Used internally, provides row rendering to the DataTable.
 */

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

  var _contextHelper = contextHelper(tableContext, selectRowCellContext, props.fixedLayout),
      tabIndex = _contextHelper.tabIndex,
      hasFocus = _contextHelper.hasFocus,
      handleFocus = _contextHelper.handleFocus,
      handleKeyDown = _contextHelper.handleKeyDown;

  var handleToggle = function handleToggle(e, _ref) {
    var checked = _ref.checked;
    return props.onToggle(props.item, checked, e);
  };

  var ariaProps = {};
  var isSelected = !!find(props.selection, props.item);

  if (props.canSelectRows) {
    ariaProps['aria-selected'] = isSelected ? 'true' : 'false';
  } // i18n


  return /*#__PURE__*/React.createElement("tr", _extends({}, ariaProps, {
    className: classNames(props.className, {
      'slds-hint-parent': props.rowActions,
      'slds-is-selected': props.canSelectRows && isSelected,
      'slds-has-focus': hasFocus
    })
  }), props.canSelectRows ?
  /*#__PURE__*/
  // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
  React.createElement("td", {
    role: props.fixedLayout ? 'gridcell' : null,
    className: "slds-text-align_right",
    "data-label": props.stacked ? 'Select Row' : undefined,
    style: {
      width: '3.25rem'
    },
    onFocus: handleFocus,
    onKeyDown: handleKeyDown,
    ref: function ref(_ref2) {
      if (_ref2 && hasFocus) {
        _ref2.focus();
      }
    },
    tabIndex: tabIndex
  }, /*#__PURE__*/React.createElement(CellContext.Provider, {
    value: selectRowCellContext
  }, props.canSelectRows === 'radio' ? /*#__PURE__*/React.createElement(InteractiveRadio, {
    assistiveText: {
      label: "".concat(props.assistiveText.selectRow, " ").concat(Number(props.index) + 1)
    },
    "aria-labelledby": "".concat(props.id, "-SelectRow-label ").concat(props.tableId, "-SLDSDataTableHead-column-group-header-row-select"),
    checked: isSelected,
    className: "slds-m-right_x-small",
    id: "".concat(props.id, "-SelectRow"),
    labelId: "".concat(props.id, "-SelectRow-label"),
    name: "".concat(props.tableId, "-SelectRow"),
    onChange: handleToggle
  }) : /*#__PURE__*/React.createElement(InteractiveCheckbox, {
    assistiveText: {
      label: "".concat(props.assistiveText.selectRow, " ").concat(Number(props.index) + 1)
    },
    "aria-labelledby": "".concat(props.id, "-SelectRow-label ").concat(props.tableId, "-SLDSDataTableHead-column-group-header-row-select"),
    checked: isSelected,
    id: "".concat(props.id, "-SelectRow"),
    labelId: "".concat(props.id, "-SelectRow-label"),
    name: "SelectRow".concat(props.index + 1),
    onChange: handleToggle
  }))) : null, props.columns.map(function (column, index) {
    var Cell = column.Cell;
    var cellId = "".concat(props.id, "-").concat(DATA_TABLE_CELL, "-").concat(column.props.property);
    return /*#__PURE__*/React.createElement(CellContext.Provider, {
      key: cellId,
      value: {
        columnIndex: props.canSelectRows ? index + 1 : index,
        rowIndex: props.rowIndex
      }
    }, /*#__PURE__*/React.createElement(Cell, _extends({}, column.props, {
      className: column.props.truncate ? 'slds-truncate' : null,
      fixedLayout: props.fixedLayout,
      rowHeader: column.props.primaryColumn,
      id: cellId,
      item: props.item,
      width: column.props.width,
      headerId: props.item.headerId,
      columns: props.columns
    }), props.item[column.props.property]));
  }), /*#__PURE__*/React.createElement(CellContext.Provider, {
    value: {
      columnIndex: props.canSelectRows ? props.columns.length + 1 : props.columns.length,
      rowIndex: props.rowIndex
    }
  }, props.rowActions ? /*#__PURE__*/React.cloneElement(props.rowActions, {
    id: "".concat(props.id, "-").concat(DATA_TABLE_ROW_ACTIONS),
    item: props.item,
    fixedLayout: props.fixedLayout
  }) : null));
};

DataTableRow.displayName = DATA_TABLE_ROW;
DataTableRow.propTypes = propTypes;
export default DataTableRow;
//# sourceMappingURL=row.js.map