@carbon/ibm-products
Version:
Carbon for IBM Products
139 lines (132 loc) • 5.56 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.
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var index = require('../../../_virtual/index.js');
var cx = require('classnames');
var icons = require('@carbon/react/icons');
var react = require('@carbon/react');
var ConditionBuilderItem = require('../ConditionBuilderItem/ConditionBuilderItem.js');
var ConditionBuilderProvider = require('../ConditionBuilderContext/ConditionBuilderProvider.js');
var ConditionBuilderAdd = require('../ConditionBuilderAdd/ConditionBuilderAdd.js');
var uuidv4 = require('../../../global/js/utils/uuidv4.js');
var ConditionBuilderButton = require('../ConditionBuilderButton/ConditionBuilderButton.js');
var useTranslations = require('../utils/useTranslations.js');
var ItemOptionForValueField = require('../ConditionBuilderItem/ConditionBuilderItemOption/ItemOptionForValueField.js');
var util = require('../utils/util.js');
const ConditionBuilderActions = _ref => {
let {
actions,
className
} = _ref;
const {
actionState = [],
setActionState
} = React.useContext(ConditionBuilderProvider.ConditionBuilderContext);
const [showDeletionPreview, setShowDeletionPreview] = React.useState(-1);
const [actionsText, thenText, andText, removeActionText, addActionText, actionSectionText] = useTranslations.useTranslations(['actionsText', 'then', 'and', 'removeActionText', 'addActionText', 'actionSectionText']);
const addActionHandler = () => {
const action = {
id: uuidv4.default(),
label: undefined,
popoverToOpen: 'valueField'
};
setActionState?.([...actionState, action]);
};
const onchangeHandler = (selectedId, actionIndex) => {
const action = actions.find(action => action.id === selectedId); //fetch the selected action from the input action array
// same actions can be added multiple times
const newAction = {
...action,
id: actionState[actionIndex].id
};
setActionState?.([...actionState.slice(0, actionIndex), newAction, ...actionState.slice(actionIndex + 1)]);
};
const onRemove = selectedId => {
setActionState?.(actionState.filter(action => action.id !== selectedId));
};
const handleShowDeletionPreview = index => {
setShowDeletionPreview(index);
};
const handleHideDeletionPreview = () => {
setShowDeletionPreview(-1);
};
return /*#__PURE__*/React.createElement("div", {
className: className
}, /*#__PURE__*/React.createElement(react.Section, {
className: `${util.blockClass}__heading`,
level: 4
}, /*#__PURE__*/React.createElement(react.Heading, null, actionsText)), /*#__PURE__*/React.createElement("div", {
className: `${util.blockClass}__condition-wrapper`,
role: "grid",
"aria-label": actionSectionText
}, actionState?.map((action, index) => /*#__PURE__*/React.createElement("div", {
key: action.id,
role: "row",
className: cx(`${util.blockClass}__condition-block ${util.blockClass}__gap ${util.blockClass}__gap-bottom`, {
[`${util.blockClass}__condition__deletion-preview`]: showDeletionPreview == index
})
}, /*#__PURE__*/React.createElement(ConditionBuilderItem.ConditionBuilderItem, {
className: `${util.blockClass}__statement-button`,
tabIndex: 0,
popOverClassName: `${util.blockClass}__gap`,
label: index === 0 ? thenText : andText
}), /*#__PURE__*/React.createElement(ConditionBuilderItem.ConditionBuilderItem, {
label: action.label,
title: actionsText,
condition: action,
"data-name": "valueField",
type: "option"
}, /*#__PURE__*/React.createElement(ItemOptionForValueField.ItemOptionForValueField, {
conditionState: {
value: action.label
},
onChange: selection => onchangeHandler(selection.id, index),
config: {
options: actions
}
})), /*#__PURE__*/React.createElement("span", {
role: "gridcell",
"aria-label": removeActionText
}, /*#__PURE__*/React.createElement(ConditionBuilderButton.ConditionBuilderButton, {
hideLabel: true,
label: removeActionText,
onClick: () => onRemove(action.id),
onMouseEnter: () => handleShowDeletionPreview(index),
onMouseLeave: handleHideDeletionPreview,
onFocus: () => handleShowDeletionPreview(index),
onBlur: handleHideDeletionPreview,
renderIcon: icons.Close,
className: `${util.blockClass}__close-condition`,
"data-name": "closeCondition"
})), actionState.length === index + 1 && /*#__PURE__*/React.createElement(ConditionBuilderAdd.default, {
onClick: addActionHandler,
className: `${util.blockClass}__gap ${util.blockClass}__gap-left`,
buttonLabel: addActionText,
tabIndex: 0
}))), actionState.length === 0 && /*#__PURE__*/React.createElement(ConditionBuilderAdd.default, {
onClick: addActionHandler,
className: `${util.blockClass}__gap ${util.blockClass}__gap-left`,
buttonLabel: addActionText,
tabIndex: 0
})));
};
ConditionBuilderActions.propTypes = {
/**
* optional array of object that give the list of actions.
*/
actions: index.default.arrayOf(index.default.shape({
id: index.default.oneOfType([index.default.string, index.default.number]).isRequired,
label: index.default.string.isRequired
})),
/**
* Provide an optional class to be applied to the containing node.
*/
className: index.default.string
};
exports.default = ConditionBuilderActions;