@awsui/components-react
Version:
On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en
48 lines • 4.23 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React from 'react';
import clsx from 'clsx';
import { findUpUntil } from '@awsui/component-toolkit/dom';
import { getAnalyticsMetadataAttribute } from '@awsui/component-toolkit/internal/analytics-metadata';
import { fireNonCancelableEvent } from '../internal/events';
import { TableHeaderCell } from './header-cell';
import { focusMarkers } from './selection';
import { TableHeaderSelectionCell } from './selection/selection-cell';
import { getTableHeaderRowRoleProps } from './table-role';
import { useColumnWidths } from './use-column-widths';
import { getColumnKey } from './utils';
import styles from './styles.css.js';
const Thead = React.forwardRef(({ selectionType, getSelectAllProps, columnDefinitions, sortingColumn, sortingDisabled, sortingDescending, resizableColumns, variant, wrapLines, onFocusMove, onSortingChange, onResizeFinish, singleSelectionHeaderAriaLabel, stripedRows, sticky = false, hidden = false, stuck = false, stickyState, selectionColumnId, focusedComponent, onFocusedComponentChange, tableRole, resizerRoleDescription, isExpandable, setLastUserAction, }, outerRef) => {
const { getColumnStyles, columnWidths, updateColumn, setCell } = useColumnWidths();
const commonCellProps = {
stuck,
sticky,
hidden,
stripedRows,
tableRole,
variant,
stickyState,
};
return (React.createElement("thead", { className: clsx(!hidden && styles['thead-active']) },
React.createElement("tr", Object.assign({}, focusMarkers.all, { ref: outerRef, "aria-rowindex": 1 }, getTableHeaderRowRoleProps({ tableRole }), { onFocus: event => {
var _a;
const focusControlElement = findUpUntil(event.target, element => !!element.getAttribute('data-focus-id'));
const focusId = (_a = focusControlElement === null || focusControlElement === void 0 ? void 0 : focusControlElement.getAttribute('data-focus-id')) !== null && _a !== void 0 ? _a : null;
onFocusedComponentChange === null || onFocusedComponentChange === void 0 ? void 0 : onFocusedComponentChange(focusId);
}, onBlur: () => onFocusedComponentChange === null || onFocusedComponentChange === void 0 ? void 0 : onFocusedComponentChange(null) }),
selectionType ? (React.createElement(TableHeaderSelectionCell, Object.assign({}, commonCellProps, { focusedComponent: focusedComponent, columnId: selectionColumnId, getSelectAllProps: getSelectAllProps, onFocusMove: onFocusMove, singleSelectionHeaderAriaLabel: singleSelectionHeaderAriaLabel }, getAnalyticsMetadataAttribute({
action: 'selectAll',
})))) : null,
columnDefinitions.map((column, colIndex) => {
const columnId = getColumnKey(column, colIndex);
return (React.createElement(TableHeaderCell, Object.assign({}, commonCellProps, { key: columnId, tabIndex: sticky ? -1 : 0, focusedComponent: focusedComponent, column: column, activeSortingColumn: sortingColumn, sortingDescending: sortingDescending, sortingDisabled: sortingDisabled, wrapLines: wrapLines, colIndex: selectionType ? colIndex + 1 : colIndex, columnId: columnId, updateColumn: updateColumn, onResizeFinish: () => onResizeFinish(columnWidths), resizableColumns: resizableColumns, resizableStyle: getColumnStyles(sticky, columnId), onClick: detail => {
setLastUserAction('sorting');
fireNonCancelableEvent(onSortingChange, detail);
}, isEditable: !!column.editConfig, cellRef: node => setCell(sticky, columnId, node), tableRole: tableRole, resizerRoleDescription: resizerRoleDescription,
// Expandable option is only applicable to the first data column of the table.
// When present, the header content receives extra padding to match the first offset in the data cells.
isExpandable: colIndex === 0 && isExpandable, hasDynamicContent: hidden && !resizableColumns && column.hasDynamicContent })));
}))));
});
export default Thead;
//# sourceMappingURL=thead.js.map