Skip to content

Commit 6cc1279

Browse files
sdirixsdirix
authored
Merge pull request eclipsesource#48 from AlexandraBuzila/separate-redux-standalone
Separate Redux and standalone example
2 parents 0016ca9 + 5e0e62b commit 6cc1279

13 files changed

+2147
-1972
lines changed

‎.vscode/extensions.json

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
// See http://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
3+
// Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
4+
5+
// List of extensions which should be recommended for users of this workspace.
6+
"recommendations": [
7+
"esbenp.prettier-vscode",
8+
"ms-vscode.vscode-typescript-tslint-plugin"
9+
],
10+
// List of extensions recommended by VS Code that should not be recommended for users of this workspace.
11+
"unwantedRecommendations": []
12+
}

‎.vscode/settings.json

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"editor.formatOnSave": true,
3+
"editor.defaultFormatter": "esbenp.prettier-vscode",
4+
"prettier.jsxSingleQuote": true,
5+
"prettier.singleQuote": true
6+
}

‎package-lock.json

+1,885-1,755
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+19-17
Original file line numberDiff line numberDiff line change
@@ -3,26 +3,28 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6-
"@jsonforms/core": "2.3.1",
7-
"@jsonforms/material-renderers": "2.3.1",
8-
"@jsonforms/react": "2.3.1",
9-
"@material-ui/core": "^4.3.3",
10-
"@material-ui/icons": "^4.2.1",
11-
"@types/jest": "^24.0.18",
12-
"@types/node": "^12.7.2",
13-
"@types/react": "^16.9.2",
14-
"@types/react-dom": "^16.9.0",
15-
"@types/react-redux": "^7.1.2",
16-
"react": "^16.9.0",
17-
"react-dom": "^16.9.0",
18-
"react-redux": "^7.1.1",
6+
"@jsonforms/core": "^2.3.2-beta.0",
7+
"@jsonforms/material-renderers": "^2.3.2-beta.0",
8+
"@jsonforms/react": "^2.3.2-beta.0",
9+
"@material-ui/core": "^4.7.0",
10+
"@material-ui/icons": "^4.5.1",
11+
"@types/jest": "^24.0.23",
12+
"@types/lodash": "^4.14.149",
13+
"@types/node": "^12.12.14",
14+
"@types/react": "^16.9.13",
15+
"@types/react-dom": "^16.9.4",
16+
"@types/react-redux": "^7.1.5",
17+
"lodash": "^4.17.15",
18+
"react": "^16.12.0",
19+
"react-dom": "^16.12.0",
20+
"react-redux": "^7.1.3",
1921
"redux": "^4.0.4",
20-
"typescript": "^3.5.3"
22+
"typescript": "^3.7.2"
2123
},
2224
"devDependencies": {
23-
"cypress": "^3.4.1",
24-
"react-scripts": "^3.1.1",
25-
"start-server-and-test": "^1.10.0"
25+
"cypress": "^3.7.0",
26+
"react-scripts": "^3.2.0",
27+
"start-server-and-test": "^1.10.6"
2628
},
2729
"scripts": {
2830
"start": "react-scripts start",

‎src/App.css

+6-2
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,10 @@
2424
}
2525

2626
@keyframes App-logo-spin {
27-
from { transform: rotate(0deg); }
28-
to { transform: rotate(360deg); }
27+
from {
28+
transform: rotate(0deg);
29+
}
30+
to {
31+
transform: rotate(360deg);
32+
}
2933
}

‎src/App.tsx

+120-85
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,27 @@
1-
import React, { Fragment, useState } from 'react';
2-
import { connect } from 'react-redux';
3-
import {getData, JsonFormsState} from '@jsonforms/core';
4-
import { JsonForms, JsonFormsDispatch, JsonFormsReduxContext } from '@jsonforms/react';
5-
import Grid from "@material-ui/core/Grid";
6-
import Typography from "@material-ui/core/Typography";
7-
import withStyles, { WithStyles } from "@material-ui/core/styles/withStyles";
8-
import createStyles from "@material-ui/core/styles/createStyles";
1+
import React, { Fragment, useState, useEffect, useCallback } from 'react';
2+
import {
3+
JsonForms,
4+
JsonFormsDispatch,
5+
JsonFormsReduxContext
6+
} from '@jsonforms/react';
7+
import { Provider } from 'react-redux';
8+
import Grid from '@material-ui/core/Grid';
9+
import Typography from '@material-ui/core/Typography';
10+
import withStyles, { WithStyles } from '@material-ui/core/styles/withStyles';
11+
import createStyles from '@material-ui/core/styles/createStyles';
912
import { Tabs, Tab } from '@material-ui/core';
1013
import logo from './logo.svg';
1114
import './App.css';
1215
import schema from './schema.json';
1316
import uischema from './uischema.json';
14-
import { materialRenderers } from '@jsonforms/material-renderers';
17+
import {
18+
materialCells,
19+
materialRenderers
20+
} from '@jsonforms/material-renderers';
21+
import { Store } from 'redux';
22+
import { get } from 'lodash';
23+
import RatingControl from './RatingControl';
24+
import ratingControlTester from './ratingControlTester';
1525

1626
const styles = createStyles({
1727
container: {
@@ -25,7 +35,7 @@ const styles = createStyles({
2535
display: 'flex',
2636
justifyContent: 'center',
2737
borderRadius: '0.25em',
28-
backgroundColor: '#cecece',
38+
backgroundColor: '#cecece'
2939
},
3040
demoform: {
3141
margin: 'auto',
@@ -34,93 +44,118 @@ const styles = createStyles({
3444
});
3545

3646
export interface AppProps extends WithStyles<typeof styles> {
37-
dataAsString: string;
47+
store: Store;
3848
}
3949

40-
const App = ({ classes, dataAsString }: AppProps) => {
50+
const data = {
51+
name: 'Send email to Adrian',
52+
description: 'Confirm if you have passed the subject\nHereby ...',
53+
done: true,
54+
recurrence: 'Daily',
55+
rating: 3
56+
};
57+
58+
const getDataAsStringFromStore = (store: Store) =>
59+
store
60+
? JSON.stringify(
61+
get(store.getState(), ['jsonforms', 'core', 'data']),
62+
null,
63+
2
64+
)
65+
: '';
66+
67+
const App = ({ store, classes }: AppProps) => {
4168
const [tabIdx, setTabIdx] = useState(0);
42-
function handleTabChange(event: any, newValue: number) {
43-
setTabIdx(newValue);
44-
}
69+
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+
);
82+
83+
useEffect(() => {
84+
const updateStringData = () => {
85+
const stringData = getDataAsStringFromStore(store);
86+
setDisplayDataAsString(stringData);
87+
};
88+
store.subscribe(updateStringData);
89+
updateStringData();
90+
}, [store]);
91+
92+
useEffect(() => {
93+
setDisplayDataAsString(JSON.stringify(standaloneData, null, 2));
94+
}, [standaloneData]);
95+
4596
return (
4697
<Fragment>
47-
<div className="App">
48-
<header className="App-header">
49-
<img src={logo} className="App-logo" alt="logo" />
50-
<h1 className="App-title">Welcome to JSON Forms with React</h1>
51-
<p className="App-intro">More Forms. Less Code.</p>
98+
<div className='App'>
99+
<header className='App-header'>
100+
<img src={logo} className='App-logo' alt='logo' />
101+
<h1 className='App-title'>Welcome to JSON Forms with React</h1>
102+
<p className='App-intro'>More Forms. Less Code.</p>
52103
</header>
53104
</div>
54105

55-
<Tabs value={tabIdx} onChange={handleTabChange}>
56-
<Tab label="via Redux" />
57-
<Tab label="Standalone" />
58-
</Tabs>
59-
60-
{tabIdx === 0 &&
61-
<Grid container justify={'center'} spacing={1} className={classes.container}>
62-
<Grid item sm={6}>
63-
<Typography
64-
variant={'h3'}
65-
className={classes.title}
66-
>
67-
Bound data
68-
</Typography>
69-
<div className={classes.dataContent}>
70-
<pre id="boundData">{dataAsString}</pre>
106+
<Grid
107+
container
108+
justify={'center'}
109+
spacing={1}
110+
className={classes.container}
111+
>
112+
<Grid item sm={6}>
113+
<Typography variant={'h3'} className={classes.title}>
114+
Bound data
115+
</Typography>
116+
<div className={classes.dataContent}>
117+
<pre id='boundData'>{displayDataAsString}</pre>
118+
</div>
119+
</Grid>
120+
<Grid item sm={6}>
121+
<Typography variant={'h3'} className={classes.title}>
122+
Rendered form
123+
</Typography>
124+
<Tabs value={tabIdx} onChange={handleTabChange}>
125+
<Tab label='via Redux' />
126+
<Tab label='Standalone' />
127+
</Tabs>
128+
{tabIdx === 0 && (
129+
<div className={classes.demoform} id='form'>
130+
{store ? (
131+
<Provider store={store}>
132+
<JsonFormsReduxContext>
133+
<JsonFormsDispatch />
134+
</JsonFormsReduxContext>
135+
</Provider>
136+
) : null}
71137
</div>
72-
</Grid>
73-
<Grid item sm={6}>
74-
<Typography
75-
variant={'h3'}
76-
className={classes.title}
77-
>
78-
Rendered form
79-
</Typography>
80-
<div className={classes.demoform} id="form">
81-
<JsonFormsReduxContext>
82-
<JsonFormsDispatch />
83-
</JsonFormsReduxContext>
138+
)}
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+
/>
84153
</div>
85-
</Grid>
154+
)}
86155
</Grid>
87-
}
88-
{tabIdx === 1 &&
89-
<div className={classes.demoform} style={{ maxWidth: 1000 }}>
90-
<JsonForms
91-
schema={schema}
92-
uischema={uischema}
93-
data={{
94-
name: 'Send email to Adrian',
95-
description: 'Confirm if you have passed the subject\nHereby ...',
96-
done: true,
97-
recurrence: 'Daily',
98-
rating: 3,
99-
}}
100-
renderers={materialRenderers}
101-
/>
102-
<JsonForms
103-
schema={schema}
104-
uischema={uischema}
105-
data={{
106-
name: undefined,
107-
due_date: '2019-06-19',
108-
description: 'Confirm if you have passed the subject\nHereby ...',
109-
done: true,
110-
recurrence: 'Daily',
111-
rating: 3,
112-
}}
113-
renderers={materialRenderers}
114-
/>
115-
</div>
116-
}
156+
</Grid>
117157
</Fragment>
118158
);
119159
};
120160

121-
const mapStateToProps = (state: JsonFormsState) => {
122-
return { dataAsString: JSON.stringify(getData(state), null, 2) }
123-
};
124-
125-
export default connect(mapStateToProps)(withStyles(styles)(App));
126-
161+
export default withStyles(styles)(App);

‎src/Rating.tsx

+21-22
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import * as React from 'react';
22

33
// TODO: typings
44
export class Rating extends React.Component<any, any> {
5-
65
constructor(props: any) {
76
super(props);
87
this.state = {
@@ -42,28 +41,28 @@ export class Rating extends React.Component<any, any> {
4241
render() {
4342
const { onClick } = this.props;
4443

45-
return (<div id="#/properties/rating">
46-
<p>
47-
Rating:
48-
</p>
49-
{
50-
[0, 1, 2, 3, 4].map(i => {
51-
const rating = this.state.hoverAt != null ? this.state.hoverAt : this.state.rating;
52-
53-
return <span onMouseOver={() => this.handleMouseOver(i)}
54-
onMouseOut={() => this.handleMouseOut()}
55-
onClick={() => {
56-
this.handleClick(i);
57-
onClick({ value: i + 1 });
44+
return (
45+
<div id='#/properties/rating'>
46+
<p>Rating:</p>
47+
{[0, 1, 2, 3, 4].map(i => {
48+
const rating =
49+
this.state.hoverAt != null ? this.state.hoverAt : this.state.rating;
5850

59-
}}
60-
key={`${this.props.id}_${i}`}
61-
>
62-
{i < rating ? '\u2605' : '\u2606'}
63-
</span>;
64-
})
65-
}
66-
</div>
51+
return (
52+
<span
53+
onMouseOver={() => this.handleMouseOver(i)}
54+
onMouseOut={() => this.handleMouseOut()}
55+
onClick={() => {
56+
this.handleClick(i);
57+
onClick({ value: i + 1 });
58+
}}
59+
key={`${this.props.id}_${i}`}
60+
>
61+
{i < rating ? '\u2605' : '\u2606'}
62+
</span>
63+
);
64+
})}
65+
</div>
6766
);
6867
}
6968
}

0 commit comments

Comments
 (0)