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

Core React components for the NEXT Design System.

import { jsxs, Fragment, jsx } from "react/jsx-runtime";
import { useCallback } from "react";
import { HvIcon } from "../../icons.js";
import { useQueryBuilderContext } from "../Context.js";
import { useClasses } from "../QueryBuilder.styles.js";
import { HvButton } from "../../Button/Button.js";
import { Rule } from "../Rule/Rule.js";
import { HvEmptyState } from "../../EmptyState/EmptyState.js";
import { HvMultiButton } from "../../MultiButton/MultiButton.js";
import { HvIconButton } from "../../IconButton/IconButton.js";
import { HvTypography } from "../../Typography/Typography.js";
const 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, { 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 || level === 0 && labels.query?.delete?.ariaLabel || labels.group.delete.ariaLabel,
            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, { 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, { 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
          }
        )
      ]
    }
  );
};
export {
  RuleGroup
};