@carbon/react
Version:
React components for the Carbon Design System
206 lines (197 loc) • 7.81 kB
JavaScript
/**
* Copyright IBM Corp. 2016, 2023
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
;
Object.defineProperty(exports, '__esModule', { value: true });
var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var cx = require('classnames');
var PropTypes = require('prop-types');
var React = require('react');
var iconsReact = require('@carbon/icons-react');
require('./state/sorting.js');
var useId = require('../../internal/useId.js');
var usePrefix = require('../../internal/usePrefix.js');
var index = require('../AILabel/index.js');
var utils = require('../../internal/utils.js');
var sortStates = require('./state/sortStates.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
const defaultScope = 'col';
const translationKeys = {
buttonDescription: 'carbon.table.header.icon.description'
};
const translateWithId = (key, args) => {
if (args && key === translationKeys.buttonDescription) {
if (args.isSortHeader && sortStates.sortStates) {
// When transitioning, we know that the sequence of states is as follows:
// NONE -> ASC -> DESC -> NONE
if (args.sortDirection === sortStates.sortStates.NONE) {
return `Click to sort rows by ${args.header} header in ascending order`;
}
if (args.sortDirection === sortStates.sortStates.ASC) {
return `Click to sort rows by ${args.header} header in descending order`;
}
return `Click to unsort rows by ${args.header} header`;
}
return `Click to sort rows by ${args.header} header in ascending order`;
}
return '';
};
const sortDirections = {
[sortStates.sortStates.NONE]: 'none',
[sortStates.sortStates.ASC]: 'ascending',
[sortStates.sortStates.DESC]: 'descending'
};
const TableHeader = /*#__PURE__*/React__default["default"].forwardRef(function TableHeader({
className: headerClassName,
children,
colSpan,
decorator,
isSortable = false,
isSortHeader,
onClick,
scope = defaultScope,
sortDirection,
translateWithId: t = translateWithId,
slug,
id,
...rest
}, ref) {
const prefix = usePrefix.usePrefix();
const uniqueId = useId.useId('table-sort');
// AILabel is always size `mini`
const AILableRef = React.useRef(null);
const candidate = slug ?? decorator;
const candidateIsAILabel = utils.isComponentElement(candidate, index.AILabel);
const colHasAILabel = candidateIsAILabel;
const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.cloneElement(candidate, {
size: 'mini',
ref: AILableRef
}) : null;
const headerLabelClassNames = cx__default["default"]({
[`${prefix}--table-header-label`]: true,
[`${prefix}--table-header-label--slug ${prefix}--table-header-label--ai-label`]: colHasAILabel,
[`${prefix}--table-header-label--decorator`]: decorator
});
if (!isSortable) {
return /*#__PURE__*/React__default["default"].createElement("th", _rollupPluginBabelHelpers["extends"]({}, rest, {
id: id,
className: headerClassName,
scope: scope,
colSpan: colSpan,
ref: ref
}), children ? /*#__PURE__*/React__default["default"].createElement("div", {
className: headerLabelClassNames
}, children, /*#__PURE__*/React__default["default"].createElement("div", {
className: `${prefix}--table-header-label--decorator-inner`
}, normalizedDecorator)) : null);
}
const className = cx__default["default"](headerClassName, {
[`${prefix}--table-sort`]: true,
[`${prefix}--table-sort--active`]: isSortHeader && sortDirection !== sortStates.sortStates.NONE,
[`${prefix}--table-sort--descending`]: isSortHeader && sortDirection === sortStates.sortStates.DESC
});
const ariaSort = !isSortHeader || !sortDirection ? 'none' : sortDirections[sortDirection];
const sortDescription = t && t('carbon.table.header.icon.description', {
header: children,
sortDirection,
isSortHeader,
sortStates: sortStates.sortStates
});
const headerClasses = cx__default["default"](headerClassName, `${prefix}--table-sort__header`, {
[`${prefix}--table-sort__header--ai-label`]: colHasAILabel,
[`${prefix}--table-sort__header--decorator`]: decorator
});
const handleClick = evt => {
if (colHasAILabel && AILableRef.current && AILableRef.current.contains(evt.target)) {
return;
} else if (onClick) {
return onClick(evt);
}
};
return /*#__PURE__*/React__default["default"].createElement("th", {
id: id,
"aria-sort": ariaSort,
className: headerClasses,
colSpan: colSpan,
ref: ref,
scope: scope
}, /*#__PURE__*/React__default["default"].createElement("div", {
className: `${prefix}--table-sort__description`,
id: uniqueId
}, sortDescription), /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
type: "button",
"aria-describedby": uniqueId,
className: className,
onClick: handleClick
}, rest), /*#__PURE__*/React__default["default"].createElement("span", {
className: `${prefix}--table-sort__flex`
}, /*#__PURE__*/React__default["default"].createElement("div", {
className: `${prefix}--table-header-label`
}, children), /*#__PURE__*/React__default["default"].createElement(iconsReact.ArrowUp, {
size: 20,
className: `${prefix}--table-sort__icon`
}), /*#__PURE__*/React__default["default"].createElement(iconsReact.ArrowsVertical, {
size: 20,
className: `${prefix}--table-sort__icon-unsorted`
}), /*#__PURE__*/React__default["default"].createElement("div", {
className: `${prefix}--table-header-label--decorator-inner`
}, normalizedDecorator))));
});
TableHeader.propTypes = {
/**
* Pass in children that will be embedded in the table header label
*/
children: PropTypes__default["default"].node,
/**
* Specify an optional className to be applied to the container node
*/
className: PropTypes__default["default"].string,
/**
* Specify `colSpan` as a non-negative integer value to indicate how
* many columns the TableHeader cell extends in a table
*/
colSpan: PropTypes__default["default"].number,
/**
* Supply an id to the th element.
*/
id: PropTypes__default["default"].string,
/**
* Specify whether this header is the header by which a table is being sorted
* by
*/
isSortHeader: PropTypes__default["default"].bool,
/**
* Specify whether this header is one through which a user can sort the table
*/
isSortable: PropTypes__default["default"].bool,
/**
* Hook that is invoked when the header is clicked
*/
onClick: PropTypes__default["default"].func,
/**
* Specify the scope of this table header. You can find more info about this
* attribute at the following URL:
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope
*/
scope: PropTypes__default["default"].string,
/**
* Specify which direction we are currently sorting by, should be one of DESC,
* NONE, or ASC.
*/
sortDirection: PropTypes__default["default"].oneOf(Object.values(sortStates.sortStates)),
/**
* Supply a method to translate internal strings with your i18n tool of
* choice. Translation keys are available on the `translationKeys` field for
* this component.
*/
translateWithId: PropTypes__default["default"].func
};
TableHeader.translationKeys = Object.values(translationKeys);
TableHeader.displayName = 'TableHeader';
exports["default"] = TableHeader;