@vectara/vectara-ui
Version:
Vectara's design system, codified as a React and Sass component library
39 lines (38 loc) • 2.19 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { BiRadioCircle, BiSolidUpArrowAlt } from "react-icons/bi";
import { VuiFlexContainer } from "../flex/FlexContainer";
import { VuiIcon } from "../icon/Icon";
import { VuiTooltip } from "../tooltip/Tooltip";
import classNames from "classnames";
export const VuiTableHeaderCell = ({ column, onSort, sortDirection }) => {
const { name, header } = column;
const handleSort = () => {
let newSortDirection;
if (sortDirection === "asc") {
newSortDirection = "desc";
}
else if (sortDirection === "desc") {
newSortDirection = "none";
}
else {
newSortDirection = "asc";
}
onSort === null || onSort === void 0 ? void 0 : onSort(name, newSortDirection);
};
let ariaLabel;
if (sortDirection === "asc") {
ariaLabel = "Sort descending";
}
else if (sortDirection === "desc") {
ariaLabel = "Use default sort";
}
else {
ariaLabel = "Sort ascending";
}
const isSortable = onSort && header.isSortable;
const iconClasses = classNames("vuiTableHeaderCell__icon", {
"vuiTableHeaderCell__icon--none": sortDirection === "none",
"vuiTableHeaderCell__icon--desc": sortDirection === "desc"
});
return (_jsx(VuiFlexContainer, Object.assign({ spacing: "xxs", alignItems: "center", justifyContent: "start" }, { children: onSort && isSortable ? (_jsx(VuiTooltip, Object.assign({ tip: ariaLabel }, { children: _jsxs("button", Object.assign({ className: "vuiTableHeaderCell--sortable", onClick: handleSort, "aria-label": ariaLabel, type: "button" }, { children: [_jsx("div", Object.assign({ className: "vuiTableHeaderCell__label" }, { children: header.render ? header.render() : name })), _jsx(VuiIcon, Object.assign({ className: iconClasses, size: "s", color: sortDirection === "none" ? "subdued" : "neutral" }, { children: sortDirection === "none" ? _jsx(BiRadioCircle, {}) : _jsx(BiSolidUpArrowAlt, {}) }))] })) }))) : (_jsx("div", Object.assign({ className: "vuiTableHeaderCell__label" }, { children: header.render ? header.render() : name }))) })));
};