Skip to content

Add docs for option group support #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jan 9, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions .prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"tabWidth": 2,
"semi": true,
"printWidth": 100,
"singleQuote": true,
"trailingComma": "es5",
"bracketSpacing": true,
"bracketSameLine": true,
"arrowParens": "avoid"
}
88 changes: 44 additions & 44 deletions docs/api/export.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ title: Export
description: Convert query builder objects to SQL, etc.
---

import TypeScriptAdmonition from "./_ts_admonition.md";
import TypeScriptAdmonition from './_ts_admonition.md';

<TypeScriptAdmonition />

Expand Down Expand Up @@ -33,21 +33,21 @@ For the next few sections, assume the `query` variable has been defined as:

```ts
const query: RuleGroupType = {
id: "root",
combinator: "and",
id: 'root',
combinator: 'and',
not: false,
rules: [
{
id: "rule1",
field: "firstName",
value: "Steve",
operator: "=",
id: 'rule1',
field: 'firstName',
value: 'Steve',
operator: '=',
},
{
id: "rule2",
field: "lastName",
value: "Vai",
operator: "=",
id: 'rule2',
field: 'lastName',
value: 'Vai',
operator: '=',
},
],
};
Expand All @@ -62,7 +62,7 @@ To export the internal query representation like what `react-querybuilder` passe
```ts
formatQuery(query);
// or
formatQuery(query, "json");
formatQuery(query, 'json');
```

The output will be a multi-line string representation of the query using 2 spaces for indentation.
Expand Down Expand Up @@ -94,7 +94,7 @@ The output will be a multi-line string representation of the query using 2 space
To export the internal query representation without formatting (single-line, no indentation) and without the `id` attribute on each object, use the "json_without_ids" format. This is useful if you need to serialize the query for storage.

```ts
formatQuery(query, "json_without_ids");
formatQuery(query, 'json_without_ids');
```

Output:
Expand All @@ -108,7 +108,7 @@ Output:
`formatQuery` can export SQL compatible with most RDBMS engines. To export a SQL `WHERE` clause, use the "sql" format.

```ts
formatQuery(query, "sql");
formatQuery(query, 'sql');
```

Output:
Expand All @@ -122,7 +122,7 @@ Output:
To export a SQL `WHERE` clause with bind variables instead of explicit values, use the "parameterized" format. The output is an object with `sql` and `params` attributes.

```ts
formatQuery(query, "parameterized");
formatQuery(query, 'parameterized');
```

Output:
Expand All @@ -139,7 +139,7 @@ Output:
If anonymous parameters (aka bind variables) are not acceptable, `formatQuery` can output named parameters based on the field names. Use the "parameterized_named" format. The output object is similar to the "parameterized" format, but the `params` attribute is an object instead of an array.

```ts
formatQuery(query, "parameterized_named");
formatQuery(query, 'parameterized_named');
```

Output:
Expand All @@ -159,7 +159,7 @@ Output:
For MongoDB-compatible output, use the "mongodb" format.

```ts
formatQuery(query, "mongodb");
formatQuery(query, 'mongodb');
```

Output:
Expand All @@ -178,31 +178,31 @@ If you need to control the way the value portion of the output is processed, you

```ts
const query: RuleGroupType = {
combinator: "and",
combinator: 'and',
not: false,
rules: [
{
field: "instrument",
value: ["Guitar", "Vocals"],
operator: "in",
field: 'instrument',
value: ['Guitar', 'Vocals'],
operator: 'in',
},
{
field: "lastName",
value: "Vai",
operator: "=",
field: 'lastName',
value: 'Vai',
operator: '=',
},
],
};

const valueProcessor = (field, operator, value) => {
if (operator === "in") {
if (operator === 'in') {
// Assuming `value` is an array, such as from a multi-select
return `(${value.map((v) => `"${v.trim()}"`).join(",")})`;
return `(${value.map(v => `"${v.trim()}"`).join(',')})`;
}
return defaultValueProcessor(field, operator, value);
};

formatQuery(query, { format: "sql", valueProcessor });
formatQuery(query, { format: 'sql', valueProcessor });
// Output: "(instrument in ('Guitar','Vocals') and lastName = 'Vai')"
```

Expand All @@ -211,7 +211,7 @@ formatQuery(query, { format: "sql", valueProcessor });
Some database engines wrap field names in backticks. This can be configured with the `quoteFieldNamesWith` option.

```ts
formatQuery(query, { format: "sql", quoteFieldNamesWith: "`" });
formatQuery(query, { format: 'sql', quoteFieldNamesWith: '`' });
// Output: "(`firstName` = 'Steve' and `lastName` = 'Vai')"
```

Expand All @@ -221,8 +221,8 @@ If the "parameterized_named" format is used, configure the parameter prefix used

```ts
const p = formatQuery(query, {
format: "parameterized_named",
paramPrefix: "$",
format: 'parameterized_named',
paramPrefix: '$',
});
// p.sql === "(firstName = $firstName_1 and lastName = $lastName_1)"
```
Expand All @@ -241,43 +241,43 @@ Example:

```ts
const query: RuleGroupType = {
id: "root",
id: 'root',
rules: [
{
id: "r1",
field: "firstName",
value: "",
operator: "=",
id: 'r1',
field: 'firstName',
value: '',
operator: '=',
},
{
id: "r2",
field: "lastName",
value: "Vai",
operator: "=",
id: 'r2',
field: 'lastName',
value: 'Vai',
operator: '=',
},
],
combinator: "and",
combinator: 'and',
not: false,
};

// Query is invalid based on the validator function
formatQuery(query, {
format: "sql",
format: 'sql',
validator: () => false,
});
// Output: "(1 = 1)" <-- see `fallbackExpression` option

// Rule "r1" is invalid based on the validation map
formatQuery(query, {
format: "sql",
format: 'sql',
validator: () => ({ r1: false }),
});
// Output: "(lastName = 'Vai')" <-- skipped `firstName` rule with `id === 'r1'`

// Rule "r1" is invalid based on the field validator for `firstName`
formatQuery(query, {
format: "sql",
fields: [{ name: "firstName", validator: () => false }],
format: 'sql',
fields: [{ name: 'firstName', validator: () => false }],
});
// Output: "(lastName = 'Vai')" <-- skipped `firstName` rule because field validator returned `false`
```
Expand Down
24 changes: 12 additions & 12 deletions docs/api/import.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ title: Import
description: Convert SQL to query builder objects
---

import TypeScriptAdmonition from "./_ts_admonition.md";
import TypeScriptAdmonition from './_ts_admonition.md';

<TypeScriptAdmonition />

Expand All @@ -25,16 +25,16 @@ Running any of the following statements will produce the same result (see below)
parseSQL(`SELECT * FROM t WHERE firstName = 'Steve' AND lastName = 'Vai'`);

parseSQL(`SELECT * FROM t WHERE firstName = ? AND lastName = ?`, {
params: ["Steve", "Vai"],
params: ['Steve', 'Vai'],
});

parseSQL(`SELECT * FROM t WHERE firstName = :p1 AND lastName = :p2`, {
params: { p1: "Steve", p2: "Vai" },
params: { p1: 'Steve', p2: 'Vai' },
});

parseSQL(`SELECT * FROM t WHERE firstName = $p1 AND lastName = $p2`, {
params: { p1: "Steve", p2: "Vai" },
paramPrefix: "$",
params: { p1: 'Steve', p2: 'Vai' },
paramPrefix: '$',
});
```

Expand Down Expand Up @@ -100,15 +100,15 @@ Output (`RuleGroupTypeIC`):
{
rules: [
{
field: "firstName",
operator: "=",
value: "Steve",
field: 'firstName',
operator: '=',
value: 'Steve',
},
"and",
'and',
{
field: "lastName",
operator: "=",
value: "Vai",
field: 'lastName',
operator: '=',
value: 'Vai',
},
];
}
Expand Down
7 changes: 2 additions & 5 deletions docs/api/misc.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ hide_table_of_contents: true
description: Assorted utilities and other exports
---

import TypeScriptAdmonition from "./_ts_admonition.md";
import TypeScriptAdmonition from './_ts_admonition.md';

<TypeScriptAdmonition />

Expand All @@ -25,10 +25,7 @@ You can see an example of the default validator in action in the [demo](https://
### `findPath`

```ts
function findPath(
path: number[],
query: RuleGroupType
): RuleType | RuleGroupType;
function findPath(path: number[], query: RuleGroupType): RuleType | RuleGroupType;
```

`findPath` is a utility function for finding the rule or group within the query hierarchy that has a given `path`. Useful in custom [`onAddRule`](./querybuilder#onaddrule) and [`onAddGroup`](./querybuilder#onaddgroup) functions.
Expand Down
Loading