From 88a9407eba755f4dde50fc209cb9ad0ab5f06e68 Mon Sep 17 00:00:00 2001 From: momesana Date: Fri, 22 Mar 2024 20:54:51 +0100 Subject: [PATCH] Fix: use correct ConfigProvider context by using named imports (#4132) Co-authored-by: Mehdi Salem Co-authored-by: Heath C <51679588+heath-freenome@users.noreply.github.com> --- CHANGELOG.md | 3 + .../ArrayFieldItemTemplate/index.tsx | 4 +- .../templates/ArrayFieldTemplate/index.tsx | 121 ++++++++--------- .../src/templates/BaseInputTemplate/index.tsx | 3 +- .../antd/src/templates/ErrorList/index.tsx | 4 +- .../src/templates/FieldTemplate/index.tsx | 2 +- .../antd/src/templates/IconButton/index.tsx | 4 +- .../templates/ObjectFieldTemplate/index.tsx | 127 +++++++++--------- .../antd/src/templates/SubmitButton/index.tsx | 4 +- .../antd/src/templates/TitleField/index.tsx | 39 +++--- .../WrapIfAdditionalTemplate/index.tsx | 5 +- .../antd/src/widgets/AltDateWidget/index.tsx | 4 +- .../antd/src/widgets/CheckboxWidget/index.tsx | 4 +- .../src/widgets/CheckboxesWidget/index.tsx | 2 +- .../antd/src/widgets/DateTimeWidget/index.tsx | 2 +- .../antd/src/widgets/DateWidget/index.tsx | 2 +- .../antd/src/widgets/PasswordWidget/index.tsx | 2 +- .../antd/src/widgets/RadioWidget/index.tsx | 2 +- .../antd/src/widgets/RangeWidget/index.tsx | 2 +- .../antd/src/widgets/SelectWidget/index.tsx | 4 +- .../antd/src/widgets/TextareaWidget/index.tsx | 2 +- 21 files changed, 159 insertions(+), 183 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b4b7d86894..85b6ffd2f7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -28,6 +28,9 @@ should change the heading of the (upcoming) version to include a major version b - 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). - Fixed bug where the string `"\"` 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). +## @rjsf/antd +- 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) + ## Dev / docs / playground - Updated the documentation to describe how to use the `skipEmptyDefault` option. diff --git a/packages/antd/src/templates/ArrayFieldItemTemplate/index.tsx b/packages/antd/src/templates/ArrayFieldItemTemplate/index.tsx index 1045a314fd..8faf4253b0 100644 --- a/packages/antd/src/templates/ArrayFieldItemTemplate/index.tsx +++ b/packages/antd/src/templates/ArrayFieldItemTemplate/index.tsx @@ -1,6 +1,4 @@ -import Button from 'antd/lib/button'; -import Col from 'antd/lib/col'; -import Row from 'antd/lib/row'; +import { Button, Col, Row } from 'antd'; import { ArrayFieldTemplateItemType, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils'; const BTN_GRP_STYLE = { diff --git a/packages/antd/src/templates/ArrayFieldTemplate/index.tsx b/packages/antd/src/templates/ArrayFieldTemplate/index.tsx index d45576b307..7cc8b82af5 100644 --- a/packages/antd/src/templates/ArrayFieldTemplate/index.tsx +++ b/packages/antd/src/templates/ArrayFieldTemplate/index.tsx @@ -9,9 +9,8 @@ import { StrictRJSFSchema, } from '@rjsf/utils'; import classNames from 'classnames'; -import Col from 'antd/lib/col'; -import Row from 'antd/lib/row'; -import { ConfigConsumer, ConfigConsumerProps } from 'antd/lib/config-provider/context'; +import { Col, Row, ConfigProvider } from 'antd'; +import { useContext } from 'react'; const DESCRIPTION_COL_STYLE = { paddingBottom: '8px', @@ -63,70 +62,64 @@ export default function ArrayFieldTemplate< } = registry.templates; const { labelAlign = 'right', rowGutter = 24 } = formContext as GenericObjectType; + const { getPrefixCls } = useContext(ConfigProvider.ConfigContext); + const prefixCls = getPrefixCls('form'); + const labelClsBasic = `${prefixCls}-item-label`; + const labelColClassName = classNames( + labelClsBasic, + labelAlign === 'left' && `${labelClsBasic}-left` + // labelCol.className, + ); + return ( - - {(configProps: ConfigConsumerProps) => { - const { getPrefixCls } = configProps; - const prefixCls = getPrefixCls('form'); - const labelClsBasic = `${prefixCls}-item-label`; - const labelColClassName = classNames( - labelClsBasic, - labelAlign === 'left' && `${labelClsBasic}-left` - // labelCol.className, - ); +
+ + {(uiOptions.title || title) && ( + + + + )} + {(uiOptions.description || schema.description) && ( + + + + )} + + {items && + items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType) => ( + + ))} + - return ( -
- - {(uiOptions.title || title) && ( - - - - )} - {(uiOptions.description || schema.description) && ( - - - - )} - - {items && - items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType) => ( - - ))} + {canAdd && ( + + + + - - {canAdd && ( - - - - - - - - )} -
- ); - }} - + + )} + +
); } diff --git a/packages/antd/src/templates/BaseInputTemplate/index.tsx b/packages/antd/src/templates/BaseInputTemplate/index.tsx index 009fd434d4..8a18584793 100644 --- a/packages/antd/src/templates/BaseInputTemplate/index.tsx +++ b/packages/antd/src/templates/BaseInputTemplate/index.tsx @@ -1,6 +1,5 @@ import { ChangeEvent, FocusEvent } from 'react'; -import Input from 'antd/lib/input'; -import InputNumber from 'antd/lib/input-number'; +import { Input, InputNumber } from 'antd'; import { ariaDescribedByIds, BaseInputTemplateProps, diff --git a/packages/antd/src/templates/ErrorList/index.tsx b/packages/antd/src/templates/ErrorList/index.tsx index 3f49877b78..e3543f172f 100644 --- a/packages/antd/src/templates/ErrorList/index.tsx +++ b/packages/antd/src/templates/ErrorList/index.tsx @@ -1,6 +1,4 @@ -import Alert from 'antd/lib/alert'; -import List from 'antd/lib/list'; -import Space from 'antd/lib/space'; +import { Alert, List, Space } from 'antd'; import ExclamationCircleOutlined from '@ant-design/icons/ExclamationCircleOutlined'; import { ErrorListProps, FormContextType, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils'; diff --git a/packages/antd/src/templates/FieldTemplate/index.tsx b/packages/antd/src/templates/FieldTemplate/index.tsx index d9ae01a9c9..aac59c77cd 100644 --- a/packages/antd/src/templates/FieldTemplate/index.tsx +++ b/packages/antd/src/templates/FieldTemplate/index.tsx @@ -1,4 +1,4 @@ -import Form from 'antd/lib/form'; +import { Form } from 'antd'; import { FieldTemplateProps, FormContextType, diff --git a/packages/antd/src/templates/IconButton/index.tsx b/packages/antd/src/templates/IconButton/index.tsx index 026e4be951..a6bc566f1d 100644 --- a/packages/antd/src/templates/IconButton/index.tsx +++ b/packages/antd/src/templates/IconButton/index.tsx @@ -1,4 +1,4 @@ -import Button, { ButtonProps, ButtonType } from 'antd/lib/button'; +import { Button, ButtonProps } from 'antd'; import ArrowDownOutlined from '@ant-design/icons/ArrowDownOutlined'; import ArrowUpOutlined from '@ant-design/icons/ArrowUpOutlined'; import CopyOutlined from '@ant-design/icons/CopyOutlined'; @@ -28,7 +28,7 @@ export default function IconButton & MouseEventHandler} - type={iconType as ButtonType} + type={iconType as ButtonProps['type']} icon={icon} {...otherProps} /> diff --git a/packages/antd/src/templates/ObjectFieldTemplate/index.tsx b/packages/antd/src/templates/ObjectFieldTemplate/index.tsx index f5e613369f..3c9834dce6 100644 --- a/packages/antd/src/templates/ObjectFieldTemplate/index.tsx +++ b/packages/antd/src/templates/ObjectFieldTemplate/index.tsx @@ -16,9 +16,8 @@ import { getUiOptions, titleId, } from '@rjsf/utils'; -import Col from 'antd/lib/col'; -import Row from 'antd/lib/row'; -import { ConfigConsumer, ConfigConsumerProps } from 'antd/lib/config-provider/context'; +import { Col, Row, ConfigProvider } from 'antd'; +import { useContext } from 'react'; const DESCRIPTION_COL_STYLE = { paddingBottom: '8px', @@ -105,71 +104,65 @@ export default function ObjectFieldTemplate< return defaultColSpan; }; - return ( - - {(configProps: ConfigConsumerProps) => { - const { getPrefixCls } = configProps; - const prefixCls = getPrefixCls('form'); - const labelClsBasic = `${prefixCls}-item-label`; - const labelColClassName = classNames( - labelClsBasic, - labelAlign === 'left' && `${labelClsBasic}-left` - // labelCol.className, - ); + const { getPrefixCls } = useContext(ConfigProvider.ConfigContext); + const prefixCls = getPrefixCls('form'); + const labelClsBasic = `${prefixCls}-item-label`; + const labelColClassName = classNames( + labelClsBasic, + labelAlign === 'left' && `${labelClsBasic}-left` + // labelCol.className, + ); - return ( -
- - {title && ( - - (idSchema)} - title={title} - required={required} - schema={schema} - uiSchema={uiSchema} - registry={registry} - /> - - )} - {description && ( - - (idSchema)} - description={description} - schema={schema} - uiSchema={uiSchema} - registry={registry} - /> - - )} - {properties - .filter((e) => !e.hidden) - .map((element: ObjectFieldTemplatePropertyType) => ( - - {element.content} - - ))} - + return ( +
+ + {title && ( + + (idSchema)} + title={title} + required={required} + schema={schema} + uiSchema={uiSchema} + registry={registry} + /> + + )} + {description && ( + + (idSchema)} + description={description} + schema={schema} + uiSchema={uiSchema} + registry={registry} + /> + + )} + {properties + .filter((e) => !e.hidden) + .map((element: ObjectFieldTemplatePropertyType) => ( + + {element.content} + + ))} + - {canExpand(schema, uiSchema, formData) && ( - - - - - - - - )} -
- ); - }} - + {canExpand(schema, uiSchema, formData) && ( + + + + + + + + )} +
); } diff --git a/packages/antd/src/templates/SubmitButton/index.tsx b/packages/antd/src/templates/SubmitButton/index.tsx index a943c31e19..5deec1f8b9 100644 --- a/packages/antd/src/templates/SubmitButton/index.tsx +++ b/packages/antd/src/templates/SubmitButton/index.tsx @@ -1,6 +1,8 @@ -import Button, { ButtonType } from 'antd/lib/button'; +import { Button, ButtonProps } from 'antd'; import { getSubmitButtonOptions, FormContextType, RJSFSchema, StrictRJSFSchema, SubmitButtonProps } from '@rjsf/utils'; +type ButtonType = NonNullable; + /** The `SubmitButton` renders a button that represent the `Submit` action on a form */ export default function SubmitButton< diff --git a/packages/antd/src/templates/TitleField/index.tsx b/packages/antd/src/templates/TitleField/index.tsx index 6c131056d2..18e930b67f 100644 --- a/packages/antd/src/templates/TitleField/index.tsx +++ b/packages/antd/src/templates/TitleField/index.tsx @@ -1,6 +1,7 @@ import classNames from 'classnames'; -import { ConfigConsumer, ConfigConsumerProps } from 'antd/lib/config-provider/context'; import { FormContextType, TitleFieldProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils'; +import { ConfigProvider } from 'antd'; +import { useContext } from 'react'; /** The `TitleField` is the template to use to render the title of a field * @@ -31,27 +32,21 @@ export default function TitleField - {(configProps: ConfigConsumerProps) => { - const { getPrefixCls } = configProps; - const prefixCls = getPrefixCls('form'); - const labelClassName = classNames({ - [`${prefixCls}-item-required`]: required, - [`${prefixCls}-item-no-colon`]: !colon, - }); + const { getPrefixCls } = useContext(ConfigProvider.ConfigContext); + const prefixCls = getPrefixCls('form'); + const labelClassName = classNames({ + [`${prefixCls}-item-required`]: required, + [`${prefixCls}-item-no-colon`]: !colon, + }); - return ( - - ); - }} - + return title ? ( + ) : null; } diff --git a/packages/antd/src/templates/WrapIfAdditionalTemplate/index.tsx b/packages/antd/src/templates/WrapIfAdditionalTemplate/index.tsx index 35e5b9dc18..dc299205bb 100644 --- a/packages/antd/src/templates/WrapIfAdditionalTemplate/index.tsx +++ b/packages/antd/src/templates/WrapIfAdditionalTemplate/index.tsx @@ -1,8 +1,5 @@ import { FocusEvent } from 'react'; -import Col from 'antd/lib/col'; -import Form from 'antd/lib/form'; -import Input from 'antd/lib/input'; -import Row from 'antd/lib/row'; +import { Col, Row, Form, Input } from 'antd'; import { ADDITIONAL_PROPERTY_FLAG, UI_OPTIONS_KEY, diff --git a/packages/antd/src/widgets/AltDateWidget/index.tsx b/packages/antd/src/widgets/AltDateWidget/index.tsx index 67adc4e3c6..1b01260370 100644 --- a/packages/antd/src/widgets/AltDateWidget/index.tsx +++ b/packages/antd/src/widgets/AltDateWidget/index.tsx @@ -1,7 +1,5 @@ import { MouseEvent, useEffect, useState } from 'react'; -import Button from 'antd/lib/button'; -import Col from 'antd/lib/col'; -import Row from 'antd/lib/row'; +import { Row, Col, Button } from 'antd'; import { ariaDescribedByIds, getDateElementProps, diff --git a/packages/antd/src/widgets/CheckboxWidget/index.tsx b/packages/antd/src/widgets/CheckboxWidget/index.tsx index a477501707..fb08a5c094 100644 --- a/packages/antd/src/widgets/CheckboxWidget/index.tsx +++ b/packages/antd/src/widgets/CheckboxWidget/index.tsx @@ -1,5 +1,5 @@ import { FocusEvent } from 'react'; -import Checkbox, { CheckboxChangeEvent } from 'antd/lib/checkbox'; +import { Checkbox, CheckboxProps } from 'antd'; import { ariaDescribedByIds, labelValue, @@ -23,7 +23,7 @@ export default function CheckboxWidget< const { autofocus, disabled, formContext, id, label, hideLabel, onBlur, onChange, onFocus, readonly, value } = props; const { readonlyAsDisabled = true } = formContext as GenericObjectType; - const handleChange = ({ target }: CheckboxChangeEvent) => onChange(target.checked); + const handleChange: NonNullable = ({ target }) => onChange(target.checked); const handleBlur = ({ target }: FocusEvent) => onBlur(id, target.checked); diff --git a/packages/antd/src/widgets/CheckboxesWidget/index.tsx b/packages/antd/src/widgets/CheckboxesWidget/index.tsx index a6d8fd5a8b..6fd6f8e8b8 100644 --- a/packages/antd/src/widgets/CheckboxesWidget/index.tsx +++ b/packages/antd/src/widgets/CheckboxesWidget/index.tsx @@ -1,5 +1,5 @@ import { FocusEvent } from 'react'; -import Checkbox from 'antd/lib/checkbox'; +import { Checkbox } from 'antd'; import { ariaDescribedByIds, enumOptionsIndexForValue, diff --git a/packages/antd/src/widgets/DateTimeWidget/index.tsx b/packages/antd/src/widgets/DateTimeWidget/index.tsx index d59d51ba74..530680bf77 100644 --- a/packages/antd/src/widgets/DateTimeWidget/index.tsx +++ b/packages/antd/src/widgets/DateTimeWidget/index.tsx @@ -8,7 +8,7 @@ import { WidgetProps, } from '@rjsf/utils'; -import DatePicker from 'antd/lib/date-picker'; +import { DatePicker } from 'antd'; const DATE_PICKER_STYLE = { width: '100%', diff --git a/packages/antd/src/widgets/DateWidget/index.tsx b/packages/antd/src/widgets/DateWidget/index.tsx index 62e470350f..99c9b8a2dd 100644 --- a/packages/antd/src/widgets/DateWidget/index.tsx +++ b/packages/antd/src/widgets/DateWidget/index.tsx @@ -8,7 +8,7 @@ import { GenericObjectType, } from '@rjsf/utils'; -import DatePicker from 'antd/lib/date-picker'; +import { DatePicker } from 'antd'; const DATE_PICKER_STYLE = { width: '100%', diff --git a/packages/antd/src/widgets/PasswordWidget/index.tsx b/packages/antd/src/widgets/PasswordWidget/index.tsx index 88bbfe29a1..1f9b1d78a2 100644 --- a/packages/antd/src/widgets/PasswordWidget/index.tsx +++ b/packages/antd/src/widgets/PasswordWidget/index.tsx @@ -1,5 +1,5 @@ import { ChangeEvent, FocusEvent } from 'react'; -import Input from 'antd/lib/input'; +import { Input } from 'antd'; import { ariaDescribedByIds, FormContextType, diff --git a/packages/antd/src/widgets/RadioWidget/index.tsx b/packages/antd/src/widgets/RadioWidget/index.tsx index 574c459916..64ab3f4f85 100644 --- a/packages/antd/src/widgets/RadioWidget/index.tsx +++ b/packages/antd/src/widgets/RadioWidget/index.tsx @@ -1,5 +1,5 @@ import { FocusEvent } from 'react'; -import Radio, { RadioChangeEvent } from 'antd/lib/radio'; +import { Radio, RadioChangeEvent } from 'antd'; import { ariaDescribedByIds, enumOptionsIndexForValue, diff --git a/packages/antd/src/widgets/RangeWidget/index.tsx b/packages/antd/src/widgets/RangeWidget/index.tsx index 153185960b..4e3e60625f 100644 --- a/packages/antd/src/widgets/RangeWidget/index.tsx +++ b/packages/antd/src/widgets/RangeWidget/index.tsx @@ -1,4 +1,4 @@ -import Slider from 'antd/lib/slider'; +import { Slider } from 'antd'; import { ariaDescribedByIds, rangeSpec, diff --git a/packages/antd/src/widgets/SelectWidget/index.tsx b/packages/antd/src/widgets/SelectWidget/index.tsx index ba20dbfa9c..2f6937b773 100644 --- a/packages/antd/src/widgets/SelectWidget/index.tsx +++ b/packages/antd/src/widgets/SelectWidget/index.tsx @@ -1,4 +1,4 @@ -import Select, { DefaultOptionType } from 'antd/lib/select'; +import { Select, SelectProps } from 'antd'; import { ariaDescribedByIds, enumOptionsIndexForValue, @@ -48,7 +48,7 @@ export default function SelectWidget< const handleFocus = () => onFocus(id, enumOptionsValueForIndex(value, enumOptions, emptyValue)); - const filterOption = (input: string, option?: DefaultOptionType) => { + const filterOption: SelectProps['filterOption'] = (input, option) => { if (option && isString(option.label)) { // labels are strings in this context return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0; diff --git a/packages/antd/src/widgets/TextareaWidget/index.tsx b/packages/antd/src/widgets/TextareaWidget/index.tsx index 71aac14377..95dc961f24 100644 --- a/packages/antd/src/widgets/TextareaWidget/index.tsx +++ b/packages/antd/src/widgets/TextareaWidget/index.tsx @@ -1,5 +1,5 @@ import { ChangeEvent, FocusEvent } from 'react'; -import Input from 'antd/lib/input'; +import { Input } from 'antd'; import { ariaDescribedByIds, FormContextType,