Skip to content

Commit 085aa2b

Browse files
ukrbublikukrbublik
authored
Fix UI for fieldSettings.allowCustomValues (#1176)
* upd antd * upd @ant-design/icons * fix ResizeObserver loop completed with undelivered notifications. * allowCustomValues should enable autocomplete widget * $custom-select-option-color * chlog
1 parent 55f8d70 commit 085aa2b

File tree

14 files changed

+580
-545
lines changed

14 files changed

+580
-545
lines changed

‎CHANGELOG.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
# Changelog
2+
- 6.6.9
3+
- Force autocomplete widget when `fieldSettings.allowCustomValues` is true (MIU/antd) (PR #1176) (issue #1150)
24
- 6.6.8
35
- Support safe navigation operator in SpEL operators/functions (PR #1172) (issue #1010)
46
- SpEL: backward compatibility for import of `CollectionUtils.containsAny` (PR #1174) (issue #1007)

‎packages/antd/modules/config/index.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ const widgets = {
6464
select: {
6565
...BasicConfig.widgets.select,
6666
factory: (props, {RCE, W: {AutocompleteWidget, SelectWidget}}) => {
67-
return (props.asyncFetch || props.showSearch)
67+
return (props.asyncFetch || props.showSearch || props.allowCustomValues)
6868
? RCE(AutocompleteWidget, props)
6969
: RCE(SelectWidget, props);
7070
},

‎packages/antd/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@
5353
"rc-picker": "^4.5.0"
5454
},
5555
"devDependencies": {
56-
"@ant-design/icons": "^5.3.7",
56+
"@ant-design/icons": "^5.5.2",
5757
"@babel/cli": "^7.24.7",
5858
"@babel/core": "^7.24.5",
5959
"@babel/plugin-transform-class-properties": "^7.24.1",
@@ -67,7 +67,7 @@
6767
"@babel/runtime": "^7.24.5",
6868
"@types/react": "^17.0.39",
6969
"@types/react-dom": "^17.0.11",
70-
"antd": "^5.18.3",
70+
"antd": "^5.23.1",
7171
"less": "^4.2.0",
7272
"react": "^17.0.2",
7373
"react-dom": "^17.0.2",

‎packages/antd/styles/fixes.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ body.qb-dragging {
5252

5353
/* should be outside of .query-builder */
5454
.customSelectOption {
55-
color: lightcoral;
55+
color: $custom-select-option-color;
5656
}
5757

5858
.query-builder {

‎packages/examples/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
"tsc": "tsc -p . --noEmit"
2323
},
2424
"dependencies": {
25-
"@ant-design/icons": "^5.3.7",
25+
"@ant-design/icons": "^5.5.2",
2626
"@emotion/react": "^11.11.4",
2727
"@emotion/styled": "^11.11.5",
2828
"@fluentui/font-icons-mdl2": "^8.5.39",
@@ -49,7 +49,7 @@
4949
"@react-awesome-query-builder/mui": "workspace:^",
5050
"@react-awesome-query-builder/sql": "workspace:^",
5151
"@react-awesome-query-builder/ui": "workspace:^",
52-
"antd": "^5.18.3",
52+
"antd": "^5.23.1",
5353
"bootstrap": "^5.3.3",
5454
"clone": "^2.1.2",
5555
"immutable": "^4.3.6",

‎packages/examples/webpack.config.js

+12
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,18 @@ module.exports = {
157157
host: '0.0.0.0',
158158
client: {
159159
webSocketURL: 'ws://0.0.0.0:0/ws',
160+
overlay: {
161+
errors: true,
162+
runtimeErrors: (error) => {
163+
// https://github.com/ant-design/ant-design/issues/26621
164+
// MultiSelectWidget (antd) can throw this error
165+
if (error.message === 'ResizeObserver loop completed with undelivered notifications.') {
166+
return false;
167+
}
168+
return true;
169+
},
170+
warnings: false,
171+
},
160172
},
161173
allowedHosts: [
162174
'localhost',

‎packages/material/modules/config/index.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -44,15 +44,15 @@ const widgets = {
4444
multiselect: {
4545
...BasicConfig.widgets.multiselect,
4646
factory: (props, {RCE, W: {MaterialAutocompleteWidget, MaterialMultiSelectWidget}}) => {
47-
return (props.asyncFetch || props.showSearch)
47+
return (props.asyncFetch || props.showSearch || props.allowCustomValues)
4848
? RCE(MaterialAutocompleteWidget, {...props, multiple: true})
4949
: RCE(MaterialMultiSelectWidget, props);
5050
},
5151
},
5252
select: {
5353
...BasicConfig.widgets.select,
5454
factory: (props, {RCE, W: {MaterialAutocompleteWidget, MaterialSelectWidget}}) => {
55-
return (props.asyncFetch || props.showSearch)
55+
return (props.asyncFetch || props.showSearch || props.allowCustomValues)
5656
? RCE(MaterialAutocompleteWidget, props)
5757
: RCE(MaterialSelectWidget, props);
5858
},

‎packages/mui/modules/config/index.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -42,15 +42,15 @@ const widgets = {
4242
multiselect: {
4343
...BasicConfig.widgets.multiselect,
4444
factory: (props, {RCE, W: {MuiAutocompleteWidget, MuiMultiSelectWidget}}) => {
45-
return (props.asyncFetch || props.showSearch)
45+
return (props.asyncFetch || props.showSearch || props.allowCustomValues)
4646
? RCE(MuiAutocompleteWidget, {...props, multiple: true})
4747
: RCE(MuiMultiSelectWidget, props);
4848
},
4949
},
5050
select: {
5151
...BasicConfig.widgets.select,
5252
factory: (props, {RCE, W: {MuiAutocompleteWidget, MuiSelectWidget}}) => {
53-
return (props.asyncFetch || props.showSearch)
53+
return (props.asyncFetch || props.showSearch || props.allowCustomValues)
5454
? RCE(MuiAutocompleteWidget, props)
5555
: RCE(MuiSelectWidget, props);
5656
},

‎packages/mui/styles/fixes.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,5 @@
66

77
/* should be outside of .query-builder */
88
.customSelectOption {
9-
color: lightcoral;
9+
color: $custom-select-option-color;
1010
}

‎packages/sandbox/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
]
3636
},
3737
"dependencies": {
38-
"@ant-design/icons": "^5.3.7",
38+
"@ant-design/icons": "^5.5.2",
3939
"@emotion/react": "^11.11.4",
4040
"@emotion/styled": "^11.11.5",
4141
"@mui/base": "^5.0.0-beta.68",
@@ -45,7 +45,7 @@
4545
"@mui/x-date-pickers": "^7.23.6",
4646
"@react-awesome-query-builder/antd": "workspace:^",
4747
"@react-awesome-query-builder/mui": "workspace:^",
48-
"antd": "^5.18.3",
48+
"antd": "^5.23.1",
4949
"lodash": "^4.17.21",
5050
"react": "^18.3.1",
5151
"react-dom": "^18.3.1"

‎packages/sandbox_next/lib/config.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ const widgetsMixin: Record<string, Partial<Widget>> = {
5353
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
5454
factory: {
5555
if: [
56-
{ or: [ { var: "props.asyncFetch" }, { var: "props.showSearch" } ] },
56+
{ or: [ { var: "props.asyncFetch" }, { var: "props.showSearch" }, { var: "props.allowCustomValues" } ] },
5757
{ JSX: ["MuiAutocompleteWidget", { mergeObjects: [
5858
{ var: "props" },
5959
{ fromEntries: [ [ [ "multiple", true ] ] ] }
@@ -66,7 +66,7 @@ const widgetsMixin: Record<string, Partial<Widget>> = {
6666
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
6767
factory: {
6868
if: [
69-
{ or: [ { var: "props.asyncFetch" }, { var: "props.showSearch" } ] },
69+
{ or: [ { var: "props.asyncFetch" }, { var: "props.showSearch" }, { var: "props.allowCustomValues" } ] },
7070
{ JSX: ["MuiAutocompleteWidget", {var: "props"}] },
7171
{ JSX: ["MuiSelectWidget", {var: "props"}] }
7272
]

‎packages/tests/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
"tsc": "tsc -p . --noEmit"
2323
},
2424
"dependencies": {
25-
"@ant-design/icons": "^5.3.7",
25+
"@ant-design/icons": "^5.5.2",
2626
"@emotion/react": "^11.11.4",
2727
"@emotion/styled": "^11.11.5",
2828
"@fluentui/font-icons-mdl2": "^8.5.39",
@@ -49,7 +49,7 @@
4949
"@react-awesome-query-builder/mui": "workspace:^",
5050
"@react-awesome-query-builder/sql": "workspace:^",
5151
"@react-awesome-query-builder/ui": "workspace:^",
52-
"antd": "^5.18.3",
52+
"antd": "^5.23.1",
5353
"bootstrap": "^5.3.3",
5454
"lodash": "^4.17.21",
5555
"moment": "^2.30.1",

‎packages/ui/styles/styles.scss

+2
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,8 @@ $drag-offset-right: 8px !default;
6565
$group-actions-offset-left: 10px !default;
6666
$group-drag-offset-left: 10px !default;
6767
$rule-group-actions-offset-left: 10px !default;
68+
// other
69+
$custom-select-option-color: lightcoral !default;
6870

6971

7072

0 commit comments

Comments
 (0)