@carbon/react/lib/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.
 */

'use strict';

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 Button = require('../Button/Button.js');
require('../Button/Button.Skeleton.js');
var TableActionList = require('./TableActionList.js');
require('../Text/index.js');
var usePrefix = require('../../internal/usePrefix.js');
var Text = require('../Text/Text.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 TableBatchActionsTranslationKeys = ['carbon.table.batch.cancel', 'carbon.table.batch.items.selected', 'carbon.table.batch.item.selected', 'carbon.table.batch.selectAll'];
const translationKeys = {
  'carbon.table.batch.cancel': 'Cancel',
  'carbon.table.batch.items.selected': 'items selected',
  'carbon.table.batch.item.selected': 'item selected',
  'carbon.table.batch.selectAll': 'Select all'
};
const translateWithId = (id, {
  totalSelected,
  totalCount
} = {
  totalSelected: 0,
  totalCount: 0
}) => {
  if (id === 'carbon.table.batch.cancel') {
    return translationKeys[id];
  }
  if (id === 'carbon.table.batch.selectAll') {
    return `${translationKeys[id]} (${totalCount})`;
  }
  return `${totalSelected} ${translationKeys[id]}`;
};
const TableBatchActions = ({
  className,
  children,
  shouldShowBatchActions,
  totalSelected,
  totalCount,
  onCancel,
  onSelectAll,
  translateWithId: t = translateWithId,
  ...rest
}) => {
  const [isScrolling, setIsScrolling] = React__default["default"].useState(false);
  const prefix = usePrefix.usePrefix();
  const batchActionsClasses = cx__default["default"]({
    [`${prefix}--batch-actions`]: true,
    [`${prefix}--batch-actions--active`]: shouldShowBatchActions
  }, className);
  const batchSummaryClasses = cx__default["default"](`${prefix}--batch-summary`, {
    [`${prefix}--batch-summary__scroll`]: isScrolling
  });
  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
    onScroll: () => {
      setIsScrolling(!isScrolling);
    },
    "aria-hidden": !shouldShowBatchActions,
    className: batchActionsClasses
  }, rest), /*#__PURE__*/React__default["default"].createElement("div", {
    className: batchSummaryClasses
  }, /*#__PURE__*/React__default["default"].createElement("p", {
    className: `${prefix}--batch-summary__para`
  }, /*#__PURE__*/React__default["default"].createElement(Text.Text, null, totalSelected > 1 || totalSelected === 0 ? t('carbon.table.batch.items.selected', {
    totalSelected
  }) : t('carbon.table.batch.item.selected', {
    totalSelected
  }))), onSelectAll && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
    className: `${prefix}--batch-summary__divider`
  }, "|"), /*#__PURE__*/React__default["default"].createElement(Button["default"], {
    onClick: onSelectAll,
    tabIndex: shouldShowBatchActions ? 0 : -1
  }, t('carbon.table.batch.selectAll', {
    totalCount
  })))), /*#__PURE__*/React__default["default"].createElement(TableActionList["default"], null, children, /*#__PURE__*/React__default["default"].createElement(Button["default"], {
    className: `${prefix}--batch-summary__cancel`,
    tabIndex: shouldShowBatchActions ? 0 : -1,
    onClick: onCancel
  }, t('carbon.table.batch.cancel'))));
};
TableBatchActions.translationKeys = TableBatchActionsTranslationKeys;
TableBatchActions.propTypes = {
  children: PropTypes__default["default"].node,
  className: PropTypes__default["default"].string,
  /**
   * Hook required to listen for when the user initiates a cancel request
   * through this component
   */
  onCancel: PropTypes__default["default"].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__default["default"].func,
  /**
   * Boolean specifier for whether or not the batch action bar should be
   * displayed
   */
  shouldShowBatchActions: PropTypes__default["default"].bool,
  /**
   * Numeric representation of the total number of items in a table.
   * This number is used in the select all button text
   */
  totalCount: PropTypes__default["default"].number,
  /**
   * Numeric representation of the total number of items selected in a table.
   * This number is used to derive the selection message
   */
  totalSelected: PropTypes__default["default"].number.isRequired,
  /**
   * 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
};

exports["default"] = TableBatchActions;