My Package Versions:
“@jsonforms/core”: “2.5.0-alpha.1”,
“@jsonforms/material-renderers”: “2.5.0-alpha.1”,
I’m trying to write a renderer for a control that extends the existing renderer while maintaining it’s functionality.
Specifically im trying to extend the MaterialBooleanControl with additional label fields, while using the already implented functionality of disabling/prechecking ControlBoxes.
I’m able to successfully trigger my custom renderer with the tester. I’m also able to output my additional label fields. However, when reusing the MaterialBooleanControl in my custom renderer, something
with the original props breaks, leading to the disabled/data functionality not being passed into the MaterialBooleanControl.
My custom renderer:
import React from ‘react’;
import {
ControlProps,
isBooleanControl,
RankedTester,
rankWith,
} from ‘@jsonforms/core’;
import isEmpty from ‘lodash/isEmpty’;
import { withJsonFormsControlProps } from ‘@jsonforms/react’;
import { FormControlLabel, Hidden } from ‘@material-ui/core’;
import { MuiCheckbox } from ‘@jsonforms/material-renderers’;
import { MaterialBooleanControl } from ‘@jsonforms/material-renderers’
import Grid from ‘@material-ui/core/Grid’;
export const checkBoxWithPricesControl = ({ data,
visible,
label,
id,
enabled,
uischema,
schema,
rootSchema,
handleChange,
errors,
path,
config}: ControlProps) => {
const props = { data,
visible,
label,
id,
enabled,
uischema,
schema,
rootSchema,
handleChange,
errors,
path};
return (
<MaterialBooleanControl { …props}/>
export const checkBoxWithPricesControlTester: RankedTester = rankWith(
3,
isBooleanControl
);
export default withJsonFormsControlProps(checkBoxWithPricesControl);
My App.tsx:
import React, { Fragment } from ‘react’;
import {
JsonForms,
} from ‘@jsonforms/react’;
import Grid from ‘@material-ui/core/Grid’;
import withStyles, { WithStyles } from ‘@material-ui/core/styles/withStyles’;
import createStyles from ‘@material-ui/core/styles/createStyles’;
import ‘./App.css’;
import schema from ‘./schema.json’;
import uischema from ‘./uischema.json’;
import {
materialCells,
materialRenderers,
} from ‘@jsonforms/material-renderers’;
import MaterialOneOfRadioGroupControl, { materialOneOfRadioGroupControlTester} from’./MaterialOneOfRadioGroupControl’;
import CheckBoxWithPricesControl, { checkBoxWithPricesControlTester} from’./CheckBoxWithPricesControl’;
const styles = createStyles({
container: {
padding: ‘1em’,
},
title: {
textAlign: ‘center’,
padding: ‘0.25em’,
},
dataContent: {
display: ‘flex’,
justifyContent: ‘center’,
borderRadius: ‘0.25em’,
backgroundColor: ‘#cecece’,
},
demoform: {
margin: ‘auto’,
padding: ‘1rem’,
},
});
export interface AppProps extends WithStyles {
}
const data = {
“textBlock” : true,
};
const renderers = [
…materialRenderers,
//register custom renderers
{ tester: materialOneOfRadioGroupControlTester, renderer: MaterialOneOfRadioGroupControl},
{ tester: checkBoxWithPricesControlTester, renderer: CheckBoxWithPricesControl}
];
const config = {
showUnfocusedDescription: true,
};
const App = ({ classes }: AppProps) => {
return (
<Grid
container
justify={‘center’}
spacing={1}
className={classes.container}
export default withStyles(styles)(App);
My uischema.json:
{
“type”: “Categorization”,
“elements”: [
{
“type”: “Category”,
“label”: “Grundpaket”,
“elements”: [
{
“type”: “HorizontalLayout”,
“elements”: [
{
“type”: “Group”,
“label”: “Grundpaket”,
“elements”: [
{
“type”: “Control”,
“scope”: “#/properties/basePackage”,
“options”: {
“format”: “radio”
}
}
]
}
]
}
]
},
{
"type": "Category",
"label": "Blöcke",
"elements": [
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Group",
"label": "Darstellungsblöcke",
"elements": [
{
"type": "Control",
"scope": "#/properties/textBlock",
"rule": {
"effect": "DISABLE",
"condition": {
"scope": "#/properties/textBlock",
"schema":{
"const": true
}
}
}
}
]
}
]
}
]
}
],
“options”: {
“variant”: “stepper”,
“showNavButtons”: true
}
}
My schema.json:
{
“type”: “object”,
“definitions”:{
“defaultBlock”: {
“type”: “boolean”,
“price”: “In allen Paketen inbegriffen”
},
“designBlock”:{
“type”: “boolean”,
“price”: 250
},
“functionBlock”:{
“type”: “boolean”,
“price”: 350
}
},
“properties”: {
“basePackage”:{
“type”: “string”,
“title”: “Grundpaket”,
“description”: “Your base package.”,
“oneOf”: [
{ “const”: “light”, “title”: “Light”},
{ “const”: “premium”, “title”: “Premium”},
{ “const”: “extra”, “title”: “Extra”}
]
},
"textBlock":{
"$ref" : "#/definitions/defaultBlock",
"title": "TextBlock"
}
}, “required”: [“basePackage”]
}
I know I’m messing something up with either the higher Order Component or passing the ControlProps Interface. The component does render though, but ignores the disabled property and the “textblock:true” from data.
When i rank the custom renderer lower again, the Checkbox renders fine (without my additional Fields of course).
[original thread by Christian Nyffenegger]