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

Core React components for the NEXT Design System.

import { jsxs, jsx } from "react/jsx-runtime";
import { useMemo } from "react";
import { useTheme } from "@mui/material/styles";
import useMediaQuery from "@mui/material/useMediaQuery";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { HvIcon } from "../../icons.js";
import { useQueryBuilderContext } from "../Context.js";
import { useClasses } from "./Rule.styles.js";
import { staticClasses } from "./Rule.styles.js";
import { HvGrid } from "../../Grid/Grid.js";
import { Attribute } from "./Attribute/Attribute.js";
import { Operator } from "./Operator/Operator.js";
import { Value } from "./Value/Value.js";
import { HvIconButton } from "../../IconButton/IconButton.js";
const Rule = (props) => {
  const {
    id,
    combinator,
    attribute,
    operator,
    value,
    disabled,
    isInvalid,
    classes: classesProp
  } = useDefaultProps("HvQueryBuilderRule", props);
  const { classes, cx } = useClasses(classesProp);
  const {
    askAction,
    dispatchAction,
    attributes,
    operators,
    labels,
    readOnly,
    disableConfirmation
  } = useQueryBuilderContext();
  const theme = useTheme();
  const isMdDown = useMediaQuery(theme.breakpoints.down("md"));
  const availableOperators = useMemo(() => {
    const attributeSpec = attribute != null && attributes ? attributes[attribute] : null;
    if (attributeSpec != null) {
      const typeOperators = operators[attributeSpec.type];
      if (typeOperators != null) {
        return typeOperators.reduce(
          (count, item) => count + (item.combinators.includes(combinator) ? 1 : 0),
          0
        );
      }
    }
    return -1;
  }, [attribute, attributes, combinator, operators]);
  return /* @__PURE__ */ jsxs(
    HvGrid,
    {
      container: true,
      className: cx(classes.root, { [classes.isMdDown]: isMdDown }),
      spacing: 0,
      children: [
        /* @__PURE__ */ jsx(HvGrid, { item: true, xs: 12, md: 3, children: /* @__PURE__ */ jsx(
          Attribute,
          {
            attribute,
            id,
            disabled,
            isInvalid
          }
        ) }),
        attribute != null && availableOperators > 0 && /* @__PURE__ */ jsx(HvGrid, { item: true, xs: 12, md: 3, children: /* @__PURE__ */ jsx(
          Operator,
          {
            id,
            combinator,
            attribute,
            operator
          }
        ) }),
        attribute != null && (operator != null || availableOperators === 0) && /* @__PURE__ */ jsx(HvGrid, { item: true, xs: 12, md: true, children: /* @__PURE__ */ jsx(
          Value,
          {
            attribute,
            id,
            operator,
            value
          }
        ) }),
        /* @__PURE__ */ jsx(HvGrid, { item: true, className: classes.actionsContainer, children: /* @__PURE__ */ jsx(
          HvIconButton,
          {
            placement: "bottom",
            title: labels.rule.delete.tooltip || labels.rule.delete.ariaLabel,
            onClick: () => disableConfirmation ? dispatchAction({ type: "remove-node", id }) : askAction({
              actions: [{ type: "remove-node", id }],
              dialog: labels.rule.delete
            }),
            disabled: readOnly,
            children: /* @__PURE__ */ jsx(HvIcon, { name: "Delete" })
          }
        ) })
      ]
    }
  );
};
export {
  Rule,
  staticClasses as queryBuilderRuleClasses
};