From e092cab1a16017e4443bceb89be1e9b54c72a5bc Mon Sep 17 00:00:00 2001 From: Fabio Zendhi Nagao Date: Mon, 11 Nov 2024 04:30:41 -0300 Subject: [PATCH 1/4] feat(core): add support for `` tag --- .../src/components/widgets/SelectWidget.tsx | 52 +++++++++++++------ packages/playground/src/samples/widgets.tsx | 13 +++++ 2 files changed, 50 insertions(+), 15 deletions(-) diff --git a/packages/core/src/components/widgets/SelectWidget.tsx b/packages/core/src/components/widgets/SelectWidget.tsx index 1bebfa371a..de2b62d797 100644 --- a/packages/core/src/components/widgets/SelectWidget.tsx +++ b/packages/core/src/components/widgets/SelectWidget.tsx @@ -39,7 +39,7 @@ function SelectWidget) { - const { enumOptions, enumDisabled, emptyValue: optEmptyVal } = options; + const { enumOptions, enumDisabled, emptyValue: optEmptyVal, optgroups } = options; const emptyValue = multiple ? [] : ''; const handleFocus = useCallback( @@ -47,7 +47,7 @@ function SelectWidget(newValue, enumOptions, optEmptyVal)); }, - [onFocus, id, schema, multiple, enumOptions, optEmptyVal] + [onFocus, id, schema, multiple, options] ); const handleBlur = useCallback( @@ -55,7 +55,7 @@ function SelectWidget(newValue, enumOptions, optEmptyVal)); }, - [onBlur, id, schema, multiple, enumOptions, optEmptyVal] + [onBlur, id, schema, multiple, options] ); const handleChange = useCallback( @@ -63,11 +63,41 @@ function SelectWidget(newValue, enumOptions, optEmptyVal)); }, - [onChange, schema, multiple, enumOptions, optEmptyVal] + [onChange, schema, multiple, options] ); const selectedIndexes = enumOptionsIndexForValue(value, enumOptions, multiple); - const showPlaceholderOption = !multiple && schema.default === undefined; + + let opts = null + if (optgroups) { + let enumOptionFromValue = new Map() + enumOptions.forEach((enumOption, i) => { + enumOptionFromValue.set(enumOption.value, [enumOption, i]) + }) + opts = Object.keys(optgroups).map(optgroup => { + return ( + {optgroups[optgroup].map(value => { + if (!enumOptionFromValue.has(value)) return null + const disabled = enumDisabled && enumDisabled.indexOf(value) !== -1; + let [{ label }, i] = enumOptionFromValue.get(value) + return ( + + ); + })} + ) + }) + } else { + opts = Array.isArray(enumOptions) && enumOptions.map(({ value, label }, i) => { + const disabled = enumDisabled && enumDisabled.indexOf(value) !== -1; + return ( + + ); + }); + } return ( ); } diff --git a/packages/playground/src/samples/widgets.tsx b/packages/playground/src/samples/widgets.tsx index a93b2362a5..9049267e92 100644 --- a/packages/playground/src/samples/widgets.tsx +++ b/packages/playground/src/samples/widgets.tsx @@ -106,6 +106,11 @@ const widgets: Sample = { }, ], }, + selectWidgetOptions3: { + title: 'Custom select widget with options grouped by optgroups', + type: 'string', + enum: ['foo', 'bar'], + }, }, }, uiSchema: { @@ -196,6 +201,14 @@ const widgets: Sample = { backgroundColor: 'pink', }, }, + selectWidgetOptions3: { + 'ui:options': { + 'optgroups': { + 'lipsum': ['foo'], + 'dolorem': ['bar'] + } + } + } }, formData: { stringFormats: { From df18e6a47f8cd80827c996e53ee69c9252d99622 Mon Sep 17 00:00:00 2001 From: Fabio Zendhi Nagao Date: Thu, 14 Nov 2024 09:34:42 -0300 Subject: [PATCH 2/4] docs(core): update `CHANGELOG.md` and documentation --- CHANGELOG.md | 12 +++++++++ packages/docs/docs/api-reference/uiSchema.md | 26 ++++++++++++++++++++ 2 files changed, 38 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0265353174..79ad4115da 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,6 +16,18 @@ should change the heading of the (upcoming) version to include a major version b --> +# 5.23.0 + +## @rjsf/core + +- Updated `SelectWidget` to support `` through `ui:options` `optgroup`. Fixes [#1813] + +## @rjsf/playground + +- Updated `samples/widgets` to show `optgroup` usage (`selectWidgetOptions3`) + +## Dev / docs / playground + # 5.22.4 ## @rjsf/utils diff --git a/packages/docs/docs/api-reference/uiSchema.md b/packages/docs/docs/api-reference/uiSchema.md index d4eaaaa208..bd24a637f3 100644 --- a/packages/docs/docs/api-reference/uiSchema.md +++ b/packages/docs/docs/api-reference/uiSchema.md @@ -344,6 +344,32 @@ render(
, docum This property allows you to reorder the properties that are shown for a particular object. See [Objects](../json-schema/objects.md) for more information. +### optgroup + +To leverage `` inside a select to group ``, you can specify how to organize the options using the `optgroups` key inside your uiSchema. + +```tsx +import { Form } from '@rjsf/core'; +import { RJSFSchema, UiSchema } from '@rjsf/utils'; +import validator from '@rjsf/validator-ajv8'; + +const schema: RJSFSchema = { + type: 'string', + enum: ['lorem', 'ipsum', 'dolorem', 'alpha', 'beta', 'gamma'] +}; + +const uiSchema: UiSchema = { + 'ui:options': { + optgroups: { + lipsum: ['lorem', 'ipsum', 'dolorem'], + greek: ['alpha', 'beta', 'gamma'] + } + }, +}; + +render(, document.getElementById('app')); +``` + ### placeholder You can add placeholder text to an input by using the `ui:placeholder` uiSchema directive: From ed880d9ed020dcef4e0838917f7739028927cf7b Mon Sep 17 00:00:00 2001 From: Fabio Zendhi Nagao Date: Thu, 14 Nov 2024 09:41:42 -0300 Subject: [PATCH 3/4] perf(core): using upstream useCallback dependencies are optimal --- packages/core/src/components/widgets/SelectWidget.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/core/src/components/widgets/SelectWidget.tsx b/packages/core/src/components/widgets/SelectWidget.tsx index de2b62d797..bfaf505d10 100644 --- a/packages/core/src/components/widgets/SelectWidget.tsx +++ b/packages/core/src/components/widgets/SelectWidget.tsx @@ -47,7 +47,7 @@ function SelectWidget(newValue, enumOptions, optEmptyVal)); }, - [onFocus, id, schema, multiple, options] + [onFocus, id, schema, multiple, enumOptions, optEmptyVal] ); const handleBlur = useCallback( @@ -55,7 +55,7 @@ function SelectWidget(newValue, enumOptions, optEmptyVal)); }, - [onBlur, id, schema, multiple, options] + [onBlur, id, schema, multiple, enumOptions, optEmptyVal] ); const handleChange = useCallback( @@ -63,7 +63,7 @@ function SelectWidget(newValue, enumOptions, optEmptyVal)); }, - [onChange, schema, multiple, options] + [onChange, schema, multiple, enumOptions, optEmptyVal] ); const selectedIndexes = enumOptionsIndexForValue(value, enumOptions, multiple); From 4a29fc3d31bb8771336944c9a212ecb8c2c79253 Mon Sep 17 00:00:00 2001 From: Fabio Zendhi Nagao Date: Mon, 25 Nov 2024 09:44:51 -0300 Subject: [PATCH 4/4] Update CHANGELOG.md Co-authored-by: Heath C <51679588+heath-freenome@users.noreply.github.com> --- CHANGELOG.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 79ad4115da..cfc56f36d0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -22,12 +22,10 @@ should change the heading of the (upcoming) version to include a major version b - Updated `SelectWidget` to support `` through `ui:options` `optgroup`. Fixes [#1813] -## @rjsf/playground +## Dev / docs / playground - Updated `samples/widgets` to show `optgroup` usage (`selectWidgetOptions3`) -## Dev / docs / playground - # 5.22.4 ## @rjsf/utils