@carbon/ibm-cloud-cognitive-cdai/lib/components/IdeDataTable/IdeDataTable.js

Carbon for Cloud & Cognitive CD&AI UI components

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.TableToolbarSearch = exports.TableToolbarContent = exports.TableToolbarAction = exports.TableToolbar = exports.TableHeader = exports.TableCell = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var KeyHandler = _interopRequireWildcard(require("../../component_helpers/A11yHelper.js"));
var _IDHelper = require("../../component_helpers/IDHelper");
var _carbonComponentsReact = require("carbon-components-react");
var _settings = require("../../globals/js/settings");
var _excluded = ["loading", "headers", "selectType", "onSelect", "skeletonRowCount", "ariaLabels", "rows", "onClick", "renderHeader", "renderRow", "renderExpandedRow", "expandable", "renderToolbar", "size", "className", "useZebraStyles"],
  _excluded2 = ["key"],
  _excluded3 = ["key"];
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; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
//
// Copyright IBM Corp. 2020, 2020
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

var Table = _carbonComponentsReact.DataTable.Table,
  TableContainer = _carbonComponentsReact.DataTable.TableContainer,
  TableHead = _carbonComponentsReact.DataTable.TableHead,
  TableRow = _carbonComponentsReact.DataTable.TableRow,
  TableHeader = exports.TableHeader = _carbonComponentsReact.DataTable.TableHeader,
  TableBody = _carbonComponentsReact.DataTable.TableBody,
  TableCell = exports.TableCell = _carbonComponentsReact.DataTable.TableCell,
  TableSelectRow = _carbonComponentsReact.DataTable.TableSelectRow,
  TableSelectAll = _carbonComponentsReact.DataTable.TableSelectAll,
  TableExpandHeader = _carbonComponentsReact.DataTable.TableExpandHeader,
  TableExpandRow = _carbonComponentsReact.DataTable.TableExpandRow,
  TableExpandedRow = _carbonComponentsReact.DataTable.TableExpandedRow,
  TableToolbar = exports.TableToolbar = _carbonComponentsReact.DataTable.TableToolbar,
  TableToolbarSearch = exports.TableToolbarSearch = _carbonComponentsReact.DataTable.TableToolbarSearch,
  TableToolbarContent = exports.TableToolbarContent = _carbonComponentsReact.DataTable.TableToolbarContent,
  TableToolbarAction = exports.TableToolbarAction = _carbonComponentsReact.DataTable.TableToolbarAction;
var SelectTypes = Object.freeze({
  MULTI: 'multi',
  SINGLE: 'single',
  NONE: 'none'
});
var onClickAriaKey = 'ide.table.addition.row.click'; //Translation key for the aria label attached to clickable rows

var IdeDataTable = function IdeDataTable(_ref) {
  var loading = _ref.loading,
    headers = _ref.headers,
    selectType = _ref.selectType,
    onSelect = _ref.onSelect,
    skeletonRowCount = _ref.skeletonRowCount,
    ariaLabels = _ref.ariaLabels,
    rows = _ref.rows,
    onClick = _ref.onClick,
    renderHeader = _ref.renderHeader,
    renderRow = _ref.renderRow,
    renderExpandedRow = _ref.renderExpandedRow,
    expandable = _ref.expandable,
    renderToolbar = _ref.renderToolbar,
    size = _ref.size,
    className = _ref.className,
    useZebraStyles = _ref.useZebraStyles,
    others = (0, _objectWithoutProperties2.default)(_ref, _excluded);
  var selectAll = function selectAll(rows, selectedRows) {
    return function () {
      var selected = selectedRows.length === rows.length ? [] : rows;
      return onSelect(selected.filter(function (row) {
        return !row.disabled;
      }).map(function (row) {
        return row.id;
      }));
    };
  };
  var selectRow = function selectRow(selectedRows, selectedRow) {
    return function () {
      if (selectType === SelectTypes.SINGLE) {
        return onSelect && onSelect([selectedRow.id]);
      }
      var selectedIndex = selectedRows.findIndex(function (row) {
        return row.id === selectedRow.id;
      });
      var newRows = (0, _toConsumableArray2.default)(selectedRows);
      selectedIndex > -1 ? newRows.splice(selectedIndex, 1) : newRows.push(selectedRow);
      return onSelect && onSelect(newRows.map(function (row) {
        return row.id;
      }));
    };
  };
  var handleClick = function handleClick(rowId) {
    return function (evt) {
      if (!Array.isArray(evt._dispatchInstances) && typeof onClick === 'function') {
        return onClick(rowId);
      }
    };
  };
  var getClickableRowProps = function getClickableRowProps(_ref2) {
    var row = _ref2.row;
    var props = {};
    if (selectType === SelectTypes.NONE && typeof onClick === 'function' && !row.disabled) {
      props = _objectSpread(_objectSpread({}, KeyHandler.createInteractionHandler(handleClick(row.id), [KeyHandler.handlers.onClick, KeyHandler.handlers.onKeyPress], [KeyHandler.keys.CLICK, KeyHandler.keys.ENTER])), {}, {
        tabIndex: 0,
        role: 'button',
        'aria-label': ariaLabels[onClickAriaKey]
      });
    }
    return props;
  };
  function lookupAriaLabel(id) {
    return ariaLabels && ariaLabels[id];
  }

  /* eslint-disable react/prop-types */
  function renderTable(_ref3) {
    var rows = _ref3.rows,
      headers = _ref3.headers,
      getHeaderProps = _ref3.getHeaderProps,
      getRowProps = _ref3.getRowProps,
      getSelectionProps = _ref3.getSelectionProps,
      selectedRows = _ref3.selectedRows,
      _expandRow = _ref3.expandRow,
      programatticSelect = _ref3.selectRow,
      getTableProps = _ref3.getTableProps;
    return /*#__PURE__*/_react.default.createElement(TableContainer, (0, _extends2.default)({
      className: "".concat(_settings.idePrefix, "-data-table ").concat(className)
    }, others), typeof renderToolbar === 'function' && /*#__PURE__*/_react.default.createElement(TableToolbar, null, /*#__PURE__*/_react.default.createElement(TableToolbarContent, null, renderToolbar())), loading ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.DataTableSkeleton, {
      headers: headers,
      rowCount: skeletonRowCount,
      columnCount: headers.length
    }) : /*#__PURE__*/_react.default.createElement(Table, getTableProps(), /*#__PURE__*/_react.default.createElement(TableHead, null, /*#__PURE__*/_react.default.createElement(TableRow, null, expandable && /*#__PURE__*/_react.default.createElement(TableExpandHeader, null), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, SelectTypes.MULTI, /*#__PURE__*/_react.default.createElement(TableSelectAll, getSelectionProps({
      onClick: selectAll(rows, selectedRows)
    }))), SelectTypes.SINGLE, /*#__PURE__*/_react.default.createElement("th", null)), SelectTypes.NONE, null)[selectType], renderHeader ? renderHeader(headers, getHeaderProps) : headers.map(function (header) {
      var _getHeaderProps = getHeaderProps({
          header: header
        }),
        key = _getHeaderProps.key,
        headerProps = (0, _objectWithoutProperties2.default)(_getHeaderProps, _excluded2);
      return /*#__PURE__*/_react.default.createElement(TableHeader, (0, _extends2.default)({
        key: key
      }, headerProps), header.header);
    }))), /*#__PURE__*/_react.default.createElement(TableBody, null, rows.map(function (row, index) {
      var _getRowProps = getRowProps({
          row: row
        }),
        key = _getRowProps.key,
        rowProps = (0, _objectWithoutProperties2.default)(_getRowProps, _excluded3);
      var CustomTableRow = expandable & !row.disabled ? TableExpandRow : TableRow;
      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
        key: key
      }, /*#__PURE__*/_react.default.createElement(CustomTableRow, (0, _extends2.default)({}, rowProps, getClickableRowProps({
        row: row
      }), (0, _IDHelper.idAttribute)("table-row-".concat(index)), {
        key: key
      }), expandable && row.disabled && /*#__PURE__*/_react.default.createElement(TableCell, null), selectType != SelectTypes.NONE ? /*#__PURE__*/_react.default.createElement(TableSelectRow, getSelectionProps({
        row: row,
        onClick: selectRow(selectedRows, row),
        id: "".concat(row.id, "-select")
      })) : null, renderRow ? renderRow(row, {
        expandRow: function expandRow() {
          return _expandRow(row.id);
        },
        selectRow: function selectRow() {
          return programatticSelect(row.id);
        }
      }) : row.cells.map(function (cell) {
        return /*#__PURE__*/_react.default.createElement(TableCell, {
          key: cell.id
        }, cell.value);
      })), row.isExpanded && /*#__PURE__*/_react.default.createElement(TableExpandedRow, {
        colSpan: headers.length + 1,
        key: "".concat(key, "-expanded")
      }, renderExpandedRow(row)));
    }))));
  }
  var table = /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.DataTable, {
    headers: headers,
    rows: rows,
    render: renderTable,
    radio: selectType === SelectTypes.SINGLE,
    translateWithId: lookupAriaLabel,
    size: size,
    useZebraStyles: useZebraStyles
  });
  return table;
};
IdeDataTable.propTypes = {
  /** Pretranslated strings for each key to replace default aria labels on components */
  ariaLabels: _propTypes.default.shape({
    'carbon.table.row.expand': _propTypes.default.string,
    'carbon.table.row.collapse': _propTypes.default.string,
    'carbon.table.all.expand': _propTypes.default.string,
    'carbon.table.all.collapse': _propTypes.default.string,
    'carbon.table.all.select': _propTypes.default.string,
    'carbon.table.all.unselect': _propTypes.default.string,
    'carbon.table.row.select': _propTypes.default.string,
    'carbon.table.row.unselect': _propTypes.default.string,
    'ide.table.addition.row.click': _propTypes.default.string
  }),
  className: _propTypes.default.string,
  /** Use carbon expandable rows */
  expandable: _propTypes.default.bool,
  /** Carbon IdeDataTable headers object */
  headers: _propTypes.default.arrayOf(_propTypes.default.object),
  /** render a loading skeleton */
  loading: _propTypes.default.bool,
  /** Callback for row click */
  onClick: _propTypes.default.func,
  /** Callback for row selection */
  onSelect: _propTypes.default.func,
  /** Custom function to render content for an expanded row */
  renderExpandedRow: _propTypes.default.func,
  /** Custom function to render header items */
  renderHeader: _propTypes.default.func,
  /** Custom function to render row cells */
  renderRow: _propTypes.default.func,
  /** Custom function to render content for table toolbar */
  renderToolbar: _propTypes.default.func,
  /** Carbon IdeDataTable rows object */
  rows: _propTypes.default.arrayOf(_propTypes.default.object),
  /** ["single", "multi", "none"] - selection type on the table */
  selectType: _propTypes.default.oneOf(Object.values(SelectTypes)),
  /** Carbon IdeDataTable size option */
  size: _propTypes.default.string,
  /** Number of loading rows */
  skeletonRowCount: _propTypes.default.number,
  /** True to add zebra stripes */
  useZebraStyles: _propTypes.default.bool
};
IdeDataTable.defaultProps = {
  selectType: SelectTypes.NONE,
  skeletonRowCount: 10,
  loading: false,
  expandable: false,
  ariaLabels: {},
  className: ''
};
IdeDataTable.TableCell = TableCell;
IdeDataTable.TableHeader = TableHeader;
IdeDataTable.TableToolbarSearch = TableToolbarSearch;
IdeDataTable.TableToolbarAction = TableToolbarAction;
IdeDataTable.TableToolbar = TableToolbar;
var _default = exports.default = IdeDataTable;