@carbon/react/es/components/DataTable/TableSelectRow.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 PropTypes from 'prop-types';
import React from 'react';
import cx from 'classnames';
import InlineCheckbox from '../InlineCheckbox/InlineCheckbox.js';
import RadioButton from '../RadioButton/RadioButton.js';
import { useId } from '../../internal/useId.js';
import { usePrefix } from '../../internal/usePrefix.js';
import { deprecate } from '../../prop-types/deprecate.js';

const TableSelectRow = ({
  ariaLabel: deprecatedAriaLabel,
  ['aria-label']: ariaLabel,
  checked,
  id,
  name,
  onSelect,
  onChange,
  disabled,
  radio,
  className
}) => {
  const prefix = usePrefix();
  const uniqueNameId = useId();
  const handleRadioChange = onChange ? (value, name, event) => {
    // Convert the radio value to boolean for consistency
    onChange(!!value, name || '', event);
  } : undefined;
  const handleCheckboxChange = onChange ? (checked, name, event) => {
    onChange(checked, name, event);
  } : undefined;
  const selectionInputProps = {
    id,
    name: name ? name : uniqueNameId,
    onClick: onSelect,
    checked,
    disabled
  };
  const labelValue = ariaLabel || deprecatedAriaLabel || '';
  const tableSelectRowClasses = cx(`${prefix}--table-column-checkbox`, {
    ...(className && {
      [className]: true
    }),
    [`${prefix}--table-column-radio`]: radio
  });
  return /*#__PURE__*/React.createElement("td", {
    className: tableSelectRowClasses,
    "aria-live": "off"
  }, radio ? /*#__PURE__*/React.createElement(RadioButton, _extends({}, selectionInputProps, {
    labelText: labelValue,
    onChange: handleRadioChange,
    hideLabel: true
  })) : /*#__PURE__*/React.createElement(InlineCheckbox, _extends({}, selectionInputProps, {
    "aria-label": labelValue,
    onChange: handleCheckboxChange
  })));
};
TableSelectRow.propTypes = {
  /**
   * Specify the aria label for the underlying input control
   */
  ['aria-label']: PropTypes.string,
  /**
   * Deprecated, please use `aria-label` instead.
   * Specify the aria label for the underlying input control
   */
  ariaLabel: deprecate(PropTypes.string, 'This prop syntax has been deprecated. Please use the new `aria-label`.'),
  /**
   * Specify whether this row is selected, or not
   */
  checked: PropTypes.bool,
  /**
   * The CSS class names of the cell that wraps the underlying input control
   */
  className: PropTypes.string,
  /**
   * Specify whether the control is disabled
   */
  disabled: PropTypes.bool,
  /**
   * Provide an `id` for the underlying input control
   */
  id: PropTypes.string.isRequired,
  /**
   * Provide a `name` for the underlying input control
   */
  name: PropTypes.string.isRequired,
  /**
   * Provide an optional hook that is called each time the input is updated
   */
  onChange: PropTypes.func,
  /**
   * Provide a handler to listen to when a user initiates a selection request
   */
  onSelect: PropTypes.func.isRequired,
  /**
   * Specify whether the control should be a radio button or inline checkbox
   */
  radio: PropTypes.bool
};

export { TableSelectRow as default };