@atlaskit/dynamic-table
Version:
A dynamic table displays rows of data with built-in pagination, sorting, and re-ordering functionality.
60 lines (58 loc) • 2.06 kB
JavaScript
/* head-cell.tsx generated by @compiled/babel-plugin v3.0.2 */
import _extends from "@babel/runtime/helpers/extends";
import "./head-cell.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
/* eslint-disable @repo/internal/react/require-jsdoc */
import { forwardRef } from 'react';
import { getTruncationStyleVars } from './constants';
const CSS_VAR_TEXT_COLOR = '--local-dynamic-table-text-color';
const overflowTruncateStyles = null;
const truncationWidthStyles = null;
const fixedSizeTruncateStyles = null;
const cellStyles = null;
const headCellBaseStyles = null;
export const HeadCell = /*#__PURE__*/forwardRef(({
width,
children,
isSortable,
sortOrder,
isFixedSize,
shouldTruncate,
onClick,
style,
testId,
...rest
}, ref) => {
const mergedStyles = {
...style,
...(width && getTruncationStyleVars({
width
})),
[CSS_VAR_TEXT_COLOR]: "var(--ds-text-subtlest, #6B6E76)"
};
const isASC = sortOrder === 'ASC';
const isDESC = sortOrder === 'DESC';
const getFormattedSortOrder = () => {
if (isASC) {
return 'ascending';
} else if (isDESC) {
return 'descending';
}
return;
};
// If there is no content in the cell, it should be rendered as an empty `td`, not a `th`.
// https://dequeuniversity.com/rules/axe/4.7/empty-table-header
const Component = children ? 'th' : 'td';
return /*#__PURE__*/React.createElement(Component, _extends({
"aria-sort": getFormattedSortOrder()
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
,
style: mergedStyles,
onClick: undefined,
ref: ref,
"data-testid": testId
}, rest, {
className: ax(["_izbqglyw _h7alglyw _85i51b66 _1q511b66 _y4tiu2gc _bozgu2gc _y3gn1e5h _1s37ze3t _uupyze3t", "_11c8wadc _179r1uh4 _mqm2glyw _kqswh2mm _syazazsu _k48pwu06 _y3gn1e5h _s7n4nkob _1ygbd0i9", "_1bsb8a2a", isFixedSize && shouldTruncate && "_1bto1l2s _o5721q9c", isFixedSize && "_1reo15vq _18m915vq"])
}), children);
});