@carbon/ibm-products/lib/components/ConditionBuilder/ConditionBuilderAdd/ConditionBuilderAdd.js

Carbon for IBM Products

/**
 * Copyright IBM Corp. 2020, 2025
 *
 * 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 React = require('react');
var cx = require('classnames');
var icons = require('@carbon/react/icons');
var ConditionBuilderButton = require('../ConditionBuilderButton/ConditionBuilderButton.js');
var index = require('../../../_virtual/index.js');
var useTranslations = require('../utils/useTranslations.js');
var util = require('../utils/util.js');
var ConditionBuilderProvider = require('../ConditionBuilderContext/ConditionBuilderProvider.js');

const ConditionBuilderAdd = _ref => {
  let {
    className,
    onClick,
    addConditionSubGroupHandler,
    showConditionSubGroupPreviewHandler,
    hideConditionSubGroupPreviewHandler,
    showConditionPreviewHandler,
    hideConditionPreviewHandler,
    enableSubGroup,
    buttonLabel,
    tabIndex,
    group
  } = _ref;
  const [addConditionText, addConditionRowText, addSubgroupText] = useTranslations.useTranslations(['addConditionText', 'addConditionRowText', 'addSubgroupText']);
  const {
    onAddItem,
    rootState
  } = React.useContext(ConditionBuilderProvider.ConditionBuilderContext);
  const onClickHandler = () => {
    const {
      preventAdd
    } = onAddItem?.({
      type: 'condition',
      state: rootState,
      group
    }) ?? {};
    if (!preventAdd) {
      hideConditionPreviewHandler?.();
      onClick();
    }
  };
  const previewHandlers = () => {
    return enableSubGroup ? {
      onMouseEnter: showConditionPreviewHandler,
      onMouseLeave: hideConditionPreviewHandler,
      onFocus: showConditionPreviewHandler,
      onBlur: hideConditionPreviewHandler
    } : {};
  };
  const previewHandlersForSubgroup = () => ({
    onMouseEnter: showConditionSubGroupPreviewHandler,
    onMouseLeave: hideConditionSubGroupPreviewHandler,
    onFocus: showConditionSubGroupPreviewHandler,
    onBlur: hideConditionSubGroupPreviewHandler
  });
  const handleAddSubGroup = () => {
    const {
      preventAdd
    } = onAddItem?.({
      type: 'subgroup',
      state: rootState,
      group
    }) ?? {};
    if (!preventAdd) {
      addConditionSubGroupHandler?.();
    }
  };
  const getAriaLabel = () => {
    return buttonLabel ? buttonLabel : !enableSubGroup ? addConditionRowText : undefined;
  };
  const wrapperProps = enableSubGroup ? {
    role: 'gridcell'
  } : {};
  return /*#__PURE__*/React.createElement("div", {
    className: `${className} ${util.blockClass}__add-button-wrapper`,
    role: !enableSubGroup ? 'gridcell' : 'none',
    "aria-label": getAriaLabel()
  }, /*#__PURE__*/React.createElement(ConditionBuilderButton.ConditionBuilderButton, _rollupPluginBabelHelpers.extends({
    renderIcon: icons.AddAlt,
    onClick: onClickHandler
  }, previewHandlers(), {
    wrapperProps: wrapperProps,
    className: `${util.blockClass}__add-button`,
    hideLabel: true,
    "data-name": "addButton",
    label: buttonLabel ?? addConditionText,
    tabIndex: tabIndex,
    wrapperClassName: `${util.blockClass}__add-condition-wrapper`
  })), enableSubGroup && /*#__PURE__*/React.createElement(ConditionBuilderButton.ConditionBuilderButton, _rollupPluginBabelHelpers.extends({
    renderIcon: icons.TextNewLine,
    onClick: handleAddSubGroup,
    className: cx(`${util.blockClass}__add-condition-sub-group`),
    hideLabel: true,
    label: addSubgroupText,
    wrapperProps: wrapperProps,
    wrapperClassName: `${util.blockClass}__add-condition-sub-group-wrapper ${util.blockClass}__gap-left`
  }, previewHandlersForSubgroup())));
};
ConditionBuilderAdd.propTypes = {
  /**
   * handler for hiding sub group preview
   */
  addConditionSubGroupHandler: index.default.func,
  /**
   * handler for hiding sub group preview
   */ /**
      * tooltip label for plus button
      */
  buttonLabel: index.default.string,
  /**
   * Provide an optional class to be applied to the containing node.
   */
  className: index.default.string,
  /**
   * boolean to enable sub groups for the tree variant
   */
  enableSubGroup: index.default.bool,
  /**
   * handler for hiding sub group preview
   */
  hideConditionPreviewHandler: index.default.func,
  hideConditionSubGroupPreviewHandler: index.default.func,
  /**
   * handler for hiding sub group preview
   */ /**
      * callback triggered on click of add button
      */
  onClick: index.default.func,
  showConditionPreviewHandler: index.default.func,
  showConditionSubGroupPreviewHandler: index.default.func,
  /**
   * handler for hiding sub group preview
   */
  /**
   * Tab index
   */
  tabIndex: index.default.number
};

exports.default = ConditionBuilderAdd;