@salesforce/design-system-react/lib/components/data-table/private/row.js

Salesforce Lightning Design System for React

"use strict";

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

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _createReactClass = require("create-react-class");

var _createReactClass2 = _interopRequireDefault(_createReactClass);

var _propTypes = require("prop-types");

var _propTypes2 = _interopRequireDefault(_propTypes);

var _classnames = require("classnames");

var _classnames2 = _interopRequireDefault(_classnames);

var _lodash = require("lodash.find");

var _lodash2 = _interopRequireDefault(_lodash);

var _checkbox = require("../../checkbox");

var _checkbox2 = _interopRequireDefault(_checkbox);

var _constants = require("../../../utilities/constants");

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

/**
 * Used internally, provides row rendering to the DataTable.
 */
var DataTableRow = (0, _createReactClass2.default)({
  // ### Display Name
  // Always use the canonical component name as the React display name.
  displayName: _constants.DATA_TABLE_ROW,
  // ### Prop Types
  propTypes: {
    assistiveText: _propTypes2.default.shape({
      actionsHeader: _propTypes2.default.string,
      columnSort: _propTypes2.default.string,
      columnSortedAscending: _propTypes2.default.string,
      columnSortedDescending: _propTypes2.default.string,
      selectAllRows: _propTypes2.default.string,
      selectRow: _propTypes2.default.string
    }),
    canSelectRows: _propTypes2.default.bool,
    columns: _propTypes2.default.arrayOf(_propTypes2.default.shape({
      Cell: _propTypes2.default.func,
      props: _propTypes2.default.object
    })),

    /**
     * Use this if you are creating an advanced table (selectable, sortable, or resizable rows)
     */
    fixedLayout: _propTypes2.default.bool,
    id: _propTypes2.default.string.isRequired,
    item: _propTypes2.default.object.isRequired,
    onToggle: _propTypes2.default.func,
    rowActions: _propTypes2.default.element,
    selection: _propTypes2.default.array
  },
  isSelected: function isSelected() {
    return !!(0, _lodash2.default)(this.props.selection, this.props.item);
  },
  handleToggle: function handleToggle(e, _ref) {
    var checked = _ref.checked;
    return this.props.onToggle(this.props.item, checked, e);
  },
  // ### Render
  render: function render() {
    var _this = this;

    var isSelected = this.isSelected(); // i18n

    return _react2.default.createElement("tr", {
      className: (0, _classnames2.default)({
        'slds-hint-parent': this.props.rowActions,
        'slds-is-selected': this.props.canSelectRows && isSelected
      })
    }, this.props.canSelectRows ? _react2.default.createElement("td", {
      role: this.props.fixedLayout ? 'gridcell' : null,
      className: "slds-text-align--right",
      "data-label": "Select Row",
      style: {
        width: '3.25rem'
      }
    }, _react2.default.createElement(_checkbox2.default, {
      assistiveText: {
        label: this.props.assistiveText.selectRow
      },
      checked: isSelected,
      id: "".concat(this.props.id, "-SelectRow"),
      name: "SelectRow",
      onChange: this.handleToggle
    })) : null, this.props.columns.map(function (column) {
      var Cell = column.Cell;
      var cellId = "".concat(_this.props.id, "-").concat(_constants.DATA_TABLE_CELL, "-").concat(column.props.property);
      return _react2.default.createElement(Cell, _extends({}, column.props, {
        className: column.props.truncate ? 'slds-truncate' : null,
        fixedLayout: _this.props.fixedLayout,
        rowHeader: column.props.primaryColumn,
        id: cellId,
        item: _this.props.item,
        key: cellId,
        width: column.props.width
      }), _this.props.item[column.props.property]);
    }), this.props.rowActions ? _react2.default.cloneElement(this.props.rowActions, {
      id: "".concat(this.props.id, "-").concat(_constants.DATA_TABLE_ROW_ACTIONS),
      item: this.props.item
    }) : null);
  }
});
exports.default = DataTableRow;