@hitachivantara/uikit-react-core
Version:
Core React components for the NEXT Design System.
67 lines (66 loc) • 2.09 kB
JavaScript
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 Attribute = ({
id,
attribute,
disabled,
isInvalid
}) => {
const { dispatchAction, attributes, operators, labels, readOnly } = useQueryBuilderContext();
const values = useMemo(() => {
if (!attributes) return [];
return Object.keys(attributes).map((key) => ({
id: key,
label: attributes[key].label,
selected: key === attribute
}));
}, [attributes, attribute]);
const currentType = attribute != null && attributes ? attributes[attribute]?.type : null;
return /* @__PURE__ */ jsx(
HvDropdown,
{
singleSelectionToggle: false,
label: labels.rule.attribute.label,
placeholder: labels.rule.attribute.placeholder,
values,
disabled,
readOnly,
status: isInvalid ? "invalid" : "valid",
statusMessage: labels.rule.attribute.exists,
onChange: (selected) => {
if (selected) {
const attributeId = selected.id;
const type = attributes && attributeId && attributes[attributeId]?.type;
const typeOperators = type ? operators[type] : void 0;
let operator;
if (currentType === type) {
operator = void 0;
} else if (typeOperators?.length === 1) {
operator = typeOperators[0].operator;
} else {
operator = null;
}
const value = type === "boolean" ? true : void 0;
dispatchAction({
type: "set-attribute",
id,
attribute: attributeId?.toString(),
operator,
value
});
} else {
dispatchAction({ type: "set-attribute", id, attribute: null });
}
},
showSearch: isBigList(values),
...isBigList(values) && { virtualized: true, height: 300 }
}
);
};
memo(Attribute);
export {
Attribute
};