How to extend MaterialRadioGroupControl to show a div under the radio control?

General
1

Hi, I want to create custom renderer with two radio buttons Yes and No. I tried following snippet but no luck. I want to show a div under the radio control based on the selected value of the radio button. When user clicks on div I want to handle the click event.
Any help would be appreciated.

import {
  JsonSchema,
  ControlProps,
  RankedTester,
  rankWith,
  OwnPropsOfEnum,
  isEnumControl,
  optionIs,
  and,
} from '@jsonforms/core';
import { Unwrapped } from '@jsonforms/material-renderers';
import { Grid } from '@mui/material';
const { MaterialRadioGroupControl } = Unwrapped;

type JsonSchemaWithCustomProp = JsonSchema & { isCustom: boolean };

export const radioWithCustomControl = (
  props: ControlProps & OwnPropsOfEnum
) => {
  const schema = props.schema as JsonSchemaWithCustomProp;
  return (
    <Grid container>
      <Grid item xs={12}>
        <MaterialRadioGroupControl {...props} />
      </Grid>
    </Grid>
  );
};

export const radioWithCustomControlTester: RankedTester = rankWith(
  21,
  and(isEnumControl, optionIs('format', 'radio'))
);
export default radioWithCustomControl;

I am getting below error .

TypeError: Cannot read properties of undefined (reading ‘length’)

MaterialRadioGroup

/src/controls/MaterialRadioGroup.tsx:60

:arrow_forward: 28 stack frames were collapsed.

My schema json

{
  "type": "object",
  "properties": {
    "do_you_own_house": {
      "type": "string",
      "isCustom": false,
      "enum": [
        "Yes",
        "No"
      ],
      "options": [
        {
          "label": "some",
          "value": "somevalue"
        },
        {
          "label": "nothing",
          "value": "nonthingval"
        }
      ]
    }
}
}

My uischema json

{
  "type": "VerticalLayout",
  "elements": [
    {
      "type": "Control",
      "label": "Do you own a house, condo, apartment or other residence",
      "scope": "#/properties/do_you_own_house",
      "options": {
        "format": "radio"
      }
    }
  ]
}
2

Hi @pankaj-z,

The radioWithCustomControl still needs to be bound against the JSON Forms data storage and bindings. For this we offer HOCs like withJsonFormsControlProps. In your case you should use the same HOC as the MaterialRadioGroupControl uses, i.e. withJsonFormsEnumProps.

Note that your JSON Schema contains a custom options attribute. I’m not sure what this shall be used for, but it will not be automatically picked up by the renderer. You will have to manually integrate it in some way. Note that if you want to use it to modify the label of enums I would rather recommend to either use oneOfs, see here, or the JSON Forms i18n support, see here (documentation is work in progress).