Feat/custom template per field

CHANGELOG.md

@@ -15,6 +15,17 @@ 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.
 
 -->
+# 5.23.0
+
+## @rjsf/utils
+
+- Updated `getTemplate()` to allow per-field customization using string key from `Registry`, fixing [#3695](https://github.com/rjsf-team/react-jsonschema-form/issues/3695).
+- Updated `TemplatesType` to allow for a string key to be used to reference a custom template in the `Registry`, fixing [#3695](https://github.com/rjsf-team/react-jsonschema-form/issues/3695)
+- Updated tests to cover the new `getTemplate()` functionality
+
+## Dev / docs / playground
+
+- Updated `advanced-customization/custom-templates` with the new feature.
 
 # 5.22.3 
 

packages/docs/docs/advanced-customization/custom-templates.md

@@ -76,16 +76,27 @@ render(
 );
 ```
 
-You also can provide your own field template to a uiSchema by specifying a `ui:ArrayFieldTemplate` property.
+You also can provide your own field template to a uiSchema by specifying a `ui:ArrayFieldTemplate` property with your Component :
 
 ```tsx
 import { UiSchema } from '@rjsf/utils';
+import ArrayFieldTemplate from './ArrayFieldTemplate';
 
 const uiSchema: UiSchema = {
   'ui:ArrayFieldTemplate': ArrayFieldTemplate,
 };
 ```
 
+or a string value from the `Registry` :
+
+```tsx
+import { UiSchema } from '@rjsf/utils';
+
+const uiSchema: UiSchema = {
+  'ui:ArrayFieldTemplate': 'CustomArrayFieldTemplate',
+};
+```
+
 Please see the [customArray.tsx sample](https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/playground/src/samples/customArray.tsx) from the [playground](https://rjsf-team.github.io/react-jsonschema-form/) for another example.
 
 The following props are passed to each `ArrayFieldTemplate`:
@@ -163,16 +174,27 @@ render(
 );
 ```
 
-You also can provide your own template to a uiSchema by specifying a `ui:ArrayFieldDescriptionTemplate` property.
+You also can provide your own field template to a uiSchema by specifying a `ui:ArrayFieldDescriptionTemplate` property with your Component :
 
 ```tsx
 import { UiSchema } from '@rjsf/utils';
+import ArrayFieldDescriptionTemplate from './ArrayFieldDescriptionTemplate';
 
 const uiSchema: UiSchema = {
   'ui:ArrayFieldDescriptionTemplate': ArrayFieldDescriptionTemplate,
 };
 ```
 
+or a string value from the `Registry` :
+
+```tsx
+import { UiSchema } from '@rjsf/utils';
+
+const uiSchema: UiSchema = {
+  'ui:ArrayFieldDescriptionTemplate': 'CustomArrayFieldDescriptionTemplate',
+};
+```
+
 The following props are passed to each `ArrayFieldDescriptionTemplate`:
 
 - `description`: The description of the array field being rendered.
@@ -261,13 +283,24 @@ render(
 );
 ```
 
-You also can provide your own template to a uiSchema by specifying a `ui:ArrayFieldDescriptionTemplate` property.
+You also can provide your own template to a uiSchema by specifying a `ui:ArrayFieldDescriptionTemplate` property with your Component :
 
 ```tsx
 import { UiSchema } from '@rjsf/utils';
+import ArrayFieldDescriptionTemplate from './ArrayFieldDescriptionTemplate';
 
 const uiSchema: UiSchema = {
-  'ui:ArrayFieldTitleTemplate': ArrayFieldTitleTemplate,
+  'ui:ArrayFieldDescriptionTemplate': ArrayFieldDescriptionTemplate,
+};
+```
+
+or a string value from the `Registry` :
+
+```tsx
+import { UiSchema } from '@rjsf/utils';
+
+const uiSchema: UiSchema = {
+  'ui:ArrayFieldDescriptionTemplate': 'CustomArrayFieldDescriptionTemplate',
 };
 ```
 
@@ -615,16 +648,27 @@ render(
 );
 ```
 
-You also can provide your own field template to a uiSchema by specifying a `ui:FieldTemplate` property.
+You also can provide your own field template to a uiSchema by specifying a `ui:FieldTemplate` property with your Component :
 
 ```tsx
 import { UiSchema } from '@rjsf/utils';
+import CustomFieldTemplate from './CustomFieldTemplate';
 
 const uiSchema: UiSchema = {
   'ui:FieldTemplate': CustomFieldTemplate,
 };
 ```
 
+or a string value from the `Registry` :
+
+```tsx
+import { UiSchema } from '@rjsf/utils';
+
+const uiSchema: UiSchema = {
+  'ui:FieldTemplate': 'CustomFieldTemplate',
+};
+```
+
 If you want to handle the rendering of each element yourself, you can use the props `rawHelp`, `rawDescription` and `rawErrors`.
 
 The following props are passed to a custom field template component:
@@ -693,16 +737,27 @@ render(
 );
 ```
 
-You also can provide your own field template to a uiSchema by specifying a `ui:ObjectFieldTemplate` property.
+You also can provide your own field template to a uiSchema by specifying a `ui:ObjectFieldTemplate` property with your Component :
 
 ```tsx
 import { UiSchema } from '@rjsf/utils';
+import ObjectFieldTemplate from './ObjectFieldTemplate';
 
 const uiSchema: UiSchema = {
   'ui:ObjectFieldTemplate': ObjectFieldTemplate,
 };
 ```
 
+or a string value from the `Registry` :
+
+```tsx
+import { UiSchema } from '@rjsf/utils';
+
+const uiSchema: UiSchema = {
+  'ui:ObjectFieldTemplate': 'ObjectFieldTemplate',
+};
+```
+
 Please see the [customObject.tsx sample](https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/playground/src/samples/customObject.tsx) from the [playground](https://rjsf-team.github.io/react-jsonschema-form/) for a better example.
 
 The following props are passed to each `ObjectFieldTemplate` as defined by the `ObjectFieldTemplateProps` in `@rjsf/utils`:

packages/utils/src/getTemplate.ts

@@ -18,6 +18,17 @@ export default function getTemplate<
   if (name === 'ButtonTemplates') {
     return templates[name];
   }
+  // Allow templates to be customized per-field by using string keys from the registry
+  if (
+    Object.hasOwn(uiOptions, name) &&
+    typeof uiOptions[name] === 'string' &&
+    Object.hasOwn(templates, uiOptions[name] as string)
+  ) {
+    const key = uiOptions[name];
+    // Evaluating templates[key] results in TS2590: Expression produces a union type that is too complex to represent
+    // To avoid that, we cast templates to `any` before accessing the key field
+    return (templates as any)[key];
+  }
   return (
     // Evaluating uiOptions[name] results in TS2590: Expression produces a union type that is too complex to represent
     // To avoid that, we cast uiOptions to `any` before accessing the name field