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

Carbon react components for the MSKCC DSM

/**
 * MSKCC 2021, 2024
 */

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

const translationKeys = {
  'carbon.table.batch.cancel': 'Cancel',
  'carbon.table.batch.items.selected': 'items selected',
  'carbon.table.batch.item.selected': 'item selected'
};
const translateWithId = (id, state) => {
  if (id === 'carbon.table.batch.cancel') {
    return translationKeys[id];
  }
  return `${state.totalSelected} ${translationKeys[id]}`;
};
const TableBatchActions = _ref => {
  let {
    className,
    children,
    shouldShowBatchActions,
    totalSelected,
    onCancel,
    translateWithId: t,
    ...rest
  } = _ref;
  const [isScrolling, setIsScrolling] = React__default.useState();
  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__default.createElement("div", _extends({
    onScroll: () => {
      setIsScrolling(!isScrolling);
    },
    "aria-hidden": !shouldShowBatchActions,
    className: batchActionsClasses
  }, rest), /*#__PURE__*/React__default.createElement("div", {
    className: batchSummaryClasses
  }, /*#__PURE__*/React__default.createElement("p", {
    className: `${prefix}--batch-summary__para`
  }, /*#__PURE__*/React__default.createElement(Text, {
    as: "span"
  }, totalSelected > 1 || totalSelected === 0 ? t('carbon.table.batch.items.selected', {
    totalSelected
  }) : t('carbon.table.batch.item.selected', {
    totalSelected
  })))), /*#__PURE__*/React__default.createElement(TableActionList, null, children, /*#__PURE__*/React__default.createElement(Button, {
    className: `${prefix}--batch-summary__cancel`,
    tabIndex: shouldShowBatchActions ? 0 : -1,
    onClick: onCancel
  }, t('carbon.table.batch.cancel'))));
};
TableBatchActions.translationKeys = Object.keys(translationKeys);
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,
  /**
   * Boolean specifier for whether or not the batch action bar should be
   * displayed
   */
  shouldShowBatchActions: PropTypes.bool,
  /**
   * 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,
  /**
   * 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.func
};
TableBatchActions.defaultProps = {
  translateWithId
};
var TableBatchActions$1 = TableBatchActions;

export { TableBatchActions$1 as default };