@hitachivantara/uikit-react-core
Version:
Core React components for the NEXT Design System.
107 lines (106 loc) • 3.85 kB
JavaScript
"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
const styles = require("@mui/material/styles");
const useMediaQuery = require("@mui/material/useMediaQuery");
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
const icons = require("../../icons.cjs");
const Context = require("../Context.cjs");
const Rule_styles = require("./Rule.styles.cjs");
const Grid = require("../../Grid/Grid.cjs");
const Attribute = require("./Attribute/Attribute.cjs");
const Operator = require("./Operator/Operator.cjs");
const Value = require("./Value/Value.cjs");
const IconButton = require("../../IconButton/IconButton.cjs");
const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
const useMediaQuery__default = /* @__PURE__ */ _interopDefault(useMediaQuery);
const Rule = (props) => {
const {
id,
combinator,
attribute,
operator,
value,
disabled,
isInvalid,
classes: classesProp
} = uikitReactUtils.useDefaultProps("HvQueryBuilderRule", props);
const { classes, cx } = Rule_styles.useClasses(classesProp);
const {
askAction,
dispatchAction,
attributes,
operators,
labels,
readOnly,
disableConfirmation
} = Context.useQueryBuilderContext();
const theme = styles.useTheme();
const isMdDown = useMediaQuery__default.default(theme.breakpoints.down("md"));
const availableOperators = React.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__ */ jsxRuntime.jsxs(
Grid.HvGrid,
{
container: true,
className: cx(classes.root, { [classes.isMdDown]: isMdDown }),
spacing: 0,
children: [
/* @__PURE__ */ jsxRuntime.jsx(Grid.HvGrid, { item: true, xs: 12, md: 3, children: /* @__PURE__ */ jsxRuntime.jsx(
Attribute.Attribute,
{
attribute,
id,
disabled,
isInvalid
}
) }),
attribute != null && availableOperators > 0 && /* @__PURE__ */ jsxRuntime.jsx(Grid.HvGrid, { item: true, xs: 12, md: 3, children: /* @__PURE__ */ jsxRuntime.jsx(
Operator.Operator,
{
id,
combinator,
attribute,
operator
}
) }),
attribute != null && (operator != null || availableOperators === 0) && /* @__PURE__ */ jsxRuntime.jsx(Grid.HvGrid, { item: true, xs: 12, md: true, children: /* @__PURE__ */ jsxRuntime.jsx(
Value.Value,
{
attribute,
id,
operator,
value
}
) }),
/* @__PURE__ */ jsxRuntime.jsx(Grid.HvGrid, { item: true, className: classes.actionsContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
IconButton.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__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Delete" })
}
) })
]
}
);
};
exports.queryBuilderRuleClasses = Rule_styles.staticClasses;
exports.Rule = Rule;