From 9c859d5fea1040f380a86816c5590693dfac0d18 Mon Sep 17 00:00:00 2001 From: Heath Chiavettone Date: Fri, 13 Sep 2024 13:09:20 -0700 Subject: [PATCH 1/2] fix Improved the widget/field customization docs Updated the widget and field customization docs to add examples of wrapping a widget/field to adjust props --- CHANGELOG.md | 6 ++ .../custom-widgets-fields.md | 62 +++++++++++++++++++ 2 files changed, 68 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 028c86e7a2..4e580f0038 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,6 +16,12 @@ should change the heading of the (upcoming) version to include a major version b --> +# 5.21.2 + +## Dev / docs / playground + +- Updated the `custom-widgets-fields.md` to add examples of wrapping a widget/field + # 5.21.1 ## @rjsf/utils diff --git a/packages/docs/docs/advanced-customization/custom-widgets-fields.md b/packages/docs/docs/advanced-customization/custom-widgets-fields.md index b5bd57948d..89108521ea 100644 --- a/packages/docs/docs/advanced-customization/custom-widgets-fields.md +++ b/packages/docs/docs/advanced-customization/custom-widgets-fields.md @@ -279,6 +279,34 @@ render(
, docum All the widgets that render a text input use the `BaseInputTemplate` component internally. If you need to customize all text inputs without customizing all widgets individually, you can provide a `BaseInputTemplate` component in the `templates` property of `Form` (see [Custom Templates](./custom-templates.md#baseinputtemplate)). +### Wrapping an exist widget to customize it + +Sometimes you just need to customize the properties that are passed to an existing widget. +The way to do this varies based upon whether you are using core or some other theme (such as mui). + +Here is an example of modifying the `SelectWidget` to change the ordering of `enumOptions`: + +```tsx +import { WidgetProps } from '@rjsf/utils'; +import { getDefaultRegistry } from '@rjsf/core'; +import { Widgets } from '@rjsf/mui'; + +import myOptionsOrderFunction from './myOptionsOrderFunction'; + +const { + widgets: { SelectWidget }, +} = getDefaultRegistry(); // To get widgets from core +// const { SelectWidget } = Widgets; // To get widgets from a theme do this + +function MySelectWidget(props: WidgetProps) { + const { options } = props; + let { enumOptions } = options; + // Reorder the `enumOptions` however you want + enumOptions = myOptionsOrderFunction(enumOptions); + return ; +} +``` + ## Custom field components You can provide your own field components to a uiSchema for basically any json schema data type, by specifying a `ui:field` property. @@ -475,3 +503,37 @@ const schema: RJSFSchema = { render(, document.getElementById('app')); ``` + +### Wrapping an exist field to customize it + +Sometimes you just need to customize the properties that are passed to an existing field. + +Here is an example of wrapping the `ObjectField` to tweak the `onChange` handler to look for a specific kind of bad data: + +```tsx +import { useCallback } from 'react'; +import { FieldProps } from '@rjsf/utils'; +import { getDefaultRegistry } from '@rjsf/core'; + +import checkBadData from './checkBadData'; + +const { + fields: { ObjectField }, +} = getDefaultRegistry(); + +function MyObjectField(props: FieldProps) { + const { onChange } = props; + const onChangeHandler = useCallback( + (newFormData: T | undefined, es?: ErrorSchema, id?: string) => { + let data = newFormData; + let error = es; + if (checkBadData(newFormData)) { + // Format the `error` and fix the `data` here + } + onChange(data, error, id); + }, + [onChange] + ); + return ; +} +``` From da91593f3cd49260a3363dddb951a3426e0e0953 Mon Sep 17 00:00:00 2001 From: Heath C <51679588+heath-freenome@users.noreply.github.com> Date: Fri, 13 Sep 2024 15:56:28 -0700 Subject: [PATCH 2/2] Apply suggestions from code review - Responded to reviewer feedback Co-authored-by: Nick Grosenbacher --- .../docs/docs/advanced-customization/custom-widgets-fields.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/docs/docs/advanced-customization/custom-widgets-fields.md b/packages/docs/docs/advanced-customization/custom-widgets-fields.md index 89108521ea..86240d14b7 100644 --- a/packages/docs/docs/advanced-customization/custom-widgets-fields.md +++ b/packages/docs/docs/advanced-customization/custom-widgets-fields.md @@ -279,7 +279,7 @@ render(, docum All the widgets that render a text input use the `BaseInputTemplate` component internally. If you need to customize all text inputs without customizing all widgets individually, you can provide a `BaseInputTemplate` component in the `templates` property of `Form` (see [Custom Templates](./custom-templates.md#baseinputtemplate)). -### Wrapping an exist widget to customize it +### Wrapping an existing widget to customize it Sometimes you just need to customize the properties that are passed to an existing widget. The way to do this varies based upon whether you are using core or some other theme (such as mui). @@ -504,7 +504,7 @@ const schema: RJSFSchema = { render(, document.getElementById('app')); ``` -### Wrapping an exist field to customize it +### Wrapping an existing field to customize it Sometimes you just need to customize the properties that are passed to an existing field.