@carbon/react/es/components/DataTable/TableBatchActions.js

React components for the Carbon Design System

/**
 * 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.
 */

import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
import cx from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import Button from '../Button/Button.js';
import '../Button/Button.Skeleton.js';
import TableActionList from './TableActionList.js';
import { Text } from '../Text/Text.js';
import '../Text/TextDirection.js';
import { usePrefix } from '../../internal/usePrefix.js';

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 = cx({
    [`${prefix}--batch-actions`]: true,
    [`${prefix}--batch-actions--active`]: shouldShowBatchActions
  }, className);
  const batchSummaryClasses = cx(`${prefix}--batch-summary`, {
    [`${prefix}--batch-summary__scroll`]: isScrolling
  });
  return /*#__PURE__*/React.createElement("div", _extends({
    onScroll: () => {
      setIsScrolling(!isScrolling);
    },
    "aria-hidden": !shouldShowBatchActions,
    className: batchActionsClasses
  }, rest), /*#__PURE__*/React.createElement("div", {
    className: batchSummaryClasses
  }, /*#__PURE__*/React.createElement("p", {
    className: `${prefix}--batch-summary__para`
  }, /*#__PURE__*/React.createElement(Text, null, totalSelected > 1 || totalSelected === 0 ? t('carbon.table.batch.items.selected', {
    totalSelected
  }) : t('carbon.table.batch.item.selected', {
    totalSelected
  }))), onSelectAll && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
    className: `${prefix}--batch-summary__divider`
  }, "|"), /*#__PURE__*/React.createElement(Button, {
    onClick: onSelectAll,
    tabIndex: shouldShowBatchActions ? 0 : -1
  }, t('carbon.table.batch.selectAll', {
    totalCount
  })))), /*#__PURE__*/React.createElement(TableActionList, null, children, /*#__PURE__*/React.createElement(Button, {
    className: `${prefix}--batch-summary__cancel`,
    tabIndex: shouldShowBatchActions ? 0 : -1,
    onClick: onCancel
  }, t('carbon.table.batch.cancel'))));
};
TableBatchActions.propTypes = {
  children: PropTypes.node,
  className: PropTypes.string,
  /**
   * Hook required to listen for when the user initiates a cancel request
   * through this component
   */
  onCancel: PropTypes.func.isRequired,
  /**
   * Hook to listen for when the user initiates a select all
   * request through this component. This _only_ controls the rendering
   * of the `Select All` button and does not include built in functionality
   */
  onSelectAll: PropTypes.func,
  /**
   * Boolean specifier for whether or not the batch action bar should be
   * displayed
   */
  shouldShowBatchActions: PropTypes.bool,
  /**
   * Numeric representation of the total number of items in a table.
   * This number is used in the select all button text
   */
  totalCount: PropTypes.number,
  /**
   * Numeric representation of the total number of items selected in a table.
   * This number is used to derive the selection message
   */
  totalSelected: PropTypes.number.isRequired,
  /**
   * Translates component strings using your i18n tool.
   */
  translateWithId: PropTypes.func
};

export { TableBatchActions as default };