import isEmpty from 'lodash/isEmpty' ; import React from 'react' ; import { Card , CardContent , CardHeader , Hidden } from '@mui/material' ; import { GroupLayout , LayoutProps , RankedTester , rankWith , uiTypeIs , withIncreasedRank , } from '@jsonforms/core' ; import { MaterialLayoutRenderer , MaterialLayoutRendererProps } from '../util/layout' ; import { withJsonFormsLayoutProps } from '@jsonforms/react' ; export const groupTester = rankWith ( 1 , uiTypeIs ( 'Group' ) ) ; const style = { marginBottom : '10px' } ; const GroupComponent = React . memo ( ( { visible , enabled , uischema , ... props } ) => { const groupLayout = uischema as GroupLayout ; return ( < Hidden xsUp = { ! visible } > < Card style = { style } > { ! isEmpty ( groupLayout . label ) && ( < CardHeader title = { groupLayout . label } / > ) } < CardContent > < MaterialLayoutRenderer { ... props } visible = { visible } enabled = { enabled } elements = { groupLayout . elements } / > < /CardContent> < /Card> < /Hidden>); } ) ; export const MaterializedGroupLayoutRenderer = ( { uischema , schema , path , visible , enabled , renderers , cells , direction } ) => { const groupLayout = uischema as GroupLayout ; return ( < GroupComponent elements = { groupLayout . elements } schema = { schema } path = { path } direction = { direction } visible = { visible } enabled = { enabled } uischema = { uischema } renderers = { renderers } cells = { cells } / > ) ; } ; export default withJsonFormsLayoutProps ( MaterializedGroupLayoutRenderer ) ; export const materialGroupTester = withIncreasedRank ( 1 , groupTester ) ;