Fix: use correct ConfigProvider context by using named imports (rjsf-…

…team#4132) Co-authored-by: Mehdi Salem <mehdi.salem@qt.io> Co-authored-by: Heath C <51679588+heath-freenome@users.noreply.github.com>
heath-freenome · Mar 22, 2024 · 88a9407 · 88a9407
1 parent baffbf1
commit 88a9407
Show file tree

Hide file tree

Showing 21 changed files with 159 additions and 183 deletions.
diff --git 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 `"\</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).
 
+## @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
@@ -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
@@ -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 (
-    <ConfigConsumer>
-      {(configProps: ConfigConsumerProps) => {
-        const { getPrefixCls } = configProps;
-        const prefixCls = getPrefixCls('form');
-        const labelClsBasic = `${prefixCls}-item-label`;
-        const labelColClassName = classNames(
-          labelClsBasic,
-          labelAlign === 'left' && `${labelClsBasic}-left`
-          // labelCol.className,
-        );
+    <fieldset className={className} id={idSchema.$id}>
+      <Row gutter={rowGutter}>
+        {(uiOptions.title || title) && (
+          <Col className={labelColClassName} span={24}>
+            <ArrayFieldTitleTemplate
+              idSchema={idSchema}
+              required={required}
+              title={uiOptions.title || title}
+              schema={schema}
+              uiSchema={uiSchema}
+              registry={registry}
+            />
+          </Col>
+        )}
+        {(uiOptions.description || schema.description) && (
+          <Col span={24} style={DESCRIPTION_COL_STYLE}>
+            <ArrayFieldDescriptionTemplate
+              description={uiOptions.description || schema.description}
+              idSchema={idSchema}
+              schema={schema}
+              uiSchema={uiSchema}
+              registry={registry}
+            />
+          </Col>
+        )}
+        <Col className='row array-item-list' span={24}>
+          {items &&
+            items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType<T, S, F>) => (
+              <ArrayFieldItemTemplate key={key} {...itemProps} />
+            ))}
+        </Col>
 
-        return (
-          <fieldset className={className} id={idSchema.$id}>
-            <Row gutter={rowGutter}>
-              {(uiOptions.title || title) && (
-                <Col className={labelColClassName} span={24}>
-                  <ArrayFieldTitleTemplate
-                    idSchema={idSchema}
-                    required={required}
-                    title={uiOptions.title || title}
-                    schema={schema}
-                    uiSchema={uiSchema}
-                    registry={registry}
-                  />
-                </Col>
-              )}
-              {(uiOptions.description || schema.description) && (
-                <Col span={24} style={DESCRIPTION_COL_STYLE}>
-                  <ArrayFieldDescriptionTemplate
-                    description={uiOptions.description || schema.description}
-                    idSchema={idSchema}
-                    schema={schema}
-                    uiSchema={uiSchema}
-                    registry={registry}
-                  />
-                </Col>
-              )}
-              <Col className='row array-item-list' span={24}>
-                {items &&
-                  items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType<T, S, F>) => (
-                    <ArrayFieldItemTemplate key={key} {...itemProps} />
-                  ))}
+        {canAdd && (
+          <Col span={24}>
+            <Row gutter={rowGutter} justify='end'>
+              <Col flex='192px'>
+                <AddButton
+                  className='array-item-add'
+                  disabled={disabled || readonly}
+                  onClick={onAddClick}
+                  uiSchema={uiSchema}
+                  registry={registry}
+                />
               </Col>
-
-              {canAdd && (
-                <Col span={24}>
-                  <Row gutter={rowGutter} justify='end'>
-                    <Col flex='192px'>
-                      <AddButton
-                        className='array-item-add'
-                        disabled={disabled || readonly}
-                        onClick={onAddClick}
-                        uiSchema={uiSchema}
-                        registry={registry}
-                      />
-                    </Col>
-                  </Row>
-                </Col>
-              )}
             </Row>
-          </fieldset>
-        );
-      }}
-    </ConfigConsumer>
+          </Col>
+        )}
+      </Row>
+    </fieldset>
   );
 }
diff --git 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
@@ -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
@@ -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
@@ -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<T = any, S extends StrictRJSFSchema = RJSFSch
   return (
     <Button
       onClick={onClick as MouseEventHandler<HTMLAnchorElement> & MouseEventHandler<HTMLButtonElement>}
-      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
@@ -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 (
-    <ConfigConsumer>
-      {(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 (
-          <fieldset id={idSchema.$id}>
-            <Row gutter={rowGutter}>
-              {title && (
-                <Col className={labelColClassName} span={24}>
-                  <TitleFieldTemplate
-                    id={titleId<T>(idSchema)}
-                    title={title}
-                    required={required}
-                    schema={schema}
-                    uiSchema={uiSchema}
-                    registry={registry}
-                  />
-                </Col>
-              )}
-              {description && (
-                <Col span={24} style={DESCRIPTION_COL_STYLE}>
-                  <DescriptionFieldTemplate
-                    id={descriptionId<T>(idSchema)}
-                    description={description}
-                    schema={schema}
-                    uiSchema={uiSchema}
-                    registry={registry}
-                  />
-                </Col>
-              )}
-              {properties
-                .filter((e) => !e.hidden)
-                .map((element: ObjectFieldTemplatePropertyType) => (
-                  <Col key={element.name} span={calculateColSpan(element)}>
-                    {element.content}
-                  </Col>
-                ))}
-            </Row>
+  return (
+    <fieldset id={idSchema.$id}>
+      <Row gutter={rowGutter}>
+        {title && (
+          <Col className={labelColClassName} span={24}>
+            <TitleFieldTemplate
+              id={titleId<T>(idSchema)}
+              title={title}
+              required={required}
+              schema={schema}
+              uiSchema={uiSchema}
+              registry={registry}
+            />
+          </Col>
+        )}
+        {description && (
+          <Col span={24} style={DESCRIPTION_COL_STYLE}>
+            <DescriptionFieldTemplate
+              id={descriptionId<T>(idSchema)}
+              description={description}
+              schema={schema}
+              uiSchema={uiSchema}
+              registry={registry}
+            />
+          </Col>
+        )}
+        {properties
+          .filter((e) => !e.hidden)
+          .map((element: ObjectFieldTemplatePropertyType) => (
+            <Col key={element.name} span={calculateColSpan(element)}>
+              {element.content}
+            </Col>
+          ))}
+      </Row>
 
-            {canExpand(schema, uiSchema, formData) && (
-              <Col span={24}>
-                <Row gutter={rowGutter} justify='end'>
-                  <Col flex='192px'>
-                    <AddButton
-                      className='object-property-expand'
-                      disabled={disabled || readonly}
-                      onClick={onAddClick(schema)}
-                      uiSchema={uiSchema}
-                      registry={registry}
-                    />
-                  </Col>
-                </Row>
-              </Col>
-            )}
-          </fieldset>
-        );
-      }}
-    </ConfigConsumer>
+      {canExpand(schema, uiSchema, formData) && (
+        <Col span={24}>
+          <Row gutter={rowGutter} justify='end'>
+            <Col flex='192px'>
+              <AddButton
+                className='object-property-expand'
+                disabled={disabled || readonly}
+                onClick={onAddClick(schema)}
+                uiSchema={uiSchema}
+                registry={registry}
+              />
+            </Col>
+          </Row>
+        </Col>
+      )}
+    </fieldset>
   );
 }
diff --git 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<ButtonProps['type']>;
+
 /** 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
@@ -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<T = any, S extends StrictRJSFSchema = RJSFSch
     }
   };
 
-  return title ? (
-    <ConfigConsumer>
-      {(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 (
-          <label
-            className={labelClassName}
-            htmlFor={id}
-            onClick={handleLabelClick}
-            title={typeof title === 'string' ? title : ''}
-          >
-            {labelChildren}
-          </label>
-        );
-      }}
-    </ConfigConsumer>
+  return title ? (
+    <label
+      className={labelClassName}
+      htmlFor={id}
+      onClick={handleLabelClick}
+      title={typeof title === 'string' ? title : ''}
+    >
+      {labelChildren}
+    </label>
   ) : null;
 }