import React , { useCallback , useState } from 'react' ; import { createCombinatorRenderInfos , isAnyOfControl , JsonSchema , RankedTester , rankWith , resolveSubSchemas , StatePropsOfCombinator } from '@jsonforms/core' ; import { JsonFormsDispatch , withJsonFormsAnyOfProps } from '@jsonforms/react' ; import { Hidden , Tab , Tabs } from '@mui/material' ; import CombinatorProperties from './CombinatorProperties' ; export const MaterialAnyOfRenderer = ( { schema , rootSchema , indexOfFittingSchema , visible , path , renderers , cells , uischema , uischemas } ) => { const [ selectedAnyOf , setSelectedAnyOf ] = useState ( indexOfFittingSchema || 0 ) ; const handleChange = useCallback ( ( _ev , value ) => setSelectedAnyOf ( value ) , [ setSelectedAnyOf ] ) ; const anyOf = 'anyOf' ; const _schema = resolveSubSchemas ( schema , rootSchema , anyOf ) ; const anyOfRenderInfos = createCombinatorRenderInfos ( ( _schema as JsonSchema ) . anyOf , rootSchema , anyOf , uischema , path , uischemas ) ; return ( < Hidden xsUp = { ! visible } > < CombinatorProperties schema = { _schema } combinatorKeyword = { 'anyOf' } path = { path } / > < Tabs value = { selectedAnyOf } onChange = { handleChange } > { anyOfRenderInfos . map ( anyOfRenderInfo => ( < Tab key = { anyOfRenderInfo . label } label = { anyOfRenderInfo . label } / > ) ) } < /Tabs> { anyOfRenderInfos . map ( ( anyOfRenderInfo , anyOfIndex ) => selectedAnyOf === anyOfIndex && ( < JsonFormsDispatch key = { anyOfIndex } schema = { anyOfRenderInfo . schema } uischema = { anyOfRenderInfo . uischema } path = { path } renderers = { renderers } cells = { cells } / > ) ) } < /Hidden>); } ; export const materialAnyOfControlTester = rankWith ( 3 , isAnyOfControl ) ; export default withJsonFormsAnyOfProps ( MaterialAnyOfRenderer ) ;