Template support for MultiSchemaField(OneOfField/AnyOfField)

[YuJianghao]

Prerequisites

• I have read the documentation

What theme are you using?

other

Is your feature request related to a problem? Please describe.

When building the Carbon theme (#3883), I met the following problem:

Suppose I want to implement the following oneOf UI:

• A key oneOf that told the user this is a oneOf
• A gray background that indicates which part(in this case, the loram field) the oneOf is controlling.

Without modifying the default OneOfField. I got:

The problem is: How can I change the UI without rewriting the entire OneOfField?

Describe the solution you'd like

Provide a OneOfTemplate/AnyOfTemplate, and replace the render part of the OneOfField

react-jsonschema-form/packages/core/src/components/fields/MultiSchemaField.tsx

Lines 188 to 214 in 42e138c

	return (
	<div className='panel panel-default panel-body'>
	<div className='form-group'>
	<Widget
	id={this.getFieldId()}
	name={`${name}${schema.oneOf ? '__oneof_select' : '__anyof_select'}`}
	schema={{ type: 'number', default: 0 } as S}
	onChange={this.onOptionChange}
	onBlur={onBlur}
	onFocus={onFocus}
	disabled={disabled || isEmpty(enumOptions)}
	multiple={false}
	rawErrors={rawErrors}
	errorSchema={fieldErrorSchema}
	value={selectedOption >= 0 ? selectedOption : undefined}
	options={{ enumOptions, ...uiOptions }}
	registry={registry}
	formContext={formContext}
	placeholder={placeholder}
	autocomplete={autocomplete}
	autofocus={autofocus}
	label={title ?? name}
	hideLabel={!displayLabel}
	/>
	</div>
	{option !== null && <_SchemaField {...this.props} schema={optionSchema!} />}
	</div>

to:

    const OneOfTemplateProps = {
      widget: <Widget /* some props for widget*/ />,
      content: option !== null && <_SchemaField {...this.props} schema={optionSchema!} />,
      // ...other props for OneOfTemplate
    }

    return <OneOfTemplate {... OneOfTemplateProps}/>

Then I can create the target UI by implementing a template without touching the complicated logic:

function OneOfTemplate({widget, content}){
  return (
    <FormGroup {...someProps}>
      <LayerBackground {...someProps}>
        {widget}
        {content}
      </LayerBackground>
    </FormGroup>
  );
}

Describe alternatives you've considered

Rewrite the whole OneOfField can do this, but not good enough.

[heath-freenome]

@YuJianghao You can provide, as part of your theme a custom AnyOfField and/or OneOfField that does what you want. See the docs

That said, I agree that having this new feature would be really helpful for theme builders like you. Are you willing to implement this first before completing your carbon theme?