@jsonforms/material-renderers 3.0.0-beta.3 → 3.0.0-beta.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +71 -13
- package/docs/globals.html +8 -41
- package/docs/index.html +70 -13
- package/lib/jsonforms-react-material.cjs.js +5 -4
- package/lib/jsonforms-react-material.cjs.js.map +1 -1
- package/lib/jsonforms-react-material.esm.js +5 -4
- package/lib/jsonforms-react-material.esm.js.map +1 -1
- package/lib/layouts/MaterialArrayLayoutRenderer.d.ts +1 -1
- package/package.json +7 -7
- package/src/complex/MaterialTableControl.tsx +1 -1
- package/src/layouts/ExpandPanelRenderer.tsx +2 -1
- package/src/layouts/MaterialArrayLayoutRenderer.tsx +3 -25
- package/stats.html +1 -1
- package/test/renderers/MaterialArrayLayout.test.tsx +32 -1
package/README.md
CHANGED
|
@@ -10,7 +10,7 @@ This is the JSON Forms Material Renderers Package. This package only contains re
|
|
|
10
10
|
|
|
11
11
|
See the official [documentation](https://jsonforms.io/docs/integrations/react/) and the JSON Forms React [seed repository](https://github.com/eclipsesource/jsonforms-react-seed) for examples on how to integrate JSON Forms with your application.
|
|
12
12
|
|
|
13
|
-
You can combine [JSON Forms React](https://github.com/eclipsesource/jsonforms/blob/master/packages/react) with other renderers too, for example with the [Vanilla Renderers](https://github.com/eclipsesource/jsonforms/
|
|
13
|
+
You can combine [JSON Forms React](https://github.com/eclipsesource/jsonforms/blob/master/packages/react) with other renderers too, for example with the [Vanilla Renderers](https://github.com/eclipsesource/jsonforms/tree/master/packages/vanilla).
|
|
14
14
|
|
|
15
15
|
Check <https://www.npmjs.com/search?q=%40jsonforms> for all published JSONForms packages.
|
|
16
16
|
|
|
@@ -24,24 +24,78 @@ npm i --save @jsonforms/core @jsonforms/react @jsonforms/material-renderers
|
|
|
24
24
|
|
|
25
25
|
Use the `JsonForms` component for each form you want to render and hand over the renderer set.
|
|
26
26
|
|
|
27
|
-
|
|
27
|
+
|
|
28
|
+
```ts
|
|
28
29
|
import React, { useState } from 'react';
|
|
30
|
+
import {
|
|
31
|
+
materialRenderers,
|
|
32
|
+
materialCells
|
|
33
|
+
} from '@jsonforms/material-renderers';
|
|
29
34
|
import { JsonForms } from '@jsonforms/react';
|
|
30
|
-
|
|
35
|
+
|
|
36
|
+
const schema = {
|
|
37
|
+
type: 'object',
|
|
38
|
+
properties: {
|
|
39
|
+
name: {
|
|
40
|
+
type: 'string',
|
|
41
|
+
minLength: 1
|
|
42
|
+
},
|
|
43
|
+
done: {
|
|
44
|
+
type: 'boolean'
|
|
45
|
+
},
|
|
46
|
+
due_date: {
|
|
47
|
+
type: 'string',
|
|
48
|
+
format: 'date'
|
|
49
|
+
},
|
|
50
|
+
recurrence: {
|
|
51
|
+
type: 'string',
|
|
52
|
+
enum: ['Never', 'Daily', 'Weekly', 'Monthly']
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
required: ['name', 'due_date']
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
const uischema = {
|
|
59
|
+
type: 'VerticalLayout',
|
|
60
|
+
elements: [
|
|
61
|
+
{
|
|
62
|
+
type: 'Control',
|
|
63
|
+
label: false,
|
|
64
|
+
scope: '#/properties/done'
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
type: 'Control',
|
|
68
|
+
scope: '#/properties/name'
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
type: 'HorizontalLayout',
|
|
72
|
+
elements: [
|
|
73
|
+
{
|
|
74
|
+
type: 'Control',
|
|
75
|
+
scope: '#/properties/due_date'
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
type: 'Control',
|
|
79
|
+
scope: '#/properties/recurrence'
|
|
80
|
+
}
|
|
81
|
+
]
|
|
82
|
+
}
|
|
83
|
+
]
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
const initialData = {};
|
|
31
87
|
|
|
32
88
|
function App() {
|
|
33
89
|
const [data, setData] = useState(initialData);
|
|
34
90
|
return (
|
|
35
|
-
<
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
/>
|
|
44
|
-
</div>
|
|
91
|
+
<JsonForms
|
|
92
|
+
schema={schema}
|
|
93
|
+
uischema={uischema}
|
|
94
|
+
data={data}
|
|
95
|
+
renderers={materialRenderers}
|
|
96
|
+
cells={materialCells}
|
|
97
|
+
onChange={({ data, _errors }) => setData(data)}
|
|
98
|
+
/>
|
|
45
99
|
);
|
|
46
100
|
}
|
|
47
101
|
```
|
|
@@ -62,3 +116,7 @@ If you encounter any problems feel free to [open an issue](https://github.com/ec
|
|
|
62
116
|
For questions and discussions please use the [JSON Forms board](https://jsonforms.discourse.group).
|
|
63
117
|
You can also reach us via [email](mailto:jsonforms@eclipsesource.com?subject=JSON%20Forms).
|
|
64
118
|
In addition, EclipseSource also offers [professional support](https://jsonforms.io/support) for JSON Forms.
|
|
119
|
+
|
|
120
|
+
## Migration
|
|
121
|
+
|
|
122
|
+
See our [migration guide](https://github.com/eclipsesource/jsonforms/blob/master/MIGRATION.md) when updating JSON Forms.
|
package/docs/globals.html
CHANGED
|
@@ -294,7 +294,7 @@
|
|
|
294
294
|
<div class="tsd-signature tsd-kind-icon">Expand<wbr>Panel<wbr>Renderer<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">MemoExoticComponent</span><span class="tsd-signature-symbol"><</span><a href="globals.html#expandpanelrenderercomponent" class="tsd-signature-type">ExpandPanelRendererComponent</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol"> = React.memo(ExpandPanelRendererComponent)</span></div>
|
|
295
295
|
<aside class="tsd-sources">
|
|
296
296
|
<ul>
|
|
297
|
-
<li>Defined in packages/material/src/layouts/ExpandPanelRenderer.tsx:
|
|
297
|
+
<li>Defined in packages/material/src/layouts/ExpandPanelRenderer.tsx:206</li>
|
|
298
298
|
</ul>
|
|
299
299
|
</aside>
|
|
300
300
|
</section>
|
|
@@ -534,7 +534,7 @@
|
|
|
534
534
|
<div class="tsd-signature tsd-kind-icon">material<wbr>Array<wbr>Layout<wbr>Tester<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">RankedTester</span><span class="tsd-signature-symbol"> = rankWith(4,isObjectArrayWithNesting)</span></div>
|
|
535
535
|
<aside class="tsd-sources">
|
|
536
536
|
<ul>
|
|
537
|
-
<li>Defined in packages/material/src/layouts/MaterialArrayLayoutRenderer.tsx:
|
|
537
|
+
<li>Defined in packages/material/src/layouts/MaterialArrayLayoutRenderer.tsx:56</li>
|
|
538
538
|
</ul>
|
|
539
539
|
</aside>
|
|
540
540
|
</section>
|
|
@@ -1196,7 +1196,7 @@
|
|
|
1196
1196
|
<a name="materialarraylayoutrenderer" class="tsd-anchor"></a>
|
|
1197
1197
|
<h3><span class="tsd-flag ts-flagConst">Const</span> Material<wbr>Array<wbr>Layout<wbr>Renderer</h3>
|
|
1198
1198
|
<ul class="tsd-signatures tsd-kind-function">
|
|
1199
|
-
<li class="tsd-signature tsd-kind-icon">Material<wbr>Array<wbr>Layout<wbr>Renderer<span class="tsd-signature-symbol">(</span>__namedParameters<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">{ </span>addItem<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">addItem</span><span class="tsd-signature-symbol">; </span>
|
|
1199
|
+
<li class="tsd-signature tsd-kind-icon">Material<wbr>Array<wbr>Layout<wbr>Renderer<span class="tsd-signature-symbol">(</span>__namedParameters<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">{ </span>addItem<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">addItem</span><span class="tsd-signature-symbol">; </span>props<span class="tsd-signature-symbol">: </span><a href="" class="tsd-signature-type">props</a><span class="tsd-signature-symbol">; </span>visible<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> }</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Element</span></li>
|
|
1200
1200
|
</ul>
|
|
1201
1201
|
<ul class="tsd-descriptions">
|
|
1202
1202
|
<li class="tsd-description">
|
|
@@ -1208,46 +1208,13 @@
|
|
|
1208
1208
|
<h4 class="tsd-parameters-title">Parameters</h4>
|
|
1209
1209
|
<ul class="tsd-parameters">
|
|
1210
1210
|
<li>
|
|
1211
|
-
<h5>__namedParameters: <span class="tsd-signature-symbol">{ </span>addItem<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">addItem</span><span class="tsd-signature-symbol">; </span>
|
|
1211
|
+
<h5>__namedParameters: <span class="tsd-signature-symbol">{ </span>addItem<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">addItem</span><span class="tsd-signature-symbol">; </span>props<span class="tsd-signature-symbol">: </span><a href="" class="tsd-signature-type">props</a><span class="tsd-signature-symbol">; </span>visible<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> }</span></h5>
|
|
1212
1212
|
<ul class="tsd-parameters">
|
|
1213
1213
|
<li class="tsd-parameter">
|
|
1214
1214
|
<h5>add<wbr>Item<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">addItem</span></h5>
|
|
1215
1215
|
</li>
|
|
1216
1216
|
<li class="tsd-parameter">
|
|
1217
|
-
<h5>
|
|
1218
|
-
</li>
|
|
1219
|
-
<li class="tsd-parameter">
|
|
1220
|
-
<h5>data<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span></h5>
|
|
1221
|
-
</li>
|
|
1222
|
-
<li class="tsd-parameter">
|
|
1223
|
-
<h5>enabled<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span></h5>
|
|
1224
|
-
</li>
|
|
1225
|
-
<li class="tsd-parameter">
|
|
1226
|
-
<h5>errors<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span></h5>
|
|
1227
|
-
</li>
|
|
1228
|
-
<li class="tsd-parameter">
|
|
1229
|
-
<h5>id<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span></h5>
|
|
1230
|
-
</li>
|
|
1231
|
-
<li class="tsd-parameter">
|
|
1232
|
-
<h5>label<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span></h5>
|
|
1233
|
-
</li>
|
|
1234
|
-
<li class="tsd-parameter">
|
|
1235
|
-
<h5>path<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span></h5>
|
|
1236
|
-
</li>
|
|
1237
|
-
<li class="tsd-parameter">
|
|
1238
|
-
<h5>renderers<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">JsonFormsRendererRegistryEntry</span><span class="tsd-signature-symbol">[]</span></h5>
|
|
1239
|
-
</li>
|
|
1240
|
-
<li class="tsd-parameter">
|
|
1241
|
-
<h5>root<wbr>Schema<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">JsonSchema</span></h5>
|
|
1242
|
-
</li>
|
|
1243
|
-
<li class="tsd-parameter">
|
|
1244
|
-
<h5>schema<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">JsonSchema</span></h5>
|
|
1245
|
-
</li>
|
|
1246
|
-
<li class="tsd-parameter">
|
|
1247
|
-
<h5>uischema<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">ControlElement</span></h5>
|
|
1248
|
-
</li>
|
|
1249
|
-
<li class="tsd-parameter">
|
|
1250
|
-
<h5>uischemas<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">JsonFormsUISchemaRegistryEntry</span><span class="tsd-signature-symbol">[]</span></h5>
|
|
1217
|
+
<h5>props<span class="tsd-signature-symbol">: </span><a href="" class="tsd-signature-type">props</a></h5>
|
|
1251
1218
|
</li>
|
|
1252
1219
|
<li class="tsd-parameter">
|
|
1253
1220
|
<h5>visible<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span></h5>
|
|
@@ -2884,7 +2851,7 @@
|
|
|
2884
2851
|
<li class="tsd-description">
|
|
2885
2852
|
<aside class="tsd-sources">
|
|
2886
2853
|
<ul>
|
|
2887
|
-
<li>Defined in packages/material/src/layouts/ExpandPanelRenderer.tsx:
|
|
2854
|
+
<li>Defined in packages/material/src/layouts/ExpandPanelRenderer.tsx:216</li>
|
|
2888
2855
|
</ul>
|
|
2889
2856
|
</aside>
|
|
2890
2857
|
<div class="tsd-comment tsd-typography">
|
|
@@ -3429,7 +3396,7 @@
|
|
|
3429
3396
|
<li class="tsd-description">
|
|
3430
3397
|
<aside class="tsd-sources">
|
|
3431
3398
|
<ul>
|
|
3432
|
-
<li>Defined in packages/material/src/layouts/ExpandPanelRenderer.tsx:
|
|
3399
|
+
<li>Defined in packages/material/src/layouts/ExpandPanelRenderer.tsx:255</li>
|
|
3433
3400
|
</ul>
|
|
3434
3401
|
</aside>
|
|
3435
3402
|
<div class="tsd-comment tsd-typography">
|
|
@@ -3458,7 +3425,7 @@
|
|
|
3458
3425
|
<li class="tsd-description">
|
|
3459
3426
|
<aside class="tsd-sources">
|
|
3460
3427
|
<ul>
|
|
3461
|
-
<li>Defined in packages/material/src/layouts/ExpandPanelRenderer.tsx:
|
|
3428
|
+
<li>Defined in packages/material/src/layouts/ExpandPanelRenderer.tsx:280</li>
|
|
3462
3429
|
</ul>
|
|
3463
3430
|
</aside>
|
|
3464
3431
|
<h4 class="tsd-parameters-title">Parameters</h4>
|
package/docs/index.html
CHANGED
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
</a>
|
|
73
73
|
<p>This is the JSON Forms Material Renderers Package. This package only contains renderers and must be combined with <a href="https://github.com/eclipsesource/jsonforms/blob/master/packages/react">JSON Forms React</a>.</p>
|
|
74
74
|
<p>See the official <a href="https://jsonforms.io/docs/integrations/react/">documentation</a> and the JSON Forms React <a href="https://github.com/eclipsesource/jsonforms-react-seed">seed repository</a> for examples on how to integrate JSON Forms with your application.</p>
|
|
75
|
-
<p>You can combine <a href="https://github.com/eclipsesource/jsonforms/blob/master/packages/react">JSON Forms React</a> with other renderers too, for example with the <a href="https://github.com/eclipsesource/jsonforms/
|
|
75
|
+
<p>You can combine <a href="https://github.com/eclipsesource/jsonforms/blob/master/packages/react">JSON Forms React</a> with other renderers too, for example with the <a href="https://github.com/eclipsesource/jsonforms/tree/master/packages/vanilla">Vanilla Renderers</a>.</p>
|
|
76
76
|
<p>Check <a href="https://www.npmjs.com/search?q=%40jsonforms">https://www.npmjs.com/search?q=%40jsonforms</a> for all published JSONForms packages.</p>
|
|
77
77
|
<a href="#quick-start" id="quick-start" style="color: inherit; text-decoration: none;">
|
|
78
78
|
<h3>Quick start</h3>
|
|
@@ -81,23 +81,76 @@
|
|
|
81
81
|
<pre><code class="language-bash">npm i --save @jsonforms/core @jsonforms/react @jsonforms/material-renderers
|
|
82
82
|
</code></pre>
|
|
83
83
|
<p>Use the <code>JsonForms</code> component for each form you want to render and hand over the renderer set.</p>
|
|
84
|
-
<pre><code class="language-
|
|
84
|
+
<pre><code class="language-ts"><span class="hljs-keyword">import</span> React, { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
|
85
|
+
<span class="hljs-keyword">import</span> {
|
|
86
|
+
materialRenderers,
|
|
87
|
+
materialCells
|
|
88
|
+
} <span class="hljs-keyword">from</span> <span class="hljs-string">'@jsonforms/material-renderers'</span>;
|
|
85
89
|
<span class="hljs-keyword">import</span> { JsonForms } <span class="hljs-keyword">from</span> <span class="hljs-string">'@jsonforms/react'</span>;
|
|
86
|
-
|
|
90
|
+
|
|
91
|
+
<span class="hljs-keyword">const</span> schema = {
|
|
92
|
+
<span class="hljs-attr">type</span>: <span class="hljs-string">'object'</span>,
|
|
93
|
+
<span class="hljs-attr">properties</span>: {
|
|
94
|
+
<span class="hljs-attr">name</span>: {
|
|
95
|
+
<span class="hljs-attr">type</span>: <span class="hljs-string">'string'</span>,
|
|
96
|
+
<span class="hljs-attr">minLength</span>: <span class="hljs-number">1</span>
|
|
97
|
+
},
|
|
98
|
+
<span class="hljs-attr">done</span>: {
|
|
99
|
+
<span class="hljs-attr">type</span>: <span class="hljs-string">'boolean'</span>
|
|
100
|
+
},
|
|
101
|
+
<span class="hljs-attr">due_date</span>: {
|
|
102
|
+
<span class="hljs-attr">type</span>: <span class="hljs-string">'string'</span>,
|
|
103
|
+
<span class="hljs-attr">format</span>: <span class="hljs-string">'date'</span>
|
|
104
|
+
},
|
|
105
|
+
<span class="hljs-attr">recurrence</span>: {
|
|
106
|
+
<span class="hljs-attr">type</span>: <span class="hljs-string">'string'</span>,
|
|
107
|
+
<span class="hljs-attr">enum</span>: [<span class="hljs-string">'Never'</span>, <span class="hljs-string">'Daily'</span>, <span class="hljs-string">'Weekly'</span>, <span class="hljs-string">'Monthly'</span>]
|
|
108
|
+
}
|
|
109
|
+
},
|
|
110
|
+
<span class="hljs-attr">required</span>: [<span class="hljs-string">'name'</span>, <span class="hljs-string">'due_date'</span>]
|
|
111
|
+
};
|
|
112
|
+
|
|
113
|
+
<span class="hljs-keyword">const</span> uischema = {
|
|
114
|
+
<span class="hljs-attr">type</span>: <span class="hljs-string">'VerticalLayout'</span>,
|
|
115
|
+
<span class="hljs-attr">elements</span>: [
|
|
116
|
+
{
|
|
117
|
+
<span class="hljs-attr">type</span>: <span class="hljs-string">'Control'</span>,
|
|
118
|
+
<span class="hljs-attr">label</span>: <span class="hljs-literal">false</span>,
|
|
119
|
+
<span class="hljs-attr">scope</span>: <span class="hljs-string">'#/properties/done'</span>
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
<span class="hljs-attr">type</span>: <span class="hljs-string">'Control'</span>,
|
|
123
|
+
<span class="hljs-attr">scope</span>: <span class="hljs-string">'#/properties/name'</span>
|
|
124
|
+
},
|
|
125
|
+
{
|
|
126
|
+
<span class="hljs-attr">type</span>: <span class="hljs-string">'HorizontalLayout'</span>,
|
|
127
|
+
<span class="hljs-attr">elements</span>: [
|
|
128
|
+
{
|
|
129
|
+
<span class="hljs-attr">type</span>: <span class="hljs-string">'Control'</span>,
|
|
130
|
+
<span class="hljs-attr">scope</span>: <span class="hljs-string">'#/properties/due_date'</span>
|
|
131
|
+
},
|
|
132
|
+
{
|
|
133
|
+
<span class="hljs-attr">type</span>: <span class="hljs-string">'Control'</span>,
|
|
134
|
+
<span class="hljs-attr">scope</span>: <span class="hljs-string">'#/properties/recurrence'</span>
|
|
135
|
+
}
|
|
136
|
+
]
|
|
137
|
+
}
|
|
138
|
+
]
|
|
139
|
+
};
|
|
140
|
+
|
|
141
|
+
<span class="hljs-keyword">const</span> initialData = {};
|
|
87
142
|
|
|
88
143
|
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">App</span>(<span class="hljs-params"></span>) </span>{
|
|
89
144
|
<span class="hljs-keyword">const</span> [data, setData] = useState(initialData);
|
|
90
145
|
<span class="hljs-keyword">return</span> (
|
|
91
|
-
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">
|
|
92
|
-
<span class="hljs-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
/>
|
|
100
|
-
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
|
|
146
|
+
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">JsonForms</span>
|
|
147
|
+
<span class="hljs-attr">schema</span>=<span class="hljs-string">{schema}</span>
|
|
148
|
+
<span class="hljs-attr">uischema</span>=<span class="hljs-string">{uischema}</span>
|
|
149
|
+
<span class="hljs-attr">data</span>=<span class="hljs-string">{data}</span>
|
|
150
|
+
<span class="hljs-attr">renderers</span>=<span class="hljs-string">{materialRenderers}</span>
|
|
151
|
+
<span class="hljs-attr">cells</span>=<span class="hljs-string">{materialCells}</span>
|
|
152
|
+
<span class="hljs-attr">onChange</span>=<span class="hljs-string">{({</span> <span class="hljs-attr">data</span>, <span class="hljs-attr">_errors</span> }) =></span> setData(data)}
|
|
153
|
+
/></span>
|
|
101
154
|
);
|
|
102
155
|
}
|
|
103
156
|
</code></pre>
|
|
@@ -117,6 +170,10 @@
|
|
|
117
170
|
For questions and discussions please use the <a href="https://jsonforms.discourse.group">JSON Forms board</a>.
|
|
118
171
|
You can also reach us via <a href="mailto:jsonforms@eclipsesource.com?subject=JSON%20Forms">email</a>.
|
|
119
172
|
In addition, EclipseSource also offers <a href="https://jsonforms.io/support">professional support</a> for JSON Forms.</p>
|
|
173
|
+
<a href="#migration" id="migration" style="color: inherit; text-decoration: none;">
|
|
174
|
+
<h2>Migration</h2>
|
|
175
|
+
</a>
|
|
176
|
+
<p>See our <a href="https://github.com/eclipsesource/jsonforms/blob/master/MIGRATION.md">migration guide</a> when updating JSON Forms.</p>
|
|
120
177
|
</div>
|
|
121
178
|
</div>
|
|
122
179
|
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
|
|
@@ -270,7 +270,7 @@ var TableRows = function (_a) {
|
|
|
270
270
|
var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
|
|
271
271
|
return (React__default["default"].createElement(React__default["default"].Fragment, null, range__default["default"](data).map(function (index) {
|
|
272
272
|
var childPath = core.Paths.compose(path, "" + index);
|
|
273
|
-
return (React__default["default"].createElement(NonEmptyRow, { key: childPath, childPath: childPath, rowIndex: index, schema: schema, openDeleteDialog: openDeleteDialog, moveUpCreator: moveUp, moveDownCreator: moveDown, enableUp: index !== 0, enableDown: index !== data - 1, showSortButtons: appliedUiSchemaOptions.showSortButtons, enabled: enabled, cells: cells, path: path }));
|
|
273
|
+
return (React__default["default"].createElement(NonEmptyRow, { key: childPath, childPath: childPath, rowIndex: index, schema: schema, openDeleteDialog: openDeleteDialog, moveUpCreator: moveUp, moveDownCreator: moveDown, enableUp: index !== 0, enableDown: index !== data - 1, showSortButtons: appliedUiSchemaOptions.showSortButtons || appliedUiSchemaOptions.showArrayTableSortButtons, enabled: enabled, cells: cells, path: path }));
|
|
274
274
|
})));
|
|
275
275
|
};
|
|
276
276
|
var MaterialTableControl = (function (_super) {
|
|
@@ -1112,6 +1112,7 @@ var ExpandPanelRendererComponent = function (props) {
|
|
|
1112
1112
|
return core.findUISchema(uischemas, schema, uischema.scope, path, undefined, uischema, rootSchema);
|
|
1113
1113
|
}, [uischemas, schema, uischema.scope, path, uischema, rootSchema]);
|
|
1114
1114
|
var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
|
|
1115
|
+
var showSortButtons = appliedUiSchemaOptions.showSortButtons || appliedUiSchemaOptions.showArrayLayoutSortButtons;
|
|
1115
1116
|
return (React__default["default"].createElement(material.Accordion, { "aria-labelledby": labelHtmlId, expanded: expanded, onChange: handleExpansion(childPath) },
|
|
1116
1117
|
React__default["default"].createElement(material.AccordionSummary, { expandIcon: React__default["default"].createElement(ExpandMoreIcon__default["default"], null) },
|
|
1117
1118
|
React__default["default"].createElement(material.Grid, { container: true, alignItems: 'center' },
|
|
@@ -1125,7 +1126,7 @@ var ExpandPanelRendererComponent = function (props) {
|
|
|
1125
1126
|
React__default["default"].createElement(material.Grid, { container: true, justifyContent: 'flex-end' },
|
|
1126
1127
|
React__default["default"].createElement(material.Grid, { item: true },
|
|
1127
1128
|
React__default["default"].createElement(material.Grid, { container: true, direction: 'row', justifyContent: 'center', alignItems: 'center' },
|
|
1128
|
-
|
|
1129
|
+
showSortButtons ? (React__default["default"].createElement(React.Fragment, null,
|
|
1129
1130
|
React__default["default"].createElement(material.Grid, { item: true },
|
|
1130
1131
|
React__default["default"].createElement(material.IconButton, { onClick: moveUp(path, index), style: iconStyle, disabled: !enableMoveUp, "aria-label": "Move up", size: 'large' },
|
|
1131
1132
|
React__default["default"].createElement(ArrowUpward__default["default"], null))),
|
|
@@ -1201,12 +1202,12 @@ var MaterialArrayLayoutComponent = function (props) {
|
|
|
1201
1202
|
var MaterialArrayLayout$1 = React__default["default"].memo(MaterialArrayLayoutComponent);
|
|
1202
1203
|
|
|
1203
1204
|
var MaterialArrayLayoutRenderer = function (_a) {
|
|
1204
|
-
var visible = _a.visible,
|
|
1205
|
+
var visible = _a.visible, addItem = _a.addItem, props = __rest(_a, ["visible", "addItem"]);
|
|
1205
1206
|
var addItemCb = React.useCallback(function (p, value) { return addItem(p, value); }, [
|
|
1206
1207
|
addItem
|
|
1207
1208
|
]);
|
|
1208
1209
|
return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
|
|
1209
|
-
React__default["default"].createElement(MaterialArrayLayout$1, {
|
|
1210
|
+
React__default["default"].createElement(MaterialArrayLayout$1, __assign({ visible: visible, addItem: addItemCb }, props))));
|
|
1210
1211
|
};
|
|
1211
1212
|
var materialArrayLayoutTester = core.rankWith(4, core.isObjectArrayWithNesting);
|
|
1212
1213
|
var MaterialArrayLayout = react.withJsonFormsArrayLayoutProps(MaterialArrayLayoutRenderer);
|