@awsui/components-react/table/header-cell.js

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

import { __assign } from "tslib";
import clsx from 'clsx';
import React from 'react';
import Icon from '../icon';
import useFocusVisible from '../internal/hooks/focus-visible';
import { KeyCode } from '../internal/keycode';
import { getAriaSort, getSortingIconName, getSortingStatus, isSorted } from './utils';
import styles from './styles.css.js';
export function TableHeaderCell(_a) {
    var _b, _c;
    var className = _a.className, style = _a.style, tabIndex = _a.tabIndex, column = _a.column, activeSortingColumn = _a.activeSortingColumn, sortingDescending = _a.sortingDescending, sortingDisabled = _a.sortingDisabled, wrapLines = _a.wrapLines, resizer = _a.resizer, onClick = _a.onClick;
    var focusVisible = useFocusVisible();
    var sortable = !!column.sortingComparator || !!column.sortingField;
    var sorted = !!activeSortingColumn && isSorted(column, activeSortingColumn);
    var sortingStatus = getSortingStatus(sortable, sorted, !!sortingDescending, !!sortingDisabled);
    var handleClick = function () {
        return onClick({
            sortingColumn: column,
            isDescending: sorted ? !sortingDescending : false
        });
    };
    var handleKeyPress = function (_a) {
        var e = _a.nativeEvent;
        if (e.keyCode === KeyCode.enter || e.keyCode === KeyCode.space) {
            e.preventDefault();
            handleClick();
        }
    };
    return (React.createElement("th", { className: clsx(className, (_b = {},
            _b[styles['header-cell-sortable']] = sortingStatus,
            _b[styles['header-cell-sorted']] = sortingStatus === 'ascending' || sortingStatus === 'descending',
            _b[styles['header-cell-disabled']] = sortingDisabled,
            _b[styles['header-cell-ascending']] = sortingStatus === 'ascending',
            _b[styles['header-cell-descending']] = sortingStatus === 'descending',
            _b)), "aria-sort": sortingStatus && getAriaSort(sortingStatus), style: style },
        React.createElement("div", __assign({ className: styles['header-cell-content'], "aria-label": column.ariaLabel
                ? column.ariaLabel({
                    sorted: activeSortingColumn === column,
                    descending: sorted && !!sortingDescending,
                    disabled: !!sortingDisabled
                })
                : undefined }, (sortingDisabled || !sortingStatus
            ? (_c = {}, _c['aria-disabled'] = 'true', _c) : __assign(__assign({ onKeyPress: handleKeyPress, tabIndex: tabIndex, role: 'button' }, focusVisible), { onClick: handleClick }))),
            React.createElement("div", { className: clsx(styles['header-cell-text'], wrapLines && styles['header-cell-text-wrap']) }, column.header),
            sortingStatus && (React.createElement("span", { className: styles['sorting-icon'] },
                React.createElement(Icon, { name: getSortingIconName(sortingStatus) })))),
        resizer));
}