Skip to content

Commit 7db41ed

Browse files
nickgrosnickgros
committed
[feat] Add MultiSchemaFieldTemplate
- Add MultiSchemaFieldTemplate - Refactor MultiSchemaField to use MultiSchemaFieldTemplate - Add implementation of MultiSchemaFieldTemplate to each theme - Documentation & migration guide for MultiSchemaFieldTemplate - Update snapshots
1 parent f9aa0e8 commit 7db41ed

File tree

37 files changed

+509
-30
lines changed

37 files changed

+509
-30
lines changed

‎CHANGELOG.md‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,54 @@ should change the heading of the (upcoming) version to include a major version b
2121
## @rjsf/antd
2222

2323
- Set peerDependency for `@ant-design/icons` to `^6.0.0`, fixing [#4643](https://github.com/rjsf-team/react-jsonschema-form/issues/4643)
24+
- Added `MultiSchemaFieldTemplate`
25+
26+
## @rjsf/chakra-ui
27+
28+
- Added `MultiSchemaFieldTemplate`
29+
30+
## @rjsf/core
31+
32+
- Refactored `MultiSchemaField` to use the `MultiSchemaFieldTemplate` provided by the registry.
33+
- Added `MultiSchemaFieldTemplate` component to maintain the same functionality as the previous `MultiSchemaField` implementation.
34+
35+
## @rjsf/daisyui
36+
37+
- Added `MultiSchemaFieldTemplate`
38+
39+
## @rjsf/fluentui-rc
40+
41+
- Added `MultiSchemaFieldTemplate`
42+
43+
## @rjsf/mui
44+
45+
- Added `MultiSchemaFieldTemplate`
2446

2547
## @rjsf/primereact
2648

2749
- New theme!
2850

51+
## @rjsf/react-bootstrap
52+
53+
- Added `MultiSchemaFieldTemplate`
54+
55+
## @rjsf/semantic-ui
56+
57+
- Added `MultiSchemaFieldTemplate`
58+
59+
## @rjsf/shadcn
60+
61+
- Added `MultiSchemaFieldTemplate`
62+
2963
## @rjsf/utils
3064

3165
- Fixed issue where oneOf radio button could not be modified when defaults were set, fixing [#4634](https://github.com/rjsf-team/react-jsonschema-form/issues/4634)
3266
- Fix default value for object properties such as enums that are rendered in select, radio inputs, etc.
67+
- Add support for `MultiSchemaFieldTemplate`, with new `MultiSchemaFieldTemplateProps`, to the `TemplatesType` interface
68+
69+
## Dev / docs / playground
70+
71+
- Added documentation for the new `MultiSchemaFieldTemplate`
3372

3473
# 6.0.0-beta.10
3574

‎packages/antd/src/templates/MultiSchemaFieldTemplate/index.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { FormContextType, MultiSchemaFieldTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
2+
3+
export default function MultiSchemaFieldTemplate<
4+
T = any,
5+
S extends StrictRJSFSchema = RJSFSchema,
6+
F extends FormContextType = any,
7+
>(props: MultiSchemaFieldTemplateProps<T, S, F>) {
8+
const { optionSchemaField, selector } = props;
9+
10+
return (
11+
<div>
12+
<div>{selector}</div>
13+
{optionSchemaField}
14+
</div>
15+
);
16+
}

‎packages/antd/src/templates/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { AddButton, CopyButton, MoveDownButton, MoveUpButton, RemoveButton } fro
99
import FieldErrorTemplate from './FieldErrorTemplate';
1010
import FieldTemplate from './FieldTemplate';
1111
import GridTemplate from './GridTemplate';
12+
import MultiSchemaFieldTemplate from './MultiSchemaFieldTemplate';
1213
import ObjectFieldTemplate from './ObjectFieldTemplate';
1314
import SubmitButton from './SubmitButton';
1415
import TitleField from './TitleField';
@@ -36,6 +37,7 @@ export function generateTemplates<
3637
FieldErrorTemplate,
3738
FieldTemplate,
3839
GridTemplate,
40+
MultiSchemaFieldTemplate,
3941
ObjectFieldTemplate,
4042
TitleFieldTemplate: TitleField,
4143
WrapIfAdditionalTemplate,

‎packages/chakra-ui/src/MultiSchemaFieldTemplate/MultiSchemaFieldTemplate.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { FormContextType, MultiSchemaFieldTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
2+
3+
export default function MultiSchemaFieldTemplate<
4+
T = any,
5+
S extends StrictRJSFSchema = RJSFSchema,
6+
F extends FormContextType = any,
7+
>(props: MultiSchemaFieldTemplateProps<T, S, F>) {
8+
const { optionSchemaField, selector } = props;
9+
10+
return (
11+
<div>
12+
<div>{selector}</div>
13+
{optionSchemaField}
14+
</div>
15+
);
16+
}

‎packages/chakra-ui/src/MultiSchemaFieldTemplate/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { default } from './MultiSchemaFieldTemplate';
2+
export * from './MultiSchemaFieldTemplate';

‎packages/chakra-ui/src/Templates/Templates.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import FieldErrorTemplate from '../FieldErrorTemplate';
99
import FieldHelpTemplate from '../FieldHelpTemplate';
1010
import FieldTemplate from '../FieldTemplate';
1111
import GridTemplate from '../GridTemplate';
12+
import MultiSchemaFieldTemplate from '../MultiSchemaFieldTemplate';
1213
import ObjectFieldTemplate from '../ObjectFieldTemplate';
1314
import SubmitButton from '../SubmitButton';
1415
import TitleField from '../TitleField';
@@ -38,6 +39,7 @@ export function generateTemplates<
3839
FieldHelpTemplate,
3940
FieldTemplate,
4041
GridTemplate,
42+
MultiSchemaFieldTemplate,
4143
ObjectFieldTemplate,
4244
TitleFieldTemplate: TitleField,
4345
WrapIfAdditionalTemplate,

‎packages/core/src/components/fields/MultiSchemaField.tsx‎

Lines changed: 45 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
FieldProps,
1010
FormContextType,
1111
getDiscriminatorFieldFromSchema,
12+
getTemplate,
1213
getUiOptions,
1314
getWidget,
1415
mergeSchemas,
@@ -157,6 +158,12 @@ class AnyOfField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
157158

158159
const { widgets, fields, translateString, globalUiOptions, schemaUtils } = registry;
159160
const { SchemaField: _SchemaField } = fields;
161+
const MultiSchemaFieldTemplate = getTemplate<'MultiSchemaFieldTemplate', T, S, F>(
162+
'MultiSchemaFieldTemplate',
163+
registry,
164+
globalUiOptions,
165+
);
166+
160167
const { selectedOption, retrievedOptions } = this.state;
161168
const {
162169
widget = 'select',
@@ -215,36 +222,45 @@ class AnyOfField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
215222
};
216223
});
217224

225+
const selector = (
226+
<Widget
227+
id={this.getFieldId()}
228+
name={`${name}${schema.oneOf ? '__oneof_select' : '__anyof_select'}`}
229+
schema={{ type: 'number', default: 0 } as S}
230+
onChange={this.onOptionChange}
231+
onBlur={onBlur}
232+
onFocus={onFocus}
233+
disabled={disabled || isEmpty(enumOptions)}
234+
multiple={false}
235+
rawErrors={rawErrors}
236+
errorSchema={fieldErrorSchema}
237+
value={selectedOption >= 0 ? selectedOption : undefined}
238+
options={{ enumOptions, ...uiOptions }}
239+
registry={registry}
240+
formContext={formContext}
241+
placeholder={placeholder}
242+
autocomplete={autocomplete}
243+
autofocus={autofocus}
244+
label={title ?? name}
245+
hideLabel={!displayLabel}
246+
readonly={readonly}
247+
/>
248+
);
249+
250+
const optionsSchemaField =
251+
(optionSchema && optionSchema.type !== 'null' && (
252+
<_SchemaField {...this.props} schema={optionSchema} uiSchema={optionUiSchema} />
253+
)) ||
254+
null;
255+
218256
return (
219-
<div className='panel panel-default panel-body'>
220-
<div className='form-group'>
221-
<Widget
222-
id={this.getFieldId()}
223-
name={`${name}${schema.oneOf ? '__oneof_select' : '__anyof_select'}`}
224-
schema={{ type: 'number', default: 0 } as S}
225-
onChange={this.onOptionChange}
226-
onBlur={onBlur}
227-
onFocus={onFocus}
228-
disabled={disabled || isEmpty(enumOptions)}
229-
multiple={false}
230-
rawErrors={rawErrors}
231-
errorSchema={fieldErrorSchema}
232-
value={selectedOption >= 0 ? selectedOption : undefined}
233-
options={{ enumOptions, ...uiOptions }}
234-
registry={registry}
235-
formContext={formContext}
236-
placeholder={placeholder}
237-
autocomplete={autocomplete}
238-
autofocus={autofocus}
239-
label={title ?? name}
240-
hideLabel={!displayLabel}
241-
readonly={readonly}
242-
/>
243-
</div>
244-
{optionSchema && optionSchema.type !== 'null' && (
245-
<_SchemaField {...this.props} schema={optionSchema} uiSchema={optionUiSchema} />
246-
)}
247-
</div>
257+
<MultiSchemaFieldTemplate
258+
schema={schema}
259+
registry={registry}
260+
uiSchema={uiSchema}
261+
selector={selector}
262+
optionSchemaField={optionsSchemaField}
263+
/>
248264
);
249265
}
250266
}

‎packages/core/src/components/templates/MultiSchemaFieldTemplate.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { FormContextType, MultiSchemaFieldTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
2+
3+
/** The `MultiSchemaFieldTemplate` component renders the layout for the MultiSchemaField, which supports choosing
4+
* a schema from a list of schemas defined using `anyOf` or `oneOf`.
5+
*
6+
* @param props - The `MultiSchemaFieldTemplate` to be rendered
7+
*/
8+
export default function MultiSchemaFieldTemplate<
9+
T = any,
10+
S extends StrictRJSFSchema = RJSFSchema,
11+
F extends FormContextType = any,
12+
>(props: MultiSchemaFieldTemplateProps<T, S, F>) {
13+
const { selector, optionSchemaField } = props;
14+
return (
15+
<div className='panel panel-default panel-body'>
16+
<div className='form-group'>{selector}</div>
17+
{optionSchemaField}
18+
</div>
19+
);
20+
}

‎packages/core/src/components/templates/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import FieldTemplate from './FieldTemplate';
1313
import FieldErrorTemplate from './FieldErrorTemplate';
1414
import FieldHelpTemplate from './FieldHelpTemplate';
1515
import GridTemplate from './GridTemplate';
16+
import MultiSchemaFieldTemplate from './MultiSchemaFieldTemplate';
1617
import ObjectFieldTemplate from './ObjectFieldTemplate';
1718
import TitleField from './TitleField';
1819
import UnsupportedField from './UnsupportedField';
@@ -37,6 +38,7 @@ function templates<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends F
3738
FieldErrorTemplate,
3839
FieldHelpTemplate,
3940
GridTemplate,
41+
MultiSchemaFieldTemplate,
4042
ObjectFieldTemplate,
4143
TitleFieldTemplate: TitleField,
4244
UnsupportedFieldTemplate: UnsupportedField,

‎packages/daisyui/src/templates/MultiSchemaFieldTemplate/MultiSchemaFieldTemplate.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { FormContextType, MultiSchemaFieldTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
2+
3+
export default function MultiSchemaFieldTemplate<
4+
T = any,
5+
S extends StrictRJSFSchema = RJSFSchema,
6+
F extends FormContextType = any,
7+
>(props: MultiSchemaFieldTemplateProps<T, S, F>) {
8+
const { optionSchemaField, selector } = props;
9+
return (
10+
<div className='p-4 border rounded-sm shadow-sm'>
11+
<div className='mb-4'>{selector}</div>
12+
{optionSchemaField}
13+
</div>
14+
);
15+
}

0 commit comments

Comments
 (0)