From 355fc92c20766cff1edd7149333d3b1f5918989d Mon Sep 17 00:00:00 2001 From: Heath C <51679588+heath-freenome@users.noreply.github.com> Date: Thu, 22 Sep 2022 11:15:34 -0700 Subject: [PATCH] fix: #3131 ArrayField fallback to SchemaField (#3136) * fix: #3131 ArrayField fallback to SchemaField - Updated `ArrayField` to fallback to `SchemaField` when `ArraySchemaField` was not defined in fields - Updated the test to show that the `SchemaField` fallback is working - Updated the `fields/index.ts` to remove the definition of `ArraySchemaField` and replace it with a comment - Updated the `custom-widgets-fields.md` file to clarify the `ArraySchemaField` docs based on this improvement - Updated the `CHANGELOG.md` accordingly * - Responded to reviewer feedback --- CHANGELOG.md | 2 ++ docs/advanced-customization/custom-widgets-fields.md | 4 ++-- packages/core/src/components/fields/ArrayField.tsx | 5 +++-- packages/core/src/components/fields/index.ts | 2 +- packages/core/test/ArrayField_test.js | 10 +++------- 5 files changed, 11 insertions(+), 12 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 38d5294721..ef293fdbb0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -34,6 +34,7 @@ should change the heading of the (upcoming) version to include a major version b - Implemented programmatic validation via new `validateForm()` method on `Form`, fixing (https://github.com/rjsf-team/react-jsonschema-form/issues/2755, https://github.com/rjsf-team/react-jsonschema-form/issues/2552, https://github.com/rjsf-team/react-jsonschema-form/issues/2381, https://github.com/rjsf-team/react-jsonschema-form/issues/2343, https://github.com/rjsf-team/react-jsonschema-form/issues/1006, https://github.com/rjsf-team/react-jsonschema-form/issues/246) - Renamed `WithThemeProps` to `ThemeProps` to prevent another breaking-change by returning the type back to the name it had in version 4 - Pass `uiSchema` appropriately to all of the `IconButton`s, `ArrayFieldItemTemplate` and `WrapIfAdditional` components, fixing (https://github.com/rjsf-team/react-jsonschema-form/issues/3130) +- Updated `ArrayField` to fall back to `SchemaField` if `ArraySchemaField` is not defined, fixing (https://github.com/rjsf-team/react-jsonschema-form/issues/3131) ## @rjsf/fluent-ui - Updated `Theme` to use the renamed `ThemeProps` from `@rjsf/core` @@ -62,6 +63,7 @@ should change the heading of the (upcoming) version to include a major version b - Fixed the `chakra-ui` custom `uiSchema` documentation to make it clear they work on a per-field basis, fixing (https://github.com/rjsf-team/react-jsonschema-form/issues/2865) - Added `formElement` breaking-change documentation to the `5.x upgrade guide.md` - Replace Webpack with Vite +- Updated documentation for `ArraySchemaField` to better represent the updated implementation, fixing (https://github.com/rjsf-team/react-jsonschema-form/issues/3131) # 5.0.0-beta.8 diff --git a/docs/advanced-customization/custom-widgets-fields.md b/docs/advanced-customization/custom-widgets-fields.md index 6dbaccfe97..377befe779 100644 --- a/docs/advanced-customization/custom-widgets-fields.md +++ b/docs/advanced-customization/custom-widgets-fields.md @@ -356,8 +356,8 @@ Props passed to a custom SchemaField are the same as [the ones passed to a custo ### Custom ArraySchemaField Everything that was mentioned above for a `Custom SchemaField` applies, but this is only used to render the Array item `children` that are then passed to the `ArrayFieldItemTemplate`. -By default, `ArraySchemaField` uses the main `SchemaField` implementation. -If you want to customize how the individual items for an array are rendered, override the `ArraySchemaField`. +By default, `ArraySchemaField` is not actually implemented in the `fields` list since `ArrayField` falls back to `SchemaField` if `ArraySchemaField` is not provided. +If you want to customize how the individual items for an array are rendered, provide your implementation of `ArraySchemaField` as a `fields` override. ```jsx import validator from '@rjsf/validator-ajv6'; diff --git a/packages/core/src/components/fields/ArrayField.tsx b/packages/core/src/components/fields/ArrayField.tsx index 14bd27ed8d..1014044f62 100644 --- a/packages/core/src/components/fields/ArrayField.tsx +++ b/packages/core/src/components/fields/ArrayField.tsx @@ -805,8 +805,9 @@ class ArrayField extends Component< formContext, } = this.props; const { - fields: { ArraySchemaField }, + fields: { ArraySchemaField, SchemaField }, } = registry; + const ItemSchemaField = ArraySchemaField || SchemaField; const { orderable = true, removable = true } = getUiOptions( uiSchema ); @@ -820,7 +821,7 @@ class ArrayField extends Component< return { children: ( - { }, ], }; - it("should pass form context to schema field for the root", () => { + it("should pass form context to schema field for the root AND array schema fields", () => { const formContext = { root: "root-id", root_0: "root_0-id", @@ -2214,13 +2214,9 @@ describe("ArrayField", () => { }); const codeBlocks = node.querySelectorAll("code"); - expect(codeBlocks).to.have.length(1); + expect(codeBlocks).to.have.length(3); Object.keys(formContext).forEach((key) => { - if (key === "root") { - expect(node.querySelector(`code#${formContext[key]}`)).to.exist; - } else { - expect(node.querySelector(`code#${formContext[key]}`)).to.not.exist; - } + expect(node.querySelector(`code#${formContext[key]}`)).to.exist; }); }); it("should pass form context to array schema field only", () => {