terra-table
Version:
The Terra Table component provides user a way to display data in an accessible table format.
202 lines (200 loc) • 8.95 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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _bind = _interopRequireDefault(require("classnames/bind"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _terraThemeContext = _interopRequireDefault(require("terra-theme-context"));
var _Cell = _interopRequireDefault(require("./Cell"));
var _cellShape = _interopRequireDefault(require("../proptypes/cellShape"));
var _columnShape = _interopRequireDefault(require("../proptypes/columnShape"));
var _RowSelectionCell = _interopRequireDefault(require("./RowSelectionCell"));
var _RowModule = _interopRequireDefault(require("./Row.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; }
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; }
var cx = _bind.default.bind(_RowModule.default);
var propTypes = {
/**
* An identifier to uniquely identify the row within the table.
*/
id: _propTypes.default.string.isRequired,
/**
* Unique identifier for the parent table
*/
tableId: _propTypes.default.string.isRequired,
/**
* The row's position in the table. This is zero based.
*/
rowIndex: _propTypes.default.number,
/**
* An identifier for the section.
*/
sectionId: _propTypes.default.string,
/**
* An identifier for the subsection.
*/
subsectionId: _propTypes.default.string,
/**
* String that specifies height of the row. Any valid CSS width value is accepted.
*/
height: _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,
/**
* Data to be displayed in the cells of the row. Cells will be rendered in the row in the order given.
*/
cells: _propTypes.default.arrayOf(_cellShape.default),
/**
* A boolean indicating whether or not the row should render as selected.
*/
isSelected: _propTypes.default.bool,
/**
* Boolean specifying whether zebra striping is enabled.
*/
isTableStriped: _propTypes.default.bool,
/**
* A string identifier used to describe the row contents. This value will be used to construct additional labels
* for internal controls (e.g. row selection cells).
*/
ariaLabel: _propTypes.default.string,
/**
* 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,
/**
* 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,
/**
* @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 = {
rowHeaderIndex: 0,
isSelected: false
};
function Row(props) {
var rowIndex = props.rowIndex,
height = props.height,
rowSelectionMode = props.rowSelectionMode,
id = props.id,
tableId = props.tableId,
sectionId = props.sectionId,
subsectionId = props.subsectionId,
isSelected = props.isSelected,
isTableStriped = props.isTableStriped,
cells = props.cells,
ariaLabel = props.ariaLabel,
displayedColumns = props.displayedColumns,
rowHeaderIndex = props.rowHeaderIndex,
onCellSelect = props.onCellSelect,
rowMinimumHeight = props.rowMinimumHeight,
firstRowId = props.firstRowId,
lastRowId = props.lastRowId;
var theme = (0, _react.useContext)(_terraThemeContext.default);
var _useState = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
isHovered = _useState2[0],
setHovered = _useState2[1];
var isMultiRowSelect = rowSelectionMode === 'multiple';
var columnIndexOffSet = isMultiRowSelect ? 1 : 0;
// Added to check if rowHeight is defined, it will take precedence. Otherwise the minimum row height would be used.
var heightProperties = height ? {
height: height
} : {
minHeight: rowMinimumHeight
};
return /*#__PURE__*/_react.default.createElement("tr", {
"aria-rowindex": rowIndex,
"data-row-id": id,
className: cx('row', {
selected: isSelected,
selectable: !!rowSelectionMode,
'striped-table-row': isTableStriped
}, theme.className)
// eslint-disable-next-line react/forbid-dom-props
,
style: _objectSpread({}, heightProperties),
onMouseEnter: rowSelectionMode ? function () {
setHovered(true);
} : undefined,
onMouseLeave: rowSelectionMode ? function () {
setHovered(false);
} : undefined
}, isMultiRowSelect && /*#__PURE__*/_react.default.createElement(_RowSelectionCell.default, {
rowId: id,
columnId: displayedColumns[0].id,
rowIndex: rowIndex,
columnIndex: 0,
sectionId: sectionId,
tableId: tableId,
isSelected: isSelected,
isHighlighted: isHovered || isSelected,
ariaLabel: ariaLabel,
onCellSelect: onCellSelect
}), cells.map(function (cellData, index) {
var cellColumnIndex = index + columnIndexOffSet;
var columnId = displayedColumns[cellColumnIndex].id;
var columnSpanIndex = displayedColumns[cellColumnIndex].columnSpanIndex ? displayedColumns[cellColumnIndex].columnSpanIndex : undefined;
return /*#__PURE__*/_react.default.createElement(_Cell.default, {
rowId: id,
columnId: columnId,
rowIndex: rowIndex,
columnIndex: cellColumnIndex,
sectionId: sectionId,
subsectionId: subsectionId,
tableId: tableId,
key: columnSpanIndex ? "".concat(id, "_").concat(columnId, "_").concat(columnSpanIndex) : "".concat(id, "_").concat(columnId),
isSelected: !rowSelectionMode && cellData.isSelected,
isMasked: cellData.isMasked,
maskedLabel: cellData.maskedLabel,
isSelectable: cellData.isSelectable,
isRowHeader: rowHeaderIndex !== -1 && cellColumnIndex === rowHeaderIndex + columnIndexOffSet,
isHighlighted: isHovered || isSelected,
onCellSelect: onCellSelect,
height: height,
rowMinimumHeight: rowMinimumHeight,
rowHeaderIndex: rowHeaderIndex,
firstRowId: firstRowId,
lastRowId: lastRowId,
columnHighlightColor: displayedColumns[cellColumnIndex].columnHighlightColor,
columnSpanIndex: columnSpanIndex,
rowSelectionMode: rowSelectionMode
}, cellData.content);
}));
}
Row.propTypes = propTypes;
Row.defaultProps = defaultProps;
var _default = exports.default = /*#__PURE__*/_react.default.memo(Row);