@carbon/react/es/components/ChatButton/ChatButton.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 React from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import Button from '../Button/Button.js';
import '../Button/Button.Skeleton.js';
import { usePrefix } from '../../internal/usePrefix.js';

const ChatButton = /*#__PURE__*/React.forwardRef(function ChatButton({
  className,
  children,
  disabled,
  isQuickAction,
  isSelected,
  kind,
  renderIcon,
  size,
  ...other
}, ref) {
  const prefix = usePrefix();
  const classNames = cx(className, {
    [`${prefix}--chat-btn`]: true,
    [`${prefix}--chat-btn--with-icon`]: renderIcon,
    [`${prefix}--chat-btn--quick-action`]: isQuickAction,
    [`${prefix}--chat-btn--quick-action--selected`]: isSelected
  });
  const allowedSizes = ['sm', 'md', 'lg'];
  if (isQuickAction) {
    kind = 'ghost';
    size = 'sm';
  } else {
    // Check if size is valid and warn if not
    if (size && !allowedSizes.includes(size)) {
      console.error(`Invalid size "${size}" provided to ChatButton. Size must be one of: ${allowedSizes.join(', ')}. Defaulting to "lg".`);
      size = 'lg';
    }
  }
  return /*#__PURE__*/React.createElement(Button, _extends({
    disabled: disabled,
    className: classNames,
    kind: kind,
    ref: ref,
    size: size,
    renderIcon: renderIcon
  }, other), children);
});
ChatButton.propTypes = {
  /**
   * Provide the contents of your Select
   */
  children: PropTypes.node,
  /**
   * Specify an optional className to be applied to the node containing the label and the select box
   */
  className: PropTypes.string,
  /**
   * Specify whether the `ChatButton` should be disabled
   */
  disabled: PropTypes.bool,
  /**
   * Specify whether the `ChatButton` should be rendered as a quick action button
   */
  isQuickAction: PropTypes.bool,
  /**
   * Specify whether the quick action `ChatButton` should be rendered as selected. This disables the input
   */
  isSelected: PropTypes.bool,
  /**
   * Specify the kind of `ChatButton` you want to create
   */
  kind: PropTypes.oneOf(['primary', 'secondary', 'danger', 'ghost', 'tertiary']),
  /**
   * A component used to render an icon.
   */
  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
  /**
   * Specify the size of the `ChatButton`, from the following list of sizes:
   */
  size: PropTypes.oneOf(['sm', 'md', 'lg'])
};

export { ChatButton as default };