@hitachivantara/uikit-react-core
Version:
UI Kit Core React components.
80 lines (79 loc) • 3.67 kB
JavaScript
import { HvTypography } from "../../Typography/Typography.js";
import { HvButtonBase } from "../../ButtonBase/ButtonBase.js";
import { HvIcon } from "../../icons.js";
import { capitalize } from "../../utils/helpers.js";
import TableContext from "../TableContext.js";
import { TableSectionContext } from "../TableSectionContext.js";
import { useClasses } from "./TableHeader.styles.js";
import { getSortIconName, isParagraph } from "./utils.js";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { forwardRef, useContext } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/Table/TableHeader/TableHeader.tsx
var defaultComponent = "th";
/**
* `HvTableHeader` acts as a `th` element and inherits styles from its context
*/
var HvTableHeader = forwardRef(function HvTableHeader(props, ref) {
const { children, component, className, style: styleProp, classes: classesProp, scope: scopeProp, align = "inherit", variant = "default", type: typeProp, stickyColumn = false, stickyColumnMostLeft = false, stickyColumnLeastRight = false, groupColumnMostLeft = false, groupColumnMostRight = false, sortDirection = "none", sorted, sortable, headerTextProps, resizerProps = {}, resizable = false, resizing = false, sortButtonProps, ...others } = useDefaultProps("HvTableHeader", props);
const { classes, cx } = useClasses(classesProp);
const tableContext = useContext(TableContext);
const tableSectionContext = useContext(TableSectionContext);
const type = typeProp || tableSectionContext?.type || "body";
const isHeadCell = type === "head";
const scope = scopeProp ?? (isHeadCell ? "col" : "row");
const Component = component || tableContext?.components?.Th || defaultComponent;
const role = Component === defaultComponent ? null : isHeadCell ? "columnheader" : "rowheader";
const paragraph = isParagraph(children);
return /* @__PURE__ */ jsxs(Component, {
ref,
role,
scope,
style: stickyColumn ? {
...styleProp,
position: "sticky"
} : styleProp,
className: cx(classes.root, classes[type], align !== "inherit" && classes[`align${capitalize(align)}`], variant !== "default" && classes[`variant${capitalize(variant)}`], {
[classes.groupColumnMostLeft]: groupColumnMostLeft,
[classes.groupColumnMostRight]: groupColumnMostRight,
[classes.sortable]: sortable,
[classes.sorted]: sorted,
[classes.resizable]: resizable,
[classes.resizing]: resizing,
[classes.stickyColumn]: stickyColumn,
[classes.stickyColumnMostLeft]: stickyColumnMostLeft,
[classes.stickyColumnLeastRight]: stickyColumnLeastRight,
[classes.variantList]: tableContext.variant === "listrow"
}, className),
"aria-sort": sortable ? sortDirection : void 0,
...others,
children: [/* @__PURE__ */ jsxs("div", {
"data-align": align !== "inherit" ? align : void 0,
className: cx(classes.headerContent, align !== "inherit" && classes[`alignFlex${capitalize(align)}`]),
children: [/* @__PURE__ */ jsx(HvTypography, {
component: "div",
className: cx(classes.headerText, {
[classes.headerParagraph]: paragraph,
[classes.sortableHeaderText]: sortable
}),
variant: "label",
...headerTextProps,
children
}), isHeadCell && sortable && /* @__PURE__ */ jsx(HvButtonBase, {
className: classes.sortButton,
"aria-label": "Sort",
...sortButtonProps,
children: /* @__PURE__ */ jsx(HvIcon, {
compact: true,
name: getSortIconName(sorted && sortDirection),
className: classes.sortIcon
})
})]
}), resizable && /* @__PURE__ */ jsx("div", {
...resizerProps,
className: classes.resizer
})]
});
});
//#endregion
export { HvTableHeader };