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

Core React components for the NEXT Design System.

import { jsx } from "react/jsx-runtime";
import { useMemo, memo } from "react";
import { useQueryBuilderContext } from "../../Context.js";
import { isBigList } from "../../utils/index.js";
import { HvDropdown } from "../../../Dropdown/Dropdown.js";
const Operator = ({
  id,
  combinator,
  attribute,
  operator
}) => {
  const { dispatchAction, attributes, operators, labels, readOnly } = useQueryBuilderContext();
  const value = operator ?? null;
  const values = useMemo(() => {
    const attributeSpec = attribute && attributes ? attributes[attribute] : null;
    const options = attributeSpec ? operators[attributeSpec.type].filter(
      (o) => o.combinators.includes(combinator)
    ) ?? [] : [];
    return options.map((key) => ({
      id: key.operator,
      label: key.label,
      selected: key.operator === value
    }));
  }, [attribute, attributes, operators, combinator, value]);
  return /* @__PURE__ */ jsx(
    HvDropdown,
    {
      required: true,
      status: "valid",
      singleSelectionToggle: false,
      label: labels.rule.operator.label,
      placeholder: labels.rule.operator.placeholder,
      values,
      disabled: values.length === 0,
      readOnly,
      onChange: (selected) => {
        if (selected?.id) {
          dispatchAction({
            type: "set-operator",
            id,
            operator: selected.id.toString(),
            value: value === "range" || selected.id === "range" ? null : void 0
          });
        } else {
          dispatchAction({
            type: "set-operator",
            id,
            operator: null,
            value: null
          });
        }
      },
      showSearch: isBigList(values),
      ...isBigList(values) && { virtualized: true, height: 300 }
    }
  );
};
memo(Operator);
export {
  Operator
};