diff --git a/CHANGELOG.md b/CHANGELOG.md index 8fcd27cae9..ae754fa684 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -34,7 +34,7 @@ should change the heading of the (upcoming) version to include a major version b ## @rjsf/core - Updated the usage of the `ButtonTemplates` to pass the new required `registry` prop, filtering it out in the actual implementations before spreading props, fixing - [#3314](https://github.com/rjsf-team/react-jsonschema-form/issues/3314) - Also, passed `registry` into the `SubmitButton` inside of the `Form` as part of this fix -- Updated `ArrayField` to pass the new `totalItems` prop to the `ArrayFieldItemTemplate` instances, fixing [#3315](https://github.com/rjsf-team/react-jsonschema-form/issues/3315) +- Updated `ArrayField` to pass the new `totalItems` and `canAdd` props to the `ArrayFieldItemTemplate` instances, fixing [#3315](https://github.com/rjsf-team/react-jsonschema-form/issues/3315) - Also refactored the near duplicate logic for `onAddClick` and `onAddIndexClick` into a new `_handleAddClick()` function, fixing [#3316](https://github.com/rjsf-team/react-jsonschema-form/issues/3316) - Fix passing of generic types to a few helper methods, partially fixing [#3072](https://github.com/rjsf-team/react-jsonschema-form/issues/3072) @@ -59,7 +59,7 @@ should change the heading of the (upcoming) version to include a major version b ## @rjsf/utils - Updated the `SubmitButtonProps` and `IconButtonProps` to add required `registry` prop, fixing - [#3314](https://github.com/rjsf-team/react-jsonschema-form/issues/3314) -- Updated the `ArrayFieldTemplateItemType` to add the new `totalItems` prop, fixing [#3315](https://github.com/rjsf-team/react-jsonschema-form/issues/3315) +- Updated the `ArrayFieldTemplateItemType` to add the new `totalItems` and `canAdd` props, fixing [#3315](https://github.com/rjsf-team/react-jsonschema-form/issues/3315) ## Dev / docs / playground - Fixed the documentation for `ArrayFieldItemTemplate`, `SubmitButtonProps` and `IconButtonProps` as part of the fix for [#3314](https://github.com/rjsf-team/react-jsonschema-form/issues/3314) and [#3315](https://github.com/rjsf-team/react-jsonschema-form/issues/3315) diff --git a/docs/advanced-customization/custom-templates.md b/docs/advanced-customization/custom-templates.md index c0427ca6d1..3e5fec0d6f 100644 --- a/docs/advanced-customization/custom-templates.md +++ b/docs/advanced-customization/custom-templates.md @@ -212,6 +212,7 @@ The following props are passed to each `ArrayFieldItemTemplate`: - `children`: The html for the item's content. - `className`: The className string. - `disabled`: A boolean value stating if the array item is disabled. +- `canAdd`: A boolean value stating whether new items can be added to the array. - `hasMoveDown`: A boolean value stating whether the array item can be moved down. - `hasMoveUp`: A boolean value stating whether the array item can be moved up. - `hasRemove`: A boolean value stating whether the array item can be removed. diff --git a/packages/core/src/components/fields/ArrayField.tsx b/packages/core/src/components/fields/ArrayField.tsx index 6b0b2c9d8e..82a541ed43 100644 --- a/packages/core/src/components/fields/ArrayField.tsx +++ b/packages/core/src/components/fields/ArrayField.tsx @@ -443,8 +443,9 @@ class ArrayField< : ({} as S); const itemsSchema: S = schemaUtils.retrieveSchema(_schemaItems); const formData = keyedToPlainFormData(this.state.keyedFormData); + const canAdd = this.canAddItem(formData); const arrayProps: ArrayFieldTemplateProps = { - canAdd: this.canAddItem(formData), + canAdd, items: keyedFormData.map((keyedItem, index) => { const { key, item } = keyedItem; // While we are actually dealing with a single item of type T, the types require a T[], so cast @@ -465,6 +466,7 @@ class ArrayField< key, index, name: name && `${name}-${index}`, + canAdd, canMoveUp: index > 0, canMoveDown: index < formData.length - 1, itemSchema, @@ -690,8 +692,9 @@ class ArrayField< } // These are the props passed into the render function + const canAdd = this.canAddItem(items) && !!additionalSchema; const arrayProps: ArrayFieldTemplateProps = { - canAdd: this.canAddItem(items) && !!additionalSchema, + canAdd, className: "field field-array field-array-fixed-items", disabled, idSchema, @@ -726,6 +729,7 @@ class ArrayField< key, index, name: name && `${name}-${index}`, + canAdd, canRemove: additional, canMoveUp: index >= itemSchemas.length + 1, canMoveDown: additional && index < items.length - 1, @@ -769,6 +773,7 @@ class ArrayField< key: string; index: number; name: string; + canAdd: boolean; canRemove?: boolean; canMoveUp?: boolean; canMoveDown?: boolean; @@ -787,6 +792,7 @@ class ArrayField< key, index, name, + canAdd, canRemove = true, canMoveUp = true, canMoveDown = true, @@ -853,6 +859,7 @@ class ArrayField< ), className: "array-item", disabled, + canAdd, hasToolbar: has.toolbar, hasMoveUp: has.moveUp, hasMoveDown: has.moveDown, diff --git a/packages/utils/src/types.ts b/packages/utils/src/types.ts index c79b2353d0..4c05a7530f 100644 --- a/packages/utils/src/types.ts +++ b/packages/utils/src/types.ts @@ -500,6 +500,8 @@ export type ArrayFieldTemplateItemType< className: string; /** A boolean value stating if the array item is disabled */ disabled: boolean; + /** A boolean value stating whether new items can be added to the array */ + canAdd: boolean; /** A boolean value stating whether the array item can be moved down */ hasMoveDown: boolean; /** A boolean value stating whether the array item can be moved up */