-
Notifications
You must be signed in to change notification settings - Fork 2.3k
Chore: Convert ArrayField to functional components #4808
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
heath-freenome
merged 9 commits into
rjsf-team:main
from
heath-freenome:array-field-functional-component
Oct 18, 2025
Merged
Chore: Convert ArrayField to functional components #4808
heath-freenome
merged 9 commits into
rjsf-team:main
from
heath-freenome:array-field-functional-component
Oct 18, 2025
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
8 tasks
heath-freenome
commented
Oct 17, 2025
heath-freenome
commented
Oct 17, 2025
heath-freenome
commented
Oct 17, 2025
heath-freenome
commented
Oct 17, 2025
heath-freenome
commented
Oct 17, 2025
heath-freenome
commented
Oct 17, 2025
heath-freenome
commented
Oct 17, 2025
nickgros
reviewed
Oct 17, 2025
heath-freenome
commented
Oct 17, 2025
heath-freenome
commented
Oct 17, 2025
heath-freenome
commented
Oct 17, 2025
parentUiSchema?: UiSchema<T, S, F>; | ||
}; | ||
|
||
/** |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Since we've made such a large set of breaking changes, I figured we don't need to maintain this anymore
5525b75
to
ac03fa2
Compare
nickgros
approved these changes
Oct 18, 2025
The work to convert `ArrayField` to stateless funcitonal components with some breaking changes - In `@rjsf/utils`: - BREAKING CHANGE: Updated `ArrayFieldItemButtonsTemplateType` to replace the `onAddIndexClick()`, `onCopyIndexClick()`, `onDropIndexClick()` and `onReorderClick()` callback-generator props with the `onAddItem()`, `onCopyItem()`, `onMoveUpItem()`, `onMoveDownItem()` and `onRemoveItem()` callback props - BREAKING CHANGE: Updated `ArrayFieldItemTemplateType` to change `key: string` to `itemKey: string` to avoid a name collision with React - BREAKING CHANGE: Updated `ArrayFieldTemplateProps` to change the type of the `items` prop from `ArrayFieldItemTemplateType<T, S, F>[]` to `ReactElement[]` - In `@rjsf/core`: - Updated `ArrayField` to refactor code from a class component to seven stateless functional components, replacing the 4 generator-props with the 5 memoized props mentioned in the `@rjsf/utils` changes - BREAKING CHANGE: The refactor included rendering the `ArrayFieldItemTemplate` directly by the `ArrayField` rather than deferring it to the `ArrayFieldTemplate` - Updated the `ArrayField` tests to adjust for the rendering change AND to remove 2 tests due to them no longer being valid - BREAKING CHANGE: Updated `ArrayFieldTemplate` to remove the `ArrayFieldItemTemplate` render in favor of simply using `items` due to `ArrayField` changes - BREAKING CHANGE: Updated `ArrayFieldItemButtonsTemplate` to replace the old callback-generator functions with the new memoizable callback functions - In the rest of the themes, updated `ArrayFieldTemplate` to remove the `ArrayFieldItemTemplate` render in favor of simply using `items` due to `ArrayField` changes - Updated the `customArray` sample to refactor out a `ArrayFieldItemButtonsTemplate` - Updated the `custom-templates.md` documentation to reflect the `ArrayField` conversion changes - Updated the `v6.x upgrade guide.md` documentation to add the BREAKING CHANGES to the `ArrayFieldTemplateProps`, `ArrayFieldItemTemplateType` and `ArrayFieldItemButtonsTemplateType` - Updated the `CHANGELOG.md` accordingly # Conflicts: # CHANGELOG.md # packages/core/src/components/fields/ArrayField.tsx
… root level via `onChange` when there aren't
6bbd965
to
6c66078
Compare
Co-authored-by: Nick Grosenbacher <[email protected]>
nickgros
reviewed
Oct 18, 2025
The following new types were added to `@rjsf/utils`: | ||
|
||
- `ArrayFieldItemTemplateType`: The properties of each element in the ArrayFieldTemplateProps.items array. NOTE: `ArrayFieldTemplateItemType` is an alias to this type | ||
- `ArrayFieldItemTemplateProps`: The properties of each element in the ArrayFieldTemplateProps.items array. NOTE: `ArrayFieldTemplateItemType` is an alias to this type |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Suggested change
- `ArrayFieldItemTemplateProps`: The properties of each element in the ArrayFieldTemplateProps.items array. NOTE: `ArrayFieldTemplateItemType` is an alias to this type | |
- `ArrayFieldItemTemplateProps`: The properties of each element in the ArrayFieldTemplateProps.items array. |
nickgros
added a commit
to nickgros/react-jsonschema-form
that referenced
this pull request
Oct 18, 2025
LayoutGridField: - Deep compare memoize the fieldPathId - Move helper functions in LayoutGridField - Update docs comments in LayoutGridField - Attach TEST_IDS to LayoutGridField function Additionally: - Update migration guide per rjsf-team#4808
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Reasons for making this change
The work to convert
ArrayField
to stateless funcitonal components with some breaking changes@rjsf/utils
:ArrayFieldItemButtonsTemplateType
to replace theonAddIndexClick()
,onCopyIndexClick()
,onDropIndexClick()
andonReorderClick()
callback-generator props with theonAddItem()
,onCopyItem()
,onMoveUpItem()
,onMoveDownItem()
andonRemoveItem()
callback propsArrayFieldItemTemplateType
to changekey: string
toitemKey: string
to avoid a name collision with ReactArrayFieldTemplateProps
to change the type of theitems
prop fromArrayFieldItemTemplateType<T, S, F>[]
toReactElement[]
@rjsf/core
:ArrayField
to refactor code from a class component to seven stateless functional components, replacing the 4 generator-props with the 5 memoized props mentioned in the@rjsf/utils
changesArrayFieldItemTemplate
directly by theArrayField
rather than deferring it to theArrayFieldTemplate
ArrayField
tests to adjust for the rendering change AND to remove 2 tests due to them no longer being validArrayFieldTemplate
to remove theArrayFieldItemTemplate
render in favor of simply usingitems
due toArrayField
changesArrayFieldItemButtonsTemplate
to replace the old callback-generator functions with the new memoizable callback functionsForm
to avoid getting errors being reported at the root level viaonChange
when there aren'tArrayFieldTemplate
to remove theArrayFieldItemTemplate
render in favor of simply usingitems
due toArrayField
changes (BREAKING CHANGES)customArray
sample to refactor out aArrayFieldItemButtonsTemplate
custom-templates.md
documentation to reflect theArrayField
conversion changesv6.x upgrade guide.md
documentation to add the BREAKING CHANGES toArrayFieldTemplateProps
,ArrayFieldItemTemplateType
andArrayFieldItemButtonsTemplateType
CHANGELOG.md
accordinglyChecklist
npx nx run-many --target=build --exclude=@rjsf/docs && npm run test:update
to update snapshots, if needed.