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

React component library for Help Scout's Design System

"use strict";

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

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

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

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

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

var _reactTransitionGroup = require("react-transition-group");

var _Table = _interopRequireDefault(require("./Table.Row"));

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

var _lodash = _interopRequireDefault(require("lodash.isplainobject"));

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

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

function TableBody(_ref) {
  var animateRows = _ref.animateRows,
      columns = _ref.columns,
      _ref$dataCy = _ref['data-cy'],
      dataCy = _ref$dataCy === void 0 ? 'TableBody' : _ref$dataCy,
      deselectRow = _ref.deselectRow,
      onRowClick = _ref.onRowClick,
      onSelectRow = _ref.onSelectRow,
      rows = _ref.rows,
      rowClassName = _ref.rowClassName,
      rowWrapper = _ref.rowWrapper,
      selectRow = _ref.selectRow,
      selectionKey = _ref.selectionKey,
      selectedRows = _ref.selectedRows,
      withSelectableRows = _ref.withSelectableRows,
      withFocusableRows = _ref.withFocusableRows;

  function renderRow(row) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.default, {
      columns: columns,
      selectRow: selectRow,
      deselectRow: deselectRow,
      onRowClick: onRowClick,
      onSelectRow: onSelectRow,
      row: row,
      rowClassName: rowClassName,
      rowWrapper: rowWrapper,
      selected: selectedRows && selectedRows.includes(row.id),
      selectionKey: selectionKey,
      withSelectableRows: withSelectableRows,
      withFocusableRows: withFocusableRows
    }, "row_" + row.id);
  }

  if (animateRows) {
    var animateRowsObj = {
      timeout: 500,
      classNames: 'animated-row'
    };

    if ((0, _lodash.default)(animateRows)) {
      animateRowsObj = (0, _extends2.default)({}, animateRowsObj, animateRows);
    }

    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table3.TBodyUI, {
      className: "TableBody--animated",
      "data-cy": dataCy,
      $timeout: animateRowsObj.timeout,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.TransitionGroup, {
        className: "animated-table-body",
        component: null,
        children: rows.map(function (row) {
          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, (0, _extends2.default)({}, animateRowsObj, {
            children: renderRow(row)
          }), row.id);
        })
      })
    });
  }

  return /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
    className: "TableBody",
    "data-cy": dataCy,
    children: rows.map(renderRow)
  });
}

TableBody.propTypes = {
  /** List of columns */
  columns: _propTypes.default.arrayOf(_propTypes.default.shape(_Table2.columnShape)),
  deselectRow: _propTypes.default.func,

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

  /** List of Rows (data), which are objects */
  rows: _propTypes.default.arrayOf(_propTypes.default.shape(_Table2.dataShape)),

  /** 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,
  selectRow: _propTypes.default.func,
  selectedRows: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])),

  /** 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 = TableBody;
exports.default = _default;