Show title above anyOf control

[lovervoorde]

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

I would like to (optionally) show the title from the schema above the anyOf control (and other similar controls). I am happy to make a PR if you think this is a good idea.

Describe the solution you'd like

I think it would just be a case of adding something like this to MaterialAnyOfRenderer, with a bit of logic to make it optional (and probably hidden by default so we don't cause unexpected changes in existing usages).

<Typography>
  {schema?.title}
</Typography>

Describe alternatives you've considered

I have tried wrapping the existing component and including a title, but got an import error trying to import the 'pure' component: ./src/components/common/renderers/AnyOfRenderer.tsx Module not found: Can't resolve '@jsonforms/material-renderers/lib/complex/MaterialAnyOfRenderer' in '/usr/app/src/components/common/renderers'. I may have been doing this incorrectly, but either way I think including the title in the original component would be cleaner.

Framework

React

RendererSet

Material

Additional context

No response

[sdirix]

Hi @lovervoorde,

Makes sense to me! If you would like to contribute, feel free to do so. Please also add test cases ;)

For the renderers it would be fine for me to add this by default. label:false in the UI Schema should disable the label, like for the other controls.

When implementing, please consume the label from the mapper functions so that they are properly translated.

[csilt]

@lovervoorde I'm interested in the same option, did you ever get around to implementing this nicely?

[lovervoorde]

@csilt Apologies, we haven’t got to it yet and probably won’t have time in the near future

[JarnoRFB]

I tried implementing it in user land for oneOf like

import { withJsonFormsOneOfProps } from "@jsonforms/react";
import { MaterialOneOfRenderer } from "@jsonforms/material-renderers/";
import { CombinatorRendererProps } from "@jsonforms/core";

const OneOfControlWithTitle = (props: CombinatorRendererProps) => 
  <>
    <div>{props.schema.title}</div>
    <MaterialOneOfRenderer {...props}/>
  </>

export default withJsonFormsOneOfProps(OneOfControlWithTitle);

and added the tester

            {
              tester: rankWith(30, isOneOfControl),
              renderer: OneOfControlWithTitle
            }

However, during rendering I get the error TypeError: Cannot read properties of undefined (reading 'map') in createCombinatorRenderInfos and the schema passed to the MaterialOneOfRenderer is indeed empty. I am probably doing something wrong the way I am wrapping the component, but any help would be appreciated.

[sdirix]

Hi @JarnoRFB,

The MaterialOneOfRenderer is already wrapped with withJsonFormsOneOfProps. So you are now effectively double wrapping it which will lead to issues.

See the end of this guide on how to use the Unwrapped variants of the @jsonforms/material-renderers.

[JarnoRFB]

@sdirix Thanks for the quick response and the pointer!

Got it working with the following code

import { withJsonFormsOneOfProps } from "@jsonforms/react";
import { Unwrapped } from "@jsonforms/material-renderers";
import { CombinatorRendererProps } from "@jsonforms/core";
import { Typography } from '@mui/material';

const { MaterialOneOfRenderer } = Unwrapped

const OneOfControlWithTitle = (props: CombinatorRendererProps) => 
  <>
    <Typography variant='h5'>{props.label}</Typography>
    <MaterialOneOfRenderer {...props}/>
  </>

export default withJsonFormsOneOfProps(OneOfControlWithTitle);