@toptal/picasso-query-builder 4.0.0 → 5.0.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.
- package/dist-package/src/QueryBuilder/QueryBuilder.d.ts +8 -2
- package/dist-package/src/QueryBuilder/QueryBuilder.d.ts.map +1 -1
- package/dist-package/src/QueryBuilder/QueryBuilder.js +2 -2
- package/dist-package/src/QueryBuilder/QueryBuilder.js.map +1 -1
- package/package.json +1 -1
- package/src/QueryBuilder/QueryBuilder.tsx +9 -2
- package/src/QueryBuilder/story/CustomPadding.example.tsx +57 -0
- package/src/QueryBuilder/story/Footer.example.tsx +7 -0
- package/src/QueryBuilder/story/HideControls.example.tsx +2 -0
- package/src/QueryBuilder/story/index.jsx +4 -0
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { ComponentType } from 'react';
|
|
3
3
|
import type { ValueEditorProps as DefaultValueEditorProps, RuleGroupTypeAny, Operator } from 'react-querybuilder';
|
|
4
|
+
import type { SpacingType } from '@toptal/picasso-provider';
|
|
4
5
|
import type { Field, TestId } from '../types/query-builder';
|
|
5
6
|
declare type ValueEditorComponentProps = ComponentType<DefaultValueEditorProps>;
|
|
6
7
|
declare type Props = {
|
|
@@ -24,7 +25,12 @@ declare type Props = {
|
|
|
24
25
|
customValueEditor?: ValueEditorComponentProps;
|
|
25
26
|
/** Defines the loading state. */
|
|
26
27
|
loading?: boolean;
|
|
27
|
-
/** Defines
|
|
28
|
+
/** Defines padded layout. */
|
|
29
|
+
padded?: SpacingType;
|
|
30
|
+
/**
|
|
31
|
+
* @deprecated [CPT-2188] Controls will be defined at the consumer level
|
|
32
|
+
* Defines the possibility to display, or not, any of the controls. For example "Clear query" or "Run query" control.
|
|
33
|
+
*/
|
|
28
34
|
hideControls?: boolean;
|
|
29
35
|
/** Defines the possibility to enable, or not, drag-and-drop functionality. This possibility applies to rules and groups to rearrange it within QB. */
|
|
30
36
|
enableDragAndDrop?: boolean;
|
|
@@ -40,6 +46,6 @@ declare type Props = {
|
|
|
40
46
|
totalCountLoading?: boolean;
|
|
41
47
|
testIds?: TestId;
|
|
42
48
|
};
|
|
43
|
-
declare const QueryBuilder: ({ fields, query, onQueryChange, onValidationChange, getOperators: customOperators, maxGroupDepth, loading, onSubmit, customValueEditor, footer, hideControls, header, enableDragAndDrop, resetOnFieldChange, totalCount, totalCountLoading, onQueryReset, testIds, }: Props) => JSX.Element;
|
|
49
|
+
declare const QueryBuilder: ({ fields, query, onQueryChange, onValidationChange, getOperators: customOperators, maxGroupDepth, loading, onSubmit, customValueEditor, footer, hideControls, header, enableDragAndDrop, resetOnFieldChange, padded, totalCount, totalCountLoading, onQueryReset, testIds, }: Props) => JSX.Element;
|
|
44
50
|
export default QueryBuilder;
|
|
45
51
|
//# sourceMappingURL=QueryBuilder.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"QueryBuilder.d.ts","sourceRoot":"","sources":["../../../src/QueryBuilder/QueryBuilder.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAC/D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAG1C,OAAO,KAAK,EACV,gBAAgB,IAAI,uBAAuB,EAE3C,gBAAgB,EAChB,QAAQ,EACT,MAAM,oBAAoB,CAAA;
|
|
1
|
+
{"version":3,"file":"QueryBuilder.d.ts","sourceRoot":"","sources":["../../../src/QueryBuilder/QueryBuilder.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAC/D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAG1C,OAAO,KAAK,EACV,gBAAgB,IAAI,uBAAuB,EAE3C,gBAAgB,EAChB,QAAQ,EACT,MAAM,oBAAoB,CAAA;AAW3B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAG3D,OAAO,KAAK,EAAuB,KAAK,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAahF,aAAK,yBAAyB,GAAG,aAAa,CAAC,uBAAuB,CAAC,CAAA;AAEvE,aAAK,KAAK,GAAG;IACX,mGAAmG;IACnG,MAAM,EAAE,KAAK,EAAE,CAAA;IACf,4FAA4F;IAC5F,KAAK,EAAE,gBAAgB,CAAA;IACvB,qJAAqJ;IACrJ,aAAa,EAAE,CAAC,QAAQ,EAAE,gBAAgB,KAAK,IAAI,CAAA;IACnD,8GAA8G;IAC9G,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IAC/C,4EAA4E;IAC5E,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IACzB,qFAAqF;IACrF,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,4GAA4G;IAC5G,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,KAAK,QAAQ,EAAE,CAAA;IACjE,wJAAwJ;IACxJ,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAA;IAC5C,+KAA+K;IAC/K,iBAAiB,CAAC,EAAE,yBAAyB,CAAA;IAC7C,iCAAiC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,6BAA6B;IAC7B,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,sJAAsJ;IACtJ,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,mEAAmE;IACnE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,gEAAgE;IAChE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,gIAAgI;IAChI,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,+HAA+H;IAC/H,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,4HAA4H;IAC5H,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAMD,QAAA,MAAM,YAAY,iRAoBf,KAAK,gBAwJP,CAAA;AAED,eAAe,YAAY,CAAA"}
|
|
@@ -19,7 +19,7 @@ import { useOnQueryChange } from './hooks/useOnQueryChange';
|
|
|
19
19
|
import { ValidationErrors } from '../ValidationErrors';
|
|
20
20
|
const useStyles = makeStyles(styles);
|
|
21
21
|
const ValueEditor = (props) => React.createElement(DefaultValEditor, Object.assign({}, props));
|
|
22
|
-
const QueryBuilder = ({ fields, query, onQueryChange, onValidationChange, getOperators: customOperators, maxGroupDepth = 3, loading = false, onSubmit, customValueEditor = ValueEditor, footer, hideControls, header, enableDragAndDrop = false, resetOnFieldChange = true, totalCount, totalCountLoading, onQueryReset, testIds, }) => {
|
|
22
|
+
const QueryBuilder = ({ fields, query, onQueryChange, onValidationChange, getOperators: customOperators, maxGroupDepth = 3, loading = false, onSubmit, customValueEditor = ValueEditor, footer, hideControls, header, enableDragAndDrop = false, resetOnFieldChange = true, padded = SPACING_6, totalCount, totalCountLoading, onQueryReset, testIds, }) => {
|
|
23
23
|
const classes = useStyles();
|
|
24
24
|
const [submitButtonClicked, setSubmitButtonClicked] = useState(false);
|
|
25
25
|
const [queryBuilderValid, setIsQueryBuilderValid] = useState();
|
|
@@ -80,7 +80,7 @@ const QueryBuilder = ({ fields, query, onQueryChange, onValidationChange, getOpe
|
|
|
80
80
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
81
81
|
}, [queryBuilderValid]);
|
|
82
82
|
return (React.createElement(ControlElementsContext, null,
|
|
83
|
-
React.createElement(Container, { className: cx(classes.global, classes.root), flex: true, padded:
|
|
83
|
+
React.createElement(Container, { className: cx(classes.global, classes.root), flex: true, padded: padded, direction: 'column', gap: 'small' },
|
|
84
84
|
header && (React.createElement(Container, { "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.header }, header)),
|
|
85
85
|
React.createElement(QueryBuilderDnD, { dnd: Object.assign(Object.assign({}, ReactDnD), ReactDndHtml5Backend) },
|
|
86
86
|
React.createElement(ReactQueryBuilder, { resetOnFieldChange: resetOnFieldChange, fields: fields, addRuleToNewGroups: true, controlClassnames: controlClassnames, query: query, validator: validator, onQueryChange: handleQueryChange, showCloneButtons: true, getOperators: getOperators, context: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"QueryBuilder.js","sourceRoot":"","sources":["../../../src/QueryBuilder/QueryBuilder.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE/D,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAA;AAO/D,OAAO,EACL,YAAY,IAAI,iBAAiB,EACjC,gBAAgB,EAChB,MAAM,GACP,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA;AACzD,OAAO,KAAK,QAAQ,MAAM,WAAW,CAAA;AACrC,OAAO,KAAK,oBAAoB,MAAM,yBAAyB,CAAA;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,MAAM,YAAY,CAAA;
|
|
1
|
+
{"version":3,"file":"QueryBuilder.js","sourceRoot":"","sources":["../../../src/QueryBuilder/QueryBuilder.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -18,6 +18,7 @@ import * as ReactDnD from 'react-dnd'
|
|
|
18
18
|
import * as ReactDndHtml5Backend from 'react-dnd-html5-backend'
|
|
19
19
|
import { makeStyles } from '@material-ui/core/styles'
|
|
20
20
|
import cx from 'classnames'
|
|
21
|
+
import type { SpacingType } from '@toptal/picasso-provider'
|
|
21
22
|
import { SPACING_6 } from '@toptal/picasso-provider'
|
|
22
23
|
|
|
23
24
|
import type { QueryBuilderContext, Field, TestId } from '../types/query-builder'
|
|
@@ -56,7 +57,12 @@ type Props = {
|
|
|
56
57
|
customValueEditor?: ValueEditorComponentProps
|
|
57
58
|
/** Defines the loading state. */
|
|
58
59
|
loading?: boolean
|
|
59
|
-
/** Defines
|
|
60
|
+
/** Defines padded layout. */
|
|
61
|
+
padded?: SpacingType
|
|
62
|
+
/**
|
|
63
|
+
* @deprecated [CPT-2188] Controls will be defined at the consumer level
|
|
64
|
+
* Defines the possibility to display, or not, any of the controls. For example "Clear query" or "Run query" control.
|
|
65
|
+
*/
|
|
60
66
|
hideControls?: boolean
|
|
61
67
|
/** Defines the possibility to enable, or not, drag-and-drop functionality. This possibility applies to rules and groups to rearrange it within QB. */
|
|
62
68
|
enableDragAndDrop?: boolean
|
|
@@ -92,6 +98,7 @@ const QueryBuilder = ({
|
|
|
92
98
|
header,
|
|
93
99
|
enableDragAndDrop = false,
|
|
94
100
|
resetOnFieldChange = true,
|
|
101
|
+
padded = SPACING_6,
|
|
95
102
|
totalCount,
|
|
96
103
|
totalCountLoading,
|
|
97
104
|
onQueryReset,
|
|
@@ -191,7 +198,7 @@ const QueryBuilder = ({
|
|
|
191
198
|
<Container
|
|
192
199
|
className={cx(classes.global, classes.root)}
|
|
193
200
|
flex
|
|
194
|
-
padded={
|
|
201
|
+
padded={padded}
|
|
195
202
|
direction='column'
|
|
196
203
|
gap='small'
|
|
197
204
|
>
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import React, { useState } from 'react'
|
|
2
|
+
import {
|
|
3
|
+
QueryBuilder,
|
|
4
|
+
type RuleGroupTypeAny,
|
|
5
|
+
} from '@toptal/picasso-query-builder'
|
|
6
|
+
import { SPACING_0 } from '@toptal/picasso-provider'
|
|
7
|
+
|
|
8
|
+
const initialQuery: RuleGroupTypeAny = {
|
|
9
|
+
rules: [
|
|
10
|
+
{
|
|
11
|
+
field: 'name',
|
|
12
|
+
operator: '=',
|
|
13
|
+
valueSource: 'value',
|
|
14
|
+
value: 'John',
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
field: 'age',
|
|
18
|
+
operator: '=',
|
|
19
|
+
valueSource: 'value',
|
|
20
|
+
value: '21',
|
|
21
|
+
},
|
|
22
|
+
],
|
|
23
|
+
combinator: 'and',
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
const fields = [
|
|
27
|
+
{
|
|
28
|
+
name: 'name',
|
|
29
|
+
label: 'Name',
|
|
30
|
+
type: 'text',
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
name: 'age',
|
|
34
|
+
label: 'Age',
|
|
35
|
+
type: 'number',
|
|
36
|
+
},
|
|
37
|
+
]
|
|
38
|
+
|
|
39
|
+
const Example = () => {
|
|
40
|
+
const [query, setQuery] = useState<RuleGroupTypeAny>(initialQuery)
|
|
41
|
+
|
|
42
|
+
const handleQueryChange = (newQuery: RuleGroupTypeAny) => {
|
|
43
|
+
setQuery(newQuery)
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
return (
|
|
47
|
+
<QueryBuilder
|
|
48
|
+
fields={fields}
|
|
49
|
+
query={query}
|
|
50
|
+
onQueryChange={handleQueryChange}
|
|
51
|
+
padded={SPACING_0}
|
|
52
|
+
hideControls
|
|
53
|
+
/>
|
|
54
|
+
)
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
export default Example
|
|
@@ -48,9 +48,16 @@ const Example = () => {
|
|
|
48
48
|
fields={fields}
|
|
49
49
|
query={query}
|
|
50
50
|
onQueryChange={handleQueryChange}
|
|
51
|
+
hideControls
|
|
51
52
|
footer={
|
|
52
53
|
<Container flex justifyContent='space-between'>
|
|
53
54
|
<Button variant='secondary'>Copy url</Button>
|
|
55
|
+
<Container flex justifyContent='flex-end'>
|
|
56
|
+
<Button variant='secondary'>Clear query</Button>
|
|
57
|
+
<Button size='medium' variant='positive'>
|
|
58
|
+
Run query
|
|
59
|
+
</Button>
|
|
60
|
+
</Container>
|
|
54
61
|
</Container>
|
|
55
62
|
}
|
|
56
63
|
/>
|
|
@@ -3,6 +3,7 @@ import {
|
|
|
3
3
|
QueryBuilder,
|
|
4
4
|
type RuleGroupTypeAny,
|
|
5
5
|
} from '@toptal/picasso-query-builder'
|
|
6
|
+
import { SPACING_0 } from '@toptal/picasso-provider'
|
|
6
7
|
|
|
7
8
|
const initialQuery: RuleGroupTypeAny = {
|
|
8
9
|
rules: [
|
|
@@ -47,6 +48,7 @@ const Example = () => {
|
|
|
47
48
|
fields={fields}
|
|
48
49
|
query={query}
|
|
49
50
|
onQueryChange={handleQueryChange}
|
|
51
|
+
padded={SPACING_0}
|
|
50
52
|
hideControls
|
|
51
53
|
/>
|
|
52
54
|
)
|
|
@@ -43,6 +43,10 @@ page
|
|
|
43
43
|
description: 'Customized header',
|
|
44
44
|
})
|
|
45
45
|
|
|
46
|
+
.addExample('QueryBuilder/story/CustomPadding.example.tsx', {
|
|
47
|
+
title: 'Custom Padding',
|
|
48
|
+
})
|
|
49
|
+
|
|
46
50
|
.addExample('QueryBuilder/story/FieldDescription.example.tsx', {
|
|
47
51
|
title: 'Field Description',
|
|
48
52
|
description: `Hover over 'First name' field in the field selector dropdown to display field description in a tooltip`,
|