Skip to content

Commit 88a9407

Browse files
momesanaheath-freenome
momesana
and
heath-freenome
authored
Fix: use correct ConfigProvider context by using named imports (#4132)
Co-authored-by: Mehdi Salem <[email protected]> Co-authored-by: Heath C <[email protected]>
1 parent baffbf1 commit 88a9407

File tree

21 files changed

+159
-183
lines changed

21 files changed

+159
-183
lines changed

‎CHANGELOG.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,9 @@ should change the heading of the (upcoming) version to include a major version b
2828
- Added a new `computeSkipPopulate` option in `arrayMinItems`, allowing custom logic to skip populating arrays with default values, implementing [#4121](https://github.com/rjsf-team/react-jsonschema-form/pull/4121).
2929
- Fixed bug where the string `"\</strong>"` would get printed next to filenames when uploading files, and restored intended bolding of filenames fixing [#4120](https://github.com/rjsf-team/react-jsonschema-form/issues/4120).
3030

31+
## @rjsf/antd
32+
- Fix issue where the theme provided by the ConfigProvider under antd v5 wasn't respected thereby rendering the form items unusable under dark themes [#4129](https://github.com/rjsf-team/react-jsonschema-form/issues/4129)
33+
3134
## Dev / docs / playground
3235

3336
- Updated the documentation to describe how to use the `skipEmptyDefault` option.

‎packages/antd/src/templates/ArrayFieldItemTemplate/index.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
import Button from 'antd/lib/button';
2-
import Col from 'antd/lib/col';
3-
import Row from 'antd/lib/row';
1+
import { Button, Col, Row } from 'antd';
42
import { ArrayFieldTemplateItemType, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
53

64
const BTN_GRP_STYLE = {

‎packages/antd/src/templates/ArrayFieldTemplate/index.tsx‎

Lines changed: 57 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,8 @@ import {
99
StrictRJSFSchema,
1010
} from '@rjsf/utils';
1111
import classNames from 'classnames';
12-
import Col from 'antd/lib/col';
13-
import Row from 'antd/lib/row';
14-
import { ConfigConsumer, ConfigConsumerProps } from 'antd/lib/config-provider/context';
12+
import { Col, Row, ConfigProvider } from 'antd';
13+
import { useContext } from 'react';
1514

1615
const DESCRIPTION_COL_STYLE = {
1716
paddingBottom: '8px',
@@ -63,70 +62,64 @@ export default function ArrayFieldTemplate<
6362
} = registry.templates;
6463
const { labelAlign = 'right', rowGutter = 24 } = formContext as GenericObjectType;
6564

65+
const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
66+
const prefixCls = getPrefixCls('form');
67+
const labelClsBasic = `${prefixCls}-item-label`;
68+
const labelColClassName = classNames(
69+
labelClsBasic,
70+
labelAlign === 'left' && `${labelClsBasic}-left`
71+
// labelCol.className,
72+
);
73+
6674
return (
67-
<ConfigConsumer>
68-
{(configProps: ConfigConsumerProps) => {
69-
const { getPrefixCls } = configProps;
70-
const prefixCls = getPrefixCls('form');
71-
const labelClsBasic = `${prefixCls}-item-label`;
72-
const labelColClassName = classNames(
73-
labelClsBasic,
74-
labelAlign === 'left' && `${labelClsBasic}-left`
75-
// labelCol.className,
76-
);
75+
<fieldset className={className} id={idSchema.$id}>
76+
<Row gutter={rowGutter}>
77+
{(uiOptions.title || title) && (
78+
<Col className={labelColClassName} span={24}>
79+
<ArrayFieldTitleTemplate
80+
idSchema={idSchema}
81+
required={required}
82+
title={uiOptions.title || title}
83+
schema={schema}
84+
uiSchema={uiSchema}
85+
registry={registry}
86+
/>
87+
</Col>
88+
)}
89+
{(uiOptions.description || schema.description) && (
90+
<Col span={24} style={DESCRIPTION_COL_STYLE}>
91+
<ArrayFieldDescriptionTemplate
92+
description={uiOptions.description || schema.description}
93+
idSchema={idSchema}
94+
schema={schema}
95+
uiSchema={uiSchema}
96+
registry={registry}
97+
/>
98+
</Col>
99+
)}
100+
<Col className='row array-item-list' span={24}>
101+
{items &&
102+
items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType<T, S, F>) => (
103+
<ArrayFieldItemTemplate key={key} {...itemProps} />
104+
))}
105+
</Col>
77106

78-
return (
79-
<fieldset className={className} id={idSchema.$id}>
80-
<Row gutter={rowGutter}>
81-
{(uiOptions.title || title) && (
82-
<Col className={labelColClassName} span={24}>
83-
<ArrayFieldTitleTemplate
84-
idSchema={idSchema}
85-
required={required}
86-
title={uiOptions.title || title}
87-
schema={schema}
88-
uiSchema={uiSchema}
89-
registry={registry}
90-
/>
91-
</Col>
92-
)}
93-
{(uiOptions.description || schema.description) && (
94-
<Col span={24} style={DESCRIPTION_COL_STYLE}>
95-
<ArrayFieldDescriptionTemplate
96-
description={uiOptions.description || schema.description}
97-
idSchema={idSchema}
98-
schema={schema}
99-
uiSchema={uiSchema}
100-
registry={registry}
101-
/>
102-
</Col>
103-
)}
104-
<Col className='row array-item-list' span={24}>
105-
{items &&
106-
items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType<T, S, F>) => (
107-
<ArrayFieldItemTemplate key={key} {...itemProps} />
108-
))}
107+
{canAdd && (
108+
<Col span={24}>
109+
<Row gutter={rowGutter} justify='end'>
110+
<Col flex='192px'>
111+
<AddButton
112+
className='array-item-add'
113+
disabled={disabled || readonly}
114+
onClick={onAddClick}
115+
uiSchema={uiSchema}
116+
registry={registry}
117+
/>
109118
</Col>
110-
111-
{canAdd && (
112-
<Col span={24}>
113-
<Row gutter={rowGutter} justify='end'>
114-
<Col flex='192px'>
115-
<AddButton
116-
className='array-item-add'
117-
disabled={disabled || readonly}
118-
onClick={onAddClick}
119-
uiSchema={uiSchema}
120-
registry={registry}
121-
/>
122-
</Col>
123-
</Row>
124-
</Col>
125-
)}
126119
</Row>
127-
</fieldset>
128-
);
129-
}}
130-
</ConfigConsumer>
120+
</Col>
121+
)}
122+
</Row>
123+
</fieldset>
131124
);
132125
}

‎packages/antd/src/templates/BaseInputTemplate/index.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { ChangeEvent, FocusEvent } from 'react';
2-
import Input from 'antd/lib/input';
3-
import InputNumber from 'antd/lib/input-number';
2+
import { Input, InputNumber } from 'antd';
43
import {
54
ariaDescribedByIds,
65
BaseInputTemplateProps,

‎packages/antd/src/templates/ErrorList/index.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
import Alert from 'antd/lib/alert';
2-
import List from 'antd/lib/list';
3-
import Space from 'antd/lib/space';
1+
import { Alert, List, Space } from 'antd';
42
import ExclamationCircleOutlined from '@ant-design/icons/ExclamationCircleOutlined';
53
import { ErrorListProps, FormContextType, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
64

‎packages/antd/src/templates/FieldTemplate/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import Form from 'antd/lib/form';
1+
import { Form } from 'antd';
22
import {
33
FieldTemplateProps,
44
FormContextType,

‎packages/antd/src/templates/IconButton/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import Button, { ButtonProps, ButtonType } from 'antd/lib/button';
1+
import { Button, ButtonProps } from 'antd';
22
import ArrowDownOutlined from '@ant-design/icons/ArrowDownOutlined';
33
import ArrowUpOutlined from '@ant-design/icons/ArrowUpOutlined';
44
import CopyOutlined from '@ant-design/icons/CopyOutlined';
@@ -28,7 +28,7 @@ export default function IconButton<T = any, S extends StrictRJSFSchema = RJSFSch
2828
return (
2929
<Button
3030
onClick={onClick as MouseEventHandler<HTMLAnchorElement> & MouseEventHandler<HTMLButtonElement>}
31-
type={iconType as ButtonType}
31+
type={iconType as ButtonProps['type']}
3232
icon={icon}
3333
{...otherProps}
3434
/>

‎packages/antd/src/templates/ObjectFieldTemplate/index.tsx‎

Lines changed: 60 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,8 @@ import {
1616
getUiOptions,
1717
titleId,
1818
} from '@rjsf/utils';
19-
import Col from 'antd/lib/col';
20-
import Row from 'antd/lib/row';
21-
import { ConfigConsumer, ConfigConsumerProps } from 'antd/lib/config-provider/context';
19+
import { Col, Row, ConfigProvider } from 'antd';
20+
import { useContext } from 'react';
2221

2322
const DESCRIPTION_COL_STYLE = {
2423
paddingBottom: '8px',
@@ -105,71 +104,65 @@ export default function ObjectFieldTemplate<
105104
return defaultColSpan;
106105
};
107106

108-
return (
109-
<ConfigConsumer>
110-
{(configProps: ConfigConsumerProps) => {
111-
const { getPrefixCls } = configProps;
112-
const prefixCls = getPrefixCls('form');
113-
const labelClsBasic = `${prefixCls}-item-label`;
114-
const labelColClassName = classNames(
115-
labelClsBasic,
116-
labelAlign === 'left' && `${labelClsBasic}-left`
117-
// labelCol.className,
118-
);
107+
const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
108+
const prefixCls = getPrefixCls('form');
109+
const labelClsBasic = `${prefixCls}-item-label`;
110+
const labelColClassName = classNames(
111+
labelClsBasic,
112+
labelAlign === 'left' && `${labelClsBasic}-left`
113+
// labelCol.className,
114+
);
119115

120-
return (
121-
<fieldset id={idSchema.$id}>
122-
<Row gutter={rowGutter}>
123-
{title && (
124-
<Col className={labelColClassName} span={24}>
125-
<TitleFieldTemplate
126-
id={titleId<T>(idSchema)}
127-
title={title}
128-
required={required}
129-
schema={schema}
130-
uiSchema={uiSchema}
131-
registry={registry}
132-
/>
133-
</Col>
134-
)}
135-
{description && (
136-
<Col span={24} style={DESCRIPTION_COL_STYLE}>
137-
<DescriptionFieldTemplate
138-
id={descriptionId<T>(idSchema)}
139-
description={description}
140-
schema={schema}
141-
uiSchema={uiSchema}
142-
registry={registry}
143-
/>
144-
</Col>
145-
)}
146-
{properties
147-
.filter((e) => !e.hidden)
148-
.map((element: ObjectFieldTemplatePropertyType) => (
149-
<Col key={element.name} span={calculateColSpan(element)}>
150-
{element.content}
151-
</Col>
152-
))}
153-
</Row>
116+
return (
117+
<fieldset id={idSchema.$id}>
118+
<Row gutter={rowGutter}>
119+
{title && (
120+
<Col className={labelColClassName} span={24}>
121+
<TitleFieldTemplate
122+
id={titleId<T>(idSchema)}
123+
title={title}
124+
required={required}
125+
schema={schema}
126+
uiSchema={uiSchema}
127+
registry={registry}
128+
/>
129+
</Col>
130+
)}
131+
{description && (
132+
<Col span={24} style={DESCRIPTION_COL_STYLE}>
133+
<DescriptionFieldTemplate
134+
id={descriptionId<T>(idSchema)}
135+
description={description}
136+
schema={schema}
137+
uiSchema={uiSchema}
138+
registry={registry}
139+
/>
140+
</Col>
141+
)}
142+
{properties
143+
.filter((e) => !e.hidden)
144+
.map((element: ObjectFieldTemplatePropertyType) => (
145+
<Col key={element.name} span={calculateColSpan(element)}>
146+
{element.content}
147+
</Col>
148+
))}
149+
</Row>
154150

155-
{canExpand(schema, uiSchema, formData) && (
156-
<Col span={24}>
157-
<Row gutter={rowGutter} justify='end'>
158-
<Col flex='192px'>
159-
<AddButton
160-
className='object-property-expand'
161-
disabled={disabled || readonly}
162-
onClick={onAddClick(schema)}
163-
uiSchema={uiSchema}
164-
registry={registry}
165-
/>
166-
</Col>
167-
</Row>
168-
</Col>
169-
)}
170-
</fieldset>
171-
);
172-
}}
173-
</ConfigConsumer>
151+
{canExpand(schema, uiSchema, formData) && (
152+
<Col span={24}>
153+
<Row gutter={rowGutter} justify='end'>
154+
<Col flex='192px'>
155+
<AddButton
156+
className='object-property-expand'
157+
disabled={disabled || readonly}
158+
onClick={onAddClick(schema)}
159+
uiSchema={uiSchema}
160+
registry={registry}
161+
/>
162+
</Col>
163+
</Row>
164+
</Col>
165+
)}
166+
</fieldset>
174167
);
175168
}

‎packages/antd/src/templates/SubmitButton/index.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
import Button, { ButtonType } from 'antd/lib/button';
1+
import { Button, ButtonProps } from 'antd';
22
import { getSubmitButtonOptions, FormContextType, RJSFSchema, StrictRJSFSchema, SubmitButtonProps } from '@rjsf/utils';
33

4+
type ButtonType = NonNullable<ButtonProps['type']>;
5+
46
/** The `SubmitButton` renders a button that represent the `Submit` action on a form
57
*/
68
export default function SubmitButton<

‎packages/antd/src/templates/TitleField/index.tsx‎

Lines changed: 17 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import classNames from 'classnames';
2-
import { ConfigConsumer, ConfigConsumerProps } from 'antd/lib/config-provider/context';
32
import { FormContextType, TitleFieldProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
3+
import { ConfigProvider } from 'antd';
4+
import { useContext } from 'react';
45

56
/** The `TitleField` is the template to use to render the title of a field
67
*
@@ -31,27 +32,21 @@ export default function TitleField<T = any, S extends StrictRJSFSchema = RJSFSch
3132
}
3233
};
3334

34-
return title ? (
35-
<ConfigConsumer>
36-
{(configProps: ConfigConsumerProps) => {
37-
const { getPrefixCls } = configProps;
38-
const prefixCls = getPrefixCls('form');
39-
const labelClassName = classNames({
40-
[`${prefixCls}-item-required`]: required,
41-
[`${prefixCls}-item-no-colon`]: !colon,
42-
});
35+
const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
36+
const prefixCls = getPrefixCls('form');
37+
const labelClassName = classNames({
38+
[`${prefixCls}-item-required`]: required,
39+
[`${prefixCls}-item-no-colon`]: !colon,
40+
});
4341

44-
return (
45-
<label
46-
className={labelClassName}
47-
htmlFor={id}
48-
onClick={handleLabelClick}
49-
title={typeof title === 'string' ? title : ''}
50-
>
51-
{labelChildren}
52-
</label>
53-
);
54-
}}
55-
</ConfigConsumer>
42+
return title ? (
43+
<label
44+
className={labelClassName}
45+
htmlFor={id}
46+
onClick={handleLabelClick}
47+
title={typeof title === 'string' ? title : ''}
48+
>
49+
{labelChildren}
50+
</label>
5651
) : null;
5752
}

0 commit comments

Comments
 (0)