@carbon/ibm-products
Version:
Carbon for IBM Products
310 lines (308 loc) • 12.4 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_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_ItemOption = require("../ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.js");
const require_useDataConfigs = require("../utils/useDataConfigs.js");
const require_ConditionConnector = require("../ConditionBuilderConnector/ConditionConnector.js");
const require_ConditionBuilderItemNumber = require("../ConditionBuilderItem/ConditionBuilderItemNumber/ConditionBuilderItemNumber.js");
const require_ConditionBuilderItemText = require("../ConditionBuilderItem/ConditionBuilderItemText/ConditionBuilderItemText.js");
const require_ConditionBuilderItemDate = require("../ConditionBuilderItem/ConditionBuilderItemDate/ConditionBuilderItemDate.js");
const require_ConditionBuilderItemTime = require("../ConditionBuilderItem/ConditionBuilderItemTime/ConditionBuilderItemTime.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_icons = require("@carbon/react/icons");
//#region src/components/ConditionBuilder/ConditionBlock/ConditionBlock.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.
*/
var import_classnames = /* @__PURE__ */ require_runtime.__toESM(require_index.default);
const ConditionBlock = (props) => {
const { onRemove, onChange, condition = {}, conjunction, onConnectorOperatorChange, isStatement, group, onStatementChange, conditionIndex, addConditionHandler, addConditionSubGroupHandler, aria, hideConditionSubGroupPreviewHandler, showConditionSubGroupPreviewHandler, hideConditionPreviewHandler, showConditionPreviewHandler, isLastCondition } = props;
const { property, value, operator } = condition;
const { inputConfig, variant, conditionBuilderRef, readOnly } = (0, react.useContext)(require_ConditionBuilderProvider.ConditionBuilderContext);
const [showDeletionPreview, setShowDeletionPreview] = (0, react.useState)(false);
const [showAllActions, setShowAllActions] = (0, react.useState)(false);
const [conditionRowText, conditionText, propertyText, operatorText, removeConditionText] = require_useTranslations.useTranslations([
"conditionRowText",
"conditionText",
"propertyText",
"operatorText",
"removeConditionText"
]);
const { statementConfig, operatorConfig } = require_useDataConfigs.useDataConfigs();
const getCurrentConfig = (property) => {
return inputConfig?.properties?.find((eachProperty) => eachProperty.id == property) ?? {};
};
const { icon, type, config, label, description } = getCurrentConfig(property);
const ItemComponent = {
text: require_ConditionBuilderItemText.ConditionBuilderItemText,
number: require_ConditionBuilderItemNumber.ConditionBuilderItemNumber,
date: require_ConditionBuilderItemDate.ConditionBuilderItemDate,
time: require_ConditionBuilderItemTime.ConditionBuilderItemTime,
option: require_ItemOptionForValueField.ItemOptionForValueField,
custom: config?.component,
textarea: require_ConditionBuilderItemText.ConditionBuilderItemText
}[type];
const showAllActionsHandler = () => {
setShowAllActions(true);
};
const hideAllActionsHandler = () => {
setShowAllActions(false);
};
const onStatementChangeHandler = (v, evt) => {
require_util.focusThisField(evt, conditionBuilderRef);
onStatementChange?.(v);
};
const onPropertyChangeHandler = (newProperty) => {
onChange({
...condition,
property: newProperty,
operator: void 0,
value: "",
popoverToOpen: require_util.checkIsValid(newProperty) ? "operatorField" : ""
});
};
const onOperatorChangeHandler = (newOperator) => {
onChange({
...condition,
operator: newOperator,
value: void 0,
popoverToOpen: require_util.checkIsValid(newOperator) ? "valueField" : ""
});
};
const onValueChangeHandler = (newValue) => {
const currentCondition = { ...condition };
delete currentCondition.popoverToOpen;
onChange({
...currentCondition,
value: newValue
});
};
const handleShowDeletionPreview = () => {
setShowDeletionPreview(true);
};
const handleHideDeletionPreview = () => {
setShowDeletionPreview(false);
};
const manageActionButtons = (conditionIndex, conditions) => {
if (variant === "Hierarchical") return true;
return isLastCondition(conditionIndex, conditions);
};
const getOperators = () => {
if (config?.operators) return config?.operators;
return operatorConfig.filter((operator) => operator.type.indexOf(type) != -1 || operator.type == "all");
};
const getAriaAttributes = () => {
return variant == "Hierarchical" ? {
"aria-level": aria.level,
"aria-posinset": aria.posinset,
"aria-setsize": aria.setsize
} : {};
};
const renderChildren = (popoverRef, closePopover) => {
return /* @__PURE__ */ react.default.createElement(ItemComponent, {
conditionState: {
property,
operator,
value
},
onChange: onValueChangeHandler,
config,
"data-name": "valueField",
parentRef: popoverRef,
type,
closePopover
});
};
const renderItemOption = (popoverRef, closePopover) => {
return /* @__PURE__ */ react.default.createElement(require_ItemOption.ItemOption, {
conditionState: {
value: property,
label: propertyText
},
onChange: onPropertyChangeHandler,
config: { options: inputConfig?.properties },
closePopover,
group
});
};
return /* @__PURE__ */ react.default.createElement("div", {
className: (0, import_classnames.default)(`${require_util.blockClass}__condition-block`, { [`${require_util.blockClass}__condition__deletion-preview`]: showDeletionPreview }, { [`${require_util.blockClass}__gap-bottom`]: variant == require_util.HIERARCHICAL_VARIANT }, { [`${require_util.blockClass}__gap ${require_util.blockClass}__gap-bottom`]: variant == require_util.NON_HIERARCHICAL_VARIANT }, { [`${require_util.blockClass}__condition--interacting`]: showAllActions }),
role: "row",
"aria-label": conditionRowText,
...getAriaAttributes(),
onMouseEnter: showAllActionsHandler,
onMouseLeave: hideAllActionsHandler,
onBlur: hideAllActionsHandler
}, conjunction ? /* @__PURE__ */ react.default.createElement(require_ConditionConnector.default, {
className: `${require_util.blockClass}__gap`,
operator: conjunction,
onChange: (op) => onConnectorOperatorChange?.(op)
}) : "", isStatement && /* @__PURE__ */ react.default.createElement(require_ConditionBuilderItem.ConditionBuilderItem, {
label: group.statement,
title: conditionText,
"data-name": "connectorField",
popOverClassName: `${require_util.blockClass}__gap ${require_util.blockClass}__connector`,
className: `${require_util.blockClass}__statement-button`,
tabIndex: 0
}, /* @__PURE__ */ react.default.createElement(require_ItemOption.ItemOption, {
conditionState: {
value: group.statement,
label: conditionText
},
onChange: onStatementChangeHandler,
config: {
options: statementConfig,
isStatement: true
}
})), /* @__PURE__ */ react.default.createElement("div", { className: `${require_util.blockClass}__condition-inner-block` }, /* @__PURE__ */ react.default.createElement(require_ConditionBuilderItem.ConditionBuilderItem, {
label: label ?? condition?.property,
title: propertyText,
renderIcon: icon ?? void 0,
className: `${require_util.blockClass}__property-field`,
"data-name": "propertyField",
condition,
type,
description,
onChange: onPropertyChangeHandler,
renderChildren: renderItemOption
}), require_util.checkIsValid(property) && /* @__PURE__ */ react.default.createElement(require_ConditionBuilderItem.ConditionBuilderItem, {
label: operator,
title: operatorText,
"data-name": "operatorField",
condition,
type,
config,
onChange: onOperatorChangeHandler
}, /* @__PURE__ */ react.default.createElement(require_ItemOption.ItemOption, {
config: { options: getOperators() },
conditionState: {
value: operator,
label: operatorText
},
onChange: onOperatorChangeHandler
})), require_util.checkIsValid(property) && require_util.checkIsValid(operator) && /* @__PURE__ */ react.default.createElement(require_ConditionBuilderItem.ConditionBuilderItem, {
label: value,
type,
title: label,
showToolTip: true,
"data-name": "valueField",
condition,
config,
onChange: onValueChangeHandler,
renderChildren
})), !readOnly && /* @__PURE__ */ react.default.createElement("span", {
role: "gridcell",
"aria-label": removeConditionText
}, /* @__PURE__ */ react.default.createElement(require_ConditionBuilderButton.ConditionBuilderButton, {
hideLabel: true,
label: removeConditionText,
onClick: onRemove,
onMouseEnter: handleShowDeletionPreview,
onMouseLeave: handleHideDeletionPreview,
onFocus: handleShowDeletionPreview,
onBlur: handleHideDeletionPreview,
renderIcon: _carbon_react_icons.Close,
className: `${require_util.blockClass}__close-condition`,
"data-name": "closeCondition",
wrapperClassName: `${require_util.blockClass}__close-condition-wrapper`
})), !readOnly && manageActionButtons(conditionIndex, group.conditions) ? /* @__PURE__ */ react.default.createElement(require_ConditionBuilderAdd.default, {
onClick: () => {
addConditionHandler?.(conditionIndex);
},
addConditionSubGroupHandler: () => {
addConditionSubGroupHandler?.(conditionIndex);
},
showConditionSubGroupPreviewHandler,
hideConditionSubGroupPreviewHandler,
enableSubGroup: variant == require_util.HIERARCHICAL_VARIANT,
showConditionPreviewHandler,
hideConditionPreviewHandler,
className: `${require_util.blockClass}__gap ${require_util.blockClass}__gap-left`,
group
}) : null);
};
ConditionBlock.propTypes = {
/**
* callback to add a new condition
*/
addConditionHandler: prop_types.default.func,
/**
* callback to add a new condition subgroup
*/
addConditionSubGroupHandler: prop_types.default.func,
/**
* object hold aria attributes
*/
aria: prop_types.default.object,
condition: prop_types.default.object,
conditionIndex: prop_types.default.number,
/**
* string that decides to show the condition connector
*/
conjunction: prop_types.default.string,
/**
* object that hold the current group object where is condition is part of
*/
group: prop_types.default.object,
/**
* handler for hiding sub group preview
*/
hideConditionPreviewHandler: prop_types.default.func,
/**
* handler for hiding sub group preview
*/
hideConditionSubGroupPreviewHandler: prop_types.default.func,
isLastCondition: prop_types.default.func,
/**
* boolean that decides to show the statement(if/ excl.if)
*/
isStatement: prop_types.default.bool,
/**
* callback to update the current condition of the state tree
*/
onChange: prop_types.default.func,
/**
* callback to handle the connector(and/or) change
*/
onConnectorOperatorChange: prop_types.default.func,
/**
* callback for Remove a condition
*/
onRemove: prop_types.default.func,
/**
* callback to handle the statement(if/ excl.if) change
*/
onStatementChange: prop_types.default.func,
/**
* handler for showing add condition preview
*/
showConditionPreviewHandler: prop_types.default.func,
/**
* handler for showing sub group preview
*/
showConditionSubGroupPreviewHandler: prop_types.default.func,
/**
* object that hold the current condition
*/
state: prop_types.default.object
};
//#endregion
exports.default = ConditionBlock;