import maxBy from 'lodash/maxBy' ; import React , { useMemo } from 'react' ; import Ajv from 'ajv' ; import { UnknownRenderer } from './UnknownRenderer' ; import { createId , Generate , isControl , JsonFormsCellRendererRegistryEntry , JsonFormsCore , JsonFormsI18nState , JsonFormsProps , JsonFormsRendererRegistryEntry , JsonFormsUISchemaRegistryEntry , JsonSchema , OwnPropsOfJsonFormsRenderer , removeId , UISchemaElement , ValidationMode } from '@jsonforms/core' ; import { JsonFormsStateProvider , useJsonForms } from './JsonFormsContext' ; interface JsonFormsRendererState { id : string ; } export interface JsonFormsReactProps { onChange ? ( state ) : void ; } export class JsonFormsDispatchRenderer extends React . Component < JsonFormsProps , JsonFormsRendererState > { constructor ( props ) { super ( props ) ; this . state = { id : isControl ( props . uischema ) ? createId ( props . uischema . scope ) : undefined , } ; } componentWillUnmount ( ) { if ( isControl ( this . props . uischema ) ) { removeId ( this . state . id ) ; } } render ( ) { const { schema , uischema , path , enabled , renderers , cells } = this . props as JsonFormsProps ; return ( < TestAndRender uischema = { uischema } schema = { schema } path = { path } enabled = { enabled } renderers = { renderers } cells = { cells } id = { this . state . id } / > ) ; } } const TestAndRender = React . memo ( ( props ) => { const renderer = useMemo ( ( ) => maxBy ( props . renderers , r => r . tester ( props . uischema , props . schema ) ) , [ props . renderers , props . uischema , props . schema ] ) ; if ( renderer === undefined || renderer . tester ( props . uischema , props . schema ) === - 1 ) { return < UnknownRenderer type = { 'renderer' } />; } else { const Render = renderer . renderer ; return ( < Render uischema = { props . uischema } schema = { props . schema } path = { props . path } enabled = { props . enabled } renderers = { props . renderers } cells = { props . cells } id = { props . id } / > ) ; } } ) ; deprecated export class ResolvedJsonFormsDispatchRenderer extends JsonFormsDispatchRenderer { constructor ( props ) { super ( props ) ; } } const useJsonFormsDispatchRendererProps = ( props ) => { const ctx = useJsonForms ( ) ; return { schema : props . schema || ctx . core . schema , uischema : props . uischema || ctx . core . uischema , path : props . path || '' , enabled : props . enabled , rootSchema : ctx . core . schema , renderers : props . renderers || ctx . renderers , cells : props . cells || ctx . cells , } ; } ; export const JsonFormsDispatch = React . memo ( ( props ) => { const renderProps = useJsonFormsDispatchRendererProps ( props ) ; return < JsonFormsDispatchRenderer { ... renderProps } / > ; } ) ; deprecated export const ResolvedJsonFormsDispatch = React . memo ( ( props ) => { const renderProps = useJsonFormsDispatchRendererProps ( props ) ; return < ResolvedJsonFormsDispatchRenderer { ... renderProps } / > ; } ) ; export interface JsonFormsInitStateProps { data : any ; schema ? : JsonSchema ; uischema ? : UISchemaElement ; renderers : JsonFormsRendererRegistryEntry [ ] ; cells ? : JsonFormsCellRendererRegistryEntry [ ] ; ajv ? : Ajv ; config ? : any ; uischemas ? : JsonFormsUISchemaRegistryEntry [ ] ; readonly ? : boolean ; validationMode ? : ValidationMode ; i18n ? : JsonFormsI18nState ; } export const JsonForms = ( props ) => { const { ajv , data , schema , uischema , renderers , cells , onChange , config , uischemas , readonly , validationMode , i18n } = props ; const schemaToUse = useMemo ( ( ) => ( schema !== undefined ? schema : Generate . jsonSchema ( data ) ) , [ schema , data ] ) ; const uischemaToUse = useMemo ( ( ) => typeof uischema === 'object' ? uischema : Generate . uiSchema ( schemaToUse ) , [ uischema , schemaToUse ] ) ; return ( < JsonFormsStateProvider initState = { { core : { ajv , data , schema : schemaToUse , uischema : uischemaToUse , validationMode : validationMode } , config , uischemas , renderers , cells , readonly , i18n } } onChange = { onChange } > < JsonFormsDispatch /> < /JsonFormsStateProvider>); } ;