@carbon/ibm-cloud-cognitive-cdai
Version:
Carbon for Cloud & Cognitive CD&AI UI components
242 lines (239 loc) • 11 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["loading", "headers", "selectType", "onSelect", "skeletonRowCount", "ariaLabels", "rows", "onClick", "renderHeader", "renderRow", "renderExpandedRow", "expandable", "renderToolbar", "size", "className", "useZebraStyles"],
_excluded2 = ["key"],
_excluded3 = ["key"];
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) { _defineProperty(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 = DataTable.Table,
TableContainer = DataTable.TableContainer,
TableHead = DataTable.TableHead,
TableRow = DataTable.TableRow,
TableHeader = DataTable.TableHeader,
TableBody = DataTable.TableBody,
TableCell = DataTable.TableCell,
TableSelectRow = DataTable.TableSelectRow,
TableSelectAll = DataTable.TableSelectAll,
TableExpandHeader = DataTable.TableExpandHeader,
TableExpandRow = DataTable.TableExpandRow,
TableExpandedRow = DataTable.TableExpandedRow,
TableToolbar = DataTable.TableToolbar,
TableToolbarSearch = DataTable.TableToolbarSearch,
TableToolbarContent = DataTable.TableToolbarContent,
TableToolbarAction = DataTable.TableToolbarAction;
import React from 'react';
import PropTypes from 'prop-types';
import * as KeyHandler from '../../component_helpers/A11yHelper.js';
import { idAttribute } from '../../component_helpers/IDHelper';
import { DataTable, DataTableSkeleton } from 'carbon-components-react';
import { idePrefix } from '../../globals/js/settings';
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 = _objectWithoutProperties(_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 = _toConsumableArray(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.createElement(TableContainer, _extends({
className: "".concat(idePrefix, "-data-table ").concat(className)
}, others), typeof renderToolbar === 'function' && /*#__PURE__*/React.createElement(TableToolbar, null, /*#__PURE__*/React.createElement(TableToolbarContent, null, renderToolbar())), loading ? /*#__PURE__*/React.createElement(DataTableSkeleton, {
headers: headers,
rowCount: skeletonRowCount,
columnCount: headers.length
}) : /*#__PURE__*/React.createElement(Table, getTableProps(), /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, expandable && /*#__PURE__*/React.createElement(TableExpandHeader, null), _defineProperty(_defineProperty(_defineProperty({}, SelectTypes.MULTI, /*#__PURE__*/React.createElement(TableSelectAll, getSelectionProps({
onClick: selectAll(rows, selectedRows)
}))), SelectTypes.SINGLE, /*#__PURE__*/React.createElement("th", null)), SelectTypes.NONE, null)[selectType], renderHeader ? renderHeader(headers, getHeaderProps) : headers.map(function (header) {
var _getHeaderProps = getHeaderProps({
header: header
}),
key = _getHeaderProps.key,
headerProps = _objectWithoutProperties(_getHeaderProps, _excluded2);
return /*#__PURE__*/React.createElement(TableHeader, _extends({
key: key
}, headerProps), header.header);
}))), /*#__PURE__*/React.createElement(TableBody, null, rows.map(function (row, index) {
var _getRowProps = getRowProps({
row: row
}),
key = _getRowProps.key,
rowProps = _objectWithoutProperties(_getRowProps, _excluded3);
var CustomTableRow = expandable & !row.disabled ? TableExpandRow : TableRow;
return /*#__PURE__*/React.createElement(React.Fragment, {
key: key
}, /*#__PURE__*/React.createElement(CustomTableRow, _extends({}, rowProps, getClickableRowProps({
row: row
}), idAttribute("table-row-".concat(index)), {
key: key
}), expandable && row.disabled && /*#__PURE__*/React.createElement(TableCell, null), selectType != SelectTypes.NONE ? /*#__PURE__*/React.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.createElement(TableCell, {
key: cell.id
}, cell.value);
})), row.isExpanded && /*#__PURE__*/React.createElement(TableExpandedRow, {
colSpan: headers.length + 1,
key: "".concat(key, "-expanded")
}, renderExpandedRow(row)));
}))));
}
var table = /*#__PURE__*/React.createElement(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.shape({
'carbon.table.row.expand': PropTypes.string,
'carbon.table.row.collapse': PropTypes.string,
'carbon.table.all.expand': PropTypes.string,
'carbon.table.all.collapse': PropTypes.string,
'carbon.table.all.select': PropTypes.string,
'carbon.table.all.unselect': PropTypes.string,
'carbon.table.row.select': PropTypes.string,
'carbon.table.row.unselect': PropTypes.string,
'ide.table.addition.row.click': PropTypes.string
}),
className: PropTypes.string,
/** Use carbon expandable rows */
expandable: PropTypes.bool,
/** Carbon IdeDataTable headers object */
headers: PropTypes.arrayOf(PropTypes.object),
/** render a loading skeleton */
loading: PropTypes.bool,
/** Callback for row click */
onClick: PropTypes.func,
/** Callback for row selection */
onSelect: PropTypes.func,
/** Custom function to render content for an expanded row */
renderExpandedRow: PropTypes.func,
/** Custom function to render header items */
renderHeader: PropTypes.func,
/** Custom function to render row cells */
renderRow: PropTypes.func,
/** Custom function to render content for table toolbar */
renderToolbar: PropTypes.func,
/** Carbon IdeDataTable rows object */
rows: PropTypes.arrayOf(PropTypes.object),
/** ["single", "multi", "none"] - selection type on the table */
selectType: PropTypes.oneOf(Object.values(SelectTypes)),
/** Carbon IdeDataTable size option */
size: PropTypes.string,
/** Number of loading rows */
skeletonRowCount: PropTypes.number,
/** True to add zebra stripes */
useZebraStyles: PropTypes.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;
export { TableCell, TableHeader, TableToolbarSearch, TableToolbarContent, TableToolbarAction, TableToolbar };
export default IdeDataTable;