@carbon/ibm-products
Version:
Carbon for IBM Products
147 lines (145 loc) • 6.64 kB
JavaScript
/**
* Copyright IBM Corp. 2020, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const require_runtime = require("../../../_virtual/_rolldown/runtime.js");
const require_index = require("../../../node_modules/classnames/index.js");
const require_uuidv4 = require("../../../global/js/utils/uuidv4.js");
const require_util = require("../utils/util.js");
const require_ConditionBuilderProvider = require("../ConditionBuilderContext/ConditionBuilderProvider.js");
const require_ConditionBuilderButton = require("../ConditionBuilderButton/ConditionBuilderButton.js");
const require_useTranslations = require("../utils/useTranslations.js");
const require_ConditionBuilderItem = require("../ConditionBuilderItem/ConditionBuilderItem.js");
const require_ConditionBuilderAdd = require("../ConditionBuilderAdd/ConditionBuilderAdd.js");
const require_ItemOptionForValueField = require("../ConditionBuilderItem/ConditionBuilderItemOption/ItemOptionForValueField.js");
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
let _carbon_react = require("@carbon/react");
let _carbon_react_icons = require("@carbon/react/icons");
//#region src/components/ConditionBuilder/ConditionBuilderActions/ConditionBuilderActions.tsx
/**
* Copyright IBM Corp. 2024
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
/**@ts-ignore */
var import_classnames = /* @__PURE__ */ require_runtime.__toESM(require_index.default);
const ConditionBuilderActions = ({ actions, className }) => {
const { actionState = [], setActionState, readOnly, onRemoveItem, rootState } = (0, react.useContext)(require_ConditionBuilderProvider.ConditionBuilderContext);
const [showDeletionPreview, setShowDeletionPreview] = (0, react.useState)(-1);
const [actionsText, thenText, andText, removeActionText, addActionText, actionSectionText] = require_useTranslations.useTranslations([
"actionsText",
"then",
"and",
"removeActionText",
"addActionText",
"actionSectionText"
]);
const addActionHandler = () => {
if (readOnly) return;
const action = {
id: require_uuidv4.default(),
label: void 0,
popoverToOpen: "valueField"
};
setActionState?.([...actionState, action]);
};
const onchangeHandler = (selectedId, actionIndex) => {
const newAction = {
...actions.find((action) => action.id === selectedId),
id: actionState[actionIndex].id
};
setActionState?.([
...actionState.slice(0, actionIndex),
newAction,
...actionState.slice(actionIndex + 1)
]);
};
const onRemove = (selectedId) => {
const actionToRemove = actionState.find((action) => action.id === selectedId);
const { preventRemove } = onRemoveItem?.({
type: "action",
state: rootState,
item: actionToRemove
}) ?? {};
if (!preventRemove) setActionState?.(actionState.filter((action) => action.id !== selectedId));
};
const handleShowDeletionPreview = (index) => {
setShowDeletionPreview(index);
};
const handleHideDeletionPreview = () => {
setShowDeletionPreview(-1);
};
return /* @__PURE__ */ react.default.createElement("div", { className }, /* @__PURE__ */ react.default.createElement(_carbon_react.Section, {
className: `${require_util.blockClass}__heading`,
level: 4
}, /* @__PURE__ */ react.default.createElement(_carbon_react.Heading, null, actionsText)), /* @__PURE__ */ react.default.createElement("div", {
className: `${require_util.blockClass}__condition-wrapper`,
role: "grid",
"aria-label": actionSectionText
}, actionState?.map((action, index) => /* @__PURE__ */ react.default.createElement("div", {
key: action.id,
role: "row",
className: (0, import_classnames.default)(`${require_util.blockClass}__condition-block ${require_util.blockClass}__gap ${require_util.blockClass}__gap-bottom`, { [`${require_util.blockClass}__condition__deletion-preview`]: showDeletionPreview == index })
}, /* @__PURE__ */ react.default.createElement(require_ConditionBuilderItem.ConditionBuilderItem, {
className: `${require_util.blockClass}__statement-button`,
tabIndex: 0,
popOverClassName: `${require_util.blockClass}__gap ${require_util.blockClass}__connector`,
label: index === 0 ? thenText : andText
}), /* @__PURE__ */ react.default.createElement(require_ConditionBuilderItem.ConditionBuilderItem, {
label: action.label,
title: actionsText,
condition: action,
"data-name": "valueField",
type: "option",
popOverClassName: `${require_util.blockClass}__action-block`
}, /* @__PURE__ */ react.default.createElement(require_ItemOptionForValueField.ItemOptionForValueField, {
conditionState: { value: action.label },
onChange: (selection) => onchangeHandler(selection.id, index),
config: { options: actions }
})), !readOnly && /* @__PURE__ */ react.default.createElement("span", {
role: "gridcell",
"aria-label": removeActionText
}, /* @__PURE__ */ react.default.createElement(require_ConditionBuilderButton.ConditionBuilderButton, {
hideLabel: true,
label: removeActionText,
onClick: () => onRemove(action.id),
onMouseEnter: () => handleShowDeletionPreview(index),
onMouseLeave: handleHideDeletionPreview,
onFocus: () => handleShowDeletionPreview(index),
onBlur: handleHideDeletionPreview,
renderIcon: _carbon_react_icons.Close,
className: `${require_util.blockClass}__close-condition`,
"data-name": "closeCondition"
})), !readOnly && actionState.length === index + 1 && /* @__PURE__ */ react.default.createElement(require_ConditionBuilderAdd.default, {
onClick: addActionHandler,
className: `${require_util.blockClass}__gap ${require_util.blockClass}__gap-left`,
buttonLabel: addActionText,
tabIndex: 0
}))), actionState.length === 0 && /* @__PURE__ */ react.default.createElement(require_ConditionBuilderAdd.default, {
onClick: addActionHandler,
className: `${require_util.blockClass}__gap ${require_util.blockClass}__gap-left`,
buttonLabel: addActionText,
tabIndex: 0
})));
};
ConditionBuilderActions.propTypes = {
/**
* optional array of object that give the list of actions.
*/
actions: prop_types.default.arrayOf(prop_types.default.shape({
id: prop_types.default.oneOfType([prop_types.default.string, prop_types.default.number]).isRequired,
label: prop_types.default.string.isRequired
})),
/**
* Provide an optional class to be applied to the containing node.
*/
className: prop_types.default.string
};
//#endregion
exports.default = ConditionBuilderActions;