@awsui/components-react
Version:
AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A
39 lines (38 loc) • 3.41 kB
JavaScript
import { __assign } from "tslib";
import clsx from 'clsx';
import React from 'react';
import SelectionControl from './selection-control';
import { focusMarkers } from './use-selection';
import { fireNonCancelableEvent } from '../internal/events';
import { getColumnKey } from './utils';
import { TableHeaderCell } from './header-cell';
import { Resizer } from './resizer';
import { useColumnWidths } from './use-column-widths';
import styles from './styles.css.js';
var Thead = React.forwardRef(function (_a, outerRef) {
var containerWidth = _a.containerWidth, selectionType = _a.selectionType, selectAllProps = _a.selectAllProps, columnDefinitions = _a.columnDefinitions, sortingColumn = _a.sortingColumn, sortingDisabled = _a.sortingDisabled, sortingDescending = _a.sortingDescending, resizableColumns = _a.resizableColumns, wrapLines = _a.wrapLines, onFocusMove = _a.onFocusMove, onSortingChange = _a.onSortingChange, onResizeFinish = _a.onResizeFinish, _b = _a.sticky, sticky = _b === void 0 ? false : _b, _c = _a.hidden, hidden = _c === void 0 ? false : _c;
var headerCellClass = clsx(styles.cell, styles['header-cell'], sticky && styles['header-cell-sticky']);
var _d = useColumnWidths(), columnWidths = _d.columnWidths, totalWidth = _d.totalWidth, updateColumn = _d.updateColumn;
return (React.createElement("thead", { className: clsx(!hidden && styles['thead-active']) },
React.createElement("tr", __assign({}, focusMarkers.all, { ref: outerRef }),
selectionType === 'multi' && (React.createElement(SelectionControl, __assign({ className: clsx(headerCellClass, styles['selection-control']), onFocusDown: function (event) { return onFocusMove(event.target, -1, +1); } }, selectAllProps, (hidden ? { tabIndex: -1 } : {}), { scope: "col" }))),
selectionType === 'single' && (React.createElement("td", { className: clsx(headerCellClass, styles['selection-control']), scope: "col" },
React.createElement("span", { className: styles.stud, "aria-hidden": true }, "\u00A0"))),
columnDefinitions.map(function (column, colIndex) {
var widthOverride;
if (resizableColumns) {
if (columnWidths) {
widthOverride = columnWidths[getColumnKey(column, colIndex)];
}
if (colIndex === columnDefinitions.length - 1 && containerWidth && containerWidth >= totalWidth) {
widthOverride = 'auto';
}
}
return (React.createElement(TableHeaderCell, { key: getColumnKey(column, colIndex), className: headerCellClass, style: {
width: widthOverride || column.width,
minWidth: column.minWidth,
maxWidth: resizableColumns ? undefined : column.maxWidth
}, tabIndex: hidden ? -1 : 0, column: column, activeSortingColumn: sortingColumn, sortingDescending: sortingDescending, sortingDisabled: sortingDisabled, wrapLines: wrapLines, resizer: resizableColumns && (React.createElement(Resizer, { onDragMove: function (newWidth) { return updateColumn(colIndex, newWidth); }, onFinish: function () { return onResizeFinish(columnWidths); } })), onClick: function (detail) { return fireNonCancelableEvent(onSortingChange, detail); } }));
}))));
});
export default Thead;