@carbon/ibm-products
Version:
Carbon for IBM Products
95 lines (91 loc) • 3.24 kB
JavaScript
/**
* 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.
*/
import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
import React__default, { useContext, useCallback } from 'react';
import { ConditionBuilderItem } from '../ConditionBuilderItem/ConditionBuilderItem.js';
import { ItemOption } from '../ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.js';
import PropTypes from '../../../_virtual/index.js';
import { HIERARCHICAL_VARIANT, blockClass, focusThisField } from '../utils/util.js';
import { ConditionBuilderContext } from '../ConditionBuilderContext/ConditionBuilderProvider.js';
import { useTranslations } from '../utils/useTranslations.js';
import { useDataConfigs } from '../utils/useDataConfigs.js';
import { ConditionBuilderButton } from '../ConditionBuilderButton/ConditionBuilderButton.js';
const ConditionConnector = _ref => {
let {
operator,
className,
onChange,
...rest
} = _ref;
const {
variant,
conditionBuilderRef
} = useContext(ConditionBuilderContext);
const [connectorText] = useTranslations(['connectorText']);
const {
connectorConfig
} = useDataConfigs();
const handleConnectorHover = 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);
focusThisField(evt, conditionBuilderRef);
};
return variant == HIERARCHICAL_VARIANT ? /*#__PURE__*/React__default.createElement("span", {
className: `${className} ${blockClass}__connector--disabled`
}, /*#__PURE__*/React__default.createElement(ConditionBuilderButton, {
label: operator
})) : /*#__PURE__*/React__default.createElement(ConditionBuilderItem, _extends({
label: operator,
title: connectorText,
"data-name": "connectorField",
onMouseEnter: activeConnectorHandler,
onMouseLeave: inActiveConnectorHandler,
onFocus: activeConnectorHandler,
onBlur: inActiveConnectorHandler
}, rest, {
popOverClassName: className,
className: `${blockClass}__connector-button`
}), /*#__PURE__*/React__default.createElement(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: PropTypes.string,
/**
* callback to update the current condition of the state tree
*/
onChange: PropTypes.func,
/**
* string that defines the connector operator (and/or)
*/
operator: PropTypes.string
};
export { ConditionConnector as default };