Template support for MultiSchemaField(OneOfField/AnyOfField)

[YuJianghao]

Prerequisites

• [X] 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 (https://github.com/rjsf-team/react-jsonschema-form/pull/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

https://github.com/rjsf-team/react-jsonschema-form/blob/42e138c5d6785e84aa4500c83bf70af8c001236c/packages/core/src/components/fields/MultiSchemaField.tsx#L188-L214

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?