terra-table
Version:
The Terra Table component provides user a way to display data in an accessible table format.
239 lines (237 loc) • 10.5 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _bind = _interopRequireDefault(require("classnames/bind"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _terraSectionHeader = _interopRequireDefault(require("terra-section-header"));
var _terraThemeContext = _interopRequireDefault(require("terra-theme-context"));
var _GridContext = _interopRequireWildcard(require("../utils/GridContext"));
var _constants = require("../utils/constants");
var _Row = _interopRequireDefault(require("./Row"));
var _rowShape = _interopRequireDefault(require("../proptypes/rowShape"));
var _subsectionShape = _interopRequireDefault(require("../proptypes/subsectionShape"));
var _columnShape = _interopRequireDefault(require("../proptypes/columnShape"));
var _SectionModule = _interopRequireDefault(require("./Section.module.scss"));
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; }
/* eslint-disable jsx-a11y/control-has-associated-label */
var cx = _bind.default.bind(_SectionModule.default);
var propTypes = {
/**
* An identifier for the section. This identifier should be unique across the set of sections provided to the DataGrid.
*/
id: _propTypes.default.string.isRequired,
/**
* Unique identifier for the parent table
*/
tableId: _propTypes.default.string.isRequired,
/**
* The section's row index position in the table.
*/
sectionRowIndex: _propTypes.default.number,
/**
* A boolean indicating whether or not the the section is collapsible. If true, the DataGrid's `onRequestSectionCollapse`
* function will be called upon selection of the section header, and an icon indicating collapsibility will be rendered within the seaction header.
*/
isCollapsible: _propTypes.default.bool,
/**
* A boolean indicating whether or not the section is collapsed. If true, the DataGrid will not render the contents of the section.
*/
isCollapsed: _propTypes.default.bool,
/**
* A Boolean indicating whether or not the section header is visible.
*/
isHidden: _propTypes.default.bool,
/**
* A text string to render within the section header.
*/
text: _propTypes.default.string,
/**
* An array of row objects to be rendered within the section.
*/
rows: _propTypes.default.arrayOf(_rowShape.default),
/**
* An array of subsection objects to be rendered within the section.
*/
subsections: _propTypes.default.arrayOf(_subsectionShape.default),
/**
* Enables row selection capabilities for the table.
* Use 'single' for single row selection and 'multiple' for multi-row selection.
*/
rowSelectionMode: _propTypes.default.string,
/**
* All columns currently displayed.
*/
displayedColumns: _propTypes.default.arrayOf(_columnShape.default),
/**
* Callback function that will be called when a cell in the row is selected.
* @param {string} rowId rowId
* @param {string} columnId columnId
* @param {number} columnSpanIndex columnSpanIndex
* @param {object} event event
*/
onCellSelect: _propTypes.default.func,
/**
* String that specifies the height for the rows in the table. Any valid CSS value is accepted.
*/
rowHeight: _propTypes.default.string,
/**
* String that specifies the minimum height for the rows on the table. rowHeight takes precedence if valid CSS value is passed.
* With this property the height of the cell will grow to fit the cell content.
*/
rowMinimumHeight: _propTypes.default.string,
/**
* A zero-based index indicating which column represents the row header.
* Index can be set to -1 if row headers are not required.
*/
rowHeaderIndex: _propTypes.default.number,
/**
* Boolean specifying whether zebra striping is enabled.
*/
isTableStriped: _propTypes.default.bool,
/**
* Function that is called when a collapsible section is selected. Parameters: `onSectionSelect(sectionId)`
*/
onSectionSelect: _propTypes.default.func,
/**
* Width to assign for the section header in order to enable sticky behavior.
* This should be a dynamic size based on the current screen width and the state of the table container's client width.
*/
boundingWidth: _propTypes.default.number,
/**
* @private
* Id of the first row in table
*/
firstRowId: _propTypes.default.string,
/**
* @private
* Id of the last row in table
*/
lastRowId: _propTypes.default.string
};
var defaultProps = {
isCollapsible: false,
isCollapsed: false,
isHidden: false,
rows: []
};
function Section(props) {
var id = props.id,
tableId = props.tableId,
sectionRowIndex = props.sectionRowIndex,
isCollapsible = props.isCollapsible,
isCollapsed = props.isCollapsed,
isHidden = props.isHidden,
isTableStriped = props.isTableStriped,
text = props.text,
rowSelectionMode = props.rowSelectionMode,
displayedColumns = props.displayedColumns,
onCellSelect = props.onCellSelect,
rowHeight = props.rowHeight,
rowHeaderIndex = props.rowHeaderIndex,
rows = props.rows,
subsections = props.subsections,
onSectionSelect = props.onSectionSelect,
rowMinimumHeight = props.rowMinimumHeight,
boundingWidth = props.boundingWidth,
firstRowId = props.firstRowId,
lastRowId = props.lastRowId;
var theme = (0, _react.useContext)(_terraThemeContext.default);
var gridContext = (0, _react.useContext)(_GridContext.default);
var isGridContext = gridContext.role === _GridContext.GridConstants.GRID;
var hasSectionButton = isCollapsible && onSectionSelect;
var handleClick = (0, _react.useCallback)(function () {
onSectionSelect(id);
}, [id, onSectionSelect]);
var sectionHeader = /*#__PURE__*/_react.default.createElement("tbody", null, !isHidden && /*#__PURE__*/_react.default.createElement("tr", {
"aria-rowindex": sectionRowIndex,
className: cx('header-row', theme.className),
"data-section-id": id
}, /*#__PURE__*/_react.default.createElement("th", {
id: "".concat(tableId, "-").concat(id),
className: cx('header-cell'),
align: "left",
colSpan: displayedColumns.length,
role: "columnheader",
scope: "col",
tabIndex: isGridContext && !hasSectionButton ? -1 : undefined
}, /*#__PURE__*/_react.default.createElement(_terraSectionHeader.default, {
className: cx('section-header'),
text: text,
isOpen: hasSectionButton ? !isCollapsed : undefined,
onClick: hasSectionButton ? handleClick : undefined,
isTitleSticky: true,
boundedWidth: boundingWidth
}))));
var rowProps = {
displayedColumns: displayedColumns,
firstRowId: firstRowId,
height: rowHeight,
isTableStriped: isTableStriped,
lastRowId: lastRowId,
onCellSelect: onCellSelect,
rowHeaderIndex: rowHeaderIndex,
rowMinimumHeight: rowMinimumHeight,
rowSelectionMode: rowSelectionMode,
sectionId: !isHidden ? id : undefined,
tableId: tableId
};
if (subsections) {
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, sectionHeader, !isCollapsed && subsections.map(function (subsection) {
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement("tr", {
"aria-rowindex": subsection.subSectionRowIndex,
className: cx('header-row', theme.className),
"data-subsection-id": subsection.id,
"data-subsection-section-id": id
}, /*#__PURE__*/_react.default.createElement("th", {
id: "".concat(tableId, "-").concat(id, "-").concat(subsection.id),
className: cx('header-cell'),
align: "left",
colSpan: displayedColumns.length,
role: "columnheader",
scope: "col",
tabIndex: isGridContext ? -1 : undefined
}, /*#__PURE__*/_react.default.createElement(_terraSectionHeader.default, {
className: cx('subsection-header'),
text: subsection.text,
isTitleSticky: true,
boundedWidth: boundingWidth,
level: _constants.SUBSECTION_HEADER_LEVEL
})))), /*#__PURE__*/_react.default.createElement("tbody", null, !isCollapsed && subsection.rows.map(function (row, rowIndex) {
return /*#__PURE__*/_react.default.createElement(_Row.default, (0, _extends2.default)({
rowIndex: subsection.subSectionRowIndex + (rowIndex + 1),
key: row.id,
id: row.id,
cells: row.cells,
ariaLabel: row.ariaLabel,
isSelected: row.isSelected,
subsectionId: !isHidden ? subsection.id : undefined
}, rowProps));
})));
}));
}
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, sectionHeader, /*#__PURE__*/_react.default.createElement("tbody", {
className: cx('section', {
collapsed: isCollapsed,
collapsible: isCollapsible
}, theme.className)
}, !isCollapsed && rows.map(function (row, rowIndex) {
return /*#__PURE__*/_react.default.createElement(_Row.default, (0, _extends2.default)({
rowIndex: sectionRowIndex + (rowIndex + 1),
key: row.id,
id: row.id,
cells: row.cells,
ariaLabel: row.ariaLabel,
isSelected: row.isSelected
}, rowProps));
})));
}
Section.propTypes = propTypes;
Section.defaultProps = defaultProps;
var _default = exports.default = /*#__PURE__*/_react.default.memo(Section);