1
- import React , { Fragment , useState , useEffect , useCallback } from 'react' ;
1
+ import React , { Fragment , useState , useEffect } from 'react' ;
2
2
import {
3
3
JsonForms ,
4
4
JsonFormsDispatch ,
5
- JsonFormsReduxContext
5
+ JsonFormsReduxContext ,
6
6
} from '@jsonforms/react' ;
7
7
import { Provider } from 'react-redux' ;
8
8
import Grid from '@material-ui/core/Grid' ;
@@ -16,7 +16,7 @@ import schema from './schema.json';
16
16
import uischema from './uischema.json' ;
17
17
import {
18
18
materialCells ,
19
- materialRenderers
19
+ materialRenderers ,
20
20
} from '@jsonforms/material-renderers' ;
21
21
import { Store } from 'redux' ;
22
22
import { get } from 'lodash' ;
@@ -25,22 +25,22 @@ import ratingControlTester from './ratingControlTester';
25
25
26
26
const styles = createStyles ( {
27
27
container : {
28
- padding : '1em'
28
+ padding : '1em' ,
29
29
} ,
30
30
title : {
31
31
textAlign : 'center' ,
32
- padding : '0.25em'
32
+ padding : '0.25em' ,
33
33
} ,
34
34
dataContent : {
35
35
display : 'flex' ,
36
36
justifyContent : 'center' ,
37
37
borderRadius : '0.25em' ,
38
- backgroundColor : '#cecece'
38
+ backgroundColor : '#cecece' ,
39
39
} ,
40
40
demoform : {
41
41
margin : 'auto' ,
42
- padding : '1rem'
43
- }
42
+ padding : '1rem' ,
43
+ } ,
44
44
} ) ;
45
45
46
46
export interface AppProps extends WithStyles < typeof styles > {
@@ -52,7 +52,7 @@ const data = {
52
52
description : 'Confirm if you have passed the subject\nHereby ...' ,
53
53
done : true ,
54
54
recurrence : 'Daily' ,
55
- rating : 3
55
+ rating : 3 ,
56
56
} ;
57
57
58
58
const getDataAsStringFromStore = ( store : Store ) =>
@@ -64,21 +64,26 @@ const getDataAsStringFromStore = (store: Store) =>
64
64
)
65
65
: '' ;
66
66
67
+ const renderers = [
68
+ ...materialRenderers ,
69
+ //register custom renderers
70
+ { tester : ratingControlTester , renderer : RatingControl } ,
71
+ ] ;
72
+
67
73
const App = ( { store, classes } : AppProps ) => {
68
74
const [ tabIdx , setTabIdx ] = useState ( 0 ) ;
69
75
const [ displayDataAsString , setDisplayDataAsString ] = useState ( '' ) ;
70
- const [ standaloneData , setStandaloneData ] = useState ( data ) ;
71
- const handleTabChange = useCallback (
72
- ( event : any , newValue : number ) => {
73
- setTabIdx ( newValue ) ;
74
- setDisplayDataAsString (
75
- newValue === 0
76
- ? getDataAsStringFromStore ( store )
77
- : JSON . stringify ( standaloneData , null , 2 )
78
- ) ;
79
- } ,
80
- [ store , standaloneData ]
81
- ) ;
76
+ const [ jsonformsInputData , setJsonformsInputData ] = useState < any > ( data ) ;
77
+ const [ jsonformsOutputData , setJsonformsOutputData ] = useState < any > ( data ) ;
78
+
79
+ useEffect ( ( ) => {
80
+ if ( tabIdx === 0 ) {
81
+ setJsonformsInputData ( jsonformsOutputData ) ;
82
+ setDisplayDataAsString ( JSON . stringify ( jsonformsOutputData , null , 2 ) ) ;
83
+ } else {
84
+ setDisplayDataAsString ( getDataAsStringFromStore ( store ) ) ;
85
+ }
86
+ } , [ tabIdx , store , jsonformsOutputData ] ) ;
82
87
83
88
useEffect ( ( ) => {
84
89
const updateStringData = ( ) => {
@@ -90,8 +95,8 @@ const App = ({ store, classes }: AppProps) => {
90
95
} , [ store ] ) ;
91
96
92
97
useEffect ( ( ) => {
93
- setDisplayDataAsString ( JSON . stringify ( standaloneData , null , 2 ) ) ;
94
- } , [ standaloneData ] ) ;
98
+ setDisplayDataAsString ( JSON . stringify ( jsonformsOutputData , null , 2 ) ) ;
99
+ } , [ jsonformsOutputData ] ) ;
95
100
96
101
return (
97
102
< Fragment >
@@ -121,11 +126,23 @@ const App = ({ store, classes }: AppProps) => {
121
126
< Typography variant = { 'h3' } className = { classes . title } >
122
127
Rendered form
123
128
</ Typography >
124
- < Tabs value = { tabIdx } onChange = { handleTabChange } >
125
- < Tab label = 'via Redux' />
129
+ < Tabs value = { tabIdx } onChange = { ( event , value ) => setTabIdx ( value ) } >
126
130
< Tab label = 'Standalone' />
131
+ < Tab label = 'via Redux (legacy)' />
127
132
</ Tabs >
128
133
{ tabIdx === 0 && (
134
+ < div className = { classes . demoform } >
135
+ < JsonForms
136
+ schema = { schema }
137
+ uischema = { uischema }
138
+ data = { jsonformsInputData }
139
+ renderers = { renderers }
140
+ cells = { materialCells }
141
+ onChange = { ( { errors, data } ) => setJsonformsOutputData ( data ) }
142
+ />
143
+ </ div >
144
+ ) }
145
+ { tabIdx === 1 && (
129
146
< div className = { classes . demoform } id = 'form' >
130
147
{ store ? (
131
148
< Provider store = { store } >
@@ -136,22 +153,6 @@ const App = ({ store, classes }: AppProps) => {
136
153
) : null }
137
154
</ div >
138
155
) }
139
- { tabIdx === 1 && (
140
- < div className = { classes . demoform } >
141
- < JsonForms
142
- schema = { schema }
143
- uischema = { uischema }
144
- data = { standaloneData }
145
- renderers = { [
146
- ...materialRenderers ,
147
- //register custom renderer
148
- { tester : ratingControlTester , renderer : RatingControl }
149
- ] }
150
- cells = { materialCells }
151
- onChange = { ( { errors, data } ) => setStandaloneData ( data ) }
152
- />
153
- </ div >
154
- ) }
155
156
</ Grid >
156
157
</ Grid >
157
158
</ Fragment >
0 commit comments