@helpscout/hsds-react/components/Table/Table.Row.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.TableRow = TableRow;
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

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

var _classnames = _interopRequireDefault(require("classnames"));

var _Table = require("./Table.utils");

var _Table2 = require("./Table");

var _Table3 = _interopRequireDefault(require("./Table.Cell"));

var _Table4 = require("./Table.css");

var _Checkbox = _interopRequireDefault(require("../Checkbox"));

var _jsxRuntime = require("react/jsx-runtime");

function TableRow(_ref) {
  var columns = _ref.columns,
      deselectRow = _ref.deselectRow,
      onRowClick = _ref.onRowClick,
      onSelectRow = _ref.onSelectRow,
      row = _ref.row,
      rowClassName = _ref.rowClassName,
      rowWrapper = _ref.rowWrapper,
      selected = _ref.selected,
      selectRow = _ref.selectRow,
      selectionKey = _ref.selectionKey,
      withSelectableRows = _ref.withSelectableRows,
      withFocusableRows = _ref.withFocusableRows;

  function handleRowClick(e) {
    if (shouldfireRowClickEvent(e)) {
      e.persist();
      onRowClick && onRowClick(e, row);
    }
  }

  function handleKeyDown(e) {
    if (e.key === 'Enter' && shouldfireRowClickEvent(e)) {
      e.persist();
      onRowClick && onRowClick(e, row);
    }
  }

  function handleChange(value, checked) {
    if (checked) {
      selectRow(value, onSelectRow);
    } else {
      deselectRow(value, onSelectRow);
    }
  }

  function renderRow() {
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
      className: (0, _classnames.default)(_Table2.TABLE_CLASSNAME + "__Row", row.className, row.id && "row_id_" + row.id, selected && 'is-row-selected', rowClassName(row)),
      "data-row-id": row.id,
      onClick: handleRowClick,
      onKeyDown: handleKeyDown,
      tabIndex: withFocusableRows ? '0' : '-1',
      children: [withSelectableRows ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table4.CellUI, {
        className: "c-Table__Cell Column_Selector",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
          className: "Selector_Checkbox",
          checked: selected,
          onEnter: handleChange,
          onChange: handleChange,
          value: row[selectionKey]
        })
      }) : null, columns.filter(function (column) {
        return column.show;
      }).map(function (column) {
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table3.default, {
          column: column,
          row: row
        }, (0, _Table.generateCellKey)('cell', column));
      })]
    });
  }

  return rowWrapper ? rowWrapper(renderRow(), row) : renderRow();
}

function shouldfireRowClickEvent(e) {
  var target = e.target; // Avoid firing when selecting a row

  var wasSelectorClicked = target.closest('.Selector_Checkbox'); // Avoid firing if the content is clickable

  var isTargetLinkOrButton = target.tagName === 'A' || target.tagName === 'BUTTON';
  return !wasSelectorClicked && !isTargetLinkOrButton;
}

TableRow.propTypes = {
  /** List of columns */
  columns: _propTypes.default.arrayOf(_propTypes.default.shape(_Table.columnShape)),

  /** Object with data for this particular row */
  row: _propTypes.default.shape(_Table.dataShape),

  /** Callback function when the row is clicked. Arguments are the event and the row clicked. */
  onRowClick: _propTypes.default.func,
  onSelectRow: _propTypes.default.func,
  deselectRow: _propTypes.default.func,

  /** Custom class names to be added to the each row based on a condition. */
  rowClassName: _propTypes.default.func,

  /** Gives you the ability to wrap rows based on conditions */
  rowWrapper: _propTypes.default.func,
  selected: _propTypes.default.bool,
  selectRow: _propTypes.default.func,

  /** Customize which key from your data should be used for selection */
  selectionKey: _propTypes.default.string,

  /** Adds tabindex=0 to each row*/
  withFocusableRows: _propTypes.default.bool,

  /** Adds a column with a checkbox for row selection */
  withSelectableRows: _propTypes.default.bool
};
var _default = TableRow;
exports.default = _default;