@hitachivantara/uikit-react-core/dist/QueryBuilder/RuleGroup.js

UI Kit Core React components.

import { HvTypography } from "../Typography/Typography.js";
import { HvIcon } from "../icons.js";
import { HvButton } from "../Button/Button.js";
import { HvIconButton } from "../IconButton/IconButton.js";
import { HvMultiButton } from "../MultiButton/MultiButton.js";
import { HvEmptyState } from "../EmptyState/EmptyState.js";
import { useQueryBuilderContext } from "./Context.js";
import { useClasses } from "./QueryBuilder.styles.js";
import { Rule } from "./Rule/Rule.js";
import { useCallback } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
//#region src/QueryBuilder/RuleGroup.tsx
var RuleGroup = ({ level = 0, id, combinator = "and", rules = [], classes: classesProp }) => {
	const { classes, cx } = useClasses(classesProp);
	const { dispatchAction, askAction, maxDepth, combinators, labels, readOnly, disableConfirmation, allowRepeatedAttributes } = useQueryBuilderContext();
	const normalizedMaxDepth = maxDepth - 1;
	const actionButtons = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
		className: classes.buttonBackground,
		children: /* @__PURE__ */ jsx(HvButton, {
			variant: "secondarySubtle",
			onClick: () => {
				dispatchAction({
					type: "add-rule",
					id
				});
			},
			disabled: readOnly,
			startIcon: /* @__PURE__ */ jsx(HvIcon, {
				compact: true,
				name: "Add"
			}),
			children: level === 0 && labels.query?.addRule?.label != null ? labels.query?.addRule?.label : labels.group.addRule.label
		})
	}), level <= normalizedMaxDepth && /* @__PURE__ */ jsx("div", {
		className: classes.buttonBackground,
		children: /* @__PURE__ */ jsx(HvButton, {
			variant: "secondarySubtle",
			onClick: () => {
				dispatchAction({
					type: "add-group",
					id
				});
			},
			disabled: readOnly,
			startIcon: /* @__PURE__ */ jsx(HvIcon, {
				compact: true,
				name: "Add"
			}),
			children: level === 0 && labels.query?.addGroup?.label != null ? labels.query?.addGroup?.label : labels.group.addGroup.label
		})
	})] });
	const onClickCombinator = useCallback((item) => {
		dispatchAction({
			type: "set-combinator",
			id,
			combinator: item.operand
		});
	}, [dispatchAction, id]);
	return /* @__PURE__ */ jsxs("div", {
		className: cx(classes.root, {
			[classes.topGroup]: level === 0,
			[classes.subGroup]: level > 0
		}),
		children: [
			/* @__PURE__ */ jsx(HvMultiButton, {
				className: cx(classes.combinator, classes.topCombinator),
				disabled: readOnly,
				"aria-disabled": readOnly,
				children: combinators?.map((item) => /* @__PURE__ */ jsx(HvButton, {
					className: classes.combinatorButton,
					selected: item.operand === combinator,
					onClick: () => item.operand && onClickCombinator(item),
					disabled: readOnly,
					size: "xs",
					children: item.label
				}, item.operand))
			}),
			/* @__PURE__ */ jsx("div", {
				className: cx(classes.buttonBackground, classes.topRemoveButton),
				children: /* @__PURE__ */ jsx(HvIconButton, {
					className: classes.removeButton,
					onClick: () => disableConfirmation ? dispatchAction({
						type: "remove-node",
						id
					}) : askAction({
						actions: [{
							type: "remove-node",
							id
						}],
						dialog: level === 0 && labels.query?.delete != null ? labels.query.delete : labels.group.delete
					}),
					title: level === 0 && labels.query?.delete?.tooltip || labels.group.delete.tooltip,
					disabled: readOnly,
					children: /* @__PURE__ */ jsx(HvIcon, {
						name: "Delete",
						className: cx({ [classes.topRemoveButtonDisabled]: readOnly })
					})
				})
			}),
			rules?.length > 0 && /* @__PURE__ */ jsx("div", {
				className: cx(classes.rulesContainer, {
					[classes.subRulesContainer]: level > 0,
					[classes.topRulesContainer]: level === 0
				}),
				children: rules.map((rule, index) => {
					if ("combinator" in rule) return /* @__PURE__ */ jsx(RuleGroup, {
						level: level + 1,
						...rule,
						id: rule.id,
						classes
					}, rule.id);
					const isInvalid = allowRepeatedAttributes ? false : combinator === "and" && rules.some((r, i) => {
						if ("attribute" in r) {
							if (r.attribute === rule.attribute && r.id !== rule.id && i < index) return true;
						}
						return false;
					});
					return /* @__PURE__ */ jsx(Rule, {
						...rule,
						isInvalid,
						id: rule.id,
						combinator
					}, rule.id);
				})
			}),
			rules?.length === 0 && /* @__PURE__ */ jsx(HvEmptyState, {
				title: labels.empty?.title,
				message: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(HvTypography, {
					link: true,
					component: "button",
					onClick: () => {
						dispatchAction({
							type: "add-rule",
							id
						});
					},
					className: classes.createConditionButton,
					disabled: readOnly,
					"aria-disabled": readOnly,
					children: `${labels.empty?.createCondition}`
				}), level <= normalizedMaxDepth && /* @__PURE__ */ jsxs(Fragment$1, { children: [`${labels.empty?.spacer}`, /* @__PURE__ */ jsx(HvTypography, {
					link: true,
					component: "button",
					onClick: () => {
						dispatchAction({
							type: "add-group",
							id
						});
					},
					className: classes.createGroupButton,
					disabled: readOnly,
					"aria-disabled": readOnly,
					children: `${labels.empty?.createGroup}`
				})] })] }),
				icon: /* @__PURE__ */ jsx(HvIcon, { name: "Info" })
			}),
			/* @__PURE__ */ jsx("div", {
				className: cx(classes.actionButtonContainer, classes.topActionButtonContainer),
				children: actionButtons
			})
		]
	});
};
//#endregion
export { RuleGroup };