@@ -103,18 +103,39 @@ function App(props: AppProps & { selectedExample: ReactExampleDescription }) {
103
103
paddingTop = '0'
104
104
paddingBottom = 'size-800'
105
105
>
106
+ < div className = 'container' >
107
+ < View padding = 'size-100' >
108
+ < Heading > react, json-schema, jsonforms.io, react-spectrum</ Heading >
109
+ Generate{ ' ' }
110
+ < a href = 'https://react-spectrum.adobe.com/' target = '_blank' >
111
+ react-spectrum
112
+ </ a > { ' ' }
113
+ based forms quickly by leveraging{ ' ' }
114
+ < a href = 'https://json-schema.org/' target = '_blank' >
115
+ json-schemas
116
+ </ a > { ' ' }
117
+ for your object structure definition/validation, and{ ' ' }
118
+ < a href = 'https://www.jsonforms.io' target = '_blank' >
119
+ jsonforms.io
120
+ </ a > { ' ' }
121
+ - choose a same in the 'Examples' section to preview predefined
122
+ forms (try for example one of the 'Categorization' examples). You
123
+ can also modify the examples in the editors and save them to local
124
+ storage to play with them later.
125
+ </ View >
126
+ </ div >
106
127
< div className = 'container' >
107
128
< div className = 'App-Form' >
108
129
< View padding = 'size-100' >
109
- < Heading > { props . selectedExample . label } </ Heading >
130
+ < Heading > Form: { props . selectedExample . label } </ Heading >
110
131
{ props . getComponent ( props . selectedExample ) }
111
132
< JsonFormsDispatch onChange = { props . onChange } />
112
133
</ View >
113
134
</ div >
114
135
115
136
< div className = 'App-Data tabs' >
116
137
< View padding = 'size-100' >
117
- < Heading > JsonForms Examples </ Heading >
138
+ < Heading > Example Forms </ Heading >
118
139
< ExamplesPicker { ...props } onChange = { setExampleByName } />
119
140
< Tabs defaultSelectedKey = 'boundData' >
120
141
< Item key = 'boundData' title = 'Bound data' >
@@ -125,31 +146,31 @@ function App(props: AppProps & { selectedExample: ReactExampleDescription }) {
125
146
/>
126
147
</ Content >
127
148
</ Item >
128
- < Item key = 'uiSchema ' title = 'UI Schema' >
149
+ < Item key = 'schema ' title = 'Json- Schema' >
129
150
< Content margin = 'size-100' >
130
151
< TextArea
131
152
value = {
132
153
JSON . stringify (
133
- props . selectedExample . uischema ,
154
+ props . selectedExample . schema ,
134
155
circularReferenceReplacer ( ) ,
135
156
2
136
157
) || ''
137
158
}
138
- onChange = { updateCurrentUISchema }
159
+ onChange = { updateCurrentSchema }
139
160
/>
140
161
</ Content >
141
162
</ Item >
142
- < Item key = 'schema ' title = 'Schema' >
163
+ < Item key = 'uiSchema ' title = 'UI Schema' >
143
164
< Content margin = 'size-100' >
144
165
< TextArea
145
166
value = {
146
167
JSON . stringify (
147
- props . selectedExample . schema ,
168
+ props . selectedExample . uischema ,
148
169
circularReferenceReplacer ( ) ,
149
170
2
150
171
) || ''
151
172
}
152
- onChange = { updateCurrentSchema }
173
+ onChange = { updateCurrentUISchema }
153
174
/>
154
175
</ Content >
155
176
</ Item >
0 commit comments