@@ -24,8 +24,16 @@ interface TesterContext {
2424 config: any ;
2525}
2626
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 ;
2937```
3038
3139This 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
5058``` ts
5159import React , { useState } from ' react' ;
5260import { JsonForms } from ' @jsonforms/react' ;
53- import { materialCells , materialRenderers } from ' @jsonforms/material-renderers' ;
61+ import {
62+ materialCells ,
63+ materialRenderers ,
64+ } from ' @jsonforms/material-renderers' ;
5465import $RefParser from ' @apidevtools/json-schema-ref-parser' ;
5566import JsonRefs from ' json-refs' ;
5667
5768import mySchemaWithReferences from ' myschema.json' ;
5869
5970const refParserOptions = {
6071 dereference: {
61- circular: false
62- }
63- }
72+ circular: false ,
73+ },
74+ };
6475
6576function App() {
6677 const [data, setData] = useState (initialData );
6778 const [resolvedSchema, setSchema] = useState ();
6879
6980 useEffect (() => {
70- $RefParser .dereference (mySchemaWithReferences ).then (res => setSchema (res .$schema ));
81+ $RefParser
82+ .dereference (mySchemaWithReferences )
83+ .then ((res ) => setSchema (res .$schema ));
7184 // or
72- JsonRefs .resolveRefs (mySchemaWithReferences ).then (res => setSchema (res .resolved ));
73- },[]);
85+ JsonRefs .resolveRefs (mySchemaWithReferences ).then ((res ) =>
86+ setSchema (res .resolved )
87+ );
88+ }, []);
7489
75- if (resolvedSchema === undefined ) {
76- return <div > Loading ... < / div >
90+ if (resolvedSchema === undefined ) {
91+ return <div > Loading ... < / div > ;
7792 }
7893
7994 return (
@@ -143,12 +158,12 @@ export const schema = {
143158 type: ' object' ,
144159 properties: {
145160 name: {
146- type: ' string'
147- }
161+ type: ' string' ,
162+ },
148163 },
149- required: [' name' ]
164+ required: [' name' ],
150165};
151- export const data = {name: ' Send email to Adrian' };
166+ export const data = { name: ' Send email to Adrian' };
152167
153168@Component ({
154169 selector: ' app-root' ,
@@ -160,7 +175,7 @@ export const data = {name: 'Send email to Adrian'};
160175 [renderers]="renderers"
161176 (dataChange)="onDataChange($event)"
162177 ></jsonforms>
163- `
178+ ` ,
164179})
165180export class AppComponent {
166181 readonly renderers = angularMaterialRenderers ;
@@ -201,15 +216,12 @@ All current Redux functionally can also be achieved with the standalone version.
201216Previously the store was initialized like this:
202217
203218``` 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+ });
213225store .dispatch (Actions .init (data , schema , uischema ));
214226return (
215227 < Provider store = {store }>
@@ -250,7 +262,7 @@ Within the standalone version, the renderer can just be provided to the `<JsonFo
250262const renderers = [
251263 ... materialRenderers ,
252264 // register custom renderer
253- { tester: customControlTester , renderer: CustomControl }
265+ { tester: customControlTester , renderer: CustomControl },
254266];
255267
256268const MyApp = () => (
@@ -259,7 +271,6 @@ const MyApp = () => (
259271 renderers = {renderers }
260272 / >
261273);
262-
263274```
264275
265276##### 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
286297The new imports are available at ` @jsonforms/react/lib/redux ` , i.e.
287298
288299``` ts
289- import { jsonformsReducer , JsonFormsReduxProvider } from ' @jsonforms/react/lib/redux' ;
300+ import {
301+ jsonformsReducer ,
302+ JsonFormsReduxProvider ,
303+ } from ' @jsonforms/react/lib/redux' ;
290304```
291305
292306## 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
298312There are two big changes between JSON Forms 1 and JSON Forms 2 you need to understand when migrating your existing application.
299313
3003141 . 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 ` .
303317
3043182 . 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.
305319
@@ -314,20 +328,20 @@ Instead of:
314328
315329``` ts
316330const uischema = {
317- type: ' Control' ,
318- scope: {
319- $ref: ' #/properties/name'
320- }
321- }
331+ type: ' Control' ,
332+ scope: {
333+ $ref: ' #/properties/name' ,
334+ },
335+ };
322336```
323337
324338simply write:
325339
326340``` ts
327341const uischema = {
328- type: ' Control' ,
329- scope: ' #/properties/name'
330- }
342+ type: ' Control' ,
343+ scope: ' #/properties/name' ,
344+ };
331345```
332346
333347Otherwise the UI schema remains unchanged and works like in JSON Forms 1.x.
0 commit comments