From 6c08a149f82960db1127e8d3a502a1ca60942548 Mon Sep 17 00:00:00 2001 From: Heath Chiavettone Date: Fri, 7 Feb 2025 10:24:28 -0800 Subject: [PATCH 1/4] Added new templates, utility function and refactored ArrayFieldItemTemplate - In `@rjsf/utils`: - Refactored the `ArrayFieldItemTemplateType` to extract out all the button related props to `ArrayFieldItemButtonsTemplateType`, adding `buttonsProps: ArrayFieldItemButtonsTemplateType` as a new prop - Also created a deprecated alias type `ArrayFieldTemplateItemType` that points to `ArrayFieldItemTemplateType` for backwards compatibility - Added new `GridTemplateProps` type - Added two the following new, required props to `TemplatesType`: - `ArrayFieldItemButtonsTemplate: ComponentType>;` - `GridTemplate: ComponentType` - Added a new `buttonId(id: IdSchema | string, btn: 'add' | 'copy' | 'moveDown' | 'moveUp' | 'remove')` used to generate consistent ids for RJSF buttons - In `@rjsf/core`: - Updated `ArrayField` to provide the `buttonsProps` to the `ArrayFieldItemTemplateType` - Added `ArrayFieldItemButtonsTemplate` component as a refactor of all the common buttons code from all the `ArrayFieldItemTemplate` implementations, adding a unique id using the `buttonId()` function - Refactored `ArrayFieldItemTemplate` to use the new `ArrayFieldItemButtonsTemplate` - Updated the `ArrayFieldTemplate`, `ObjectFieldTemplate`, and `WrapIfAdditionalTemplate` to a unique id using the `buttonId()` function and adding consistent marker classes - All other themes: - Refactored `ArrayFieldItemTemplate` to use the new `ArrayFieldItemButtonsTemplate` - Updated the `ArrayFieldTemplate`, `ObjectFieldTemplate`, and `WrapIfAdditionalTemplate` to a unique id using the `buttonId()` function and adding consistent marker classes - Updated the playground to remove `fluent-ui` theme - Updated the `custom-templates.md` documentation for the changes to the `ArrayFieldTemplateItem` and add the two new templates - Updated the `utility-functions.md` documentation to add the `buttonId()` function - Added the `v6.x upgrade guide.md` documentation - Updated `CHANGELOG_V6.md` accordingly --- CHANGELOG_v6.md | 63 +- .../ArrayFieldItemTemplate/index.tsx | 70 +- .../templates/ArrayFieldTemplate/index.tsx | 4 +- .../templates/ObjectFieldTemplate/index.tsx | 2 + .../WrapIfAdditionalTemplate/index.tsx | 2 + .../test/__snapshots__/Array.test.tsx.snap | 370 +-- .../test/__snapshots__/Object.test.tsx.snap | 18 + .../ArrayFieldItemTemplate.tsx | 72 +- .../ArrayFieldTemplate/ArrayFieldTemplate.tsx | 2 + .../ObjectFieldTemplate.tsx | 2 + .../WrapIfAdditionalTemplate.tsx | 3 + .../test/__snapshots__/Array.test.tsx.snap | 130 +- .../test/__snapshots__/Object.test.tsx.snap | 36 +- .../core/src/components/fields/ArrayField.tsx | 28 +- .../ArrayFieldItemButtonsTemplate.tsx | 85 + .../templates/ArrayFieldItemTemplate.tsx | 71 +- .../templates/ArrayFieldTemplate.tsx | 4 +- .../src/components/templates/GridTemplate.tsx | 17 + .../templates/ObjectFieldTemplate.tsx | 2 + .../templates/WrapIfAdditionalTemplate.tsx | 2 + .../core/src/components/templates/index.ts | 4 + packages/core/test/ArrayField.test.jsx | 129 +- .../core/test/ArrayFieldTemplate.test.jsx | 4 +- .../__snapshots__/ArraySnap.test.jsx.snap | 360 +-- .../__snapshots__/ObjectSnap.test.jsx.snap | 9 + .../custom-templates.md | 150 +- .../docs/api-reference/utility-functions.md | 13 + .../migration-guides/v6.x upgrade guide.md | 72 + .../ArrayFieldItemTemplate.tsx | 68 +- .../ArrayFieldTemplate/ArrayFieldTemplate.tsx | 4 +- .../ObjectFieldTemplate.tsx | 2 + .../WrapIfAdditionalTemplate.tsx | 3 + .../test/__snapshots__/Array.test.tsx.snap | 130 +- .../test/__snapshots__/Object.test.tsx.snap | 36 +- .../ArrayFieldItemTemplate.tsx | 70 +- .../ArrayFieldTemplate/ArrayFieldTemplate.tsx | 4 +- .../ObjectFieldTemplate.tsx | 2 + .../WrapIfAdditionalTemplate.tsx | 3 + .../test/__snapshots__/Array.test.tsx.snap | 540 +--- .../test/__snapshots__/Object.test.tsx.snap | 54 +- .../ArrayFieldItemTemplate.tsx | 77 +- .../ArrayFieldTemplate/ArrayFieldTemplate.tsx | 2 + .../ObjectFieldTemplate.tsx | 2 + .../WrapIfAdditionalTemplate.tsx | 4 +- .../test/__snapshots__/Array.test.tsx.snap | 2250 +++++++---------- .../test/__snapshots__/Object.test.tsx.snap | 18 + .../ArrayFieldItemTemplate.tsx | 69 +- .../ArrayFieldTemplate/ArrayFieldTemplate.tsx | 12 +- .../ObjectFieldTemplate.tsx | 3 + .../WrapIfAdditionalTemplate.tsx | 2 + .../test/__snapshots__/Array.test.tsx.snap | 70 +- .../test/__snapshots__/Object.test.tsx.snap | 36 +- packages/utils/src/idGenerators.ts | 10 + packages/utils/src/index.ts | 12 +- packages/utils/src/types.ts | 71 +- packages/utils/test/getTemplate.test.ts | 4 + packages/utils/test/idGenerators.test.ts | 16 + 57 files changed, 2297 insertions(+), 3001 deletions(-) create mode 100644 packages/core/src/components/templates/ArrayFieldItemButtonsTemplate.tsx create mode 100644 packages/core/src/components/templates/GridTemplate.tsx create mode 100644 packages/docs/docs/migration-guides/v6.x upgrade guide.md diff --git a/CHANGELOG_v6.md b/CHANGELOG_v6.md index a4be21b930..72f07581cb 100644 --- a/CHANGELOG_v6.md +++ b/CHANGELOG_v6.md @@ -15,15 +15,70 @@ it according to semantic versioning. For example, if your PR adds a breaking cha should change the heading of the (upcoming) version to include a major version bump. --> +# 6.0.0-beta.2 + +## @rjsf/antd + +- Refactored `ArrayFieldItemTemplate` to use the new `ArrayFieldItemButtonsTemplate` +- Updated the `ArrayFieldTemplate`, `ObjectFieldTemplate`, and `WrapIfAdditionalTemplate` to a unique id using the `buttonId()` function and adding consistent marker classes + +## @rjsf/chakra-ui + +- Refactored `ArrayFieldItemTemplate` to use the new `ArrayFieldItemButtonsTemplate` +- Updated the `ArrayFieldTemplate`, `ObjectFieldTemplate`, and `WrapIfAdditionalTemplate` to a unique id using the `buttonId()` function and adding consistent marker classes + +## @rjsf/core + +- Updated `ArrayField` to provide the `buttonsProps` to the `ArrayFieldItemTemplateType` +- Added `ArrayFieldItemButtonsTemplate` component as a refactor of all the common buttons code from all the `ArrayFieldItemTemplate` implementations, adding a unique id using the `buttonId()` function +- Refactored `ArrayFieldItemTemplate` to use the new `ArrayFieldItemButtonsTemplate` +- Updated the `ArrayFieldTemplate`, `ObjectFieldTemplate`, and `WrapIfAdditionalTemplate` to a unique id using the `buttonId()` function and adding consistent marker classes + +## @rjsf/fluent-ui + +- BREAKING CHANGE: Deleted this theme in favor of `fluentui-rc` + +## @rjsf/fluentui-rc + +- Refactored `ArrayFieldItemTemplate` to use the new `ArrayFieldItemButtonsTemplate` +- Updated the `ArrayFieldTemplate`, `ObjectFieldTemplate`, and `WrapIfAdditionalTemplate` to a unique id using the `buttonId()` function and adding consistent marker classes + +## @rjsf/mui + +- Refactored `ArrayFieldItemTemplate` to use the new `ArrayFieldItemButtonsTemplate` +- Updated the `ArrayFieldTemplate`, `ObjectFieldTemplate`, and `WrapIfAdditionalTemplate` to a unique id using the `buttonId()` function and adding consistent marker classes + +## @rjsf/semantic-ui + +- Refactored `ArrayFieldItemTemplate` to use the new `ArrayFieldItemButtonsTemplate` +- Updated the `ArrayFieldTemplate`, `ObjectFieldTemplate`, and `WrapIfAdditionalTemplate` to a unique id using the `buttonId()` function and adding consistent marker classes + +## @rjsf/utils + +- BREAKING CHANGE: Refactored the `ArrayFieldItemTemplateType` to extract out all the button related props to `ArrayFieldItemButtonsTemplateType`, adding `buttonsProps: ArrayFieldItemButtonsTemplateType` as a new prop + - Also created a deprecated alias type `ArrayFieldTemplateItemType` that points to `ArrayFieldItemTemplateType` for backwards compatibility +- Added new `GridTemplateProps` type +- BREAKING CHANGE: Added two the following new, required props to `TemplatesType`: + - `ArrayFieldItemButtonsTemplate: ComponentType>;` + - `GridTemplate: ComponentType` +- Added a new `buttonId(id: IdSchema | string, btn: 'add' | 'copy' | 'moveDown' | 'moveUp' | 'remove')` used to generate consistent ids for RJSF buttons + +## Dev / docs / playground + +- Updated the playground to remove `fluent-ui` theme +- Updated the `custom-templates.md` documentation for the changes to the `ArrayFieldTemplateItem` and add the two new templates +- Updated the `utility-functions.md` documentation to add the `buttonId()` function +- Added the `v6.x upgrade guide.md` documentation + # 6.0.0-beta.1 ## @rjsf/bootstrap-4 -- Package has been replaced with `@rjsf/react-bootstrap`. `react-boostrap` v1 / Bootstrap 4 are no longer supported in RJSF v6. +- BREAKING CHANGE: Package has been replaced with `@rjsf/react-bootstrap`. `react-boostrap` v1 / Bootstrap 4 are no longer supported in RJSF v6. ## @rjsf/material-ui -- Removed `@rjsf/material-ui` package. Material UI v4 (`@material-ui/core`) has been deprecated since September 2021. To use Material UI v5 (`@mui/core`) with RJSF, please use the `@rjsf/mui` theme instead. +- BREAKING CHANGE: Removed `@rjsf/material-ui` package. Material UI v4 (`@material-ui/core`) has been deprecated since September 2021. To use Material UI v5 (`@mui/core`) with RJSF, please use the `@rjsf/mui` theme instead. ## @rjsf/react-bootstrap @@ -33,3 +88,7 @@ should change the heading of the (upcoming) version to include a major version b - IconButton: Remove deprecated `block` prop - RangeWidget: Use `FormRange` component - SelectWidget: Use new FormSelect component, remove `bsPrefix` prop to achieve correct styling + +## Dev / docs / playground + +- Updated the playground to remove `material-ui-4` theme and replace the `bootstrap-4` theme with `react-bootstrap` diff --git a/packages/antd/src/templates/ArrayFieldItemTemplate/index.tsx b/packages/antd/src/templates/ArrayFieldItemTemplate/index.tsx index 8faf4253b0..3dc5c12910 100644 --- a/packages/antd/src/templates/ArrayFieldItemTemplate/index.tsx +++ b/packages/antd/src/templates/ArrayFieldItemTemplate/index.tsx @@ -1,5 +1,12 @@ import { Button, Col, Row } from 'antd'; -import { ArrayFieldTemplateItemType, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils'; +import { + ArrayFieldTemplateItemType, + FormContextType, + getUiOptions, + getTemplate, + RJSFSchema, + StrictRJSFSchema, +} from '@rjsf/utils'; const BTN_GRP_STYLE = { width: '100%', @@ -11,30 +18,20 @@ const BTN_STYLE = { /** The `ArrayFieldItemTemplate` component is the template used to render an items of an array. * - * @param props - The `ArrayFieldTemplateItemType` props for the component + * @param props - The `ArrayFieldItemTemplateType` props for the component */ export default function ArrayFieldItemTemplate< T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any >(props: ArrayFieldTemplateItemType) { - const { - children, - disabled, - hasCopy, - hasMoveDown, - hasMoveUp, - hasRemove, - hasToolbar, - index, - onCopyIndexClick, - onDropIndexClick, - onReorderClick, - readonly, + const { children, buttonsProps, hasToolbar, index, registry, uiSchema } = props; + const uiOptions = getUiOptions(uiSchema); + const ArrayFieldItemButtonsTemplate = getTemplate<'ArrayFieldItemButtonsTemplate', T, S, F>( + 'ArrayFieldItemButtonsTemplate', registry, - uiSchema, - } = props; - const { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } = registry.templates.ButtonTemplates; + uiOptions + ); const { rowGutter = 24, toolbarAlign = 'top' } = registry.formContext; return ( @@ -44,42 +41,7 @@ export default function ArrayFieldItemTemplate< {hasToolbar && ( - {(hasMoveUp || hasMoveDown) && ( - - )} - {(hasMoveUp || hasMoveDown) && ( - - )} - {hasCopy && ( - - )} - {hasRemove && ( - - )} + )} diff --git a/packages/antd/src/templates/ArrayFieldTemplate/index.tsx b/packages/antd/src/templates/ArrayFieldTemplate/index.tsx index 7cc8b82af5..5af3dc5f56 100644 --- a/packages/antd/src/templates/ArrayFieldTemplate/index.tsx +++ b/packages/antd/src/templates/ArrayFieldTemplate/index.tsx @@ -7,6 +7,7 @@ import { GenericObjectType, RJSFSchema, StrictRJSFSchema, + buttonId, } from '@rjsf/utils'; import classNames from 'classnames'; import { Col, Row, ConfigProvider } from 'antd'; @@ -18,7 +19,7 @@ const DESCRIPTION_COL_STYLE = { /** The `ArrayFieldTemplate` component is the template used to render all items in an array. * - * @param props - The `ArrayFieldTemplateItemType` props for the component + * @param props - The `ArrayFieldItemTemplateType` props for the component */ export default function ArrayFieldTemplate< T = any, @@ -109,6 +110,7 @@ export default function ArrayFieldTemplate< (idSchema, 'add')} className='array-item-add' disabled={disabled || readonly} onClick={onAddClick} diff --git a/packages/antd/src/templates/ObjectFieldTemplate/index.tsx b/packages/antd/src/templates/ObjectFieldTemplate/index.tsx index 3c9834dce6..e6080507bb 100644 --- a/packages/antd/src/templates/ObjectFieldTemplate/index.tsx +++ b/packages/antd/src/templates/ObjectFieldTemplate/index.tsx @@ -15,6 +15,7 @@ import { getTemplate, getUiOptions, titleId, + buttonId, } from '@rjsf/utils'; import { Col, Row, ConfigProvider } from 'antd'; import { useContext } from 'react'; @@ -153,6 +154,7 @@ export default function ObjectFieldTemplate< (idSchema, 'add')} className='object-property-expand' disabled={disabled || readonly} onClick={onAddClick(schema)} diff --git a/packages/antd/src/templates/WrapIfAdditionalTemplate/index.tsx b/packages/antd/src/templates/WrapIfAdditionalTemplate/index.tsx index 3bce1e41de..2650114581 100644 --- a/packages/antd/src/templates/WrapIfAdditionalTemplate/index.tsx +++ b/packages/antd/src/templates/WrapIfAdditionalTemplate/index.tsx @@ -8,6 +8,7 @@ import { StrictRJSFSchema, TranslatableString, WrapIfAdditionalTemplateProps, + buttonId, } from '@rjsf/utils'; const VERTICAL_LABEL_COL = { span: 24 }; @@ -108,6 +109,7 @@ export default function WrapIfAdditionalTemplate< (id, 'remove')} className='array-item-remove' disabled={disabled || readonly} onClick={onDropPropertyClick(label)} diff --git a/packages/antd/test/__snapshots__/Array.test.tsx.snap b/packages/antd/test/__snapshots__/Array.test.tsx.snap index 9a79c3efb1..1d74355e9d 100644 --- a/packages/antd/test/__snapshots__/Array.test.tsx.snap +++ b/packages/antd/test/__snapshots__/Array.test.tsx.snap @@ -85,6 +85,7 @@ exports[`array fields array 1`] = ` )} - {(element.hasMoveUp || element.hasMoveDown) && ( - )} - {element.hasCopy && ( - )} - {element.hasRemove && ( - )} - +
))} @@ -76,17 +79,14 @@ const CustomOnAddClickTemplate = function (props) { ); }; -const ArrayFieldTestItemTemplate = (props) => { +const ArrayFieldTestItemButtonsTemplate = (props) => { const { - children, - className, disabled, - hasToolbar, + hasCopy, hasMoveDown, hasMoveUp, hasRemove, - hasCopy, - canAdd, + style, index, onAddIndexClick, onCopyIndexClick, @@ -94,6 +94,49 @@ const ArrayFieldTestItemTemplate = (props) => { onReorderClick, readonly, } = props; + return ( + <> + {hasMoveDown && ( + + )} + {hasMoveUp && ( + + )} + {hasCopy && ( + + )} + {hasRemove && ( + + )} + {hasMoveDown && ( + + )} + + ); +}; + +const ArrayFieldTestItemTemplate = (props) => { + const { children, buttonsProps, className, hasToolbar } = props; const btnStyle = { flex: 1, paddingLeft: 6, @@ -112,46 +155,7 @@ const ArrayFieldTestItemTemplate = (props) => { justifyContent: 'space-around', }} > - {hasMoveDown && ( - - )} - {hasMoveUp && ( - - )} - {hasCopy && ( - - )} - {hasRemove && ( - - )} - {hasMoveDown && canAdd && ( - - )} + )} @@ -510,7 +514,7 @@ describe('ArrayField', () => { @@ -521,7 +525,7 @@ describe('ArrayField', () => { @@ -747,7 +751,11 @@ describe('ArrayField', () => { const buttons = []; for (let i = 0; i < 3; i++) { buttons.push( - ); @@ -3038,7 +3046,10 @@ describe('ArrayField', () => { }); describe('ErrorSchema gets updated', () => { - const templates = { ArrayFieldItemTemplate: ArrayFieldTestItemTemplate }; + const templates = { + ArrayFieldItemTemplate: ArrayFieldTestItemTemplate, + ArrayFieldTestItemButtonsTemplate: ArrayFieldTestItemButtonsTemplate, + }; const schema = { type: 'array', items: { diff --git a/packages/core/test/ArrayFieldTemplate.test.jsx b/packages/core/test/ArrayFieldTemplate.test.jsx index 8c63ba4fae..668fe18383 100644 --- a/packages/core/test/ArrayFieldTemplate.test.jsx +++ b/packages/core/test/ArrayFieldTemplate.test.jsx @@ -24,8 +24,8 @@ describe('ArrayFieldTemplate', () => { {props.items.map((element) => { return (
- {element.hasMoveUp &&
diff --git a/packages/core/test/__snapshots__/ArraySnap.test.jsx.snap b/packages/core/test/__snapshots__/ArraySnap.test.jsx.snap index 428f12a63e..26bcb23b80 100644 --- a/packages/core/test/__snapshots__/ArraySnap.test.jsx.snap +++ b/packages/core/test/__snapshots__/ArraySnap.test.jsx.snap @@ -108,15 +108,8 @@ exports[`array fields array icons 1`] = ` - -
+ + + -
-
+ + + -
-
+ + + + + -
+ + + @@ -357,164 +314,120 @@ exports[`array fields array icons 1`] = `
-
- -
-
+ + + -
-
+ + + -
-
+ + + + + -
+ + +
@@ -534,6 +447,7 @@ exports[`array fields array icons 1`] = ` - -
+ + + -
-
+ + + -
-
+ + + + + -
+ + + @@ -1460,164 +1331,120 @@ exports[`with title and description array icons 1`] = `
-
- -
-
+ + + -
-
+ + + -
-
+ + + + + -
+ + +
@@ -1637,6 +1464,7 @@ exports[`with title and description array icons 1`] = ` - -
+ + + -
-
+ + + -
-
+ + + + + -
+ + + @@ -2373,164 +2158,120 @@ exports[`with title and description from both array icons 1`] = `
-
- -
-
+ + + -
-
+ + + -
-
+ + + + + -
+ + +
@@ -2550,6 +2291,7 @@ exports[`with title and description from both array icons 1`] = ` - -
+ + + -
-
+ + + -
-
+ + + + + -
+ + + @@ -3286,164 +2985,120 @@ exports[`with title and description from uiSchema array icons 1`] = `
-
- -
-
+ + + -
-
+ + + -
-
+ + + + + -
+ + +
@@ -3463,6 +3118,7 @@ exports[`with title and description from uiSchema array icons 1`] = ` - -
+ + + -
-
+ + + -
-
+ + + + + -
+ + + @@ -4113,164 +3726,120 @@ exports[`with title and description with global label off array icons 1`] = `
-
- -
-
+ + + -
-
+ + + -
-
+ + + + + -
+ + +
@@ -4290,6 +3859,7 @@ exports[`with title and description with global label off array icons 1`] = `