Progamatically show/hide operator, rule and group button in react-querybuilder - reactjs

Question

I am looking for a way to only add groups(hide the add rule button) on base level with only OR operator selected(AND would be disabled here). Whenever the said group is added the operator allowed will only be OR (hiding AND operator). Now, nested groups are allowed but only to one level i.e. hide the Add Groups button whenever a group is added on base level.
I am using React 16.8.0 with react-querybuilder: "^3.1.2"
For ex. as shown below i want to hide the marked buttons. Would it be possible?
import QueryBuilder, { formatQuery } from "react-querybuilder";
....
<QueryBuilder
fields={
data
}
controlClassnames={{
combinators: "form-control-sm",
addRule: "btn btn-primary btn-sm ml-2 mb-1",
addGroup: "btn btn-secondary btn-sm ml-2 mb-1",
ruleGroup: "ruleGroup",
removeGroup: "ml-2",
rule: "rule",
fields: "mr-2 form-control-sm",
operators: "mr-2 form-control-sm",
value: "mr-2 form-control-sm"
}}
onQueryChange={query => setQueryOutput(formatQuery(query, "sql"))}
/>
<div className="mt-5">
<h5>Query Output:</h5>
{queryOutput}
</div>
Thanks for the support
===UPDATE===
To ensure that the base group's operator is always OR combinator and all the subsequent sub-groups will be AND operator. I have tried(as below) using control elements but I am not able to set the props.
addGroupAction: props => {
let customRule = props.rules.map(x => {
x.combinator = "or";
return x;
});
let customProps = { ...props, rules: customRule };
return (
<button
className={props.className}
title={props.title}
onClick={e => {
setCombinatorOptions(["AND"]);
return customProps.handleOnClick(e);
}}
>
{props.label}
</button>
);
}
Replicated the same at https://stackblitz.com/edit/react-6g5ygt

Answer 1

I think you can do it with css easily:
.queryBuilder .ruleGroup .ruleGroup .ruleGroup-addGroup {
display : none
}
I have applied the same css on below link and it's working as you expected :
https://sapientglobalmarkets.github.io/react-querybuilder/

Answer 2

I see this has already been marked as answered using CSS, but I wanted to show a way to do it with custom components that may be a little more flexible. This version also meets the requirement of limiting the outermost group's combinator to "or", which I don't think the CSS version does.
See the code below, or this codesandbox for a working example.
import { useEffect, useState } from "react";
import QueryBuilder, {
ActionElement,
ActionWithRulesProps,
CombinatorSelectorProps,
formatQuery,
RuleGroupType,
ValueSelector
} from "react-querybuilder";
import "react-querybuilder/dist/query-builder.css";
const fields = [
{ name: "first_name", label: "First Name" },
{ name: "email", label: "Email" },
{ name: "last_name", label: "Last Name" }
];
const defaultQuery: RuleGroupType = {
id: "root",
combinator: "and",
rules: [
{
id: "ruleGroup",
combinator: "and",
rules: []
}
]
};
const addRuleAction = (props: ActionWithRulesProps) => {
if (props.level === 0) {
return null;
}
return <ActionElement {...props} />;
};
const addGroupAction = (props: ActionWithRulesProps) => {
if (props.level > 0) {
return null;
}
return <ActionElement {...props} />;
};
const CombinatorSelector = (props: CombinatorSelectorProps) => {
const { level, value, handleOnChange, options } = props;
useEffect(() => {
if (level === 0 && value !== "or") {
handleOnChange("or");
}
}, [level, value, handleOnChange]);
return (
<ValueSelector
{...{
...props,
options: level === 0 ? options.filter((c) => c.name === "or") : options,
value: level === 0 ? "or" : value
}}
/>
);
};
export default function App() {
const [query, setQuery] = useState<RuleGroupType>(defaultQuery);
return (
<>
<QueryBuilder
fields={fields}
onQueryChange={setQuery}
query={query}
controlElements={{
addRuleAction,
addGroupAction,
combinatorSelector: CombinatorSelector
}}
/>
<h3>Output:</h3>
<code>{formatQuery(query, "sql")}</code>
</>
);
}
And the result: