Skip to content

Commit 19d003d

Browse files
AlexandraBuzilasdirix
authored andcommitted
Small style fixes
- extract renderers to a const - swap order of Standalone and Redux examples and mark Redux variant as legacy - don't refeed output data to jsonforms
1 parent 83288e8 commit 19d003d

File tree

1 file changed

+42
-41
lines changed

1 file changed

+42
-41
lines changed

src/App.tsx

+42-41
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import React, { Fragment, useState, useEffect, useCallback } from 'react';
1+
import React, { Fragment, useState, useEffect } from 'react';
22
import {
33
JsonForms,
44
JsonFormsDispatch,
5-
JsonFormsReduxContext
5+
JsonFormsReduxContext,
66
} from '@jsonforms/react';
77
import { Provider } from 'react-redux';
88
import Grid from '@material-ui/core/Grid';
@@ -16,7 +16,7 @@ import schema from './schema.json';
1616
import uischema from './uischema.json';
1717
import {
1818
materialCells,
19-
materialRenderers
19+
materialRenderers,
2020
} from '@jsonforms/material-renderers';
2121
import { Store } from 'redux';
2222
import { get } from 'lodash';
@@ -25,22 +25,22 @@ import ratingControlTester from './ratingControlTester';
2525

2626
const styles = createStyles({
2727
container: {
28-
padding: '1em'
28+
padding: '1em',
2929
},
3030
title: {
3131
textAlign: 'center',
32-
padding: '0.25em'
32+
padding: '0.25em',
3333
},
3434
dataContent: {
3535
display: 'flex',
3636
justifyContent: 'center',
3737
borderRadius: '0.25em',
38-
backgroundColor: '#cecece'
38+
backgroundColor: '#cecece',
3939
},
4040
demoform: {
4141
margin: 'auto',
42-
padding: '1rem'
43-
}
42+
padding: '1rem',
43+
},
4444
});
4545

4646
export interface AppProps extends WithStyles<typeof styles> {
@@ -52,7 +52,7 @@ const data = {
5252
description: 'Confirm if you have passed the subject\nHereby ...',
5353
done: true,
5454
recurrence: 'Daily',
55-
rating: 3
55+
rating: 3,
5656
};
5757

5858
const getDataAsStringFromStore = (store: Store) =>
@@ -64,21 +64,26 @@ const getDataAsStringFromStore = (store: Store) =>
6464
)
6565
: '';
6666

67+
const renderers = [
68+
...materialRenderers,
69+
//register custom renderers
70+
{ tester: ratingControlTester, renderer: RatingControl },
71+
];
72+
6773
const App = ({ store, classes }: AppProps) => {
6874
const [tabIdx, setTabIdx] = useState(0);
6975
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]);
8287

8388
useEffect(() => {
8489
const updateStringData = () => {
@@ -90,8 +95,8 @@ const App = ({ store, classes }: AppProps) => {
9095
}, [store]);
9196

9297
useEffect(() => {
93-
setDisplayDataAsString(JSON.stringify(standaloneData, null, 2));
94-
}, [standaloneData]);
98+
setDisplayDataAsString(JSON.stringify(jsonformsOutputData, null, 2));
99+
}, [jsonformsOutputData]);
95100

96101
return (
97102
<Fragment>
@@ -121,11 +126,23 @@ const App = ({ store, classes }: AppProps) => {
121126
<Typography variant={'h3'} className={classes.title}>
122127
Rendered form
123128
</Typography>
124-
<Tabs value={tabIdx} onChange={handleTabChange}>
125-
<Tab label='via Redux' />
129+
<Tabs value={tabIdx} onChange={(event, value) => setTabIdx(value)}>
126130
<Tab label='Standalone' />
131+
<Tab label='via Redux (legacy)' />
127132
</Tabs>
128133
{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 && (
129146
<div className={classes.demoform} id='form'>
130147
{store ? (
131148
<Provider store={store}>
@@ -136,22 +153,6 @@ const App = ({ store, classes }: AppProps) => {
136153
) : null}
137154
</div>
138155
)}
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-
)}
155156
</Grid>
156157
</Grid>
157158
</Fragment>

0 commit comments

Comments
 (0)