@carbon/ibm-products/lib/components/ConditionBuilder/ConditionBuilderConnector/ConditionConnector.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 ConditionBuilderItem = require('../ConditionBuilderItem/ConditionBuilderItem.js');
var ItemOption = require('../ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.js');
var index = require('../../../_virtual/index.js');
var util = require('../utils/util.js');
var ConditionBuilderProvider = require('../ConditionBuilderContext/ConditionBuilderProvider.js');
var useTranslations = require('../utils/useTranslations.js');
var useDataConfigs = require('../utils/useDataConfigs.js');
var ConditionBuilderButton = require('../ConditionBuilderButton/ConditionBuilderButton.js');

const ConditionConnector = _ref => {
  let {
    operator,
    className,
    onChange,
    ...rest
  } = _ref;
  const {
    variant,
    conditionBuilderRef
  } = React.useContext(ConditionBuilderProvider.ConditionBuilderContext);
  const [connectorText] = useTranslations.useTranslations(['connectorText']);
  const {
    connectorConfig
  } = useDataConfigs.useDataConfigs();
  const handleConnectorHover = React.useCallback((parentGroup, isHover) => {
    if (isHover) {
      parentGroup.classList.add('hoveredConnector');
    } else {
      parentGroup.classList.remove('hoveredConnector');
    }
  }, []);
  const activeConnectorHandler = evt => {
    const parentGroup = evt?.currentTarget.closest('.eachGroup');
    handleConnectorHover(parentGroup, true);
  };
  const inActiveConnectorHandler = evt => {
    const parentGroup = evt?.currentTarget.closest('.eachGroup');
    handleConnectorHover(parentGroup, false);
  };
  const onChangeHandler = (op, evt) => {
    onChange?.(op);
    util.focusThisField(evt, conditionBuilderRef);
  };
  return variant == util.HIERARCHICAL_VARIANT ? /*#__PURE__*/React.createElement("span", {
    className: `${className} ${util.blockClass}__connector--disabled`
  }, /*#__PURE__*/React.createElement(ConditionBuilderButton.ConditionBuilderButton, {
    label: operator
  })) : /*#__PURE__*/React.createElement(ConditionBuilderItem.ConditionBuilderItem, _rollupPluginBabelHelpers.extends({
    label: operator,
    title: connectorText,
    "data-name": "connectorField",
    onMouseEnter: activeConnectorHandler,
    onMouseLeave: inActiveConnectorHandler,
    onFocus: activeConnectorHandler,
    onBlur: inActiveConnectorHandler
  }, rest, {
    popOverClassName: className,
    className: `${util.blockClass}__connector-button`
  }), /*#__PURE__*/React.createElement(ItemOption.ItemOption, {
    config: {
      options: connectorConfig
    },
    conditionState: {
      value: operator,
      label: connectorText
    },
    onChange: onChangeHandler
  }));
};
ConditionConnector.propTypes = {
  /**
   * Provide an optional class to be applied to the containing node.
   */
  className: index.default.string,
  /**
   * callback to update the current condition of the state tree
   */
  onChange: index.default.func,
  /**
   * string that defines the connector operator (and/or)
   */
  operator: index.default.string
};

exports.default = ConditionConnector;