@react-querybuilder/antd 7.7.0 → 7.7.1-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +37 -18
  2. package/package.json +7 -7
package/README.md CHANGED
@@ -1,10 +1,10 @@
1
1
  ## @react-querybuilder/antd
2
2
 
3
- Official [react-querybuilder](https://npmjs.com/package/react-querybuilder) components for [Ant Design](https://ant.design/).
3
+ Official [react-querybuilder](https://npmjs.com/package/react-querybuilder) compatibility package for [Ant Design](https://ant.design/).
4
4
 
5
- To see them in action, check out the [`react-querybuilder` demo](https://react-querybuilder.js.org/demo/antd) or [load the example in CodeSandbox](https://githubbox.com/react-querybuilder/react-querybuilder/tree/main/examples/antd).
6
-
7
- **[Full documentation](https://react-querybuilder.js.org/)**
5
+ - [Demo](https://react-querybuilder.js.org/demo/antd)
6
+ - [Full documentation](https://react-querybuilder.js.org/)
7
+ - [CodeSandbox](https://react-querybuilder.js.org/sandbox?t=antd) / [StackBlitz](https://react-querybuilder.js.org/sandbox?p=stackblitz&t=antd) example projects
8
8
 
9
9
  ## Installation
10
10
 
@@ -15,36 +15,55 @@ npm i react-querybuilder @react-querybuilder/antd @ant-design/icons antd
15
15
 
16
16
  ## Usage
17
17
 
18
- To render Ant Design-compatible components in the query builder, wrap the `<QueryBuilder />` element in `<QueryBuilderAntD />`.
18
+ To configure the query builder to use Ant Design-compatible components, place `QueryBuilderAntD` above `QueryBuilder` in the component hierarchy.
19
19
 
20
20
  ```tsx
21
21
  import { QueryBuilderAntD } from '@react-querybuilder/antd';
22
- import { QueryBuilder, RuleGroupType } from 'react-querybuilder';
22
+ import { type Field, QueryBuilder, type RuleGroupType } from 'react-querybuilder';
23
23
 
24
- const fields = [
24
+ const fields: Field[] = [
25
25
  { name: 'firstName', label: 'First Name' },
26
26
  { name: 'lastName', label: 'Last Name' },
27
27
  ];
28
28
 
29
- const App = () => {
29
+ export function App() {
30
30
  const [query, setQuery] = useState<RuleGroupType>({ combinator: 'and', rules: [] });
31
31
 
32
32
  return (
33
33
  <QueryBuilderAntD>
34
- <QueryBuilder fields={fields} query={query} onQueryChange={setQuery} />
34
+ <QueryBuilder fields={fields} defaultQuery={query} onQueryChange={setQuery} />
35
35
  </QueryBuilderAntD>
36
36
  );
37
- };
37
+ }
38
38
  ```
39
39
 
40
- ## Notes
40
+ > [!NOTE]
41
+ >
42
+ > You may also want to reduce the width of the value editor component (which is 100% by default) with the following CSS rule.
43
+ >
44
+ > ```css
45
+ > .queryBuilder .ant-input {
46
+ > width: auto;
47
+ > }
48
+ > ```
41
49
 
42
- - You may also want to reduce the width of the value editor component (100% by default) with the following CSS rule:
50
+ `QueryBuilderAntD` is a React context provider that assigns the following props to all descendant `QueryBuilder` elements. The props can be overridden on the `QueryBuilder` or used directly without the context provider.
43
51
 
44
- ```css
45
- .queryBuilder .ant-input {
46
- width: auto;
47
- }
48
- ```
52
+ | Export | `QueryBuilder` prop |
53
+ | --------------------- | ------------------------------- |
54
+ | `antdControlElements` | `controlElements` |
55
+ | `antdTranslations` | `translations` |
56
+ | `AntDActionElement` | `controlElements.actionElement` |
57
+ | `AntDDragHandle` | `controlElements.dragHandle` |
58
+ | `AntDNotToggle` | `controlElements.notToggle` |
59
+ | `AntDShiftActions` | `controlElements.shiftActions` |
60
+ | `AntDValueEditor` | `controlElements.valueEditor` |
61
+ | `AntDValueSelector` | `controlElements.valueSelector` |
49
62
 
50
- - This package exports `antdControlElements` which can be assigned directly to the `controlElements` prop on `<QueryBuilder />` (and also exports each component individually), but wrapping `<QueryBuilder />` in `<QueryBuilderAntD />` is the recommended method.
63
+ > [!TIP]
64
+ >
65
+ > By default, this package uses icons from `@ant-design/icons` for button labels. To reset button labels to their default strings, use `defaultTranslations` from `react-querybuilder`.
66
+ >
67
+ > ```tsx
68
+ > <QueryBuilderAntD translations={defaultTranslations}>
69
+ > ```
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@react-querybuilder/antd",
3
3
  "description": "Custom Ant Design components for react-querybuilder",
4
- "version": "7.7.0",
4
+ "version": "7.7.1-rc.0",
5
5
  "publishConfig": {
6
6
  "access": "public"
7
7
  },
@@ -44,21 +44,21 @@
44
44
  "@testing-library/react": "^16.0.1",
45
45
  "@types/react": "^18.3.11",
46
46
  "@vitejs/plugin-react-swc": "^3.7.1",
47
- "antd": "^5.21.2",
47
+ "antd": "^5.21.4",
48
48
  "dayjs": "^1.11.13",
49
49
  "react": "^18.3.1",
50
50
  "react-dom": "^18.3.1",
51
- "react-querybuilder": "7.7.0",
51
+ "react-querybuilder": "7.7.1-rc.0",
52
52
  "rollup-plugin-visualizer": "^5.12.0",
53
- "typescript": "^5.6.2",
54
- "vite": "^5.4.8"
53
+ "typescript": "^5.6.3",
54
+ "vite": "^5.4.9"
55
55
  },
56
56
  "peerDependencies": {
57
57
  "@ant-design/icons": ">=5",
58
58
  "antd": ">=5",
59
59
  "dayjs": ">=1",
60
60
  "react": ">=18",
61
- "react-querybuilder": "7.7.0"
61
+ "react-querybuilder": "7.7.1-rc.0"
62
62
  },
63
- "gitHead": "3df83ee0fc7031f80802d798a77716fb1c1c364a"
63
+ "gitHead": "926c333065a2ad41d49b0732354bfdb76ac10ea1"
64
64
  }