@carbon/ibm-products
Version:
Carbon for IBM Products
206 lines (201 loc) • 7.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.
*/
import { __toESM } from "../../_virtual/_rolldown/runtime.js";
import { require_classnames } from "../../node_modules/classnames/index.js";
import { getDevtoolsProps } from "../../global/js/utils/devtools.js";
import { NON_HIERARCHICAL_VARIANT, blockClass } from "./utils/util.js";
import { ConditionBuilderProvider } from "./ConditionBuilderContext/ConditionBuilderProvider.js";
import { handleKeyDown } from "./utils/handleKeyboardEvents.js";
import ConditionBuilderContent from "./ConditionBuilderContent/ConditionBuilderContent.js";
import React, { useRef } from "react";
import PropTypes from "prop-types";
import { VStack } from "@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__ */ __toESM(require_classnames());
const componentName = "ConditionBuilder";
/**
* TODO: A description of the component.
*/
const ConditionBuilder = React.forwardRef(({ className, inputConfig, startConditionLabel = "Add Condition", popOverSearchThreshold, getOptions, initialState, getConditionState, getActionsState, variant = NON_HIERARCHICAL_VARIANT, actions, translateWithId, statementConfigCustom, onAddItem, onRemoveItem, readOnly, ...rest }, ref) => {
const localRef = useRef(null);
const conditionBuilderRef = ref || localRef;
const handleKeyDownHandler = (evt) => {
handleKeyDown(evt, conditionBuilderRef, variant);
};
return /* @__PURE__ */ React.createElement(ConditionBuilderProvider, {
inputConfig,
popOverSearchThreshold,
getOptions,
variant,
translateWithId,
conditionBuilderRef,
statementConfigCustom,
onAddItem,
onRemoveItem,
readOnly: !!readOnly
}, /* @__PURE__ */ React.createElement("div", {
...rest,
className: (0, import_classnames.default)(blockClass, className, { [`${blockClass}__readonly`]: readOnly }, {}),
ref: conditionBuilderRef,
...getDevtoolsProps(componentName)
}, /* @__PURE__ */ React.createElement(VStack, {
className: `${blockClass}__${variant}`,
onKeyDown: handleKeyDownHandler
}, /* @__PURE__ */ React.createElement(ConditionBuilderContent, {
startConditionLabel,
getConditionState,
getActionsState,
initialState,
actions
}))));
});
ConditionBuilder.displayName = componentName;
ConditionBuilder.propTypes = {
/**
* optional array of actions
*/
/**@ts-ignore */
actions: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
label: PropTypes.string.isRequired
})),
/**
* Provide an optional class to be applied to the containing node.
*/
className: PropTypes.string,
/**
* This is a callback that gives back the updated action state
*/
getActionsState: PropTypes.func,
/**
* This is a callback that gives back updated condition state
*/
getConditionState: PropTypes.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: PropTypes.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: PropTypes.shape({
state: PropTypes.shape({
groups: PropTypes.arrayOf(PropTypes.shape({
groupOperator: PropTypes.string,
statement: PropTypes.string,
conditions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape({
property: PropTypes.string,
operator: PropTypes.string,
value: PropTypes.oneOfType([
PropTypes.string,
PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.string,
label: PropTypes.string
})),
PropTypes.shape({
id: PropTypes.string,
label: PropTypes.string
})
])
}), PropTypes.object]))
})),
operator: PropTypes.string
}),
enabledDefault: PropTypes.bool
}),
/**
* This is a mandatory prop that defines the input to the condition builder.
*/
/**@ts-ignore */
inputConfig: PropTypes.shape({ properties: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
type: PropTypes.oneOf([
"text",
"textarea",
"number",
"date",
"option",
"time",
"custom"
]).isRequired,
description: PropTypes.string,
getIsDisabled: PropTypes.func,
getIsHidden: PropTypes.func,
config: PropTypes.shape({
options: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
})),
component: PropTypes.func,
operators: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.string.isRequired,
label: PropTypes.string.isRequired
})),
valueFormatter: PropTypes.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: PropTypes.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: PropTypes.func,
/**
* This will enable search in option popovers when option list length is more than this threshold
*/
popOverSearchThreshold: PropTypes.number.isRequired,
/**
* Whether the conditionBuilder should be readOnly
*/
readOnly: PropTypes.bool,
/**
* Provide a label to the button that starts condition builder
*/
startConditionLabel: PropTypes.string,
/**
* Optional prop for passing custom configuration for statement option from default op
*/
/**@ts-ignore */
statementConfigCustom: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.string.isRequired,
connector: PropTypes.oneOf(["and", "or"]).isRequired,
label: PropTypes.string.isRequired,
secondaryLabel: PropTypes.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: PropTypes.func,
/**
* Provide the condition builder variant: Non-Hierarchical/ Hierarchical
*/
variant: PropTypes.oneOf(["Non-Hierarchical", "Hierarchical"])
};
//#endregion
export { ConditionBuilder };