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

UI Kit Core React components.

import { HvDropdown } from "../../Dropdown/Dropdown.js";
import { useQueryBuilderContext } from "../Context.js";
import { isBigList } from "../utils/index.js";
import { useMemo } from "react";
import { jsx } from "react/jsx-runtime";
//#region src/QueryBuilder/Rule/Operator.tsx
var 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;
		return (attributeSpec ? operators[attributeSpec.type].filter((o) => o.combinators.includes(combinator)) ?? [] : []).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,
		style: { gridArea: "operator" },
		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
		}
	});
};
//#endregion
export { Operator };