import isEmpty from 'lodash/isEmpty' ; import React from 'react' ; import { ComponentType } from 'react' ; import Ajv from 'ajv' ; import type { UISchemaElement } from '@jsonforms/core' ; import { getAjv , JsonFormsCellRendererRegistryEntry , JsonFormsRendererRegistryEntry , JsonSchema , OwnPropsOfRenderer , } from '@jsonforms/core' ; import { JsonFormsDispatch , useJsonForms } from '@jsonforms/react' ; import { Grid , Hidden } from '@mui/material' ; export const renderLayoutElements = ( elements , schema , path , enabled , renderers ? , cells ? ) => { return elements . map ( ( child , index ) => ( < Grid item key = { `${ path }-${ index }` } xs > < JsonFormsDispatch uischema = { child } schema = { schema } path = { path } enabled = { enabled } renderers = { renderers } cells = { cells } / > < /Grid>)); } ; export interface MaterialLayoutRendererProps extends OwnPropsOfRenderer { elements : UISchemaElement [ ] ; direction : 'row' | 'column' ; } const MaterialLayoutRendererComponent = ( { visible , elements , schema , path , enabled , direction , renderers , cells } ) => { if ( isEmpty ( elements ) ) { return null ; } else { return ( < Hidden xsUp = { ! visible } > < Grid container direction = { direction } spacing = { direction === 'row' ? 2 : 0 } > { renderLayoutElements ( elements , schema , path , enabled , renderers , cells ) } < /Grid> < /Hidden>); } } ; export const MaterialLayoutRenderer = React . memo ( MaterialLayoutRendererComponent ) ; export interface AjvProps { ajv : Ajv ; } export const withAjvProps = < P extends { } > ( Component ) => ( props ) => { const ctx = useJsonForms ( ) ; const ajv = getAjv ( { jsonforms : { ... ctx } } ) ; return ( < Component { ... props } ajv = { ajv } / > ) ; } ;