@carbon/ibm-products
Version:
Carbon for IBM Products
208 lines (203 loc) • 8.22 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_devtools = require("../../global/js/utils/devtools.js");
const require_util = require("./utils/util.js");
const require_ConditionBuilderProvider = require("./ConditionBuilderContext/ConditionBuilderProvider.js");
const require_handleKeyboardEvents = require("./utils/handleKeyboardEvents.js");
const require_ConditionBuilderContent = require("./ConditionBuilderContent/ConditionBuilderContent.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");
//#region src/components/ConditionBuilder/ConditionBuilder.tsx
/**
* Copyright IBM Corp. 2024, 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 componentName = "ConditionBuilder";
/**
* TODO: A description of the component.
*/
const ConditionBuilder = react.default.forwardRef(({ className, inputConfig, startConditionLabel = "Add Condition", popOverSearchThreshold, getOptions, initialState, getConditionState, getActionsState, variant = require_util.NON_HIERARCHICAL_VARIANT, actions, translateWithId, statementConfigCustom, onAddItem, onRemoveItem, readOnly, ...rest }, ref) => {
const localRef = (0, react.useRef)(null);
const conditionBuilderRef = ref || localRef;
const handleKeyDownHandler = (evt) => {
require_handleKeyboardEvents.handleKeyDown(evt, conditionBuilderRef, variant);
};
return /* @__PURE__ */ react.default.createElement(require_ConditionBuilderProvider.ConditionBuilderProvider, {
inputConfig,
popOverSearchThreshold,
getOptions,
variant,
translateWithId,
conditionBuilderRef,
statementConfigCustom,
onAddItem,
onRemoveItem,
readOnly: !!readOnly
}, /* @__PURE__ */ react.default.createElement("div", {
...rest,
className: (0, import_classnames.default)(require_util.blockClass, className, { [`${require_util.blockClass}__readonly`]: readOnly }, {}),
ref: conditionBuilderRef,
...require_devtools.getDevtoolsProps(componentName)
}, /* @__PURE__ */ react.default.createElement(_carbon_react.VStack, {
className: `${require_util.blockClass}__${variant}`,
onKeyDown: handleKeyDownHandler
}, /* @__PURE__ */ react.default.createElement(require_ConditionBuilderContent.default, {
startConditionLabel,
getConditionState,
getActionsState,
initialState,
actions
}))));
});
ConditionBuilder.displayName = componentName;
ConditionBuilder.propTypes = {
/**
* optional array of actions
*/
/**@ts-ignore */
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,
/**
* This is a callback that gives back the updated action state
*/
getActionsState: prop_types.default.func,
/**
* This is a callback that gives back updated condition state
*/
getConditionState: prop_types.default.func.isRequired,
/**
* Callback triggered to dynamically fetch options for a property of type 'option'.
* This is invoked when no static options array is provided in the input config.
* The function should return a Promise that resolves with an array of options in the required format.
*/
getOptions: prop_types.default.func,
/**
* Optional prop if you want to pass a saved condition state, pass as "initialState.state".
* "initialState.enabledDefault" will populate the builder with the provided initial state before clicking Add Condition button.
*
* This state should respect the structure of condition state that is available in getConditionState callback
*/
/**@ts-ignore */
initialState: prop_types.default.shape({
state: prop_types.default.shape({
groups: prop_types.default.arrayOf(prop_types.default.shape({
groupOperator: prop_types.default.string,
statement: prop_types.default.string,
conditions: prop_types.default.arrayOf(prop_types.default.oneOfType([prop_types.default.shape({
property: prop_types.default.string,
operator: prop_types.default.string,
value: prop_types.default.oneOfType([
prop_types.default.string,
prop_types.default.arrayOf(prop_types.default.shape({
id: prop_types.default.string,
label: prop_types.default.string
})),
prop_types.default.shape({
id: prop_types.default.string,
label: prop_types.default.string
})
])
}), prop_types.default.object]))
})),
operator: prop_types.default.string
}),
enabledDefault: prop_types.default.bool
}),
/**
* This is a mandatory prop that defines the input to the condition builder.
*/
/**@ts-ignore */
inputConfig: prop_types.default.shape({ properties: prop_types.default.arrayOf(prop_types.default.shape({
id: prop_types.default.string.isRequired,
label: prop_types.default.string.isRequired,
icon: prop_types.default.oneOfType([prop_types.default.func, prop_types.default.object]),
type: prop_types.default.oneOf([
"text",
"textarea",
"number",
"date",
"option",
"time",
"custom"
]).isRequired,
description: prop_types.default.string,
getIsDisabled: prop_types.default.func,
getIsHidden: prop_types.default.func,
config: prop_types.default.shape({
options: prop_types.default.arrayOf(prop_types.default.shape({
id: prop_types.default.string.isRequired,
label: prop_types.default.string.isRequired,
icon: prop_types.default.oneOfType([prop_types.default.func, prop_types.default.object])
})),
component: prop_types.default.func,
operators: prop_types.default.arrayOf(prop_types.default.shape({
id: prop_types.default.string.isRequired,
label: prop_types.default.string.isRequired
})),
valueFormatter: prop_types.default.func
})
})) }).isRequired,
/**
* this is an optional callback triggered before adding any condition , subgroup or group.
* User can optionally perform any validation and can stop add action if they return back {preventAdd:true}
*/
onAddItem: prop_types.default.func,
/**
* this is an optional callback triggered before removing any condition , subgroup, group or action.
* User can optionally perform any validation and can stop remove action if they return back {preventRemove:true}
*/
onRemoveItem: prop_types.default.func,
/**
* This will enable search in option popovers when option list length is more than this threshold
*/
popOverSearchThreshold: prop_types.default.number.isRequired,
/**
* Whether the conditionBuilder should be readOnly
*/
readOnly: prop_types.default.bool,
/**
* Provide a label to the button that starts condition builder
*/
startConditionLabel: prop_types.default.string,
/**
* Optional prop for passing custom configuration for statement option from default op
*/
/**@ts-ignore */
statementConfigCustom: prop_types.default.arrayOf(prop_types.default.shape({
id: prop_types.default.string.isRequired,
connector: prop_types.default.oneOf(["and", "or"]).isRequired,
label: prop_types.default.string.isRequired,
secondaryLabel: prop_types.default.string
})),
/**
* Optional prop, if you need to pass translations to the texts on the component instead of the defined defaults.
* This callback function will receive the message id and you need to return the corresponding text for that id.
*/
/**@ts-ignore */
translateWithId: prop_types.default.func,
/**
* Provide the condition builder variant: Non-Hierarchical/ Hierarchical
*/
variant: prop_types.default.oneOf(["Non-Hierarchical", "Hierarchical"])
};
//#endregion
exports.ConditionBuilder = ConditionBuilder;