@carbon/react
Version:
React components for the Carbon Design System
95 lines (93 loc) • 4.05 kB
JavaScript
/**
* Copyright IBM Corp. 2016, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import { usePrefix } from "../../internal/usePrefix.js";
import { Text } from "../Text/Text.js";
import Button_default from "../Button/index.js";
import TableActionList from "./TableActionList.js";
import classNames from "classnames";
import React from "react";
import PropTypes from "prop-types";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
//#region src/components/DataTable/TableBatchActions.tsx
/**
* Copyright IBM Corp. 2016, 2025
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const translationIds = {
"carbon.table.batch.cancel": "carbon.table.batch.cancel",
"carbon.table.batch.items.selected": "carbon.table.batch.items.selected",
"carbon.table.batch.item.selected": "carbon.table.batch.item.selected",
"carbon.table.batch.selectAll": "carbon.table.batch.selectAll"
};
const defaultTranslations = {
[translationIds["carbon.table.batch.cancel"]]: "Cancel",
[translationIds["carbon.table.batch.items.selected"]]: "items selected",
[translationIds["carbon.table.batch.item.selected"]]: "item selected",
[translationIds["carbon.table.batch.selectAll"]]: "Select all"
};
const defaultTranslateWithId = (messageId, args = {
totalSelected: 0,
totalCount: 0
}) => {
const { totalSelected, totalCount } = args;
switch (messageId) {
case translationIds["carbon.table.batch.cancel"]: return defaultTranslations[messageId];
case translationIds["carbon.table.batch.selectAll"]: return `${defaultTranslations[messageId]} (${totalCount})`;
case translationIds["carbon.table.batch.items.selected"]:
case translationIds["carbon.table.batch.item.selected"]: return `${totalSelected} ${defaultTranslations[messageId]}`;
}
};
const TableBatchActions = ({ className, children, shouldShowBatchActions, totalSelected, totalCount, onCancel, onSelectAll, translateWithId: t = defaultTranslateWithId, ...rest }) => {
const [isScrolling, setIsScrolling] = React.useState(false);
const prefix = usePrefix();
const batchActionsClasses = classNames({
[`${prefix}--batch-actions`]: true,
[`${prefix}--batch-actions--active`]: shouldShowBatchActions
}, className);
const batchSummaryClasses = classNames(`${prefix}--batch-summary`, { [`${prefix}--batch-summary__scroll`]: isScrolling });
return /* @__PURE__ */ jsxs("div", {
onScroll: () => {
setIsScrolling(!isScrolling);
},
"aria-hidden": !shouldShowBatchActions,
className: batchActionsClasses,
...rest,
children: [/* @__PURE__ */ jsxs("div", {
className: batchSummaryClasses,
children: [/* @__PURE__ */ jsx("p", {
className: `${prefix}--batch-summary__para`,
children: /* @__PURE__ */ jsx(Text, { children: totalSelected > 1 || totalSelected === 0 ? t("carbon.table.batch.items.selected", { totalSelected }) : t("carbon.table.batch.item.selected", { totalSelected }) })
}), onSelectAll && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
className: `${prefix}--batch-summary__divider`,
children: "|"
}), /* @__PURE__ */ jsx(Button_default, {
onClick: onSelectAll,
tabIndex: shouldShowBatchActions ? 0 : -1,
children: t("carbon.table.batch.selectAll", { totalCount })
})] })]
}), /* @__PURE__ */ jsxs(TableActionList, { children: [children, /* @__PURE__ */ jsx(Button_default, {
className: `${prefix}--batch-summary__cancel`,
tabIndex: shouldShowBatchActions ? 0 : -1,
onClick: onCancel,
children: t("carbon.table.batch.cancel")
})] })]
});
};
TableBatchActions.propTypes = {
children: PropTypes.node,
className: PropTypes.string,
onCancel: PropTypes.func.isRequired,
onSelectAll: PropTypes.func,
shouldShowBatchActions: PropTypes.bool,
totalCount: PropTypes.number,
totalSelected: PropTypes.number.isRequired,
translateWithId: PropTypes.func
};
//#endregion
export { TableBatchActions as default };