import React , { useState } from 'react' ; import { AppBar , Hidden , Tab , Tabs } from '@mui/material' ; import { and , Categorization , Category , isVisible , RankedTester , rankWith , StatePropsOfLayout , Tester , UISchemaElement , uiTypeIs } from '@jsonforms/core' ; import { withJsonFormsLayoutProps } from '@jsonforms/react' ; import { AjvProps , MaterialLayoutRenderer , MaterialLayoutRendererProps , withAjvProps } from '../util/layout' ; export const isSingleLevelCategorization = and ( uiTypeIs ( 'Categorization' ) , ( uischema ) : boolean => { const categorization = uischema as Categorization ; return ( categorization . elements && categorization . elements . reduce ( ( acc , e ) => acc && e . type === 'Category' , true ) ) ; } ) ; export const materialCategorizationTester = rankWith ( 1 , isSingleLevelCategorization ) ; export interface CategorizationState { activeCategory : number ; } export interface MaterialCategorizationLayoutRendererProps extends StatePropsOfLayout , AjvProps { selected ? : number ; ownState ? : boolean ; data ? : any ; onChange ? ( selected , prevSelected ) : void ; } export const MaterialCategorizationLayoutRenderer = ( props ) => { const { data , path , renderers , cells , schema , uischema , visible , enabled , selected , onChange , ajv } = props ; const categorization = uischema as Categorization ; const [ activeCategory , setActiveCategory ] = useState < number | undefined > ( selected ?? 0 ) ; const categories = categorization . elements . filter ( ( category ) => isVisible ( category , data , undefined , ajv ) ) ; const childProps = { elements : categories [ activeCategory ] . elements , schema , path , direction : 'column' , enabled , visible , renderers , cells } ; const onTabChange = ( _event , value ) => { if ( onChange ) { onChange ( value , activeCategory ) ; } setActiveCategory ( value ) ; } ; return ( < Hidden xsUp = { ! visible } > < AppBar position = 'static' > < Tabs value = { activeCategory } onChange = { onTabChange } textColor = 'inherit' indicatorColor = 'secondary' variant = 'scrollable' > { categories . map ( ( e , idx ) => ( < Tab key = { idx } label = { e . label } / > ) ) } < /Tabs> < /AppBar> < div style = { { marginTop : '0.5em' } } > < MaterialLayoutRenderer { ... childProps } / > < /div> < /Hidden>); } ; export default withJsonFormsLayoutProps ( withAjvProps ( MaterialCategorizationLayoutRenderer ) ) ;