@@ -24,8 +24,16 @@ interface TesterContext {
24
24
config: any ;
25
25
}
26
26
27
- type Tester = (uischema : UISchemaElement , schema : JsonSchema , context : TesterContext ) => boolean ;
28
- type RankedTester = (uischema : UISchemaElement , schema : JsonSchema , context : TesterContext ) => number ;
27
+ type Tester = (
28
+ uischema : UISchemaElement ,
29
+ schema : JsonSchema ,
30
+ context : TesterContext
31
+ ) => boolean ;
32
+ type RankedTester = (
33
+ uischema : UISchemaElement ,
34
+ schema : JsonSchema ,
35
+ context : TesterContext
36
+ ) => number ;
29
37
```
30
38
31
39
This allows the testers to resolve any ` $ref ` they might encounter in their handed over ` schema ` by using the context's ` rootSchema ` .
@@ -50,30 +58,37 @@ To restore the old behavior, you can use `json-schema-ref-parser` or other libra
50
58
``` ts
51
59
import React , { useState } from ' react' ;
52
60
import { JsonForms } from ' @jsonforms/react' ;
53
- import { materialCells , materialRenderers } from ' @jsonforms/material-renderers' ;
61
+ import {
62
+ materialCells ,
63
+ materialRenderers ,
64
+ } from ' @jsonforms/material-renderers' ;
54
65
import $RefParser from ' @apidevtools/json-schema-ref-parser' ;
55
66
import JsonRefs from ' json-refs' ;
56
67
57
68
import mySchemaWithReferences from ' myschema.json' ;
58
69
59
70
const refParserOptions = {
60
71
dereference: {
61
- circular: false
62
- }
63
- }
72
+ circular: false ,
73
+ },
74
+ };
64
75
65
76
function App() {
66
77
const [data, setData] = useState (initialData );
67
78
const [resolvedSchema, setSchema] = useState ();
68
79
69
80
useEffect (() => {
70
- $RefParser .dereference (mySchemaWithReferences ).then (res => setSchema (res .$schema ));
81
+ $RefParser
82
+ .dereference (mySchemaWithReferences )
83
+ .then ((res ) => setSchema (res .$schema ));
71
84
// or
72
- JsonRefs .resolveRefs (mySchemaWithReferences ).then (res => setSchema (res .resolved ));
73
- },[]);
85
+ JsonRefs .resolveRefs (mySchemaWithReferences ).then ((res ) =>
86
+ setSchema (res .resolved )
87
+ );
88
+ }, []);
74
89
75
- if (resolvedSchema === undefined ) {
76
- return <div > Loading ... < / div >
90
+ if (resolvedSchema === undefined ) {
91
+ return <div > Loading ... < / div > ;
77
92
}
78
93
79
94
return (
@@ -143,12 +158,12 @@ export const schema = {
143
158
type: ' object' ,
144
159
properties: {
145
160
name: {
146
- type: ' string'
147
- }
161
+ type: ' string' ,
162
+ },
148
163
},
149
- required: [' name' ]
164
+ required: [' name' ],
150
165
};
151
- export const data = {name: ' Send email to Adrian' };
166
+ export const data = { name: ' Send email to Adrian' };
152
167
153
168
@Component ({
154
169
selector: ' app-root' ,
@@ -160,7 +175,7 @@ export const data = {name: 'Send email to Adrian'};
160
175
[renderers]="renderers"
161
176
(dataChange)="onDataChange($event)"
162
177
></jsonforms>
163
- `
178
+ ` ,
164
179
})
165
180
export class AppComponent {
166
181
readonly renderers = angularMaterialRenderers ;
@@ -201,15 +216,12 @@ All current Redux functionally can also be achieved with the standalone version.
201
216
Previously the store was initialized like this:
202
217
203
218
``` ts
204
- const store = createStore (
205
- combineReducers ({ jsonforms: jsonformsReducer () }),
206
- {
207
- jsonforms: {
208
- cells: materialCells ,
209
- renderers: materialRenderers
210
- }
211
- }
212
- );
219
+ const store = createStore (combineReducers ({ jsonforms: jsonformsReducer () }), {
220
+ jsonforms: {
221
+ cells: materialCells ,
222
+ renderers: materialRenderers ,
223
+ },
224
+ });
213
225
store .dispatch (Actions .init (data , schema , uischema ));
214
226
return (
215
227
< Provider store = {store }>
@@ -250,7 +262,7 @@ Within the standalone version, the renderer can just be provided to the `<JsonFo
250
262
const renderers = [
251
263
... materialRenderers ,
252
264
// register custom renderer
253
- { tester: customControlTester , renderer: CustomControl }
265
+ { tester: customControlTester , renderer: CustomControl },
254
266
];
255
267
256
268
const MyApp = () => (
@@ -259,7 +271,6 @@ const MyApp = () => (
259
271
renderers = {renderers }
260
272
/ >
261
273
);
262
-
263
274
```
264
275
265
276
##### Example 3: Listen to data and validation changes
@@ -286,7 +297,10 @@ If you want to keep using the Redux variant of JSON Forms for now (which is not
286
297
The new imports are available at ` @jsonforms/react/lib/redux ` , i.e.
287
298
288
299
``` ts
289
- import { jsonformsReducer , JsonFormsReduxProvider } from ' @jsonforms/react/lib/redux' ;
300
+ import {
301
+ jsonformsReducer ,
302
+ JsonFormsReduxProvider ,
303
+ } from ' @jsonforms/react/lib/redux' ;
290
304
```
291
305
292
306
## Migrating from JSON Forms 1.x (AngularJS 1.x)
@@ -298,8 +312,8 @@ The complexity of the migration of an existing JSON Forms 1.x application, which
298
312
There are two big changes between JSON Forms 1 and JSON Forms 2 you need to understand when migrating your existing application.
299
313
300
314
1 . JSON Forms 2.x does not rely on any specific UI framework [ or library] .
301
- The ` 2.0.0 ` initial release featured renderers based on [ React] ( https://reactjs.org ) .
302
- An [ Angular] ( https://angular.io ) based renderer set was released with ` 2.1.0 ` .
315
+ The ` 2.0.0 ` initial release featured renderers based on [ React] ( https://reactjs.org ) .
316
+ An [ Angular] ( https://angular.io ) based renderer set was released with ` 2.1.0 ` .
303
317
304
318
2 . Since JSON Forms 2.x maintains its internal state via [ redux] ( https://redux.js.org/ ) , you will need to add it as a dependency to your application.
305
319
@@ -314,20 +328,20 @@ Instead of:
314
328
315
329
``` ts
316
330
const uischema = {
317
- type: ' Control' ,
318
- scope: {
319
- $ref: ' #/properties/name'
320
- }
321
- }
331
+ type: ' Control' ,
332
+ scope: {
333
+ $ref: ' #/properties/name' ,
334
+ },
335
+ };
322
336
```
323
337
324
338
simply write:
325
339
326
340
``` ts
327
341
const uischema = {
328
- type: ' Control' ,
329
- scope: ' #/properties/name'
330
- }
342
+ type: ' Control' ,
343
+ scope: ' #/properties/name' ,
344
+ };
331
345
```
332
346
333
347
Otherwise the UI schema remains unchanged and works like in JSON Forms 1.x.
0 commit comments