@carbon/ibm-products
Version:
Carbon for IBM Products
149 lines (145 loc) • 4.63 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 } from 'react';
import cx from 'classnames';
import { AddAlt, TextNewLine } from '@carbon/react/icons';
import { ConditionBuilderButton } from '../ConditionBuilderButton/ConditionBuilderButton.js';
import PropTypes from '../../../_virtual/index.js';
import { useTranslations } from '../utils/useTranslations.js';
import { blockClass } from '../utils/util.js';
import { ConditionBuilderContext } from '../ConditionBuilderContext/ConditionBuilderProvider.js';
const ConditionBuilderAdd = _ref => {
let {
className,
onClick,
addConditionSubGroupHandler,
showConditionSubGroupPreviewHandler,
hideConditionSubGroupPreviewHandler,
showConditionPreviewHandler,
hideConditionPreviewHandler,
enableSubGroup,
buttonLabel,
tabIndex,
group
} = _ref;
const [addConditionText, addConditionRowText, addSubgroupText] = useTranslations(['addConditionText', 'addConditionRowText', 'addSubgroupText']);
const {
onAddItem,
rootState
} = useContext(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__default.createElement("div", {
className: `${className} ${blockClass}__add-button-wrapper`,
role: !enableSubGroup ? 'gridcell' : 'none',
"aria-label": getAriaLabel()
}, /*#__PURE__*/React__default.createElement(ConditionBuilderButton, _extends({
renderIcon: AddAlt,
onClick: onClickHandler
}, previewHandlers(), {
wrapperProps: wrapperProps,
className: `${blockClass}__add-button`,
hideLabel: true,
"data-name": "addButton",
label: buttonLabel ?? addConditionText,
tabIndex: tabIndex,
wrapperClassName: `${blockClass}__add-condition-wrapper`
})), enableSubGroup && /*#__PURE__*/React__default.createElement(ConditionBuilderButton, _extends({
renderIcon: TextNewLine,
onClick: handleAddSubGroup,
className: cx(`${blockClass}__add-condition-sub-group`),
hideLabel: true,
label: addSubgroupText,
wrapperProps: wrapperProps,
wrapperClassName: `${blockClass}__add-condition-sub-group-wrapper ${blockClass}__gap-left`
}, previewHandlersForSubgroup())));
};
ConditionBuilderAdd.propTypes = {
/**
* handler for hiding sub group preview
*/
addConditionSubGroupHandler: PropTypes.func,
/**
* handler for hiding sub group preview
*/ /**
* tooltip label for plus button
*/
buttonLabel: PropTypes.string,
/**
* Provide an optional class to be applied to the containing node.
*/
className: PropTypes.string,
/**
* boolean to enable sub groups for the tree variant
*/
enableSubGroup: PropTypes.bool,
/**
* handler for hiding sub group preview
*/
hideConditionPreviewHandler: PropTypes.func,
hideConditionSubGroupPreviewHandler: PropTypes.func,
/**
* handler for hiding sub group preview
*/ /**
* callback triggered on click of add button
*/
onClick: PropTypes.func,
showConditionPreviewHandler: PropTypes.func,
showConditionSubGroupPreviewHandler: PropTypes.func,
/**
* handler for hiding sub group preview
*/
/**
* Tab index
*/
tabIndex: PropTypes.number
};
export { ConditionBuilderAdd as default };