@hitachivantara/uikit-react-core
Version:
UI Kit Core React components.
78 lines (77 loc) • 2.59 kB
JavaScript
import { HvIcon } from "../../icons.js";
import { HvIconButton } from "../../IconButton/IconButton.js";
import { useQueryBuilderContext } from "../Context.js";
import { Value } from "../Value/Value.js";
import { Attribute } from "./Attribute.js";
import { Operator } from "./Operator.js";
import { useClasses } from "./Rule.styles.js";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { useTheme as useTheme$1 } from "@mui/material/styles";
import useMediaQuery from "@mui/material/useMediaQuery";
//#region src/QueryBuilder/Rule/Rule.tsx
var 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 isMdDown = useMediaQuery(useTheme$1().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("div", {
className: cx(classes.root, { [classes.isMdDown]: isMdDown }),
children: [
/* @__PURE__ */ jsx(Attribute, {
attribute,
id,
disabled,
isInvalid
}),
attribute != null && availableOperators > 0 && /* @__PURE__ */ jsx(Operator, {
id,
combinator,
attribute,
operator
}),
attribute != null && (operator != null || availableOperators === 0) && /* @__PURE__ */ jsx("div", {
style: { gridArea: "value" },
children: /* @__PURE__ */ jsx(Value, {
attribute,
id,
operator,
value
})
}),
/* @__PURE__ */ jsx(HvIconButton, {
placement: "bottom",
className: classes.actionsContainer,
title: labels.rule.delete.tooltip,
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" })
})
]
});
};
//#endregion
export { Rule };