@rjsf/core 5.0.0-beta.14 → 5.0.0-beta.15
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/dist/core.cjs.development.js +1757 -1845
- package/dist/core.cjs.development.js.map +1 -1
- package/dist/core.cjs.production.min.js +1 -1
- package/dist/core.cjs.production.min.js.map +1 -1
- package/dist/core.esm.js +1758 -1846
- package/dist/core.esm.js.map +1 -1
- package/dist/core.umd.development.js +1757 -1845
- package/dist/core.umd.development.js.map +1 -1
- package/dist/core.umd.production.min.js +1 -1
- package/dist/core.umd.production.min.js.map +1 -1
- package/package.json +5 -5
package/dist/core.esm.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { Component, useState, useCallback, useEffect, useReducer, useMemo, forwardRef } from 'react';
|
|
2
|
-
import { isFixedItems, allowAdditionalItems,
|
|
2
|
+
import { isFixedItems, allowAdditionalItems, getUiOptions, ITEMS_KEY, getTemplate, isCustomWidget, getWidget, optionsList, guessType, deepEquals, asNumber, REF_KEY, orderProperties, PROPERTIES_KEY, ADDITIONAL_PROPERTY_FLAG, mergeObjects, getSchemaType, ID_KEY, hasWidget, getInputProps, getSubmitButtonOptions, canExpand, parseDateString, toDateString, pad, schemaRequiresTrueValue, utcToLocal, localToUTC, dataURItoBlob, processSelectValue, createSchemaUtils, shouldRender, isObject as isObject$1, RJSF_ADDITONAL_PROPERTIES_FLAG, NAME_KEY } from '@rjsf/utils';
|
|
3
3
|
import get from 'lodash-es/get';
|
|
4
4
|
import _isEmpty from 'lodash-es/isEmpty';
|
|
5
5
|
import _pick from 'lodash-es/pick';
|
|
@@ -10,6 +10,96 @@ import unset from 'lodash-es/unset';
|
|
|
10
10
|
import has from 'lodash-es/has';
|
|
11
11
|
import omit from 'lodash-es/omit';
|
|
12
12
|
|
|
13
|
+
function _defineProperties(target, props) {
|
|
14
|
+
for (var i = 0; i < props.length; i++) {
|
|
15
|
+
var descriptor = props[i];
|
|
16
|
+
descriptor.enumerable = descriptor.enumerable || false;
|
|
17
|
+
descriptor.configurable = true;
|
|
18
|
+
if ("value" in descriptor) descriptor.writable = true;
|
|
19
|
+
Object.defineProperty(target, descriptor.key, descriptor);
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
function _createClass(Constructor, protoProps, staticProps) {
|
|
23
|
+
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
|
|
24
|
+
if (staticProps) _defineProperties(Constructor, staticProps);
|
|
25
|
+
Object.defineProperty(Constructor, "prototype", {
|
|
26
|
+
writable: false
|
|
27
|
+
});
|
|
28
|
+
return Constructor;
|
|
29
|
+
}
|
|
30
|
+
function _extends() {
|
|
31
|
+
_extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
32
|
+
for (var i = 1; i < arguments.length; i++) {
|
|
33
|
+
var source = arguments[i];
|
|
34
|
+
for (var key in source) {
|
|
35
|
+
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
36
|
+
target[key] = source[key];
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
return target;
|
|
41
|
+
};
|
|
42
|
+
return _extends.apply(this, arguments);
|
|
43
|
+
}
|
|
44
|
+
function _inheritsLoose(subClass, superClass) {
|
|
45
|
+
subClass.prototype = Object.create(superClass.prototype);
|
|
46
|
+
subClass.prototype.constructor = subClass;
|
|
47
|
+
_setPrototypeOf(subClass, superClass);
|
|
48
|
+
}
|
|
49
|
+
function _setPrototypeOf(o, p) {
|
|
50
|
+
_setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
|
|
51
|
+
o.__proto__ = p;
|
|
52
|
+
return o;
|
|
53
|
+
};
|
|
54
|
+
return _setPrototypeOf(o, p);
|
|
55
|
+
}
|
|
56
|
+
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
57
|
+
if (source == null) return {};
|
|
58
|
+
var target = {};
|
|
59
|
+
var sourceKeys = Object.keys(source);
|
|
60
|
+
var key, i;
|
|
61
|
+
for (i = 0; i < sourceKeys.length; i++) {
|
|
62
|
+
key = sourceKeys[i];
|
|
63
|
+
if (excluded.indexOf(key) >= 0) continue;
|
|
64
|
+
target[key] = source[key];
|
|
65
|
+
}
|
|
66
|
+
return target;
|
|
67
|
+
}
|
|
68
|
+
function _unsupportedIterableToArray(o, minLen) {
|
|
69
|
+
if (!o) return;
|
|
70
|
+
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
|
|
71
|
+
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
72
|
+
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
73
|
+
if (n === "Map" || n === "Set") return Array.from(o);
|
|
74
|
+
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
|
|
75
|
+
}
|
|
76
|
+
function _arrayLikeToArray(arr, len) {
|
|
77
|
+
if (len == null || len > arr.length) len = arr.length;
|
|
78
|
+
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
|
|
79
|
+
return arr2;
|
|
80
|
+
}
|
|
81
|
+
function _createForOfIteratorHelperLoose(o, allowArrayLike) {
|
|
82
|
+
var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
|
|
83
|
+
if (it) return (it = it.call(o)).next.bind(it);
|
|
84
|
+
if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
|
|
85
|
+
if (it) o = it;
|
|
86
|
+
var i = 0;
|
|
87
|
+
return function () {
|
|
88
|
+
if (i >= o.length) return {
|
|
89
|
+
done: true
|
|
90
|
+
};
|
|
91
|
+
return {
|
|
92
|
+
done: false,
|
|
93
|
+
value: o[i++]
|
|
94
|
+
};
|
|
95
|
+
};
|
|
96
|
+
}
|
|
97
|
+
throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
var _excluded$9 = ["widget"],
|
|
101
|
+
_excluded2 = ["widget"],
|
|
102
|
+
_excluded3 = ["widget"];
|
|
13
103
|
/** Used to generate a unique ID for an element in a row */
|
|
14
104
|
function generateRowId() {
|
|
15
105
|
return nanoid();
|
|
@@ -20,10 +110,10 @@ function generateRowId() {
|
|
|
20
110
|
* @returns - The `formData` converted into a `KeyedFormDataType` element
|
|
21
111
|
*/
|
|
22
112
|
function generateKeyedFormData(formData) {
|
|
23
|
-
return !Array.isArray(formData) ? [] : formData.map(item
|
|
113
|
+
return !Array.isArray(formData) ? [] : formData.map(function (item) {
|
|
24
114
|
return {
|
|
25
115
|
key: generateRowId(),
|
|
26
|
-
item
|
|
116
|
+
item: item
|
|
27
117
|
};
|
|
28
118
|
});
|
|
29
119
|
}
|
|
@@ -34,96 +124,90 @@ function generateKeyedFormData(formData) {
|
|
|
34
124
|
*/
|
|
35
125
|
function keyedToPlainFormData(keyedFormData) {
|
|
36
126
|
if (Array.isArray(keyedFormData)) {
|
|
37
|
-
return keyedFormData.map(
|
|
127
|
+
return keyedFormData.map(function (keyedItem) {
|
|
128
|
+
return keyedItem.item;
|
|
129
|
+
});
|
|
38
130
|
}
|
|
39
131
|
return [];
|
|
40
132
|
}
|
|
41
133
|
/** The `ArrayField` component is used to render a field in the schema that is of type `array`. It supports both normal
|
|
42
134
|
* and fixed array, allowing user to add and remove elements from the array data.
|
|
43
135
|
*/
|
|
44
|
-
|
|
136
|
+
var ArrayField = /*#__PURE__*/function (_Component) {
|
|
137
|
+
_inheritsLoose(ArrayField, _Component);
|
|
45
138
|
/** Constructs an `ArrayField` from the `props`, generating the initial keyed data from the `formData`
|
|
46
139
|
*
|
|
47
140
|
* @param props - The `FieldProps` for this template
|
|
48
141
|
*/
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
} = registry;
|
|
59
|
-
let itemSchema = schema.items;
|
|
142
|
+
function ArrayField(props) {
|
|
143
|
+
var _this;
|
|
144
|
+
_this = _Component.call(this, props) || this;
|
|
145
|
+
_this._getNewFormDataRow = function () {
|
|
146
|
+
var _this$props = _this.props,
|
|
147
|
+
schema = _this$props.schema,
|
|
148
|
+
registry = _this$props.registry;
|
|
149
|
+
var schemaUtils = registry.schemaUtils;
|
|
150
|
+
var itemSchema = schema.items;
|
|
60
151
|
if (isFixedItems(schema) && allowAdditionalItems(schema)) {
|
|
61
152
|
itemSchema = schema.additionalItems;
|
|
62
153
|
}
|
|
63
154
|
// Cast this as a T to work around schema utils being for T[] caused by the FieldProps<T[], S, F> call on the class
|
|
64
155
|
return schemaUtils.getDefaultFormState(itemSchema);
|
|
65
156
|
};
|
|
66
|
-
|
|
157
|
+
_this.onAddClick = function (event) {
|
|
67
158
|
if (event) {
|
|
68
159
|
event.preventDefault();
|
|
69
160
|
}
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
const {
|
|
74
|
-
keyedFormData
|
|
75
|
-
} = this.state;
|
|
76
|
-
const newKeyedFormDataRow = {
|
|
161
|
+
var onChange = _this.props.onChange;
|
|
162
|
+
var keyedFormData = _this.state.keyedFormData;
|
|
163
|
+
var newKeyedFormDataRow = {
|
|
77
164
|
key: generateRowId(),
|
|
78
|
-
item:
|
|
165
|
+
item: _this._getNewFormDataRow()
|
|
79
166
|
};
|
|
80
|
-
|
|
81
|
-
|
|
167
|
+
var newKeyedFormData = [].concat(keyedFormData, [newKeyedFormDataRow]);
|
|
168
|
+
_this.setState({
|
|
82
169
|
keyedFormData: newKeyedFormData,
|
|
83
170
|
updatedKeyedFormData: true
|
|
84
|
-
}, ()
|
|
171
|
+
}, function () {
|
|
172
|
+
return onChange(keyedToPlainFormData(newKeyedFormData));
|
|
173
|
+
});
|
|
85
174
|
};
|
|
86
|
-
|
|
87
|
-
return event
|
|
175
|
+
_this.onAddIndexClick = function (index) {
|
|
176
|
+
return function (event) {
|
|
88
177
|
if (event) {
|
|
89
178
|
event.preventDefault();
|
|
90
179
|
}
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
const {
|
|
95
|
-
keyedFormData
|
|
96
|
-
} = this.state;
|
|
97
|
-
const newKeyedFormDataRow = {
|
|
180
|
+
var onChange = _this.props.onChange;
|
|
181
|
+
var keyedFormData = _this.state.keyedFormData;
|
|
182
|
+
var newKeyedFormDataRow = {
|
|
98
183
|
key: generateRowId(),
|
|
99
|
-
item:
|
|
184
|
+
item: _this._getNewFormDataRow()
|
|
100
185
|
};
|
|
101
|
-
|
|
186
|
+
var newKeyedFormData = [].concat(keyedFormData);
|
|
102
187
|
newKeyedFormData.splice(index, 0, newKeyedFormDataRow);
|
|
103
|
-
|
|
188
|
+
_this.setState({
|
|
104
189
|
keyedFormData: newKeyedFormData,
|
|
105
190
|
updatedKeyedFormData: true
|
|
106
|
-
}, ()
|
|
191
|
+
}, function () {
|
|
192
|
+
return onChange(keyedToPlainFormData(newKeyedFormData));
|
|
193
|
+
});
|
|
107
194
|
};
|
|
108
195
|
};
|
|
109
|
-
|
|
110
|
-
return event
|
|
196
|
+
_this.onDropIndexClick = function (index) {
|
|
197
|
+
return function (event) {
|
|
111
198
|
if (event) {
|
|
112
199
|
event.preventDefault();
|
|
113
200
|
}
|
|
114
|
-
|
|
115
|
-
onChange,
|
|
116
|
-
errorSchema
|
|
117
|
-
|
|
118
|
-
const {
|
|
119
|
-
keyedFormData
|
|
120
|
-
} = this.state;
|
|
201
|
+
var _this$props2 = _this.props,
|
|
202
|
+
onChange = _this$props2.onChange,
|
|
203
|
+
errorSchema = _this$props2.errorSchema;
|
|
204
|
+
var keyedFormData = _this.state.keyedFormData;
|
|
121
205
|
// refs #195: revalidate to ensure properly reindexing errors
|
|
122
|
-
|
|
206
|
+
var newErrorSchema;
|
|
123
207
|
if (errorSchema) {
|
|
124
208
|
newErrorSchema = {};
|
|
125
|
-
for (
|
|
126
|
-
|
|
209
|
+
for (var idx in errorSchema) {
|
|
210
|
+
var i = parseInt(idx);
|
|
127
211
|
if (i < index) {
|
|
128
212
|
set(newErrorSchema, [i], errorSchema[idx]);
|
|
129
213
|
} else if (i > index) {
|
|
@@ -131,28 +215,31 @@ class ArrayField extends Component {
|
|
|
131
215
|
}
|
|
132
216
|
}
|
|
133
217
|
}
|
|
134
|
-
|
|
135
|
-
|
|
218
|
+
var newKeyedFormData = keyedFormData.filter(function (_, i) {
|
|
219
|
+
return i !== index;
|
|
220
|
+
});
|
|
221
|
+
_this.setState({
|
|
136
222
|
keyedFormData: newKeyedFormData,
|
|
137
223
|
updatedKeyedFormData: true
|
|
138
|
-
},
|
|
224
|
+
}, function () {
|
|
225
|
+
return onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema);
|
|
226
|
+
});
|
|
139
227
|
};
|
|
140
228
|
};
|
|
141
|
-
|
|
142
|
-
return event
|
|
229
|
+
_this.onReorderClick = function (index, newIndex) {
|
|
230
|
+
return function (event) {
|
|
143
231
|
if (event) {
|
|
144
232
|
event.preventDefault();
|
|
145
233
|
event.currentTarget.blur();
|
|
146
234
|
}
|
|
147
|
-
|
|
148
|
-
onChange,
|
|
149
|
-
errorSchema
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
if (this.props.errorSchema) {
|
|
235
|
+
var _this$props3 = _this.props,
|
|
236
|
+
onChange = _this$props3.onChange,
|
|
237
|
+
errorSchema = _this$props3.errorSchema;
|
|
238
|
+
var newErrorSchema;
|
|
239
|
+
if (_this.props.errorSchema) {
|
|
153
240
|
newErrorSchema = {};
|
|
154
|
-
for (
|
|
155
|
-
|
|
241
|
+
for (var idx in errorSchema) {
|
|
242
|
+
var i = parseInt(idx);
|
|
156
243
|
if (i == index) {
|
|
157
244
|
set(newErrorSchema, [newIndex], errorSchema[index]);
|
|
158
245
|
} else if (i == newIndex) {
|
|
@@ -162,58 +249,54 @@ class ArrayField extends Component {
|
|
|
162
249
|
}
|
|
163
250
|
}
|
|
164
251
|
}
|
|
165
|
-
|
|
166
|
-
keyedFormData
|
|
167
|
-
} = this.state;
|
|
252
|
+
var keyedFormData = _this.state.keyedFormData;
|
|
168
253
|
function reOrderArray() {
|
|
169
254
|
// Copy item
|
|
170
|
-
|
|
255
|
+
var _newKeyedFormData = keyedFormData.slice();
|
|
171
256
|
// Moves item from index to newIndex
|
|
172
257
|
_newKeyedFormData.splice(index, 1);
|
|
173
258
|
_newKeyedFormData.splice(newIndex, 0, keyedFormData[index]);
|
|
174
259
|
return _newKeyedFormData;
|
|
175
260
|
}
|
|
176
|
-
|
|
177
|
-
|
|
261
|
+
var newKeyedFormData = reOrderArray();
|
|
262
|
+
_this.setState({
|
|
178
263
|
keyedFormData: newKeyedFormData
|
|
179
|
-
},
|
|
264
|
+
}, function () {
|
|
265
|
+
return onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema);
|
|
266
|
+
});
|
|
180
267
|
};
|
|
181
268
|
};
|
|
182
|
-
|
|
183
|
-
return (value, newErrorSchema, id)
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
269
|
+
_this.onChangeForIndex = function (index) {
|
|
270
|
+
return function (value, newErrorSchema, id) {
|
|
271
|
+
var _extends2;
|
|
272
|
+
var _this$props4 = _this.props,
|
|
273
|
+
formData = _this$props4.formData,
|
|
274
|
+
onChange = _this$props4.onChange,
|
|
275
|
+
errorSchema = _this$props4.errorSchema;
|
|
276
|
+
var arrayData = Array.isArray(formData) ? formData : [];
|
|
277
|
+
var newFormData = arrayData.map(function (item, i) {
|
|
191
278
|
// We need to treat undefined items as nulls to have validation.
|
|
192
279
|
// See https://github.com/tdegrunt/jsonschema/issues/206
|
|
193
|
-
|
|
280
|
+
var jsonValue = typeof value === "undefined" ? null : value;
|
|
194
281
|
return index === i ? jsonValue : item;
|
|
195
282
|
});
|
|
196
|
-
onChange(newFormData, errorSchema && errorSchema && {
|
|
197
|
-
...errorSchema,
|
|
198
|
-
[index]: newErrorSchema
|
|
199
|
-
}, id);
|
|
283
|
+
onChange(newFormData, errorSchema && errorSchema && _extends({}, errorSchema, (_extends2 = {}, _extends2[index] = newErrorSchema, _extends2)), id);
|
|
200
284
|
};
|
|
201
285
|
};
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
onChange,
|
|
205
|
-
idSchema
|
|
206
|
-
} = this.props;
|
|
286
|
+
_this.onSelectChange = function (value) {
|
|
287
|
+
var _this$props5 = _this.props,
|
|
288
|
+
onChange = _this$props5.onChange,
|
|
289
|
+
idSchema = _this$props5.idSchema;
|
|
207
290
|
onChange(value, undefined, idSchema && idSchema.$id);
|
|
208
291
|
};
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
this.state = {
|
|
292
|
+
var _props$formData = props.formData,
|
|
293
|
+
_formData = _props$formData === void 0 ? [] : _props$formData;
|
|
294
|
+
var _keyedFormData = generateKeyedFormData(_formData);
|
|
295
|
+
_this.state = {
|
|
214
296
|
keyedFormData: _keyedFormData,
|
|
215
297
|
updatedKeyedFormData: false
|
|
216
298
|
};
|
|
299
|
+
return _this;
|
|
217
300
|
}
|
|
218
301
|
/** React lifecycle method that is called when the props are about to change allowing the state to be updated. It
|
|
219
302
|
* regenerates the keyed form data and returns it
|
|
@@ -221,16 +304,16 @@ class ArrayField extends Component {
|
|
|
221
304
|
* @param nextProps - The next set of props data
|
|
222
305
|
* @param prevState - The previous set of state data
|
|
223
306
|
*/
|
|
224
|
-
|
|
307
|
+
ArrayField.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
|
|
225
308
|
// Don't call getDerivedStateFromProps if keyed formdata was just updated.
|
|
226
309
|
if (prevState.updatedKeyedFormData) {
|
|
227
310
|
return {
|
|
228
311
|
updatedKeyedFormData: false
|
|
229
312
|
};
|
|
230
313
|
}
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
314
|
+
var nextFormData = Array.isArray(nextProps.formData) ? nextProps.formData : [];
|
|
315
|
+
var previousKeyedFormData = prevState.keyedFormData || [];
|
|
316
|
+
var newKeyedFormData = nextFormData.length === previousKeyedFormData.length ? previousKeyedFormData.map(function (previousKeyedFormDatum, index) {
|
|
234
317
|
return {
|
|
235
318
|
key: previousKeyedFormDatum.key,
|
|
236
319
|
item: nextFormData[index]
|
|
@@ -242,20 +325,15 @@ class ArrayField extends Component {
|
|
|
242
325
|
}
|
|
243
326
|
/** Returns the appropriate title for an item by getting first the title from the schema.items, then falling back to
|
|
244
327
|
* the description from the schema.items, and finally the string "Item"
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
const {
|
|
248
|
-
schema
|
|
249
|
-
} = this.props;
|
|
250
|
-
return get(schema, [ITEMS_KEY, "title"], get(schema, [ITEMS_KEY, "description"], "Item"));
|
|
251
|
-
}
|
|
328
|
+
*/;
|
|
329
|
+
var _proto = ArrayField.prototype;
|
|
252
330
|
/** Determines whether the item described in the schema is always required, which is determined by whether any item
|
|
253
331
|
* may be null.
|
|
254
332
|
*
|
|
255
333
|
* @param itemSchema - The schema for the item
|
|
256
334
|
* @return - True if the item schema type does not contain the "null" type
|
|
257
335
|
*/
|
|
258
|
-
isItemRequired(itemSchema) {
|
|
336
|
+
_proto.isItemRequired = function isItemRequired(itemSchema) {
|
|
259
337
|
if (Array.isArray(itemSchema.type)) {
|
|
260
338
|
// While we don't yet support composite/nullable jsonschema types, it's
|
|
261
339
|
// future-proof to check for requirement against these.
|
|
@@ -270,15 +348,13 @@ class ArrayField extends Component {
|
|
|
270
348
|
*
|
|
271
349
|
* @param formItems - The list of items in the form
|
|
272
350
|
* @returns - True if the item is addable otherwise false
|
|
273
|
-
|
|
274
|
-
canAddItem(formItems) {
|
|
275
|
-
|
|
276
|
-
schema,
|
|
277
|
-
uiSchema
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
addable
|
|
281
|
-
} = getUiOptions(uiSchema);
|
|
351
|
+
*/;
|
|
352
|
+
_proto.canAddItem = function canAddItem(formItems) {
|
|
353
|
+
var _this$props6 = this.props,
|
|
354
|
+
schema = _this$props6.schema,
|
|
355
|
+
uiSchema = _this$props6.uiSchema;
|
|
356
|
+
var _getUiOptions = getUiOptions(uiSchema),
|
|
357
|
+
addable = _getUiOptions.addable;
|
|
282
358
|
if (addable !== false) {
|
|
283
359
|
// if ui:options.addable was not explicitly set to false, we can add
|
|
284
360
|
// another item if we have not exceeded maxItems yet
|
|
@@ -292,23 +368,19 @@ class ArrayField extends Component {
|
|
|
292
368
|
}
|
|
293
369
|
/** Returns the default form information for an item based on the schema for that item. Deals with the possibility
|
|
294
370
|
* that the schema is fixed and allows additional items.
|
|
295
|
-
|
|
296
|
-
|
|
371
|
+
*/;
|
|
297
372
|
/** Renders the `ArrayField` depending on the specific needs of the schema and uischema elements
|
|
298
373
|
*/
|
|
299
|
-
render() {
|
|
300
|
-
|
|
301
|
-
schema,
|
|
302
|
-
uiSchema,
|
|
303
|
-
idSchema,
|
|
304
|
-
registry
|
|
305
|
-
|
|
306
|
-
const {
|
|
307
|
-
schemaUtils
|
|
308
|
-
} = registry;
|
|
374
|
+
_proto.render = function render() {
|
|
375
|
+
var _this$props7 = this.props,
|
|
376
|
+
schema = _this$props7.schema,
|
|
377
|
+
uiSchema = _this$props7.uiSchema,
|
|
378
|
+
idSchema = _this$props7.idSchema,
|
|
379
|
+
registry = _this$props7.registry;
|
|
380
|
+
var schemaUtils = registry.schemaUtils;
|
|
309
381
|
if (!(ITEMS_KEY in schema)) {
|
|
310
|
-
|
|
311
|
-
|
|
382
|
+
var uiOptions = getUiOptions(uiSchema);
|
|
383
|
+
var UnsupportedFieldTemplate = getTemplate("UnsupportedFieldTemplate", registry, uiOptions);
|
|
312
384
|
return /*#__PURE__*/React.createElement(UnsupportedFieldTemplate, {
|
|
313
385
|
schema: schema,
|
|
314
386
|
idSchema: idSchema,
|
|
@@ -332,116 +404,115 @@ class ArrayField extends Component {
|
|
|
332
404
|
return this.renderNormalArray();
|
|
333
405
|
}
|
|
334
406
|
/** Renders a normal array without any limitations of length
|
|
335
|
-
|
|
336
|
-
renderNormalArray() {
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
407
|
+
*/;
|
|
408
|
+
_proto.renderNormalArray = function renderNormalArray() {
|
|
409
|
+
var _this2 = this;
|
|
410
|
+
var _this$props8 = this.props,
|
|
411
|
+
schema = _this$props8.schema,
|
|
412
|
+
_this$props8$uiSchema = _this$props8.uiSchema,
|
|
413
|
+
uiSchema = _this$props8$uiSchema === void 0 ? {} : _this$props8$uiSchema,
|
|
414
|
+
errorSchema = _this$props8.errorSchema,
|
|
415
|
+
idSchema = _this$props8.idSchema,
|
|
416
|
+
name = _this$props8.name,
|
|
417
|
+
_this$props8$disabled = _this$props8.disabled,
|
|
418
|
+
disabled = _this$props8$disabled === void 0 ? false : _this$props8$disabled,
|
|
419
|
+
_this$props8$readonly = _this$props8.readonly,
|
|
420
|
+
readonly = _this$props8$readonly === void 0 ? false : _this$props8$readonly,
|
|
421
|
+
_this$props8$autofocu = _this$props8.autofocus,
|
|
422
|
+
autofocus = _this$props8$autofocu === void 0 ? false : _this$props8$autofocu,
|
|
423
|
+
_this$props8$required = _this$props8.required,
|
|
424
|
+
required = _this$props8$required === void 0 ? false : _this$props8$required,
|
|
425
|
+
registry = _this$props8.registry,
|
|
426
|
+
onBlur = _this$props8.onBlur,
|
|
427
|
+
onFocus = _this$props8.onFocus,
|
|
428
|
+
idPrefix = _this$props8.idPrefix,
|
|
429
|
+
_this$props8$idSepara = _this$props8.idSeparator,
|
|
430
|
+
idSeparator = _this$props8$idSepara === void 0 ? "_" : _this$props8$idSepara,
|
|
431
|
+
rawErrors = _this$props8.rawErrors;
|
|
432
|
+
var keyedFormData = this.state.keyedFormData;
|
|
433
|
+
var title = schema.title === undefined ? name : schema.title;
|
|
434
|
+
var schemaUtils = registry.schemaUtils,
|
|
435
|
+
formContext = registry.formContext;
|
|
436
|
+
var uiOptions = getUiOptions(uiSchema);
|
|
437
|
+
var _schemaItems = isObject(schema.items) ? schema.items : {};
|
|
438
|
+
var itemsSchema = schemaUtils.retrieveSchema(_schemaItems);
|
|
439
|
+
var formData = keyedToPlainFormData(this.state.keyedFormData);
|
|
440
|
+
var arrayProps = {
|
|
367
441
|
canAdd: this.canAddItem(formData),
|
|
368
|
-
items: keyedFormData.map((keyedItem, index)
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
item
|
|
372
|
-
} = keyedItem;
|
|
442
|
+
items: keyedFormData.map(function (keyedItem, index) {
|
|
443
|
+
var key = keyedItem.key,
|
|
444
|
+
item = keyedItem.item;
|
|
373
445
|
// While we are actually dealing with a single item of type T, the types require a T[], so cast
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
return
|
|
380
|
-
key,
|
|
381
|
-
index,
|
|
382
|
-
name: name &&
|
|
446
|
+
var itemCast = item;
|
|
447
|
+
var itemSchema = schemaUtils.retrieveSchema(_schemaItems, itemCast);
|
|
448
|
+
var itemErrorSchema = errorSchema ? errorSchema[index] : undefined;
|
|
449
|
+
var itemIdPrefix = idSchema.$id + idSeparator + index;
|
|
450
|
+
var itemIdSchema = schemaUtils.toIdSchema(itemSchema, itemIdPrefix, itemCast, idPrefix, idSeparator);
|
|
451
|
+
return _this2.renderArrayFieldItem({
|
|
452
|
+
key: key,
|
|
453
|
+
index: index,
|
|
454
|
+
name: name && name + "-" + index,
|
|
383
455
|
canMoveUp: index > 0,
|
|
384
456
|
canMoveDown: index < formData.length - 1,
|
|
385
|
-
itemSchema,
|
|
386
|
-
itemIdSchema,
|
|
387
|
-
itemErrorSchema,
|
|
457
|
+
itemSchema: itemSchema,
|
|
458
|
+
itemIdSchema: itemIdSchema,
|
|
459
|
+
itemErrorSchema: itemErrorSchema,
|
|
388
460
|
itemData: itemCast,
|
|
389
461
|
itemUiSchema: uiSchema.items,
|
|
390
462
|
autofocus: autofocus && index === 0,
|
|
391
|
-
onBlur,
|
|
392
|
-
onFocus,
|
|
393
|
-
rawErrors
|
|
463
|
+
onBlur: onBlur,
|
|
464
|
+
onFocus: onFocus,
|
|
465
|
+
rawErrors: rawErrors
|
|
394
466
|
});
|
|
395
467
|
}),
|
|
396
|
-
className:
|
|
397
|
-
disabled,
|
|
398
|
-
idSchema,
|
|
399
|
-
uiSchema,
|
|
468
|
+
className: "field field-array field-array-of-" + itemsSchema.type,
|
|
469
|
+
disabled: disabled,
|
|
470
|
+
idSchema: idSchema,
|
|
471
|
+
uiSchema: uiSchema,
|
|
400
472
|
onAddClick: this.onAddClick,
|
|
401
|
-
readonly,
|
|
402
|
-
required,
|
|
403
|
-
schema,
|
|
404
|
-
title,
|
|
405
|
-
formContext,
|
|
406
|
-
formData,
|
|
407
|
-
rawErrors,
|
|
408
|
-
registry
|
|
473
|
+
readonly: readonly,
|
|
474
|
+
required: required,
|
|
475
|
+
schema: schema,
|
|
476
|
+
title: title,
|
|
477
|
+
formContext: formContext,
|
|
478
|
+
formData: formData,
|
|
479
|
+
rawErrors: rawErrors,
|
|
480
|
+
registry: registry
|
|
409
481
|
};
|
|
410
|
-
|
|
411
|
-
return /*#__PURE__*/React.createElement(Template, {
|
|
412
|
-
...arrayProps
|
|
413
|
-
});
|
|
482
|
+
var Template = getTemplate("ArrayFieldTemplate", registry, uiOptions);
|
|
483
|
+
return /*#__PURE__*/React.createElement(Template, _extends({}, arrayProps));
|
|
414
484
|
}
|
|
415
485
|
/** Renders an array using the custom widget provided by the user in the `uiSchema`
|
|
416
|
-
|
|
417
|
-
renderCustomWidget() {
|
|
418
|
-
|
|
419
|
-
schema,
|
|
420
|
-
idSchema,
|
|
421
|
-
uiSchema,
|
|
422
|
-
disabled =
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
486
|
+
*/;
|
|
487
|
+
_proto.renderCustomWidget = function renderCustomWidget() {
|
|
488
|
+
var _this$props9 = this.props,
|
|
489
|
+
schema = _this$props9.schema,
|
|
490
|
+
idSchema = _this$props9.idSchema,
|
|
491
|
+
uiSchema = _this$props9.uiSchema,
|
|
492
|
+
_this$props9$disabled = _this$props9.disabled,
|
|
493
|
+
disabled = _this$props9$disabled === void 0 ? false : _this$props9$disabled,
|
|
494
|
+
_this$props9$readonly = _this$props9.readonly,
|
|
495
|
+
readonly = _this$props9$readonly === void 0 ? false : _this$props9$readonly,
|
|
496
|
+
_this$props9$autofocu = _this$props9.autofocus,
|
|
497
|
+
autofocus = _this$props9$autofocu === void 0 ? false : _this$props9$autofocu,
|
|
498
|
+
_this$props9$required = _this$props9.required,
|
|
499
|
+
required = _this$props9$required === void 0 ? false : _this$props9$required,
|
|
500
|
+
hideError = _this$props9.hideError,
|
|
501
|
+
placeholder = _this$props9.placeholder,
|
|
502
|
+
onBlur = _this$props9.onBlur,
|
|
503
|
+
onFocus = _this$props9.onFocus,
|
|
504
|
+
_this$props9$formData = _this$props9.formData,
|
|
505
|
+
items = _this$props9$formData === void 0 ? [] : _this$props9$formData,
|
|
506
|
+
registry = _this$props9.registry,
|
|
507
|
+
rawErrors = _this$props9.rawErrors,
|
|
508
|
+
name = _this$props9.name;
|
|
509
|
+
var widgets = registry.widgets,
|
|
510
|
+
formContext = registry.formContext;
|
|
511
|
+
var title = schema.title || name;
|
|
512
|
+
var _getUiOptions2 = getUiOptions(uiSchema),
|
|
513
|
+
widget = _getUiOptions2.widget,
|
|
514
|
+
options = _objectWithoutPropertiesLoose(_getUiOptions2, _excluded$9);
|
|
515
|
+
var Widget = getWidget(schema, widget, widgets);
|
|
445
516
|
return /*#__PURE__*/React.createElement(Widget, {
|
|
446
517
|
id: idSchema && idSchema.$id,
|
|
447
518
|
multiple: true,
|
|
@@ -465,47 +536,48 @@ class ArrayField extends Component {
|
|
|
465
536
|
});
|
|
466
537
|
}
|
|
467
538
|
/** Renders an array as a set of checkboxes
|
|
468
|
-
|
|
469
|
-
renderMultiSelect() {
|
|
470
|
-
|
|
471
|
-
schema,
|
|
472
|
-
idSchema,
|
|
473
|
-
uiSchema,
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
539
|
+
*/;
|
|
540
|
+
_proto.renderMultiSelect = function renderMultiSelect() {
|
|
541
|
+
var _this$props10 = this.props,
|
|
542
|
+
schema = _this$props10.schema,
|
|
543
|
+
idSchema = _this$props10.idSchema,
|
|
544
|
+
uiSchema = _this$props10.uiSchema,
|
|
545
|
+
_this$props10$formDat = _this$props10.formData,
|
|
546
|
+
items = _this$props10$formDat === void 0 ? [] : _this$props10$formDat,
|
|
547
|
+
_this$props10$disable = _this$props10.disabled,
|
|
548
|
+
disabled = _this$props10$disable === void 0 ? false : _this$props10$disable,
|
|
549
|
+
_this$props10$readonl = _this$props10.readonly,
|
|
550
|
+
readonly = _this$props10$readonl === void 0 ? false : _this$props10$readonl,
|
|
551
|
+
_this$props10$autofoc = _this$props10.autofocus,
|
|
552
|
+
autofocus = _this$props10$autofoc === void 0 ? false : _this$props10$autofoc,
|
|
553
|
+
_this$props10$require = _this$props10.required,
|
|
554
|
+
required = _this$props10$require === void 0 ? false : _this$props10$require,
|
|
555
|
+
placeholder = _this$props10.placeholder,
|
|
556
|
+
onBlur = _this$props10.onBlur,
|
|
557
|
+
onFocus = _this$props10.onFocus,
|
|
558
|
+
registry = _this$props10.registry,
|
|
559
|
+
rawErrors = _this$props10.rawErrors,
|
|
560
|
+
name = _this$props10.name;
|
|
561
|
+
var widgets = registry.widgets,
|
|
562
|
+
schemaUtils = registry.schemaUtils,
|
|
563
|
+
formContext = registry.formContext;
|
|
564
|
+
var itemsSchema = schemaUtils.retrieveSchema(schema.items, items);
|
|
565
|
+
var title = schema.title || name;
|
|
566
|
+
var enumOptions = optionsList(itemsSchema);
|
|
567
|
+
var _getUiOptions3 = getUiOptions(uiSchema),
|
|
568
|
+
_getUiOptions3$widget = _getUiOptions3.widget,
|
|
569
|
+
widget = _getUiOptions3$widget === void 0 ? "select" : _getUiOptions3$widget,
|
|
570
|
+
options = _objectWithoutPropertiesLoose(_getUiOptions3, _excluded2);
|
|
571
|
+
var Widget = getWidget(schema, widget, widgets);
|
|
499
572
|
return /*#__PURE__*/React.createElement(Widget, {
|
|
500
573
|
id: idSchema && idSchema.$id,
|
|
501
574
|
multiple: true,
|
|
502
575
|
onChange: this.onSelectChange,
|
|
503
576
|
onBlur: onBlur,
|
|
504
577
|
onFocus: onFocus,
|
|
505
|
-
options: {
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
},
|
|
578
|
+
options: _extends({}, options, {
|
|
579
|
+
enumOptions: enumOptions
|
|
580
|
+
}),
|
|
509
581
|
schema: schema,
|
|
510
582
|
uiSchema: uiSchema,
|
|
511
583
|
registry: registry,
|
|
@@ -521,33 +593,35 @@ class ArrayField extends Component {
|
|
|
521
593
|
});
|
|
522
594
|
}
|
|
523
595
|
/** Renders an array of files using the `FileWidget`
|
|
524
|
-
|
|
525
|
-
renderFiles() {
|
|
526
|
-
|
|
527
|
-
schema,
|
|
528
|
-
uiSchema,
|
|
529
|
-
idSchema,
|
|
530
|
-
name,
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
596
|
+
*/;
|
|
597
|
+
_proto.renderFiles = function renderFiles() {
|
|
598
|
+
var _this$props11 = this.props,
|
|
599
|
+
schema = _this$props11.schema,
|
|
600
|
+
uiSchema = _this$props11.uiSchema,
|
|
601
|
+
idSchema = _this$props11.idSchema,
|
|
602
|
+
name = _this$props11.name,
|
|
603
|
+
_this$props11$disable = _this$props11.disabled,
|
|
604
|
+
disabled = _this$props11$disable === void 0 ? false : _this$props11$disable,
|
|
605
|
+
_this$props11$readonl = _this$props11.readonly,
|
|
606
|
+
readonly = _this$props11$readonl === void 0 ? false : _this$props11$readonl,
|
|
607
|
+
_this$props11$autofoc = _this$props11.autofocus,
|
|
608
|
+
autofocus = _this$props11$autofoc === void 0 ? false : _this$props11$autofoc,
|
|
609
|
+
_this$props11$require = _this$props11.required,
|
|
610
|
+
required = _this$props11$require === void 0 ? false : _this$props11$require,
|
|
611
|
+
onBlur = _this$props11.onBlur,
|
|
612
|
+
onFocus = _this$props11.onFocus,
|
|
613
|
+
registry = _this$props11.registry,
|
|
614
|
+
_this$props11$formDat = _this$props11.formData,
|
|
615
|
+
items = _this$props11$formDat === void 0 ? [] : _this$props11$formDat,
|
|
616
|
+
rawErrors = _this$props11.rawErrors;
|
|
617
|
+
var title = schema.title || name;
|
|
618
|
+
var widgets = registry.widgets,
|
|
619
|
+
formContext = registry.formContext;
|
|
620
|
+
var _getUiOptions4 = getUiOptions(uiSchema),
|
|
621
|
+
_getUiOptions4$widget = _getUiOptions4.widget,
|
|
622
|
+
widget = _getUiOptions4$widget === void 0 ? "files" : _getUiOptions4$widget,
|
|
623
|
+
options = _objectWithoutPropertiesLoose(_getUiOptions4, _excluded3);
|
|
624
|
+
var Widget = getWidget(schema, widget, widgets);
|
|
551
625
|
return /*#__PURE__*/React.createElement(Widget, {
|
|
552
626
|
options: options,
|
|
553
627
|
id: idSchema && idSchema.$id,
|
|
@@ -570,150 +644,150 @@ class ArrayField extends Component {
|
|
|
570
644
|
});
|
|
571
645
|
}
|
|
572
646
|
/** Renders an array that has a maximum limit of items
|
|
573
|
-
|
|
574
|
-
renderFixedArray() {
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
647
|
+
*/;
|
|
648
|
+
_proto.renderFixedArray = function renderFixedArray() {
|
|
649
|
+
var _this3 = this;
|
|
650
|
+
var _this$props12 = this.props,
|
|
651
|
+
schema = _this$props12.schema,
|
|
652
|
+
_this$props12$uiSchem = _this$props12.uiSchema,
|
|
653
|
+
uiSchema = _this$props12$uiSchem === void 0 ? {} : _this$props12$uiSchem,
|
|
654
|
+
_this$props12$formDat = _this$props12.formData,
|
|
655
|
+
formData = _this$props12$formDat === void 0 ? [] : _this$props12$formDat,
|
|
656
|
+
errorSchema = _this$props12.errorSchema,
|
|
657
|
+
idPrefix = _this$props12.idPrefix,
|
|
658
|
+
_this$props12$idSepar = _this$props12.idSeparator,
|
|
659
|
+
idSeparator = _this$props12$idSepar === void 0 ? "_" : _this$props12$idSepar,
|
|
660
|
+
idSchema = _this$props12.idSchema,
|
|
661
|
+
name = _this$props12.name,
|
|
662
|
+
_this$props12$disable = _this$props12.disabled,
|
|
663
|
+
disabled = _this$props12$disable === void 0 ? false : _this$props12$disable,
|
|
664
|
+
_this$props12$readonl = _this$props12.readonly,
|
|
665
|
+
readonly = _this$props12$readonl === void 0 ? false : _this$props12$readonl,
|
|
666
|
+
_this$props12$autofoc = _this$props12.autofocus,
|
|
667
|
+
autofocus = _this$props12$autofoc === void 0 ? false : _this$props12$autofoc,
|
|
668
|
+
_this$props12$require = _this$props12.required,
|
|
669
|
+
required = _this$props12$require === void 0 ? false : _this$props12$require,
|
|
670
|
+
registry = _this$props12.registry,
|
|
671
|
+
onBlur = _this$props12.onBlur,
|
|
672
|
+
onFocus = _this$props12.onFocus,
|
|
673
|
+
rawErrors = _this$props12.rawErrors;
|
|
674
|
+
var keyedFormData = this.state.keyedFormData;
|
|
675
|
+
var _this$props$formData = this.props.formData,
|
|
676
|
+
items = _this$props$formData === void 0 ? [] : _this$props$formData;
|
|
677
|
+
var title = schema.title || name;
|
|
678
|
+
var uiOptions = getUiOptions(uiSchema);
|
|
679
|
+
var schemaUtils = registry.schemaUtils,
|
|
680
|
+
formContext = registry.formContext;
|
|
681
|
+
var _schemaItems = isObject(schema.items) ? schema.items : [];
|
|
682
|
+
var itemSchemas = _schemaItems.map(function (item, index) {
|
|
683
|
+
return schemaUtils.retrieveSchema(item, formData[index]);
|
|
684
|
+
});
|
|
685
|
+
var additionalSchema = isObject(schema.additionalItems) ? schemaUtils.retrieveSchema(schema.additionalItems, formData) : null;
|
|
608
686
|
if (!items || items.length < itemSchemas.length) {
|
|
609
687
|
// to make sure at least all fixed items are generated
|
|
610
688
|
items = items || [];
|
|
611
689
|
items = items.concat(new Array(itemSchemas.length - items.length));
|
|
612
690
|
}
|
|
613
691
|
// These are the props passed into the render function
|
|
614
|
-
|
|
692
|
+
var arrayProps = {
|
|
615
693
|
canAdd: this.canAddItem(items) && !!additionalSchema,
|
|
616
694
|
className: "field field-array field-array-fixed-items",
|
|
617
|
-
disabled,
|
|
618
|
-
idSchema,
|
|
619
|
-
formData,
|
|
620
|
-
items: keyedFormData.map((keyedItem, index)
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
item
|
|
624
|
-
} = keyedItem;
|
|
695
|
+
disabled: disabled,
|
|
696
|
+
idSchema: idSchema,
|
|
697
|
+
formData: formData,
|
|
698
|
+
items: keyedFormData.map(function (keyedItem, index) {
|
|
699
|
+
var key = keyedItem.key,
|
|
700
|
+
item = keyedItem.item;
|
|
625
701
|
// While we are actually dealing with a single item of type T, the types require a T[], so cast
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
return
|
|
634
|
-
key,
|
|
635
|
-
index,
|
|
636
|
-
name: name &&
|
|
702
|
+
var itemCast = item;
|
|
703
|
+
var additional = index >= itemSchemas.length;
|
|
704
|
+
var itemSchema = additional && isObject(schema.additionalItems) ? schemaUtils.retrieveSchema(schema.additionalItems, itemCast) : itemSchemas[index];
|
|
705
|
+
var itemIdPrefix = idSchema.$id + idSeparator + index;
|
|
706
|
+
var itemIdSchema = schemaUtils.toIdSchema(itemSchema, itemIdPrefix, itemCast, idPrefix, idSeparator);
|
|
707
|
+
var itemUiSchema = additional ? uiSchema.additionalItems || {} : Array.isArray(uiSchema.items) ? uiSchema.items[index] : uiSchema.items || {};
|
|
708
|
+
var itemErrorSchema = errorSchema ? errorSchema[index] : undefined;
|
|
709
|
+
return _this3.renderArrayFieldItem({
|
|
710
|
+
key: key,
|
|
711
|
+
index: index,
|
|
712
|
+
name: name && name + "-" + index,
|
|
637
713
|
canRemove: additional,
|
|
638
714
|
canMoveUp: index >= itemSchemas.length + 1,
|
|
639
715
|
canMoveDown: additional && index < items.length - 1,
|
|
640
|
-
itemSchema,
|
|
716
|
+
itemSchema: itemSchema,
|
|
641
717
|
itemData: itemCast,
|
|
642
|
-
itemUiSchema,
|
|
643
|
-
itemIdSchema,
|
|
644
|
-
itemErrorSchema,
|
|
718
|
+
itemUiSchema: itemUiSchema,
|
|
719
|
+
itemIdSchema: itemIdSchema,
|
|
720
|
+
itemErrorSchema: itemErrorSchema,
|
|
645
721
|
autofocus: autofocus && index === 0,
|
|
646
|
-
onBlur,
|
|
647
|
-
onFocus,
|
|
648
|
-
rawErrors
|
|
722
|
+
onBlur: onBlur,
|
|
723
|
+
onFocus: onFocus,
|
|
724
|
+
rawErrors: rawErrors
|
|
649
725
|
});
|
|
650
726
|
}),
|
|
651
727
|
onAddClick: this.onAddClick,
|
|
652
|
-
readonly,
|
|
653
|
-
required,
|
|
654
|
-
registry,
|
|
655
|
-
schema,
|
|
656
|
-
uiSchema,
|
|
657
|
-
title,
|
|
658
|
-
formContext,
|
|
659
|
-
rawErrors
|
|
728
|
+
readonly: readonly,
|
|
729
|
+
required: required,
|
|
730
|
+
registry: registry,
|
|
731
|
+
schema: schema,
|
|
732
|
+
uiSchema: uiSchema,
|
|
733
|
+
title: title,
|
|
734
|
+
formContext: formContext,
|
|
735
|
+
rawErrors: rawErrors
|
|
660
736
|
};
|
|
661
|
-
|
|
662
|
-
return /*#__PURE__*/React.createElement(Template, {
|
|
663
|
-
...arrayProps
|
|
664
|
-
});
|
|
737
|
+
var Template = getTemplate("ArrayFieldTemplate", registry, uiOptions);
|
|
738
|
+
return /*#__PURE__*/React.createElement(Template, _extends({}, arrayProps));
|
|
665
739
|
}
|
|
666
740
|
/** Renders the individual array item using a `SchemaField` along with the additional properties required to be send
|
|
667
741
|
* back to the `ArrayFieldItemTemplate`.
|
|
668
742
|
*
|
|
669
743
|
* @param props - The props for the individual array item to be rendered
|
|
670
|
-
|
|
671
|
-
renderArrayFieldItem(props) {
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
canRemove = true,
|
|
677
|
-
canMoveUp =
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
fields
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
} = getUiOptions(uiSchema);
|
|
710
|
-
const has = {
|
|
744
|
+
*/;
|
|
745
|
+
_proto.renderArrayFieldItem = function renderArrayFieldItem(props) {
|
|
746
|
+
var key = props.key,
|
|
747
|
+
index = props.index,
|
|
748
|
+
name = props.name,
|
|
749
|
+
_props$canRemove = props.canRemove,
|
|
750
|
+
canRemove = _props$canRemove === void 0 ? true : _props$canRemove,
|
|
751
|
+
_props$canMoveUp = props.canMoveUp,
|
|
752
|
+
canMoveUp = _props$canMoveUp === void 0 ? true : _props$canMoveUp,
|
|
753
|
+
_props$canMoveDown = props.canMoveDown,
|
|
754
|
+
canMoveDown = _props$canMoveDown === void 0 ? true : _props$canMoveDown,
|
|
755
|
+
itemSchema = props.itemSchema,
|
|
756
|
+
itemData = props.itemData,
|
|
757
|
+
itemUiSchema = props.itemUiSchema,
|
|
758
|
+
itemIdSchema = props.itemIdSchema,
|
|
759
|
+
itemErrorSchema = props.itemErrorSchema,
|
|
760
|
+
autofocus = props.autofocus,
|
|
761
|
+
onBlur = props.onBlur,
|
|
762
|
+
onFocus = props.onFocus,
|
|
763
|
+
rawErrors = props.rawErrors;
|
|
764
|
+
var _this$props13 = this.props,
|
|
765
|
+
disabled = _this$props13.disabled,
|
|
766
|
+
hideError = _this$props13.hideError,
|
|
767
|
+
idPrefix = _this$props13.idPrefix,
|
|
768
|
+
idSeparator = _this$props13.idSeparator,
|
|
769
|
+
readonly = _this$props13.readonly,
|
|
770
|
+
uiSchema = _this$props13.uiSchema,
|
|
771
|
+
registry = _this$props13.registry,
|
|
772
|
+
formContext = _this$props13.formContext;
|
|
773
|
+
var _registry$fields = registry.fields,
|
|
774
|
+
ArraySchemaField = _registry$fields.ArraySchemaField,
|
|
775
|
+
SchemaField = _registry$fields.SchemaField;
|
|
776
|
+
var ItemSchemaField = ArraySchemaField || SchemaField;
|
|
777
|
+
var _getUiOptions5 = getUiOptions(uiSchema),
|
|
778
|
+
_getUiOptions5$ordera = _getUiOptions5.orderable,
|
|
779
|
+
orderable = _getUiOptions5$ordera === void 0 ? true : _getUiOptions5$ordera,
|
|
780
|
+
_getUiOptions5$remova = _getUiOptions5.removable,
|
|
781
|
+
removable = _getUiOptions5$remova === void 0 ? true : _getUiOptions5$remova;
|
|
782
|
+
var has = {
|
|
711
783
|
moveUp: orderable && canMoveUp,
|
|
712
784
|
moveDown: orderable && canMoveDown,
|
|
713
785
|
remove: removable && canRemove,
|
|
714
786
|
toolbar: false
|
|
715
787
|
};
|
|
716
|
-
has.toolbar = Object.keys(has).some(
|
|
788
|
+
has.toolbar = Object.keys(has).some(function (key) {
|
|
789
|
+
return has[key];
|
|
790
|
+
});
|
|
717
791
|
return {
|
|
718
792
|
children: /*#__PURE__*/React.createElement(ItemSchemaField, {
|
|
719
793
|
name: name,
|
|
@@ -738,75 +812,83 @@ class ArrayField extends Component {
|
|
|
738
812
|
rawErrors: rawErrors
|
|
739
813
|
}),
|
|
740
814
|
className: "array-item",
|
|
741
|
-
disabled,
|
|
815
|
+
disabled: disabled,
|
|
742
816
|
hasToolbar: has.toolbar,
|
|
743
817
|
hasMoveUp: has.moveUp,
|
|
744
818
|
hasMoveDown: has.moveDown,
|
|
745
819
|
hasRemove: has.remove,
|
|
746
|
-
index,
|
|
747
|
-
key,
|
|
820
|
+
index: index,
|
|
821
|
+
key: key,
|
|
748
822
|
onAddIndexClick: this.onAddIndexClick,
|
|
749
823
|
onDropIndexClick: this.onDropIndexClick,
|
|
750
824
|
onReorderClick: this.onReorderClick,
|
|
751
|
-
readonly,
|
|
752
|
-
registry,
|
|
825
|
+
readonly: readonly,
|
|
826
|
+
registry: registry,
|
|
827
|
+
schema: itemSchema,
|
|
753
828
|
uiSchema: itemUiSchema
|
|
754
829
|
};
|
|
755
|
-
}
|
|
756
|
-
|
|
830
|
+
};
|
|
831
|
+
_createClass(ArrayField, [{
|
|
832
|
+
key: "itemTitle",
|
|
833
|
+
get: function get$1() {
|
|
834
|
+
var schema = this.props.schema;
|
|
835
|
+
return get(schema, [ITEMS_KEY, "title"], get(schema, [ITEMS_KEY, "description"], "Item"));
|
|
836
|
+
}
|
|
837
|
+
}]);
|
|
838
|
+
return ArrayField;
|
|
839
|
+
}(Component);
|
|
757
840
|
|
|
841
|
+
var _excluded$8 = ["widget"];
|
|
758
842
|
/** The `BooleanField` component is used to render a field in the schema is boolean. It constructs `enumOptions` for the
|
|
759
843
|
* two boolean values based on the various alternatives in the schema.
|
|
760
844
|
*
|
|
761
845
|
* @param props - The `FieldProps` for this template
|
|
762
846
|
*/
|
|
763
847
|
function BooleanField(props) {
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
const {
|
|
788
|
-
widget = "checkbox",
|
|
789
|
-
...options
|
|
790
|
-
} = getUiOptions(uiSchema);
|
|
791
|
-
const Widget = getWidget(schema, widget, widgets);
|
|
792
|
-
let enumOptions;
|
|
848
|
+
var schema = props.schema,
|
|
849
|
+
name = props.name,
|
|
850
|
+
uiSchema = props.uiSchema,
|
|
851
|
+
idSchema = props.idSchema,
|
|
852
|
+
formData = props.formData,
|
|
853
|
+
registry = props.registry,
|
|
854
|
+
required = props.required,
|
|
855
|
+
disabled = props.disabled,
|
|
856
|
+
readonly = props.readonly,
|
|
857
|
+
autofocus = props.autofocus,
|
|
858
|
+
onChange = props.onChange,
|
|
859
|
+
onFocus = props.onFocus,
|
|
860
|
+
onBlur = props.onBlur,
|
|
861
|
+
rawErrors = props.rawErrors;
|
|
862
|
+
var title = schema.title;
|
|
863
|
+
var widgets = registry.widgets,
|
|
864
|
+
formContext = registry.formContext;
|
|
865
|
+
var _getUiOptions = getUiOptions(uiSchema),
|
|
866
|
+
_getUiOptions$widget = _getUiOptions.widget,
|
|
867
|
+
widget = _getUiOptions$widget === void 0 ? "checkbox" : _getUiOptions$widget,
|
|
868
|
+
options = _objectWithoutPropertiesLoose(_getUiOptions, _excluded$8);
|
|
869
|
+
var Widget = getWidget(schema, widget, widgets);
|
|
870
|
+
var enumOptions;
|
|
793
871
|
if (Array.isArray(schema.oneOf)) {
|
|
794
872
|
enumOptions = optionsList({
|
|
795
|
-
oneOf: schema.oneOf.map(option
|
|
873
|
+
oneOf: schema.oneOf.map(function (option) {
|
|
796
874
|
if (isObject(option)) {
|
|
797
|
-
return {
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
};
|
|
875
|
+
return _extends({}, option, {
|
|
876
|
+
title: option.title || (option["const"] === true ? "Yes" : "No")
|
|
877
|
+
});
|
|
801
878
|
}
|
|
802
879
|
return undefined;
|
|
803
|
-
}).filter(
|
|
880
|
+
}).filter(function (o) {
|
|
881
|
+
return o;
|
|
882
|
+
}) // cast away the error that typescript can't grok is fixed
|
|
804
883
|
});
|
|
805
884
|
} else {
|
|
885
|
+
var _schema$enum;
|
|
806
886
|
// We deprecated enumNames in v5. It's intentionally omitted from RSJFSchema type, so we need to cast here.
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
if (!schemaWithEnumNames.enumNames && enums.length === 2 && enums.every(
|
|
887
|
+
var schemaWithEnumNames = schema;
|
|
888
|
+
var enums = (_schema$enum = schema["enum"]) != null ? _schema$enum : [true, false];
|
|
889
|
+
if (!schemaWithEnumNames.enumNames && enums.length === 2 && enums.every(function (v) {
|
|
890
|
+
return typeof v === "boolean";
|
|
891
|
+
})) {
|
|
810
892
|
enumOptions = [{
|
|
811
893
|
value: enums[0],
|
|
812
894
|
label: enums[0] ? "Yes" : "No"
|
|
@@ -816,17 +898,16 @@ function BooleanField(props) {
|
|
|
816
898
|
}];
|
|
817
899
|
} else {
|
|
818
900
|
enumOptions = optionsList({
|
|
819
|
-
enum: enums,
|
|
901
|
+
"enum": enums,
|
|
820
902
|
// NOTE: enumNames is deprecated, but still supported for now.
|
|
821
903
|
enumNames: schemaWithEnumNames.enumNames
|
|
822
904
|
});
|
|
823
905
|
}
|
|
824
906
|
}
|
|
825
907
|
return /*#__PURE__*/React.createElement(Widget, {
|
|
826
|
-
options: {
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
},
|
|
908
|
+
options: _extends({}, options, {
|
|
909
|
+
enumOptions: enumOptions
|
|
910
|
+
}),
|
|
830
911
|
schema: schema,
|
|
831
912
|
uiSchema: uiSchema,
|
|
832
913
|
id: idSchema && idSchema.$id,
|
|
@@ -845,41 +926,42 @@ function BooleanField(props) {
|
|
|
845
926
|
});
|
|
846
927
|
}
|
|
847
928
|
|
|
929
|
+
var _excluded$7 = ["widget"];
|
|
848
930
|
/** The `AnyOfField` component is used to render a field in the schema that is an `anyOf`, `allOf` or `oneOf`. It tracks
|
|
849
931
|
* the currently selected option and cleans up any irrelevant data in `formData`.
|
|
850
932
|
*
|
|
851
933
|
* @param props - The `FieldProps` for this template
|
|
852
934
|
*/
|
|
853
|
-
|
|
935
|
+
var AnyOfField = /*#__PURE__*/function (_Component) {
|
|
936
|
+
_inheritsLoose(AnyOfField, _Component);
|
|
854
937
|
/** Constructs an `AnyOfField` with the given `props` to initialize the initially selected option in state
|
|
855
938
|
*
|
|
856
939
|
* @param props - The `FieldProps` for this template
|
|
857
940
|
*/
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
} = registry;
|
|
871
|
-
const newOption = schemaUtils.retrieveSchema(options[selectedOption], formData);
|
|
941
|
+
function AnyOfField(props) {
|
|
942
|
+
var _this;
|
|
943
|
+
_this = _Component.call(this, props) || this;
|
|
944
|
+
_this.onOptionChange = function (option) {
|
|
945
|
+
var selectedOption = parseInt(option, 10);
|
|
946
|
+
var _this$props = _this.props,
|
|
947
|
+
formData = _this$props.formData,
|
|
948
|
+
onChange = _this$props.onChange,
|
|
949
|
+
options = _this$props.options,
|
|
950
|
+
registry = _this$props.registry;
|
|
951
|
+
var schemaUtils = registry.schemaUtils;
|
|
952
|
+
var newOption = schemaUtils.retrieveSchema(options[selectedOption], formData);
|
|
872
953
|
// If the new option is of type object and the current data is an object,
|
|
873
954
|
// discard properties added using the old option.
|
|
874
|
-
|
|
955
|
+
var newFormData = undefined;
|
|
875
956
|
if (guessType(formData) === "object" && (newOption.type === "object" || newOption.properties)) {
|
|
876
957
|
newFormData = Object.assign({}, formData);
|
|
877
|
-
|
|
958
|
+
var optionsToDiscard = options.slice();
|
|
878
959
|
optionsToDiscard.splice(selectedOption, 1);
|
|
879
960
|
// Discard any data added using other options
|
|
880
|
-
for (
|
|
881
|
-
|
|
882
|
-
|
|
961
|
+
for (var _iterator = _createForOfIteratorHelperLoose(optionsToDiscard), _step; !(_step = _iterator()).done;) {
|
|
962
|
+
var _option = _step.value;
|
|
963
|
+
if (_option.properties) {
|
|
964
|
+
for (var key in _option.properties) {
|
|
883
965
|
if (key in newFormData) {
|
|
884
966
|
unset(newFormData, key);
|
|
885
967
|
}
|
|
@@ -889,18 +971,18 @@ class AnyOfField extends Component {
|
|
|
889
971
|
}
|
|
890
972
|
// Call getDefaultFormState to make sure defaults are populated on change. Pass "excludeObjectChildren"
|
|
891
973
|
// so that only the root objects themselves are created without adding undefined children properties
|
|
892
|
-
onChange(schemaUtils.getDefaultFormState(options[selectedOption], newFormData, "excludeObjectChildren"), undefined,
|
|
893
|
-
|
|
974
|
+
onChange(schemaUtils.getDefaultFormState(options[selectedOption], newFormData, "excludeObjectChildren"), undefined, _this.getFieldId());
|
|
975
|
+
_this.setState({
|
|
894
976
|
selectedOption: parseInt(option, 10)
|
|
895
977
|
});
|
|
896
978
|
};
|
|
897
|
-
|
|
898
|
-
formData
|
|
899
|
-
options
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
selectedOption: this.getMatchingOption(0, _formData, _options)
|
|
979
|
+
var _this$props2 = _this.props,
|
|
980
|
+
_formData = _this$props2.formData,
|
|
981
|
+
_options = _this$props2.options;
|
|
982
|
+
_this.state = {
|
|
983
|
+
selectedOption: _this.getMatchingOption(0, _formData, _options)
|
|
903
984
|
};
|
|
985
|
+
return _this;
|
|
904
986
|
}
|
|
905
987
|
/** React lifecycle methos that is called when the props and/or state for this component is updated. It recomputes the
|
|
906
988
|
* currently selected option based on the overall `formData`
|
|
@@ -908,17 +990,15 @@ class AnyOfField extends Component {
|
|
|
908
990
|
* @param prevProps - The previous `FieldProps` for this template
|
|
909
991
|
* @param prevState - The previous `AnyOfFieldState` for this template
|
|
910
992
|
*/
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
selectedOption
|
|
919
|
-
} = this.state;
|
|
993
|
+
var _proto = AnyOfField.prototype;
|
|
994
|
+
_proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
|
|
995
|
+
var _this$props3 = this.props,
|
|
996
|
+
formData = _this$props3.formData,
|
|
997
|
+
options = _this$props3.options,
|
|
998
|
+
idSchema = _this$props3.idSchema;
|
|
999
|
+
var selectedOption = this.state.selectedOption;
|
|
920
1000
|
if (!deepEquals(formData, prevProps.formData) && idSchema.$id === prevProps.idSchema.$id) {
|
|
921
|
-
|
|
1001
|
+
var matchingOption = this.getMatchingOption(selectedOption, formData, options);
|
|
922
1002
|
if (!prevState || matchingOption === selectedOption) {
|
|
923
1003
|
return;
|
|
924
1004
|
}
|
|
@@ -932,12 +1012,10 @@ class AnyOfField extends Component {
|
|
|
932
1012
|
* @param formData - The new formData
|
|
933
1013
|
* @param options - The list of options to choose from
|
|
934
1014
|
* @return - The index of the `option` that best matches the `formData`
|
|
935
|
-
|
|
936
|
-
getMatchingOption(selectedOption, formData, options) {
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
} = this.props.registry;
|
|
940
|
-
const option = schemaUtils.getMatchingOption(formData, options);
|
|
1015
|
+
*/;
|
|
1016
|
+
_proto.getMatchingOption = function getMatchingOption(selectedOption, formData, options) {
|
|
1017
|
+
var schemaUtils = this.props.registry.schemaUtils;
|
|
1018
|
+
var option = schemaUtils.getMatchingOption(formData, options);
|
|
941
1019
|
if (option !== 0) {
|
|
942
1020
|
return option;
|
|
943
1021
|
}
|
|
@@ -950,56 +1028,51 @@ class AnyOfField extends Component {
|
|
|
950
1028
|
* the `onChange` handler.
|
|
951
1029
|
*
|
|
952
1030
|
* @param option -
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
} = this.props;
|
|
960
|
-
return `${idSchema.$id}${schema.oneOf ? "__oneof_select" : "__anyof_select"}`;
|
|
1031
|
+
*/;
|
|
1032
|
+
_proto.getFieldId = function getFieldId() {
|
|
1033
|
+
var _this$props4 = this.props,
|
|
1034
|
+
idSchema = _this$props4.idSchema,
|
|
1035
|
+
schema = _this$props4.schema;
|
|
1036
|
+
return "" + idSchema.$id + (schema.oneOf ? "__oneof_select" : "__anyof_select");
|
|
961
1037
|
}
|
|
962
1038
|
/** Renders the `AnyOfField` selector along with a `SchemaField` for the value of the `formData`
|
|
963
|
-
|
|
964
|
-
render() {
|
|
965
|
-
|
|
966
|
-
name,
|
|
967
|
-
baseType,
|
|
968
|
-
disabled =
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
...uiOptions
|
|
997
|
-
} = getUiOptions(uiSchema);
|
|
998
|
-
const Widget = getWidget({
|
|
1039
|
+
*/;
|
|
1040
|
+
_proto.render = function render() {
|
|
1041
|
+
var _this$props5 = this.props,
|
|
1042
|
+
name = _this$props5.name,
|
|
1043
|
+
baseType = _this$props5.baseType,
|
|
1044
|
+
_this$props5$disabled = _this$props5.disabled,
|
|
1045
|
+
disabled = _this$props5$disabled === void 0 ? false : _this$props5$disabled,
|
|
1046
|
+
_this$props5$readonly = _this$props5.readonly,
|
|
1047
|
+
readonly = _this$props5$readonly === void 0 ? false : _this$props5$readonly,
|
|
1048
|
+
_this$props5$hideErro = _this$props5.hideError,
|
|
1049
|
+
hideError = _this$props5$hideErro === void 0 ? false : _this$props5$hideErro,
|
|
1050
|
+
_this$props5$errorSch = _this$props5.errorSchema,
|
|
1051
|
+
errorSchema = _this$props5$errorSch === void 0 ? {} : _this$props5$errorSch,
|
|
1052
|
+
formData = _this$props5.formData,
|
|
1053
|
+
formContext = _this$props5.formContext,
|
|
1054
|
+
idPrefix = _this$props5.idPrefix,
|
|
1055
|
+
idSeparator = _this$props5.idSeparator,
|
|
1056
|
+
idSchema = _this$props5.idSchema,
|
|
1057
|
+
onBlur = _this$props5.onBlur,
|
|
1058
|
+
onChange = _this$props5.onChange,
|
|
1059
|
+
onFocus = _this$props5.onFocus,
|
|
1060
|
+
options = _this$props5.options,
|
|
1061
|
+
registry = _this$props5.registry,
|
|
1062
|
+
uiSchema = _this$props5.uiSchema;
|
|
1063
|
+
var widgets = registry.widgets,
|
|
1064
|
+
fields = registry.fields;
|
|
1065
|
+
var _SchemaField = fields.SchemaField;
|
|
1066
|
+
var selectedOption = this.state.selectedOption;
|
|
1067
|
+
var _getUiOptions = getUiOptions(uiSchema),
|
|
1068
|
+
_getUiOptions$widget = _getUiOptions.widget,
|
|
1069
|
+
widget = _getUiOptions$widget === void 0 ? "select" : _getUiOptions$widget,
|
|
1070
|
+
uiOptions = _objectWithoutPropertiesLoose(_getUiOptions, _excluded$7);
|
|
1071
|
+
var Widget = getWidget({
|
|
999
1072
|
type: "number"
|
|
1000
1073
|
}, widget, widgets);
|
|
1001
|
-
|
|
1002
|
-
|
|
1074
|
+
var option = options[selectedOption] || null;
|
|
1075
|
+
var optionSchema;
|
|
1003
1076
|
if (option) {
|
|
1004
1077
|
// If the subschema doesn't declare a type, infer the type from the
|
|
1005
1078
|
// parent schema
|
|
@@ -1007,32 +1080,34 @@ class AnyOfField extends Component {
|
|
|
1007
1080
|
type: baseType
|
|
1008
1081
|
});
|
|
1009
1082
|
}
|
|
1010
|
-
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1083
|
+
var enumOptions = options.map(function (option, index) {
|
|
1084
|
+
return {
|
|
1085
|
+
label: option.title || "Option " + (index + 1),
|
|
1086
|
+
value: index
|
|
1087
|
+
};
|
|
1088
|
+
});
|
|
1014
1089
|
return /*#__PURE__*/React.createElement("div", {
|
|
1015
1090
|
className: "panel panel-default panel-body"
|
|
1016
1091
|
}, /*#__PURE__*/React.createElement("div", {
|
|
1017
1092
|
className: "form-group"
|
|
1018
|
-
}, /*#__PURE__*/React.createElement(Widget, {
|
|
1093
|
+
}, /*#__PURE__*/React.createElement(Widget, _extends({
|
|
1019
1094
|
id: this.getFieldId(),
|
|
1020
1095
|
schema: {
|
|
1021
1096
|
type: "number",
|
|
1022
|
-
default: 0
|
|
1097
|
+
"default": 0
|
|
1023
1098
|
},
|
|
1024
1099
|
onChange: this.onOptionChange,
|
|
1025
1100
|
onBlur: onBlur,
|
|
1026
1101
|
onFocus: onFocus,
|
|
1027
1102
|
value: selectedOption,
|
|
1028
1103
|
options: {
|
|
1029
|
-
enumOptions
|
|
1104
|
+
enumOptions: enumOptions
|
|
1030
1105
|
},
|
|
1031
1106
|
registry: registry,
|
|
1032
|
-
formContext: formContext
|
|
1033
|
-
|
|
1107
|
+
formContext: formContext
|
|
1108
|
+
}, uiOptions, {
|
|
1034
1109
|
label: ""
|
|
1035
|
-
})), option !== null && /*#__PURE__*/React.createElement(_SchemaField, {
|
|
1110
|
+
}))), option !== null && /*#__PURE__*/React.createElement(_SchemaField, {
|
|
1036
1111
|
name: name,
|
|
1037
1112
|
schema: optionSchema,
|
|
1038
1113
|
uiSchema: uiSchema,
|
|
@@ -1050,19 +1125,20 @@ class AnyOfField extends Component {
|
|
|
1050
1125
|
readonly: readonly,
|
|
1051
1126
|
hideError: hideError
|
|
1052
1127
|
}));
|
|
1053
|
-
}
|
|
1054
|
-
|
|
1128
|
+
};
|
|
1129
|
+
return AnyOfField;
|
|
1130
|
+
}(Component);
|
|
1055
1131
|
|
|
1056
1132
|
// Matches a string that ends in a . character, optionally followed by a sequence of
|
|
1057
1133
|
// digits followed by any number of 0 characters up until the end of the line.
|
|
1058
1134
|
// Ensuring that there is at least one prefixed character is important so that
|
|
1059
1135
|
// you don't incorrectly match against "0".
|
|
1060
|
-
|
|
1136
|
+
var trailingCharMatcherWithPrefix = /\.([0-9]*0)*$/;
|
|
1061
1137
|
// This is used for trimming the trailing 0 and . characters without affecting
|
|
1062
1138
|
// the rest of the string. Its possible to use one RegEx with groups for this
|
|
1063
1139
|
// functionality, but it is fairly complex compared to simply defining two
|
|
1064
1140
|
// different matchers.
|
|
1065
|
-
|
|
1141
|
+
var trailingCharMatcher = /[0.]0*$/;
|
|
1066
1142
|
/**
|
|
1067
1143
|
* The NumberField class has some special handling for dealing with trailing
|
|
1068
1144
|
* decimal points and/or zeroes. This logic is designed to allow trailing values
|
|
@@ -1081,51 +1157,48 @@ const trailingCharMatcher = /[0.]0*$/;
|
|
|
1081
1157
|
* value is passed to the input instead of the formData value
|
|
1082
1158
|
*/
|
|
1083
1159
|
function NumberField(props) {
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
} = registry.fields;
|
|
1094
|
-
let value = formData;
|
|
1160
|
+
var registry = props.registry,
|
|
1161
|
+
onChange = props.onChange,
|
|
1162
|
+
formData = props.formData,
|
|
1163
|
+
initialValue = props.value;
|
|
1164
|
+
var _useState = useState(initialValue),
|
|
1165
|
+
lastValue = _useState[0],
|
|
1166
|
+
setLastValue = _useState[1];
|
|
1167
|
+
var StringField = registry.fields.StringField;
|
|
1168
|
+
var value = formData;
|
|
1095
1169
|
/** Handle the change from the `StringField` to properly convert to a number
|
|
1096
1170
|
*
|
|
1097
1171
|
* @param value - The current value for the change occurring
|
|
1098
1172
|
*/
|
|
1099
|
-
|
|
1173
|
+
var handleChange = useCallback(function (value) {
|
|
1100
1174
|
// Cache the original value in component state
|
|
1101
1175
|
setLastValue(value);
|
|
1102
1176
|
// Normalize decimals that don't start with a zero character in advance so
|
|
1103
1177
|
// that the rest of the normalization logic is simpler
|
|
1104
|
-
if (
|
|
1105
|
-
value =
|
|
1178
|
+
if (("" + value).charAt(0) === ".") {
|
|
1179
|
+
value = "0" + value;
|
|
1106
1180
|
}
|
|
1107
1181
|
// Check that the value is a string (this can happen if the widget used is a
|
|
1108
1182
|
// <select>, due to an enum declaration etc) then, if the value ends in a
|
|
1109
1183
|
// trailing decimal point or multiple zeroes, strip the trailing values
|
|
1110
|
-
|
|
1184
|
+
var processed = typeof value === "string" && value.match(trailingCharMatcherWithPrefix) ? asNumber(value.replace(trailingCharMatcher, "")) : asNumber(value);
|
|
1111
1185
|
onChange(processed);
|
|
1112
1186
|
}, [onChange]);
|
|
1113
1187
|
if (typeof lastValue === "string" && typeof value === "number") {
|
|
1114
1188
|
// Construct a regular expression that checks for a string that consists
|
|
1115
1189
|
// of the formData value suffixed with zero or one '.' characters and zero
|
|
1116
1190
|
// or more '0' characters
|
|
1117
|
-
|
|
1191
|
+
var re = new RegExp(("" + value).replace(".", "\\.") + "\\.?0*$");
|
|
1118
1192
|
// If the cached "lastValue" is a match, use that instead of the formData
|
|
1119
1193
|
// value to prevent the input value from changing in the UI
|
|
1120
1194
|
if (lastValue.match(re)) {
|
|
1121
1195
|
value = lastValue;
|
|
1122
1196
|
}
|
|
1123
1197
|
}
|
|
1124
|
-
return /*#__PURE__*/React.createElement(StringField, {
|
|
1125
|
-
...props,
|
|
1198
|
+
return /*#__PURE__*/React.createElement(StringField, _extends({}, props, {
|
|
1126
1199
|
formData: value,
|
|
1127
1200
|
onChange: handleChange
|
|
1128
|
-
});
|
|
1201
|
+
}));
|
|
1129
1202
|
}
|
|
1130
1203
|
|
|
1131
1204
|
/** The `ObjectField` component is used to render a field in the schema that is of type `object`. It tracks whether an
|
|
@@ -1133,25 +1206,28 @@ function NumberField(props) {
|
|
|
1133
1206
|
*
|
|
1134
1207
|
* @param props - The `FieldProps` for this template
|
|
1135
1208
|
*/
|
|
1136
|
-
|
|
1137
|
-
|
|
1209
|
+
var ObjectField = /*#__PURE__*/function (_Component) {
|
|
1210
|
+
_inheritsLoose(ObjectField, _Component);
|
|
1211
|
+
function ObjectField() {
|
|
1138
1212
|
var _this;
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
1213
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
1214
|
+
args[_key] = arguments[_key];
|
|
1215
|
+
}
|
|
1216
|
+
_this = _Component.call.apply(_Component, [this].concat(args)) || this;
|
|
1217
|
+
_this.state = {
|
|
1142
1218
|
wasPropertyKeyModified: false,
|
|
1143
1219
|
additionalProperties: {}
|
|
1144
1220
|
};
|
|
1145
|
-
|
|
1221
|
+
_this.onPropertyChange = function (name, addedByAdditionalProperties) {
|
|
1146
1222
|
if (addedByAdditionalProperties === void 0) {
|
|
1147
1223
|
addedByAdditionalProperties = false;
|
|
1148
1224
|
}
|
|
1149
|
-
return (value, newErrorSchema, id)
|
|
1150
|
-
|
|
1151
|
-
|
|
1152
|
-
|
|
1153
|
-
|
|
1154
|
-
|
|
1225
|
+
return function (value, newErrorSchema, id) {
|
|
1226
|
+
var _extends2, _extends3;
|
|
1227
|
+
var _this$props = _this.props,
|
|
1228
|
+
formData = _this$props.formData,
|
|
1229
|
+
onChange = _this$props.onChange,
|
|
1230
|
+
errorSchema = _this$props.errorSchema;
|
|
1155
1231
|
if (value === undefined && addedByAdditionalProperties) {
|
|
1156
1232
|
// Don't set value = undefined for fields added by
|
|
1157
1233
|
// additionalProperties. Doing so removes them from the
|
|
@@ -1162,117 +1238,95 @@ class ObjectField extends Component {
|
|
|
1162
1238
|
// set empty values to the empty string.
|
|
1163
1239
|
value = "";
|
|
1164
1240
|
}
|
|
1165
|
-
|
|
1166
|
-
|
|
1167
|
-
[name]: value
|
|
1168
|
-
};
|
|
1169
|
-
onChange(newFormData, errorSchema && errorSchema && {
|
|
1170
|
-
...errorSchema,
|
|
1171
|
-
[name]: newErrorSchema
|
|
1172
|
-
}, id);
|
|
1241
|
+
var newFormData = _extends({}, formData, (_extends2 = {}, _extends2[name] = value, _extends2));
|
|
1242
|
+
onChange(newFormData, errorSchema && errorSchema && _extends({}, errorSchema, (_extends3 = {}, _extends3[name] = newErrorSchema, _extends3)), id);
|
|
1173
1243
|
};
|
|
1174
1244
|
};
|
|
1175
|
-
|
|
1176
|
-
return event
|
|
1245
|
+
_this.onDropPropertyClick = function (key) {
|
|
1246
|
+
return function (event) {
|
|
1177
1247
|
event.preventDefault();
|
|
1178
|
-
|
|
1179
|
-
onChange,
|
|
1180
|
-
formData
|
|
1181
|
-
|
|
1182
|
-
const copiedFormData = {
|
|
1183
|
-
...formData
|
|
1184
|
-
};
|
|
1248
|
+
var _this$props2 = _this.props,
|
|
1249
|
+
onChange = _this$props2.onChange,
|
|
1250
|
+
formData = _this$props2.formData;
|
|
1251
|
+
var copiedFormData = _extends({}, formData);
|
|
1185
1252
|
unset(copiedFormData, key);
|
|
1186
1253
|
onChange(copiedFormData);
|
|
1187
1254
|
};
|
|
1188
1255
|
};
|
|
1189
|
-
|
|
1190
|
-
|
|
1191
|
-
|
|
1192
|
-
|
|
1193
|
-
|
|
1194
|
-
|
|
1195
|
-
|
|
1196
|
-
let index = 0;
|
|
1197
|
-
let newKey = preferredKey;
|
|
1256
|
+
_this.getAvailableKey = function (preferredKey, formData) {
|
|
1257
|
+
var uiSchema = _this.props.uiSchema;
|
|
1258
|
+
var _getUiOptions = getUiOptions(uiSchema),
|
|
1259
|
+
_getUiOptions$duplica = _getUiOptions.duplicateKeySuffixSeparator,
|
|
1260
|
+
duplicateKeySuffixSeparator = _getUiOptions$duplica === void 0 ? "-" : _getUiOptions$duplica;
|
|
1261
|
+
var index = 0;
|
|
1262
|
+
var newKey = preferredKey;
|
|
1198
1263
|
while (newKey in formData) {
|
|
1199
|
-
newKey =
|
|
1264
|
+
newKey = "" + preferredKey + duplicateKeySuffixSeparator + ++index;
|
|
1200
1265
|
}
|
|
1201
1266
|
return newKey;
|
|
1202
1267
|
};
|
|
1203
|
-
|
|
1204
|
-
return (value, newErrorSchema)
|
|
1268
|
+
_this.onKeyChange = function (oldValue) {
|
|
1269
|
+
return function (value, newErrorSchema) {
|
|
1270
|
+
var _newKeys, _extends4;
|
|
1205
1271
|
if (oldValue === value) {
|
|
1206
1272
|
return;
|
|
1207
1273
|
}
|
|
1208
|
-
|
|
1209
|
-
formData,
|
|
1210
|
-
onChange,
|
|
1211
|
-
errorSchema
|
|
1212
|
-
|
|
1213
|
-
|
|
1214
|
-
|
|
1215
|
-
|
|
1216
|
-
|
|
1217
|
-
|
|
1218
|
-
[
|
|
1219
|
-
};
|
|
1220
|
-
const keyValues = Object.keys(newFormData).map(key => {
|
|
1221
|
-
const newKey = newKeys[key] || key;
|
|
1222
|
-
return {
|
|
1223
|
-
[newKey]: newFormData[key]
|
|
1224
|
-
};
|
|
1274
|
+
var _this$props3 = _this.props,
|
|
1275
|
+
formData = _this$props3.formData,
|
|
1276
|
+
onChange = _this$props3.onChange,
|
|
1277
|
+
errorSchema = _this$props3.errorSchema;
|
|
1278
|
+
value = _this.getAvailableKey(value, formData);
|
|
1279
|
+
var newFormData = _extends({}, formData);
|
|
1280
|
+
var newKeys = (_newKeys = {}, _newKeys[oldValue] = value, _newKeys);
|
|
1281
|
+
var keyValues = Object.keys(newFormData).map(function (key) {
|
|
1282
|
+
var _ref;
|
|
1283
|
+
var newKey = newKeys[key] || key;
|
|
1284
|
+
return _ref = {}, _ref[newKey] = newFormData[key], _ref;
|
|
1225
1285
|
});
|
|
1226
|
-
|
|
1227
|
-
|
|
1286
|
+
var renamedObj = Object.assign.apply(Object, [{}].concat(keyValues));
|
|
1287
|
+
_this.setState({
|
|
1228
1288
|
wasPropertyKeyModified: true
|
|
1229
1289
|
});
|
|
1230
|
-
onChange(renamedObj, errorSchema && errorSchema && {
|
|
1231
|
-
...errorSchema,
|
|
1232
|
-
[value]: newErrorSchema
|
|
1233
|
-
});
|
|
1290
|
+
onChange(renamedObj, errorSchema && errorSchema && _extends({}, errorSchema, (_extends4 = {}, _extends4[value] = newErrorSchema, _extends4)));
|
|
1234
1291
|
};
|
|
1235
1292
|
};
|
|
1236
|
-
|
|
1237
|
-
|
|
1238
|
-
|
|
1239
|
-
|
|
1240
|
-
const {
|
|
1241
|
-
formData,
|
|
1242
|
-
onChange,
|
|
1243
|
-
registry
|
|
1244
|
-
} = this.props;
|
|
1245
|
-
const newFormData = {
|
|
1246
|
-
...formData
|
|
1247
|
-
};
|
|
1248
|
-
let type = undefined;
|
|
1249
|
-
if (isObject(schema.additionalProperties)) {
|
|
1250
|
-
type = schema.additionalProperties.type;
|
|
1251
|
-
if (REF_KEY in schema.additionalProperties) {
|
|
1252
|
-
const {
|
|
1253
|
-
schemaUtils
|
|
1254
|
-
} = registry;
|
|
1255
|
-
const refSchema = schemaUtils.retrieveSchema({
|
|
1256
|
-
$ref: schema.additionalProperties[REF_KEY]
|
|
1257
|
-
}, formData);
|
|
1258
|
-
type = refSchema.type;
|
|
1293
|
+
_this.handleAddClick = function (schema) {
|
|
1294
|
+
return function () {
|
|
1295
|
+
if (!schema.additionalProperties) {
|
|
1296
|
+
return;
|
|
1259
1297
|
}
|
|
1260
|
-
|
|
1261
|
-
|
|
1262
|
-
|
|
1263
|
-
|
|
1264
|
-
|
|
1298
|
+
var _this$props4 = _this.props,
|
|
1299
|
+
formData = _this$props4.formData,
|
|
1300
|
+
onChange = _this$props4.onChange,
|
|
1301
|
+
registry = _this$props4.registry;
|
|
1302
|
+
var newFormData = _extends({}, formData);
|
|
1303
|
+
var type = undefined;
|
|
1304
|
+
if (isObject(schema.additionalProperties)) {
|
|
1305
|
+
type = schema.additionalProperties.type;
|
|
1306
|
+
if (REF_KEY in schema.additionalProperties) {
|
|
1307
|
+
var schemaUtils = registry.schemaUtils;
|
|
1308
|
+
var refSchema = schemaUtils.retrieveSchema({
|
|
1309
|
+
$ref: schema.additionalProperties[REF_KEY]
|
|
1310
|
+
}, formData);
|
|
1311
|
+
type = refSchema.type;
|
|
1312
|
+
}
|
|
1313
|
+
}
|
|
1314
|
+
var newKey = _this.getAvailableKey("newKey", newFormData);
|
|
1315
|
+
// Cast this to make the `set` work properly
|
|
1316
|
+
set(newFormData, newKey, _this.getDefaultValue(type));
|
|
1317
|
+
onChange(newFormData);
|
|
1318
|
+
};
|
|
1265
1319
|
};
|
|
1320
|
+
return _this;
|
|
1266
1321
|
}
|
|
1322
|
+
var _proto = ObjectField.prototype;
|
|
1267
1323
|
/** Returns a flag indicating whether the `name` field is required in the object schema
|
|
1268
1324
|
*
|
|
1269
1325
|
* @param name - The name of the field to check for required-ness
|
|
1270
1326
|
* @returns - True if the field `name` is required, false otherwise
|
|
1271
1327
|
*/
|
|
1272
|
-
isRequired(name) {
|
|
1273
|
-
|
|
1274
|
-
schema
|
|
1275
|
-
} = this.props;
|
|
1328
|
+
_proto.isRequired = function isRequired(name) {
|
|
1329
|
+
var schema = this.props.schema;
|
|
1276
1330
|
return Array.isArray(schema.required) && schema.required.indexOf(name) !== -1;
|
|
1277
1331
|
}
|
|
1278
1332
|
/** Returns the `onPropertyChange` handler for the `name` field. Handles the special case where a user is attempting
|
|
@@ -1282,13 +1336,12 @@ class ObjectField extends Component {
|
|
|
1282
1336
|
* @param name - The name of the property
|
|
1283
1337
|
* @param addedByAdditionalProperties - Flag indicating whether this property is an additional property
|
|
1284
1338
|
* @returns - The onPropertyChange callback for the `name` property
|
|
1285
|
-
|
|
1286
|
-
|
|
1339
|
+
*/;
|
|
1287
1340
|
/** Returns a default value to be used for a new additional schema property of the given `type`
|
|
1288
1341
|
*
|
|
1289
1342
|
* @param type - The type of the new additional schema property
|
|
1290
1343
|
*/
|
|
1291
|
-
getDefaultValue(type) {
|
|
1344
|
+
_proto.getDefaultValue = function getDefaultValue(type) {
|
|
1292
1345
|
switch (type) {
|
|
1293
1346
|
case "string":
|
|
1294
1347
|
return "New Value";
|
|
@@ -1311,46 +1364,44 @@ class ObjectField extends Component {
|
|
|
1311
1364
|
* default data for that field has been added to the formData.
|
|
1312
1365
|
*
|
|
1313
1366
|
* @param schema - The schema element to which the new property is being added
|
|
1314
|
-
|
|
1315
|
-
|
|
1367
|
+
*/;
|
|
1316
1368
|
/** Renders the `ObjectField` from the given props
|
|
1317
1369
|
*/
|
|
1318
|
-
render() {
|
|
1319
|
-
|
|
1320
|
-
|
|
1321
|
-
|
|
1322
|
-
|
|
1323
|
-
|
|
1324
|
-
|
|
1325
|
-
|
|
1326
|
-
|
|
1327
|
-
|
|
1328
|
-
|
|
1329
|
-
|
|
1330
|
-
|
|
1331
|
-
|
|
1332
|
-
|
|
1333
|
-
|
|
1334
|
-
|
|
1335
|
-
|
|
1336
|
-
|
|
1337
|
-
|
|
1338
|
-
|
|
1339
|
-
|
|
1340
|
-
|
|
1341
|
-
|
|
1342
|
-
|
|
1343
|
-
|
|
1344
|
-
|
|
1345
|
-
|
|
1346
|
-
|
|
1347
|
-
|
|
1348
|
-
|
|
1349
|
-
|
|
1350
|
-
|
|
1351
|
-
let orderedProperties;
|
|
1370
|
+
_proto.render = function render() {
|
|
1371
|
+
var _this2 = this;
|
|
1372
|
+
var _this$props5 = this.props,
|
|
1373
|
+
rawSchema = _this$props5.schema,
|
|
1374
|
+
_this$props5$uiSchema = _this$props5.uiSchema,
|
|
1375
|
+
uiSchema = _this$props5$uiSchema === void 0 ? {} : _this$props5$uiSchema,
|
|
1376
|
+
formData = _this$props5.formData,
|
|
1377
|
+
errorSchema = _this$props5.errorSchema,
|
|
1378
|
+
idSchema = _this$props5.idSchema,
|
|
1379
|
+
name = _this$props5.name,
|
|
1380
|
+
_this$props5$required = _this$props5.required,
|
|
1381
|
+
required = _this$props5$required === void 0 ? false : _this$props5$required,
|
|
1382
|
+
_this$props5$disabled = _this$props5.disabled,
|
|
1383
|
+
disabled = _this$props5$disabled === void 0 ? false : _this$props5$disabled,
|
|
1384
|
+
_this$props5$readonly = _this$props5.readonly,
|
|
1385
|
+
readonly = _this$props5$readonly === void 0 ? false : _this$props5$readonly,
|
|
1386
|
+
hideError = _this$props5.hideError,
|
|
1387
|
+
idPrefix = _this$props5.idPrefix,
|
|
1388
|
+
idSeparator = _this$props5.idSeparator,
|
|
1389
|
+
onBlur = _this$props5.onBlur,
|
|
1390
|
+
onFocus = _this$props5.onFocus,
|
|
1391
|
+
registry = _this$props5.registry;
|
|
1392
|
+
var fields = registry.fields,
|
|
1393
|
+
formContext = registry.formContext,
|
|
1394
|
+
schemaUtils = registry.schemaUtils;
|
|
1395
|
+
var SchemaField = fields.SchemaField;
|
|
1396
|
+
var schema = schemaUtils.retrieveSchema(rawSchema, formData);
|
|
1397
|
+
var uiOptions = getUiOptions(uiSchema);
|
|
1398
|
+
var _schema$properties = schema.properties,
|
|
1399
|
+
schemaProperties = _schema$properties === void 0 ? {} : _schema$properties;
|
|
1400
|
+
var title = schema.title === undefined ? name : schema.title;
|
|
1401
|
+
var description = uiOptions.description || schema.description;
|
|
1402
|
+
var orderedProperties;
|
|
1352
1403
|
try {
|
|
1353
|
-
|
|
1404
|
+
var properties = Object.keys(schemaProperties);
|
|
1354
1405
|
orderedProperties = orderProperties(properties, uiOptions.order);
|
|
1355
1406
|
} catch (err) {
|
|
1356
1407
|
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
|
|
@@ -1360,20 +1411,20 @@ class ObjectField extends Component {
|
|
|
1360
1411
|
}
|
|
1361
1412
|
}, "Invalid ", name || "root", " object field configuration:", /*#__PURE__*/React.createElement("em", null, err.message), "."), /*#__PURE__*/React.createElement("pre", null, JSON.stringify(schema)));
|
|
1362
1413
|
}
|
|
1363
|
-
|
|
1364
|
-
|
|
1414
|
+
var Template = getTemplate("ObjectFieldTemplate", registry, uiOptions);
|
|
1415
|
+
var templateProps = {
|
|
1365
1416
|
title: uiOptions.title || title,
|
|
1366
|
-
description,
|
|
1367
|
-
properties: orderedProperties.map(name
|
|
1368
|
-
|
|
1369
|
-
|
|
1370
|
-
|
|
1371
|
-
|
|
1417
|
+
description: description,
|
|
1418
|
+
properties: orderedProperties.map(function (name) {
|
|
1419
|
+
var addedByAdditionalProperties = has(schema, [PROPERTIES_KEY, name, ADDITIONAL_PROPERTY_FLAG]);
|
|
1420
|
+
var fieldUiSchema = addedByAdditionalProperties ? uiSchema.additionalProperties : uiSchema[name];
|
|
1421
|
+
var hidden = getUiOptions(fieldUiSchema).widget === "hidden";
|
|
1422
|
+
var fieldIdSchema = get(idSchema, [name], {});
|
|
1372
1423
|
return {
|
|
1373
1424
|
content: /*#__PURE__*/React.createElement(SchemaField, {
|
|
1374
1425
|
key: name,
|
|
1375
1426
|
name: name,
|
|
1376
|
-
required:
|
|
1427
|
+
required: _this2.isRequired(name),
|
|
1377
1428
|
schema: get(schema, [PROPERTIES_KEY, name], {}),
|
|
1378
1429
|
uiSchema: fieldUiSchema,
|
|
1379
1430
|
errorSchema: get(errorSchema, name),
|
|
@@ -1382,50 +1433,51 @@ class ObjectField extends Component {
|
|
|
1382
1433
|
idSeparator: idSeparator,
|
|
1383
1434
|
formData: get(formData, name),
|
|
1384
1435
|
formContext: formContext,
|
|
1385
|
-
wasPropertyKeyModified:
|
|
1386
|
-
onKeyChange:
|
|
1387
|
-
onChange:
|
|
1436
|
+
wasPropertyKeyModified: _this2.state.wasPropertyKeyModified,
|
|
1437
|
+
onKeyChange: _this2.onKeyChange(name),
|
|
1438
|
+
onChange: _this2.onPropertyChange(name, addedByAdditionalProperties),
|
|
1388
1439
|
onBlur: onBlur,
|
|
1389
1440
|
onFocus: onFocus,
|
|
1390
1441
|
registry: registry,
|
|
1391
1442
|
disabled: disabled,
|
|
1392
1443
|
readonly: readonly,
|
|
1393
1444
|
hideError: hideError,
|
|
1394
|
-
onDropPropertyClick:
|
|
1445
|
+
onDropPropertyClick: _this2.onDropPropertyClick
|
|
1395
1446
|
}),
|
|
1396
|
-
name,
|
|
1397
|
-
readonly,
|
|
1398
|
-
disabled,
|
|
1399
|
-
required,
|
|
1400
|
-
hidden
|
|
1447
|
+
name: name,
|
|
1448
|
+
readonly: readonly,
|
|
1449
|
+
disabled: disabled,
|
|
1450
|
+
required: required,
|
|
1451
|
+
hidden: hidden
|
|
1401
1452
|
};
|
|
1402
1453
|
}),
|
|
1403
|
-
readonly,
|
|
1404
|
-
disabled,
|
|
1405
|
-
required,
|
|
1406
|
-
idSchema,
|
|
1407
|
-
uiSchema,
|
|
1408
|
-
schema,
|
|
1409
|
-
formData,
|
|
1410
|
-
formContext,
|
|
1411
|
-
registry
|
|
1454
|
+
readonly: readonly,
|
|
1455
|
+
disabled: disabled,
|
|
1456
|
+
required: required,
|
|
1457
|
+
idSchema: idSchema,
|
|
1458
|
+
uiSchema: uiSchema,
|
|
1459
|
+
schema: schema,
|
|
1460
|
+
formData: formData,
|
|
1461
|
+
formContext: formContext,
|
|
1462
|
+
registry: registry
|
|
1412
1463
|
};
|
|
1413
|
-
return /*#__PURE__*/React.createElement(Template, {
|
|
1414
|
-
...templateProps,
|
|
1464
|
+
return /*#__PURE__*/React.createElement(Template, _extends({}, templateProps, {
|
|
1415
1465
|
onAddClick: this.handleAddClick
|
|
1416
|
-
});
|
|
1417
|
-
}
|
|
1418
|
-
|
|
1466
|
+
}));
|
|
1467
|
+
};
|
|
1468
|
+
return ObjectField;
|
|
1469
|
+
}(Component);
|
|
1419
1470
|
|
|
1471
|
+
var _excluded$6 = ["__errors"];
|
|
1420
1472
|
/** The map of component type to FieldName */
|
|
1421
|
-
|
|
1473
|
+
var COMPONENT_TYPES = {
|
|
1422
1474
|
array: "ArrayField",
|
|
1423
|
-
boolean: "BooleanField",
|
|
1475
|
+
"boolean": "BooleanField",
|
|
1424
1476
|
integer: "NumberField",
|
|
1425
1477
|
number: "NumberField",
|
|
1426
1478
|
object: "ObjectField",
|
|
1427
1479
|
string: "StringField",
|
|
1428
|
-
null: "NullField"
|
|
1480
|
+
"null": "NullField"
|
|
1429
1481
|
};
|
|
1430
1482
|
/** Computes and returns which `Field` implementation to return in order to render the field represented by the
|
|
1431
1483
|
* `schema`. The `uiOptions` are used to alter what potential `Field` implementation is actually returned. If no
|
|
@@ -1438,30 +1490,30 @@ const COMPONENT_TYPES = {
|
|
|
1438
1490
|
* @returns - The `Field` component that is used to render the actual field data
|
|
1439
1491
|
*/
|
|
1440
1492
|
function getFieldComponent(schema, uiOptions, idSchema, registry) {
|
|
1441
|
-
|
|
1442
|
-
|
|
1443
|
-
fields
|
|
1444
|
-
} = registry;
|
|
1493
|
+
var field = uiOptions.field;
|
|
1494
|
+
var fields = registry.fields;
|
|
1445
1495
|
if (typeof field === "function") {
|
|
1446
1496
|
return field;
|
|
1447
1497
|
}
|
|
1448
1498
|
if (typeof field === "string" && field in fields) {
|
|
1449
1499
|
return fields[field];
|
|
1450
1500
|
}
|
|
1451
|
-
|
|
1452
|
-
|
|
1453
|
-
|
|
1501
|
+
var schemaType = getSchemaType(schema);
|
|
1502
|
+
var type = Array.isArray(schemaType) ? schemaType[0] : schemaType || "";
|
|
1503
|
+
var componentName = COMPONENT_TYPES[type];
|
|
1454
1504
|
// If the type is not defined and the schema uses 'anyOf' or 'oneOf', don't
|
|
1455
1505
|
// render a field and let the MultiSchemaField component handle the form display
|
|
1456
1506
|
if (!componentName && (schema.anyOf || schema.oneOf)) {
|
|
1457
|
-
return ()
|
|
1507
|
+
return function () {
|
|
1508
|
+
return null;
|
|
1509
|
+
};
|
|
1458
1510
|
}
|
|
1459
|
-
return componentName in fields ? fields[componentName] : ()
|
|
1460
|
-
|
|
1511
|
+
return componentName in fields ? fields[componentName] : function () {
|
|
1512
|
+
var UnsupportedFieldTemplate = getTemplate("UnsupportedFieldTemplate", registry, uiOptions);
|
|
1461
1513
|
return /*#__PURE__*/React.createElement(UnsupportedFieldTemplate, {
|
|
1462
1514
|
schema: schema,
|
|
1463
1515
|
idSchema: idSchema,
|
|
1464
|
-
reason:
|
|
1516
|
+
reason: "Unknown field type " + schema.type,
|
|
1465
1517
|
registry: registry
|
|
1466
1518
|
});
|
|
1467
1519
|
};
|
|
@@ -1473,63 +1525,58 @@ function getFieldComponent(schema, uiOptions, idSchema, registry) {
|
|
|
1473
1525
|
* @param props - The `FieldProps` for this component
|
|
1474
1526
|
*/
|
|
1475
1527
|
function SchemaFieldRender(props) {
|
|
1476
|
-
|
|
1477
|
-
|
|
1478
|
-
|
|
1479
|
-
|
|
1480
|
-
|
|
1481
|
-
|
|
1482
|
-
|
|
1483
|
-
|
|
1484
|
-
|
|
1485
|
-
|
|
1486
|
-
|
|
1487
|
-
|
|
1488
|
-
|
|
1489
|
-
|
|
1490
|
-
wasPropertyKeyModified = false
|
|
1491
|
-
|
|
1492
|
-
|
|
1493
|
-
|
|
1494
|
-
|
|
1495
|
-
|
|
1496
|
-
|
|
1497
|
-
|
|
1498
|
-
|
|
1499
|
-
|
|
1500
|
-
|
|
1501
|
-
const schema = schemaUtils.retrieveSchema(_schema, formData);
|
|
1502
|
-
const fieldId = _idSchema[ID_KEY];
|
|
1503
|
-
const idSchema = mergeObjects(schemaUtils.toIdSchema(schema, fieldId, formData, idPrefix, idSeparator), _idSchema);
|
|
1528
|
+
var _schema = props.schema,
|
|
1529
|
+
_idSchema = props.idSchema,
|
|
1530
|
+
uiSchema = props.uiSchema,
|
|
1531
|
+
formData = props.formData,
|
|
1532
|
+
errorSchema = props.errorSchema,
|
|
1533
|
+
idPrefix = props.idPrefix,
|
|
1534
|
+
idSeparator = props.idSeparator,
|
|
1535
|
+
name = props.name,
|
|
1536
|
+
onChange = props.onChange,
|
|
1537
|
+
onKeyChange = props.onKeyChange,
|
|
1538
|
+
onDropPropertyClick = props.onDropPropertyClick,
|
|
1539
|
+
required = props.required,
|
|
1540
|
+
registry = props.registry,
|
|
1541
|
+
_props$wasPropertyKey = props.wasPropertyKeyModified,
|
|
1542
|
+
wasPropertyKeyModified = _props$wasPropertyKey === void 0 ? false : _props$wasPropertyKey;
|
|
1543
|
+
var formContext = registry.formContext,
|
|
1544
|
+
schemaUtils = registry.schemaUtils;
|
|
1545
|
+
var uiOptions = getUiOptions(uiSchema);
|
|
1546
|
+
var FieldTemplate = getTemplate("FieldTemplate", registry, uiOptions);
|
|
1547
|
+
var DescriptionFieldTemplate = getTemplate("DescriptionFieldTemplate", registry, uiOptions);
|
|
1548
|
+
var FieldHelpTemplate = getTemplate("FieldHelpTemplate", registry, uiOptions);
|
|
1549
|
+
var FieldErrorTemplate = getTemplate("FieldErrorTemplate", registry, uiOptions);
|
|
1550
|
+
var schema = schemaUtils.retrieveSchema(_schema, formData);
|
|
1551
|
+
var fieldId = _idSchema[ID_KEY];
|
|
1552
|
+
var idSchema = mergeObjects(schemaUtils.toIdSchema(schema, fieldId, formData, idPrefix, idSeparator), _idSchema);
|
|
1504
1553
|
/** Intermediary `onChange` handler for field components that will inject the `id` of the current field into the
|
|
1505
1554
|
* `onChange` chain if it is not already being provided from a deeper level in the hierarchy
|
|
1506
1555
|
*/
|
|
1507
|
-
|
|
1508
|
-
|
|
1556
|
+
var handleFieldComponentChange = React.useCallback(function (formData, newErrorSchema, id) {
|
|
1557
|
+
var theId = id || fieldId;
|
|
1509
1558
|
return onChange(formData, newErrorSchema, theId);
|
|
1510
1559
|
}, [fieldId, onChange]);
|
|
1511
|
-
|
|
1512
|
-
|
|
1513
|
-
|
|
1514
|
-
|
|
1560
|
+
var FieldComponent = getFieldComponent(schema, uiOptions, idSchema, registry);
|
|
1561
|
+
var disabled = Boolean(props.disabled || uiOptions.disabled);
|
|
1562
|
+
var readonly = Boolean(props.readonly || uiOptions.readonly || props.schema.readOnly || schema.readOnly);
|
|
1563
|
+
var uiSchemaHideError = uiOptions.hideError;
|
|
1515
1564
|
// Set hideError to the value provided in the uiSchema, otherwise stick with the prop to propagate to children
|
|
1516
|
-
|
|
1517
|
-
|
|
1565
|
+
var hideError = uiSchemaHideError === undefined ? props.hideError : Boolean(uiSchemaHideError);
|
|
1566
|
+
var autofocus = Boolean(props.autofocus || uiOptions.autofocus);
|
|
1518
1567
|
if (Object.keys(schema).length === 0) {
|
|
1519
1568
|
return null;
|
|
1520
1569
|
}
|
|
1521
|
-
|
|
1522
|
-
|
|
1523
|
-
__errors,
|
|
1524
|
-
|
|
1525
|
-
} = errorSchema || {};
|
|
1570
|
+
var displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema);
|
|
1571
|
+
var _ref = errorSchema || {},
|
|
1572
|
+
__errors = _ref.__errors,
|
|
1573
|
+
fieldErrorSchema = _objectWithoutPropertiesLoose(_ref, _excluded$6);
|
|
1526
1574
|
// See #439: uiSchema: Don't pass consumed class names to child components
|
|
1527
|
-
|
|
1575
|
+
var fieldUiSchema = omit(uiSchema, ["ui:classNames", "classNames"]);
|
|
1528
1576
|
if ("ui:options" in fieldUiSchema) {
|
|
1529
1577
|
fieldUiSchema["ui:options"] = omit(fieldUiSchema["ui:options"], ["classNames"]);
|
|
1530
1578
|
}
|
|
1531
|
-
|
|
1532
|
-
...props,
|
|
1579
|
+
var field = /*#__PURE__*/React.createElement(FieldComponent, _extends({}, props, {
|
|
1533
1580
|
onChange: handleFieldComponentChange,
|
|
1534
1581
|
idSchema: idSchema,
|
|
1535
1582
|
schema: schema,
|
|
@@ -1541,19 +1588,19 @@ function SchemaFieldRender(props) {
|
|
|
1541
1588
|
errorSchema: fieldErrorSchema,
|
|
1542
1589
|
formContext: formContext,
|
|
1543
1590
|
rawErrors: __errors
|
|
1544
|
-
});
|
|
1545
|
-
|
|
1591
|
+
}));
|
|
1592
|
+
var id = idSchema[ID_KEY];
|
|
1546
1593
|
// If this schema has a title defined, but the user has set a new key/label, retain their input.
|
|
1547
|
-
|
|
1594
|
+
var label;
|
|
1548
1595
|
if (wasPropertyKeyModified) {
|
|
1549
1596
|
label = name;
|
|
1550
1597
|
} else {
|
|
1551
1598
|
label = ADDITIONAL_PROPERTY_FLAG in schema ? name : uiOptions.title || props.schema.title || schema.title || name;
|
|
1552
1599
|
}
|
|
1553
|
-
|
|
1554
|
-
|
|
1555
|
-
|
|
1556
|
-
|
|
1600
|
+
var description = uiOptions.description || props.schema.description || schema.description || "";
|
|
1601
|
+
var help = uiOptions.help;
|
|
1602
|
+
var hidden = uiOptions.widget === "hidden";
|
|
1603
|
+
var classNames = ["form-group", "field", "field-" + schema.type];
|
|
1557
1604
|
if (!hideError && __errors && __errors.length > 0) {
|
|
1558
1605
|
classNames.push("field-error has-error has-danger");
|
|
1559
1606
|
}
|
|
@@ -1566,7 +1613,7 @@ function SchemaFieldRender(props) {
|
|
|
1566
1613
|
if (uiOptions.classNames) {
|
|
1567
1614
|
classNames.push(uiOptions.classNames);
|
|
1568
1615
|
}
|
|
1569
|
-
|
|
1616
|
+
var helpComponent = /*#__PURE__*/React.createElement(FieldHelpTemplate, {
|
|
1570
1617
|
help: help,
|
|
1571
1618
|
idSchema: idSchema,
|
|
1572
1619
|
schema: schema,
|
|
@@ -1574,7 +1621,7 @@ function SchemaFieldRender(props) {
|
|
|
1574
1621
|
hasErrors: !hideError && __errors && __errors.length > 0,
|
|
1575
1622
|
registry: registry
|
|
1576
1623
|
});
|
|
1577
|
-
|
|
1624
|
+
var errorsComponent = hideError ? undefined : /*#__PURE__*/React.createElement(FieldErrorTemplate, {
|
|
1578
1625
|
errors: __errors,
|
|
1579
1626
|
errorSchema: errorSchema,
|
|
1580
1627
|
idSchema: idSchema,
|
|
@@ -1582,9 +1629,9 @@ function SchemaFieldRender(props) {
|
|
|
1582
1629
|
uiSchema: uiSchema,
|
|
1583
1630
|
registry: registry
|
|
1584
1631
|
});
|
|
1585
|
-
|
|
1632
|
+
var fieldProps = {
|
|
1586
1633
|
description: /*#__PURE__*/React.createElement(DescriptionFieldTemplate, {
|
|
1587
|
-
id:
|
|
1634
|
+
id: id + "__description",
|
|
1588
1635
|
description: description,
|
|
1589
1636
|
schema: schema,
|
|
1590
1637
|
uiSchema: uiSchema,
|
|
@@ -1595,29 +1642,27 @@ function SchemaFieldRender(props) {
|
|
|
1595
1642
|
rawHelp: typeof help === "string" ? help : undefined,
|
|
1596
1643
|
errors: errorsComponent,
|
|
1597
1644
|
rawErrors: hideError ? undefined : __errors,
|
|
1598
|
-
id,
|
|
1599
|
-
label,
|
|
1600
|
-
hidden,
|
|
1601
|
-
onChange,
|
|
1602
|
-
onKeyChange,
|
|
1603
|
-
onDropPropertyClick,
|
|
1604
|
-
required,
|
|
1605
|
-
disabled,
|
|
1606
|
-
readonly,
|
|
1607
|
-
hideError,
|
|
1608
|
-
displayLabel,
|
|
1645
|
+
id: id,
|
|
1646
|
+
label: label,
|
|
1647
|
+
hidden: hidden,
|
|
1648
|
+
onChange: onChange,
|
|
1649
|
+
onKeyChange: onKeyChange,
|
|
1650
|
+
onDropPropertyClick: onDropPropertyClick,
|
|
1651
|
+
required: required,
|
|
1652
|
+
disabled: disabled,
|
|
1653
|
+
readonly: readonly,
|
|
1654
|
+
hideError: hideError,
|
|
1655
|
+
displayLabel: displayLabel,
|
|
1609
1656
|
classNames: classNames.join(" ").trim(),
|
|
1610
|
-
formContext,
|
|
1611
|
-
formData,
|
|
1612
|
-
schema,
|
|
1613
|
-
uiSchema,
|
|
1614
|
-
registry
|
|
1657
|
+
formContext: formContext,
|
|
1658
|
+
formData: formData,
|
|
1659
|
+
schema: schema,
|
|
1660
|
+
uiSchema: uiSchema,
|
|
1661
|
+
registry: registry
|
|
1615
1662
|
};
|
|
1616
|
-
|
|
1617
|
-
|
|
1618
|
-
return /*#__PURE__*/React.createElement(FieldTemplate, {
|
|
1619
|
-
...fieldProps
|
|
1620
|
-
}, /*#__PURE__*/React.createElement(React.Fragment, null, field, schema.anyOf && !(uiSchema !== null && uiSchema !== void 0 && uiSchema["ui:field"]) && !schemaUtils.isSelect(schema) && /*#__PURE__*/React.createElement(_AnyOfField, {
|
|
1663
|
+
var _AnyOfField = registry.fields.AnyOfField;
|
|
1664
|
+
var _OneOfField = registry.fields.OneOfField;
|
|
1665
|
+
return /*#__PURE__*/React.createElement(FieldTemplate, _extends({}, fieldProps), /*#__PURE__*/React.createElement(React.Fragment, null, field, schema.anyOf && !(uiSchema !== null && uiSchema !== void 0 && uiSchema["ui:field"]) && !schemaUtils.isSelect(schema) && /*#__PURE__*/React.createElement(_AnyOfField, {
|
|
1621
1666
|
name: name,
|
|
1622
1667
|
disabled: disabled,
|
|
1623
1668
|
readonly: readonly,
|
|
@@ -1631,7 +1676,9 @@ function SchemaFieldRender(props) {
|
|
|
1631
1676
|
onBlur: props.onBlur,
|
|
1632
1677
|
onChange: props.onChange,
|
|
1633
1678
|
onFocus: props.onFocus,
|
|
1634
|
-
options: schema.anyOf.map(
|
|
1679
|
+
options: schema.anyOf.map(function (_schema) {
|
|
1680
|
+
return schemaUtils.retrieveSchema(isObject(_schema) ? _schema : {}, formData);
|
|
1681
|
+
}),
|
|
1635
1682
|
baseType: schema.type,
|
|
1636
1683
|
registry: registry,
|
|
1637
1684
|
schema: schema,
|
|
@@ -1650,7 +1697,9 @@ function SchemaFieldRender(props) {
|
|
|
1650
1697
|
onBlur: props.onBlur,
|
|
1651
1698
|
onChange: props.onChange,
|
|
1652
1699
|
onFocus: props.onFocus,
|
|
1653
|
-
options: schema.oneOf.map(
|
|
1700
|
+
options: schema.oneOf.map(function (_schema) {
|
|
1701
|
+
return schemaUtils.retrieveSchema(isObject(_schema) ? _schema : {}, formData);
|
|
1702
|
+
}),
|
|
1654
1703
|
baseType: schema.type,
|
|
1655
1704
|
registry: registry,
|
|
1656
1705
|
schema: schema,
|
|
@@ -1660,63 +1709,65 @@ function SchemaFieldRender(props) {
|
|
|
1660
1709
|
/** The `SchemaField` component determines whether it is necessary to rerender the component based on any props changes
|
|
1661
1710
|
* and if so, calls the `SchemaFieldRender` component with the props.
|
|
1662
1711
|
*/
|
|
1663
|
-
|
|
1664
|
-
|
|
1665
|
-
|
|
1666
|
-
|
|
1667
|
-
render() {
|
|
1668
|
-
return /*#__PURE__*/React.createElement(SchemaFieldRender, {
|
|
1669
|
-
...this.props
|
|
1670
|
-
});
|
|
1712
|
+
var SchemaField = /*#__PURE__*/function (_React$Component) {
|
|
1713
|
+
_inheritsLoose(SchemaField, _React$Component);
|
|
1714
|
+
function SchemaField() {
|
|
1715
|
+
return _React$Component.apply(this, arguments) || this;
|
|
1671
1716
|
}
|
|
1672
|
-
|
|
1717
|
+
var _proto = SchemaField.prototype;
|
|
1718
|
+
_proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
|
|
1719
|
+
return !deepEquals(this.props, nextProps);
|
|
1720
|
+
};
|
|
1721
|
+
_proto.render = function render() {
|
|
1722
|
+
return /*#__PURE__*/React.createElement(SchemaFieldRender, _extends({}, this.props));
|
|
1723
|
+
};
|
|
1724
|
+
return SchemaField;
|
|
1725
|
+
}(React.Component);
|
|
1673
1726
|
|
|
1727
|
+
var _excluded$5 = ["widget", "placeholder"];
|
|
1674
1728
|
/** The `StringField` component is used to render a schema field that represents a string type
|
|
1675
1729
|
*
|
|
1676
1730
|
* @param props - The `FieldProps` for this template
|
|
1677
1731
|
*/
|
|
1678
1732
|
function StringField(props) {
|
|
1679
|
-
|
|
1680
|
-
|
|
1681
|
-
|
|
1682
|
-
|
|
1683
|
-
|
|
1684
|
-
|
|
1685
|
-
|
|
1686
|
-
disabled = false,
|
|
1687
|
-
readonly =
|
|
1688
|
-
|
|
1689
|
-
|
|
1690
|
-
|
|
1691
|
-
|
|
1692
|
-
|
|
1693
|
-
|
|
1694
|
-
|
|
1695
|
-
|
|
1696
|
-
|
|
1697
|
-
format
|
|
1698
|
-
|
|
1699
|
-
|
|
1700
|
-
|
|
1701
|
-
|
|
1702
|
-
|
|
1703
|
-
} = registry;
|
|
1704
|
-
const enumOptions = schemaUtils.isSelect(schema) ? optionsList(schema) : undefined;
|
|
1705
|
-
let defaultWidget = enumOptions ? "select" : "text";
|
|
1733
|
+
var schema = props.schema,
|
|
1734
|
+
name = props.name,
|
|
1735
|
+
uiSchema = props.uiSchema,
|
|
1736
|
+
idSchema = props.idSchema,
|
|
1737
|
+
formData = props.formData,
|
|
1738
|
+
required = props.required,
|
|
1739
|
+
_props$disabled = props.disabled,
|
|
1740
|
+
disabled = _props$disabled === void 0 ? false : _props$disabled,
|
|
1741
|
+
_props$readonly = props.readonly,
|
|
1742
|
+
readonly = _props$readonly === void 0 ? false : _props$readonly,
|
|
1743
|
+
_props$autofocus = props.autofocus,
|
|
1744
|
+
autofocus = _props$autofocus === void 0 ? false : _props$autofocus,
|
|
1745
|
+
onChange = props.onChange,
|
|
1746
|
+
onBlur = props.onBlur,
|
|
1747
|
+
onFocus = props.onFocus,
|
|
1748
|
+
registry = props.registry,
|
|
1749
|
+
rawErrors = props.rawErrors;
|
|
1750
|
+
var title = schema.title,
|
|
1751
|
+
format = schema.format;
|
|
1752
|
+
var widgets = registry.widgets,
|
|
1753
|
+
formContext = registry.formContext,
|
|
1754
|
+
schemaUtils = registry.schemaUtils;
|
|
1755
|
+
var enumOptions = schemaUtils.isSelect(schema) ? optionsList(schema) : undefined;
|
|
1756
|
+
var defaultWidget = enumOptions ? "select" : "text";
|
|
1706
1757
|
if (format && hasWidget(schema, format, widgets)) {
|
|
1707
1758
|
defaultWidget = format;
|
|
1708
1759
|
}
|
|
1709
|
-
|
|
1710
|
-
widget =
|
|
1711
|
-
|
|
1712
|
-
|
|
1713
|
-
|
|
1714
|
-
|
|
1760
|
+
var _getUiOptions = getUiOptions(uiSchema),
|
|
1761
|
+
_getUiOptions$widget = _getUiOptions.widget,
|
|
1762
|
+
widget = _getUiOptions$widget === void 0 ? defaultWidget : _getUiOptions$widget,
|
|
1763
|
+
_getUiOptions$placeho = _getUiOptions.placeholder,
|
|
1764
|
+
placeholder = _getUiOptions$placeho === void 0 ? "" : _getUiOptions$placeho,
|
|
1765
|
+
options = _objectWithoutPropertiesLoose(_getUiOptions, _excluded$5);
|
|
1766
|
+
var Widget = getWidget(schema, widget, widgets);
|
|
1715
1767
|
return /*#__PURE__*/React.createElement(Widget, {
|
|
1716
|
-
options: {
|
|
1717
|
-
|
|
1718
|
-
|
|
1719
|
-
},
|
|
1768
|
+
options: _extends({}, options, {
|
|
1769
|
+
enumOptions: enumOptions
|
|
1770
|
+
}),
|
|
1720
1771
|
schema: schema,
|
|
1721
1772
|
uiSchema: uiSchema,
|
|
1722
1773
|
id: idSchema && idSchema.$id,
|
|
@@ -1742,11 +1793,9 @@ function StringField(props) {
|
|
|
1742
1793
|
* @param props - The `FieldProps` for this template
|
|
1743
1794
|
*/
|
|
1744
1795
|
function NullField(props) {
|
|
1745
|
-
|
|
1746
|
-
|
|
1747
|
-
|
|
1748
|
-
} = props;
|
|
1749
|
-
useEffect(() => {
|
|
1796
|
+
var formData = props.formData,
|
|
1797
|
+
onChange = props.onChange;
|
|
1798
|
+
useEffect(function () {
|
|
1750
1799
|
if (formData === undefined) {
|
|
1751
1800
|
onChange(null);
|
|
1752
1801
|
}
|
|
@@ -1759,13 +1808,13 @@ function fields() {
|
|
|
1759
1808
|
AnyOfField: AnyOfField,
|
|
1760
1809
|
ArrayField: ArrayField,
|
|
1761
1810
|
// ArrayField falls back to SchemaField if ArraySchemaField is not defined, which it isn't by default
|
|
1762
|
-
BooleanField,
|
|
1763
|
-
NumberField,
|
|
1764
|
-
ObjectField,
|
|
1811
|
+
BooleanField: BooleanField,
|
|
1812
|
+
NumberField: NumberField,
|
|
1813
|
+
ObjectField: ObjectField,
|
|
1765
1814
|
OneOfField: AnyOfField,
|
|
1766
|
-
SchemaField,
|
|
1767
|
-
StringField,
|
|
1768
|
-
NullField
|
|
1815
|
+
SchemaField: SchemaField,
|
|
1816
|
+
StringField: StringField,
|
|
1817
|
+
NullField: NullField
|
|
1769
1818
|
};
|
|
1770
1819
|
}
|
|
1771
1820
|
|
|
@@ -1775,22 +1824,19 @@ function fields() {
|
|
|
1775
1824
|
* @param props - The `ArrayFieldDescriptionProps` for the component
|
|
1776
1825
|
*/
|
|
1777
1826
|
function ArrayFieldDescriptionTemplate(props) {
|
|
1778
|
-
|
|
1779
|
-
|
|
1780
|
-
|
|
1781
|
-
|
|
1782
|
-
|
|
1783
|
-
|
|
1784
|
-
|
|
1785
|
-
|
|
1786
|
-
const {
|
|
1787
|
-
label: displayLabel = true
|
|
1788
|
-
} = options;
|
|
1827
|
+
var idSchema = props.idSchema,
|
|
1828
|
+
description = props.description,
|
|
1829
|
+
registry = props.registry,
|
|
1830
|
+
schema = props.schema,
|
|
1831
|
+
uiSchema = props.uiSchema;
|
|
1832
|
+
var options = getUiOptions(uiSchema);
|
|
1833
|
+
var _options$label = options.label,
|
|
1834
|
+
displayLabel = _options$label === void 0 ? true : _options$label;
|
|
1789
1835
|
if (!description || !displayLabel) {
|
|
1790
1836
|
return null;
|
|
1791
1837
|
}
|
|
1792
|
-
|
|
1793
|
-
|
|
1838
|
+
var DescriptionFieldTemplate = getTemplate("DescriptionFieldTemplate", registry, options);
|
|
1839
|
+
var id = idSchema.$id + "__description";
|
|
1794
1840
|
return /*#__PURE__*/React.createElement(DescriptionFieldTemplate, {
|
|
1795
1841
|
id: id,
|
|
1796
1842
|
description: description,
|
|
@@ -1805,27 +1851,24 @@ function ArrayFieldDescriptionTemplate(props) {
|
|
|
1805
1851
|
* @param props - The `ArrayFieldTemplateItemType` props for the component
|
|
1806
1852
|
*/
|
|
1807
1853
|
function ArrayFieldItemTemplate(props) {
|
|
1808
|
-
|
|
1809
|
-
|
|
1810
|
-
|
|
1811
|
-
|
|
1812
|
-
|
|
1813
|
-
|
|
1814
|
-
|
|
1815
|
-
|
|
1816
|
-
|
|
1817
|
-
|
|
1818
|
-
|
|
1819
|
-
|
|
1820
|
-
|
|
1821
|
-
|
|
1822
|
-
|
|
1823
|
-
|
|
1824
|
-
|
|
1825
|
-
|
|
1826
|
-
RemoveButton
|
|
1827
|
-
} = registry.templates.ButtonTemplates;
|
|
1828
|
-
const btnStyle = {
|
|
1854
|
+
var children = props.children,
|
|
1855
|
+
className = props.className,
|
|
1856
|
+
disabled = props.disabled,
|
|
1857
|
+
hasToolbar = props.hasToolbar,
|
|
1858
|
+
hasMoveDown = props.hasMoveDown,
|
|
1859
|
+
hasMoveUp = props.hasMoveUp,
|
|
1860
|
+
hasRemove = props.hasRemove,
|
|
1861
|
+
index = props.index,
|
|
1862
|
+
onDropIndexClick = props.onDropIndexClick,
|
|
1863
|
+
onReorderClick = props.onReorderClick,
|
|
1864
|
+
readonly = props.readonly,
|
|
1865
|
+
registry = props.registry,
|
|
1866
|
+
uiSchema = props.uiSchema;
|
|
1867
|
+
var _registry$templates$B = registry.templates.ButtonTemplates,
|
|
1868
|
+
MoveDownButton = _registry$templates$B.MoveDownButton,
|
|
1869
|
+
MoveUpButton = _registry$templates$B.MoveUpButton,
|
|
1870
|
+
RemoveButton = _registry$templates$B.RemoveButton;
|
|
1871
|
+
var btnStyle = {
|
|
1829
1872
|
flex: 1,
|
|
1830
1873
|
paddingLeft: 6,
|
|
1831
1874
|
paddingRight: 6,
|
|
@@ -1861,35 +1904,30 @@ function ArrayFieldItemTemplate(props) {
|
|
|
1861
1904
|
}))));
|
|
1862
1905
|
}
|
|
1863
1906
|
|
|
1907
|
+
var _excluded$4 = ["key"];
|
|
1864
1908
|
/** The `ArrayFieldTemplate` component is the template used to render all items in an array.
|
|
1865
1909
|
*
|
|
1866
1910
|
* @param props - The `ArrayFieldTemplateItemType` props for the component
|
|
1867
1911
|
*/
|
|
1868
1912
|
function ArrayFieldTemplate(props) {
|
|
1869
|
-
|
|
1870
|
-
|
|
1871
|
-
|
|
1872
|
-
|
|
1873
|
-
|
|
1874
|
-
|
|
1875
|
-
|
|
1876
|
-
|
|
1877
|
-
|
|
1878
|
-
|
|
1879
|
-
|
|
1880
|
-
|
|
1881
|
-
|
|
1882
|
-
|
|
1883
|
-
|
|
1884
|
-
|
|
1885
|
-
const ArrayFieldItemTemplate = getTemplate("ArrayFieldItemTemplate", registry, uiOptions);
|
|
1886
|
-
const ArrayFieldTitleTemplate = getTemplate("ArrayFieldTitleTemplate", registry, uiOptions);
|
|
1913
|
+
var canAdd = props.canAdd,
|
|
1914
|
+
className = props.className,
|
|
1915
|
+
disabled = props.disabled,
|
|
1916
|
+
idSchema = props.idSchema,
|
|
1917
|
+
uiSchema = props.uiSchema,
|
|
1918
|
+
items = props.items,
|
|
1919
|
+
onAddClick = props.onAddClick,
|
|
1920
|
+
readonly = props.readonly,
|
|
1921
|
+
registry = props.registry,
|
|
1922
|
+
required = props.required,
|
|
1923
|
+
schema = props.schema,
|
|
1924
|
+
title = props.title;
|
|
1925
|
+
var uiOptions = getUiOptions(uiSchema);
|
|
1926
|
+
var ArrayFieldDescriptionTemplate = getTemplate("ArrayFieldDescriptionTemplate", registry, uiOptions);
|
|
1927
|
+
var ArrayFieldItemTemplate = getTemplate("ArrayFieldItemTemplate", registry, uiOptions);
|
|
1928
|
+
var ArrayFieldTitleTemplate = getTemplate("ArrayFieldTitleTemplate", registry, uiOptions);
|
|
1887
1929
|
// Button templates are not overridden in the uiSchema
|
|
1888
|
-
|
|
1889
|
-
ButtonTemplates: {
|
|
1890
|
-
AddButton
|
|
1891
|
-
}
|
|
1892
|
-
} = registry.templates;
|
|
1930
|
+
var AddButton = registry.templates.ButtonTemplates.AddButton;
|
|
1893
1931
|
return /*#__PURE__*/React.createElement("fieldset", {
|
|
1894
1932
|
className: className,
|
|
1895
1933
|
id: idSchema.$id
|
|
@@ -1908,15 +1946,12 @@ function ArrayFieldTemplate(props) {
|
|
|
1908
1946
|
registry: registry
|
|
1909
1947
|
}), /*#__PURE__*/React.createElement("div", {
|
|
1910
1948
|
className: "row array-item-list"
|
|
1911
|
-
}, items && items.map(_ref
|
|
1912
|
-
|
|
1913
|
-
|
|
1914
|
-
|
|
1915
|
-
|
|
1916
|
-
|
|
1917
|
-
key: key,
|
|
1918
|
-
...itemProps
|
|
1919
|
-
});
|
|
1949
|
+
}, items && items.map(function (_ref) {
|
|
1950
|
+
var key = _ref.key,
|
|
1951
|
+
itemProps = _objectWithoutPropertiesLoose(_ref, _excluded$4);
|
|
1952
|
+
return /*#__PURE__*/React.createElement(ArrayFieldItemTemplate, _extends({
|
|
1953
|
+
key: key
|
|
1954
|
+
}, itemProps));
|
|
1920
1955
|
})), canAdd && /*#__PURE__*/React.createElement(AddButton, {
|
|
1921
1956
|
className: "array-item-add",
|
|
1922
1957
|
onClick: onAddClick,
|
|
@@ -1931,23 +1966,20 @@ function ArrayFieldTemplate(props) {
|
|
|
1931
1966
|
* @param props - The `ArrayFieldTitleProps` for the component
|
|
1932
1967
|
*/
|
|
1933
1968
|
function ArrayFieldTitleTemplate(props) {
|
|
1934
|
-
|
|
1935
|
-
|
|
1936
|
-
|
|
1937
|
-
|
|
1938
|
-
|
|
1939
|
-
|
|
1940
|
-
|
|
1941
|
-
|
|
1942
|
-
|
|
1943
|
-
const {
|
|
1944
|
-
label: displayLabel = true
|
|
1945
|
-
} = options;
|
|
1969
|
+
var idSchema = props.idSchema,
|
|
1970
|
+
title = props.title,
|
|
1971
|
+
schema = props.schema,
|
|
1972
|
+
uiSchema = props.uiSchema,
|
|
1973
|
+
required = props.required,
|
|
1974
|
+
registry = props.registry;
|
|
1975
|
+
var options = getUiOptions(uiSchema);
|
|
1976
|
+
var _options$label = options.label,
|
|
1977
|
+
displayLabel = _options$label === void 0 ? true : _options$label;
|
|
1946
1978
|
if (!title || !displayLabel) {
|
|
1947
1979
|
return null;
|
|
1948
1980
|
}
|
|
1949
|
-
|
|
1950
|
-
|
|
1981
|
+
var TitleFieldTemplate = getTemplate("TitleFieldTemplate", registry, options);
|
|
1982
|
+
var id = idSchema.$id + "__title";
|
|
1951
1983
|
return /*#__PURE__*/React.createElement(TitleFieldTemplate, {
|
|
1952
1984
|
id: id,
|
|
1953
1985
|
title: title,
|
|
@@ -1958,6 +1990,7 @@ function ArrayFieldTitleTemplate(props) {
|
|
|
1958
1990
|
});
|
|
1959
1991
|
}
|
|
1960
1992
|
|
|
1993
|
+
var _excluded$3 = ["id", "value", "readonly", "disabled", "autofocus", "onBlur", "onFocus", "onChange", "options", "schema", "uiSchema", "formContext", "registry", "rawErrors", "type"];
|
|
1961
1994
|
/** The `BaseInputTemplate` is the template to use to render the basic `<input>` component for the `core` theme.
|
|
1962
1995
|
* It is used as the template for rendering many of the <input> based widgets that differ by `type` and callbacks only.
|
|
1963
1996
|
* It can be customized/overridden for other themes or individual implementations as needed.
|
|
@@ -1965,161 +1998,136 @@ function ArrayFieldTitleTemplate(props) {
|
|
|
1965
1998
|
* @param props - The `WidgetProps` for this template
|
|
1966
1999
|
*/
|
|
1967
2000
|
function BaseInputTemplate(props) {
|
|
1968
|
-
|
|
1969
|
-
|
|
1970
|
-
|
|
1971
|
-
|
|
1972
|
-
|
|
1973
|
-
|
|
1974
|
-
|
|
1975
|
-
|
|
1976
|
-
|
|
1977
|
-
|
|
1978
|
-
|
|
1979
|
-
|
|
1980
|
-
formContext,
|
|
1981
|
-
registry,
|
|
1982
|
-
rawErrors,
|
|
1983
|
-
type,
|
|
1984
|
-
...rest
|
|
1985
|
-
} = props;
|
|
2001
|
+
var id = props.id,
|
|
2002
|
+
value = props.value,
|
|
2003
|
+
readonly = props.readonly,
|
|
2004
|
+
disabled = props.disabled,
|
|
2005
|
+
autofocus = props.autofocus,
|
|
2006
|
+
onBlur = props.onBlur,
|
|
2007
|
+
onFocus = props.onFocus,
|
|
2008
|
+
onChange = props.onChange,
|
|
2009
|
+
options = props.options,
|
|
2010
|
+
schema = props.schema,
|
|
2011
|
+
type = props.type,
|
|
2012
|
+
rest = _objectWithoutPropertiesLoose(props, _excluded$3);
|
|
1986
2013
|
// Note: since React 15.2.0 we can't forward unknown element attributes, so we
|
|
1987
2014
|
// exclude the "options" and "schema" ones here.
|
|
1988
2015
|
if (!id) {
|
|
1989
2016
|
console.log("No id for", props);
|
|
1990
|
-
throw new Error(
|
|
2017
|
+
throw new Error("no id for props " + JSON.stringify(props));
|
|
1991
2018
|
}
|
|
1992
|
-
|
|
1993
|
-
|
|
1994
|
-
...getInputProps(schema, type, options)
|
|
1995
|
-
};
|
|
1996
|
-
let inputValue;
|
|
2019
|
+
var inputProps = _extends({}, rest, getInputProps(schema, type, options));
|
|
2020
|
+
var inputValue;
|
|
1997
2021
|
if (inputProps.type === "number" || inputProps.type === "integer") {
|
|
1998
2022
|
inputValue = value || value === 0 ? value : "";
|
|
1999
2023
|
} else {
|
|
2000
2024
|
inputValue = value == null ? "" : value;
|
|
2001
2025
|
}
|
|
2002
|
-
|
|
2003
|
-
|
|
2004
|
-
target: {
|
|
2005
|
-
value
|
|
2006
|
-
}
|
|
2007
|
-
} = _ref;
|
|
2026
|
+
var _onChange = useCallback(function (_ref) {
|
|
2027
|
+
var value = _ref.target.value;
|
|
2008
2028
|
return onChange(value === "" ? options.emptyValue : value);
|
|
2009
2029
|
}, [onChange, options]);
|
|
2010
|
-
|
|
2011
|
-
|
|
2012
|
-
target: {
|
|
2013
|
-
value
|
|
2014
|
-
}
|
|
2015
|
-
} = _ref2;
|
|
2030
|
+
var _onBlur = useCallback(function (_ref2) {
|
|
2031
|
+
var value = _ref2.target.value;
|
|
2016
2032
|
return onBlur(id, value);
|
|
2017
2033
|
}, [onBlur, id]);
|
|
2018
|
-
|
|
2019
|
-
|
|
2020
|
-
target: {
|
|
2021
|
-
value
|
|
2022
|
-
}
|
|
2023
|
-
} = _ref3;
|
|
2034
|
+
var _onFocus = useCallback(function (_ref3) {
|
|
2035
|
+
var value = _ref3.target.value;
|
|
2024
2036
|
return onFocus(id, value);
|
|
2025
2037
|
}, [onFocus, id]);
|
|
2026
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", {
|
|
2038
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", _extends({
|
|
2027
2039
|
id: id,
|
|
2028
2040
|
name: id,
|
|
2029
2041
|
className: "form-control",
|
|
2030
2042
|
readOnly: readonly,
|
|
2031
2043
|
disabled: disabled,
|
|
2032
2044
|
autoFocus: autofocus,
|
|
2033
|
-
value: inputValue
|
|
2034
|
-
|
|
2035
|
-
list: schema.examples ?
|
|
2045
|
+
value: inputValue
|
|
2046
|
+
}, inputProps, {
|
|
2047
|
+
list: schema.examples ? "examples_" + id : undefined,
|
|
2036
2048
|
onChange: _onChange,
|
|
2037
2049
|
onBlur: _onBlur,
|
|
2038
2050
|
onFocus: _onFocus
|
|
2039
|
-
}), Array.isArray(schema.examples) && /*#__PURE__*/React.createElement("datalist", {
|
|
2040
|
-
key:
|
|
2041
|
-
id:
|
|
2042
|
-
}, [
|
|
2043
|
-
|
|
2044
|
-
|
|
2045
|
-
|
|
2051
|
+
})), Array.isArray(schema.examples) && /*#__PURE__*/React.createElement("datalist", {
|
|
2052
|
+
key: "datalist_" + id,
|
|
2053
|
+
id: "examples_" + id
|
|
2054
|
+
}, [].concat(new Set(schema.examples.concat(schema["default"] ? [schema["default"]] : []))).map(function (example) {
|
|
2055
|
+
return /*#__PURE__*/React.createElement("option", {
|
|
2056
|
+
key: example,
|
|
2057
|
+
value: example
|
|
2058
|
+
});
|
|
2059
|
+
})));
|
|
2046
2060
|
}
|
|
2047
2061
|
|
|
2048
2062
|
/** The `SubmitButton` renders a button that represent the `Submit` action on a form
|
|
2049
2063
|
*/
|
|
2050
2064
|
function SubmitButton(_ref) {
|
|
2051
|
-
|
|
2052
|
-
|
|
2053
|
-
|
|
2054
|
-
|
|
2055
|
-
|
|
2056
|
-
|
|
2057
|
-
props: submitButtonProps = {}
|
|
2058
|
-
} = getSubmitButtonOptions(uiSchema);
|
|
2065
|
+
var uiSchema = _ref.uiSchema;
|
|
2066
|
+
var _getSubmitButtonOptio = getSubmitButtonOptions(uiSchema),
|
|
2067
|
+
submitText = _getSubmitButtonOptio.submitText,
|
|
2068
|
+
norender = _getSubmitButtonOptio.norender,
|
|
2069
|
+
_getSubmitButtonOptio2 = _getSubmitButtonOptio.props,
|
|
2070
|
+
submitButtonProps = _getSubmitButtonOptio2 === void 0 ? {} : _getSubmitButtonOptio2;
|
|
2059
2071
|
if (norender) {
|
|
2060
2072
|
return null;
|
|
2061
2073
|
}
|
|
2062
|
-
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
|
|
2063
|
-
type: "submit"
|
|
2064
|
-
|
|
2065
|
-
className:
|
|
2066
|
-
}, submitText));
|
|
2074
|
+
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", _extends({
|
|
2075
|
+
type: "submit"
|
|
2076
|
+
}, submitButtonProps, {
|
|
2077
|
+
className: "btn btn-info " + submitButtonProps.className
|
|
2078
|
+
}), submitText));
|
|
2067
2079
|
}
|
|
2068
2080
|
|
|
2081
|
+
var _excluded$2 = ["iconType", "icon", "className", "uiSchema"];
|
|
2069
2082
|
function IconButton(props) {
|
|
2070
|
-
|
|
2071
|
-
iconType = "default",
|
|
2072
|
-
icon,
|
|
2073
|
-
className,
|
|
2074
|
-
|
|
2075
|
-
|
|
2076
|
-
} = props;
|
|
2077
|
-
return /*#__PURE__*/React.createElement("button", {
|
|
2083
|
+
var _props$iconType = props.iconType,
|
|
2084
|
+
iconType = _props$iconType === void 0 ? "default" : _props$iconType,
|
|
2085
|
+
icon = props.icon,
|
|
2086
|
+
className = props.className,
|
|
2087
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded$2);
|
|
2088
|
+
return /*#__PURE__*/React.createElement("button", _extends({
|
|
2078
2089
|
type: "button",
|
|
2079
|
-
className:
|
|
2080
|
-
|
|
2081
|
-
|
|
2082
|
-
className: `glyphicon glyphicon-${icon}`
|
|
2090
|
+
className: "btn btn-" + iconType + " " + className
|
|
2091
|
+
}, otherProps), /*#__PURE__*/React.createElement("i", {
|
|
2092
|
+
className: "glyphicon glyphicon-" + icon
|
|
2083
2093
|
}));
|
|
2084
2094
|
}
|
|
2085
2095
|
function MoveDownButton(props) {
|
|
2086
|
-
return /*#__PURE__*/React.createElement(IconButton, {
|
|
2096
|
+
return /*#__PURE__*/React.createElement(IconButton, _extends({
|
|
2087
2097
|
title: "Move down",
|
|
2088
|
-
className: "array-item-move-down"
|
|
2089
|
-
|
|
2098
|
+
className: "array-item-move-down"
|
|
2099
|
+
}, props, {
|
|
2090
2100
|
icon: "arrow-down"
|
|
2091
|
-
});
|
|
2101
|
+
}));
|
|
2092
2102
|
}
|
|
2093
2103
|
function MoveUpButton(props) {
|
|
2094
|
-
return /*#__PURE__*/React.createElement(IconButton, {
|
|
2104
|
+
return /*#__PURE__*/React.createElement(IconButton, _extends({
|
|
2095
2105
|
title: "Move up",
|
|
2096
|
-
className: "array-item-move-up"
|
|
2097
|
-
|
|
2106
|
+
className: "array-item-move-up"
|
|
2107
|
+
}, props, {
|
|
2098
2108
|
icon: "arrow-up"
|
|
2099
|
-
});
|
|
2109
|
+
}));
|
|
2100
2110
|
}
|
|
2101
2111
|
function RemoveButton(props) {
|
|
2102
|
-
return /*#__PURE__*/React.createElement(IconButton, {
|
|
2112
|
+
return /*#__PURE__*/React.createElement(IconButton, _extends({
|
|
2103
2113
|
title: "Remove",
|
|
2104
|
-
className: "array-item-remove"
|
|
2105
|
-
|
|
2114
|
+
className: "array-item-remove"
|
|
2115
|
+
}, props, {
|
|
2106
2116
|
iconType: "danger",
|
|
2107
2117
|
icon: "remove"
|
|
2108
|
-
});
|
|
2118
|
+
}));
|
|
2109
2119
|
}
|
|
2110
2120
|
|
|
2111
2121
|
/** The `AddButton` renders a button that represent the `Add` action on a form
|
|
2112
2122
|
*/
|
|
2113
2123
|
function AddButton(_ref) {
|
|
2114
|
-
|
|
2115
|
-
|
|
2116
|
-
|
|
2117
|
-
disabled
|
|
2118
|
-
} = _ref;
|
|
2124
|
+
var className = _ref.className,
|
|
2125
|
+
onClick = _ref.onClick,
|
|
2126
|
+
disabled = _ref.disabled;
|
|
2119
2127
|
return /*#__PURE__*/React.createElement("div", {
|
|
2120
2128
|
className: "row"
|
|
2121
2129
|
}, /*#__PURE__*/React.createElement("p", {
|
|
2122
|
-
className:
|
|
2130
|
+
className: "col-xs-3 col-xs-offset-9 text-right " + className
|
|
2123
2131
|
}, /*#__PURE__*/React.createElement(IconButton, {
|
|
2124
2132
|
iconType: "info",
|
|
2125
2133
|
icon: "plus",
|
|
@@ -2132,11 +2140,11 @@ function AddButton(_ref) {
|
|
|
2132
2140
|
|
|
2133
2141
|
function buttonTemplates() {
|
|
2134
2142
|
return {
|
|
2135
|
-
SubmitButton,
|
|
2136
|
-
AddButton,
|
|
2137
|
-
MoveDownButton,
|
|
2138
|
-
MoveUpButton,
|
|
2139
|
-
RemoveButton
|
|
2143
|
+
SubmitButton: SubmitButton,
|
|
2144
|
+
AddButton: AddButton,
|
|
2145
|
+
MoveDownButton: MoveDownButton,
|
|
2146
|
+
MoveUpButton: MoveUpButton,
|
|
2147
|
+
RemoveButton: RemoveButton
|
|
2140
2148
|
};
|
|
2141
2149
|
}
|
|
2142
2150
|
|
|
@@ -2145,10 +2153,8 @@ function buttonTemplates() {
|
|
|
2145
2153
|
* @param props - The `DescriptionFieldProps` for this component
|
|
2146
2154
|
*/
|
|
2147
2155
|
function DescriptionField(props) {
|
|
2148
|
-
|
|
2149
|
-
|
|
2150
|
-
description
|
|
2151
|
-
} = props;
|
|
2156
|
+
var id = props.id,
|
|
2157
|
+
description = props.description;
|
|
2152
2158
|
if (!description) {
|
|
2153
2159
|
return null;
|
|
2154
2160
|
}
|
|
@@ -2170,9 +2176,7 @@ function DescriptionField(props) {
|
|
|
2170
2176
|
* @param props - The `ErrorListProps` for this component
|
|
2171
2177
|
*/
|
|
2172
2178
|
function ErrorList(_ref) {
|
|
2173
|
-
|
|
2174
|
-
errors
|
|
2175
|
-
} = _ref;
|
|
2179
|
+
var errors = _ref.errors;
|
|
2176
2180
|
return /*#__PURE__*/React.createElement("div", {
|
|
2177
2181
|
className: "panel panel-danger errors"
|
|
2178
2182
|
}, /*#__PURE__*/React.createElement("div", {
|
|
@@ -2181,7 +2185,7 @@ function ErrorList(_ref) {
|
|
|
2181
2185
|
className: "panel-title"
|
|
2182
2186
|
}, "Errors")), /*#__PURE__*/React.createElement("ul", {
|
|
2183
2187
|
className: "list-group"
|
|
2184
|
-
}, errors.map((error, i)
|
|
2188
|
+
}, errors.map(function (error, i) {
|
|
2185
2189
|
return /*#__PURE__*/React.createElement("li", {
|
|
2186
2190
|
key: i,
|
|
2187
2191
|
className: "list-group-item text-danger"
|
|
@@ -2189,17 +2193,15 @@ function ErrorList(_ref) {
|
|
|
2189
2193
|
})));
|
|
2190
2194
|
}
|
|
2191
2195
|
|
|
2192
|
-
|
|
2196
|
+
var REQUIRED_FIELD_SYMBOL$1 = "*";
|
|
2193
2197
|
/** Renders a label for a field
|
|
2194
2198
|
*
|
|
2195
2199
|
* @param props - The `LabelProps` for this component
|
|
2196
2200
|
*/
|
|
2197
2201
|
function Label(props) {
|
|
2198
|
-
|
|
2199
|
-
|
|
2200
|
-
|
|
2201
|
-
id
|
|
2202
|
-
} = props;
|
|
2202
|
+
var label = props.label,
|
|
2203
|
+
required = props.required,
|
|
2204
|
+
id = props.id;
|
|
2203
2205
|
if (!label) {
|
|
2204
2206
|
return null;
|
|
2205
2207
|
}
|
|
@@ -2217,29 +2219,25 @@ function Label(props) {
|
|
|
2217
2219
|
* @param props - The `FieldTemplateProps` for this component
|
|
2218
2220
|
*/
|
|
2219
2221
|
function FieldTemplate(props) {
|
|
2220
|
-
|
|
2221
|
-
|
|
2222
|
-
|
|
2223
|
-
|
|
2224
|
-
|
|
2225
|
-
|
|
2226
|
-
|
|
2227
|
-
|
|
2228
|
-
|
|
2229
|
-
|
|
2230
|
-
|
|
2231
|
-
|
|
2232
|
-
|
|
2233
|
-
const uiOptions = getUiOptions(uiSchema);
|
|
2234
|
-
const WrapIfAdditionalTemplate = getTemplate("WrapIfAdditionalTemplate", registry, uiOptions);
|
|
2222
|
+
var id = props.id,
|
|
2223
|
+
label = props.label,
|
|
2224
|
+
children = props.children,
|
|
2225
|
+
errors = props.errors,
|
|
2226
|
+
help = props.help,
|
|
2227
|
+
description = props.description,
|
|
2228
|
+
hidden = props.hidden,
|
|
2229
|
+
required = props.required,
|
|
2230
|
+
displayLabel = props.displayLabel,
|
|
2231
|
+
registry = props.registry,
|
|
2232
|
+
uiSchema = props.uiSchema;
|
|
2233
|
+
var uiOptions = getUiOptions(uiSchema);
|
|
2234
|
+
var WrapIfAdditionalTemplate = getTemplate("WrapIfAdditionalTemplate", registry, uiOptions);
|
|
2235
2235
|
if (hidden) {
|
|
2236
2236
|
return /*#__PURE__*/React.createElement("div", {
|
|
2237
2237
|
className: "hidden"
|
|
2238
2238
|
}, children);
|
|
2239
2239
|
}
|
|
2240
|
-
return /*#__PURE__*/React.createElement(WrapIfAdditionalTemplate, {
|
|
2241
|
-
...props
|
|
2242
|
-
}, displayLabel && /*#__PURE__*/React.createElement(Label, {
|
|
2240
|
+
return /*#__PURE__*/React.createElement(WrapIfAdditionalTemplate, _extends({}, props), displayLabel && /*#__PURE__*/React.createElement(Label, {
|
|
2243
2241
|
label: label,
|
|
2244
2242
|
required: required,
|
|
2245
2243
|
id: id
|
|
@@ -2251,18 +2249,19 @@ function FieldTemplate(props) {
|
|
|
2251
2249
|
* @param props - The `FieldErrorProps` for the errors being rendered
|
|
2252
2250
|
*/
|
|
2253
2251
|
function FieldErrorTemplate(props) {
|
|
2254
|
-
|
|
2255
|
-
errors = [],
|
|
2256
|
-
idSchema
|
|
2257
|
-
} = props;
|
|
2252
|
+
var _props$errors = props.errors,
|
|
2253
|
+
errors = _props$errors === void 0 ? [] : _props$errors,
|
|
2254
|
+
idSchema = props.idSchema;
|
|
2258
2255
|
if (errors.length === 0) {
|
|
2259
2256
|
return null;
|
|
2260
2257
|
}
|
|
2261
|
-
|
|
2258
|
+
var id = idSchema.$id + "__error";
|
|
2262
2259
|
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("ul", {
|
|
2263
2260
|
id: id,
|
|
2264
2261
|
className: "error-detail bs-callout bs-callout-info"
|
|
2265
|
-
}, errors.filter(
|
|
2262
|
+
}, errors.filter(function (elem) {
|
|
2263
|
+
return !!elem;
|
|
2264
|
+
}).map(function (error, index) {
|
|
2266
2265
|
return /*#__PURE__*/React.createElement("li", {
|
|
2267
2266
|
className: "text-danger",
|
|
2268
2267
|
key: index
|
|
@@ -2275,14 +2274,12 @@ function FieldErrorTemplate(props) {
|
|
|
2275
2274
|
* @param props - The `FieldHelpProps` to be rendered
|
|
2276
2275
|
*/
|
|
2277
2276
|
function FieldHelpTemplate(props) {
|
|
2278
|
-
|
|
2279
|
-
|
|
2280
|
-
help
|
|
2281
|
-
} = props;
|
|
2277
|
+
var idSchema = props.idSchema,
|
|
2278
|
+
help = props.help;
|
|
2282
2279
|
if (!help) {
|
|
2283
2280
|
return null;
|
|
2284
2281
|
}
|
|
2285
|
-
|
|
2282
|
+
var id = idSchema.$id + "__help";
|
|
2286
2283
|
if (typeof help === "string") {
|
|
2287
2284
|
return /*#__PURE__*/React.createElement("p", {
|
|
2288
2285
|
id: id,
|
|
@@ -2302,45 +2299,41 @@ function FieldHelpTemplate(props) {
|
|
|
2302
2299
|
* @param props - The `ObjectFieldTemplateProps` for this component
|
|
2303
2300
|
*/
|
|
2304
2301
|
function ObjectFieldTemplate(props) {
|
|
2305
|
-
|
|
2306
|
-
|
|
2307
|
-
|
|
2308
|
-
|
|
2309
|
-
|
|
2310
|
-
|
|
2311
|
-
|
|
2312
|
-
|
|
2313
|
-
|
|
2314
|
-
|
|
2315
|
-
|
|
2316
|
-
|
|
2317
|
-
|
|
2318
|
-
|
|
2319
|
-
|
|
2320
|
-
const TitleFieldTemplate = getTemplate("TitleFieldTemplate", registry, options);
|
|
2321
|
-
const DescriptionFieldTemplate = getTemplate("DescriptionFieldTemplate", registry, options);
|
|
2302
|
+
var description = props.description,
|
|
2303
|
+
disabled = props.disabled,
|
|
2304
|
+
formData = props.formData,
|
|
2305
|
+
idSchema = props.idSchema,
|
|
2306
|
+
onAddClick = props.onAddClick,
|
|
2307
|
+
properties = props.properties,
|
|
2308
|
+
readonly = props.readonly,
|
|
2309
|
+
registry = props.registry,
|
|
2310
|
+
required = props.required,
|
|
2311
|
+
schema = props.schema,
|
|
2312
|
+
title = props.title,
|
|
2313
|
+
uiSchema = props.uiSchema;
|
|
2314
|
+
var options = getUiOptions(uiSchema);
|
|
2315
|
+
var TitleFieldTemplate = getTemplate("TitleFieldTemplate", registry, options);
|
|
2316
|
+
var DescriptionFieldTemplate = getTemplate("DescriptionFieldTemplate", registry, options);
|
|
2322
2317
|
// Button templates are not overridden in the uiSchema
|
|
2323
|
-
|
|
2324
|
-
ButtonTemplates: {
|
|
2325
|
-
AddButton
|
|
2326
|
-
}
|
|
2327
|
-
} = registry.templates;
|
|
2318
|
+
var AddButton = registry.templates.ButtonTemplates.AddButton;
|
|
2328
2319
|
return /*#__PURE__*/React.createElement("fieldset", {
|
|
2329
2320
|
id: idSchema.$id
|
|
2330
2321
|
}, (options.title || title) && /*#__PURE__*/React.createElement(TitleFieldTemplate, {
|
|
2331
|
-
id:
|
|
2322
|
+
id: idSchema.$id + "__title",
|
|
2332
2323
|
title: options.title || title,
|
|
2333
2324
|
required: required,
|
|
2334
2325
|
schema: schema,
|
|
2335
2326
|
uiSchema: uiSchema,
|
|
2336
2327
|
registry: registry
|
|
2337
2328
|
}), (options.description || description) && /*#__PURE__*/React.createElement(DescriptionFieldTemplate, {
|
|
2338
|
-
id:
|
|
2329
|
+
id: idSchema.$id + "__description",
|
|
2339
2330
|
description: options.description || description,
|
|
2340
2331
|
schema: schema,
|
|
2341
2332
|
uiSchema: uiSchema,
|
|
2342
2333
|
registry: registry
|
|
2343
|
-
}), properties.map(
|
|
2334
|
+
}), properties.map(function (prop) {
|
|
2335
|
+
return prop.content;
|
|
2336
|
+
}), canExpand(schema, uiSchema, formData) && /*#__PURE__*/React.createElement(AddButton, {
|
|
2344
2337
|
className: "object-property-expand",
|
|
2345
2338
|
onClick: onAddClick(schema),
|
|
2346
2339
|
disabled: disabled || readonly,
|
|
@@ -2348,17 +2341,15 @@ function ObjectFieldTemplate(props) {
|
|
|
2348
2341
|
}));
|
|
2349
2342
|
}
|
|
2350
2343
|
|
|
2351
|
-
|
|
2344
|
+
var REQUIRED_FIELD_SYMBOL = "*";
|
|
2352
2345
|
/** The `TitleField` is the template to use to render the title of a field
|
|
2353
2346
|
*
|
|
2354
2347
|
* @param props - The `TitleFieldProps` for this component
|
|
2355
2348
|
*/
|
|
2356
2349
|
function TitleField(props) {
|
|
2357
|
-
|
|
2358
|
-
|
|
2359
|
-
|
|
2360
|
-
required
|
|
2361
|
-
} = props;
|
|
2350
|
+
var id = props.id,
|
|
2351
|
+
title = props.title,
|
|
2352
|
+
required = props.required;
|
|
2362
2353
|
return /*#__PURE__*/React.createElement("legend", {
|
|
2363
2354
|
id: id
|
|
2364
2355
|
}, title, required && /*#__PURE__*/React.createElement("span", {
|
|
@@ -2372,11 +2363,9 @@ function TitleField(props) {
|
|
|
2372
2363
|
* @param props - The `FieldProps` for this template
|
|
2373
2364
|
*/
|
|
2374
2365
|
function UnsupportedField(props) {
|
|
2375
|
-
|
|
2376
|
-
|
|
2377
|
-
|
|
2378
|
-
reason
|
|
2379
|
-
} = props;
|
|
2366
|
+
var schema = props.schema,
|
|
2367
|
+
idSchema = props.idSchema,
|
|
2368
|
+
reason = props.reason;
|
|
2380
2369
|
return /*#__PURE__*/React.createElement("div", {
|
|
2381
2370
|
className: "unsupported-field"
|
|
2382
2371
|
}, /*#__PURE__*/React.createElement("p", null, "Unsupported field schema", idSchema && idSchema.$id && /*#__PURE__*/React.createElement("span", null, " for", " field ", /*#__PURE__*/React.createElement("code", null, idSchema.$id)), reason && /*#__PURE__*/React.createElement("em", null, ": ", reason), "."), schema && /*#__PURE__*/React.createElement("pre", null, JSON.stringify(schema, null, 2)));
|
|
@@ -2388,26 +2377,22 @@ function UnsupportedField(props) {
|
|
|
2388
2377
|
* @param props - The `WrapIfAdditionalProps` for this component
|
|
2389
2378
|
*/
|
|
2390
2379
|
function WrapIfAdditionalTemplate(props) {
|
|
2391
|
-
|
|
2392
|
-
|
|
2393
|
-
|
|
2394
|
-
|
|
2395
|
-
|
|
2396
|
-
|
|
2397
|
-
|
|
2398
|
-
|
|
2399
|
-
|
|
2400
|
-
|
|
2401
|
-
|
|
2402
|
-
|
|
2403
|
-
registry
|
|
2404
|
-
} = props;
|
|
2380
|
+
var id = props.id,
|
|
2381
|
+
classNames = props.classNames,
|
|
2382
|
+
disabled = props.disabled,
|
|
2383
|
+
label = props.label,
|
|
2384
|
+
onKeyChange = props.onKeyChange,
|
|
2385
|
+
onDropPropertyClick = props.onDropPropertyClick,
|
|
2386
|
+
readonly = props.readonly,
|
|
2387
|
+
required = props.required,
|
|
2388
|
+
schema = props.schema,
|
|
2389
|
+
children = props.children,
|
|
2390
|
+
uiSchema = props.uiSchema,
|
|
2391
|
+
registry = props.registry;
|
|
2405
2392
|
// Button templates are not overridden in the uiSchema
|
|
2406
|
-
|
|
2407
|
-
|
|
2408
|
-
|
|
2409
|
-
const keyLabel = `${label} Key`; // i18n ?
|
|
2410
|
-
const additional = (ADDITIONAL_PROPERTY_FLAG in schema);
|
|
2393
|
+
var RemoveButton = registry.templates.ButtonTemplates.RemoveButton;
|
|
2394
|
+
var keyLabel = label + " Key"; // i18n ?
|
|
2395
|
+
var additional = (ADDITIONAL_PROPERTY_FLAG in schema);
|
|
2411
2396
|
if (!additional) {
|
|
2412
2397
|
return /*#__PURE__*/React.createElement("div", {
|
|
2413
2398
|
className: classNames
|
|
@@ -2424,12 +2409,14 @@ function WrapIfAdditionalTemplate(props) {
|
|
|
2424
2409
|
}, /*#__PURE__*/React.createElement(Label, {
|
|
2425
2410
|
label: keyLabel,
|
|
2426
2411
|
required: required,
|
|
2427
|
-
id:
|
|
2412
|
+
id: id + "-key"
|
|
2428
2413
|
}), /*#__PURE__*/React.createElement("input", {
|
|
2429
2414
|
className: "form-control",
|
|
2430
2415
|
type: "text",
|
|
2431
|
-
id:
|
|
2432
|
-
onBlur:
|
|
2416
|
+
id: id + "-key",
|
|
2417
|
+
onBlur: function onBlur(event) {
|
|
2418
|
+
return onKeyChange(event.target.value);
|
|
2419
|
+
},
|
|
2433
2420
|
defaultValue: label
|
|
2434
2421
|
}))), /*#__PURE__*/React.createElement("div", {
|
|
2435
2422
|
className: "form-additional form-group col-xs-5"
|
|
@@ -2448,27 +2435,27 @@ function WrapIfAdditionalTemplate(props) {
|
|
|
2448
2435
|
|
|
2449
2436
|
function templates() {
|
|
2450
2437
|
return {
|
|
2451
|
-
ArrayFieldDescriptionTemplate,
|
|
2452
|
-
ArrayFieldItemTemplate,
|
|
2453
|
-
ArrayFieldTemplate,
|
|
2454
|
-
ArrayFieldTitleTemplate,
|
|
2438
|
+
ArrayFieldDescriptionTemplate: ArrayFieldDescriptionTemplate,
|
|
2439
|
+
ArrayFieldItemTemplate: ArrayFieldItemTemplate,
|
|
2440
|
+
ArrayFieldTemplate: ArrayFieldTemplate,
|
|
2441
|
+
ArrayFieldTitleTemplate: ArrayFieldTitleTemplate,
|
|
2455
2442
|
ButtonTemplates: buttonTemplates(),
|
|
2456
|
-
BaseInputTemplate,
|
|
2443
|
+
BaseInputTemplate: BaseInputTemplate,
|
|
2457
2444
|
DescriptionFieldTemplate: DescriptionField,
|
|
2458
2445
|
ErrorListTemplate: ErrorList,
|
|
2459
|
-
FieldTemplate,
|
|
2460
|
-
FieldErrorTemplate,
|
|
2461
|
-
FieldHelpTemplate,
|
|
2462
|
-
ObjectFieldTemplate,
|
|
2446
|
+
FieldTemplate: FieldTemplate,
|
|
2447
|
+
FieldErrorTemplate: FieldErrorTemplate,
|
|
2448
|
+
FieldHelpTemplate: FieldHelpTemplate,
|
|
2449
|
+
ObjectFieldTemplate: ObjectFieldTemplate,
|
|
2463
2450
|
TitleFieldTemplate: TitleField,
|
|
2464
2451
|
UnsupportedFieldTemplate: UnsupportedField,
|
|
2465
|
-
WrapIfAdditionalTemplate
|
|
2452
|
+
WrapIfAdditionalTemplate: WrapIfAdditionalTemplate
|
|
2466
2453
|
};
|
|
2467
2454
|
}
|
|
2468
2455
|
|
|
2469
2456
|
function rangeOptions(start, stop) {
|
|
2470
|
-
|
|
2471
|
-
for (
|
|
2457
|
+
var options = [];
|
|
2458
|
+
for (var i = start; i <= stop; i++) {
|
|
2472
2459
|
options.push({
|
|
2473
2460
|
value: i,
|
|
2474
2461
|
label: pad(i, 2)
|
|
@@ -2477,21 +2464,21 @@ function rangeOptions(start, stop) {
|
|
|
2477
2464
|
return options;
|
|
2478
2465
|
}
|
|
2479
2466
|
function readyForChange(state) {
|
|
2480
|
-
return Object.values(state).every(
|
|
2467
|
+
return Object.values(state).every(function (value) {
|
|
2468
|
+
return value !== -1;
|
|
2469
|
+
});
|
|
2481
2470
|
}
|
|
2482
2471
|
function dateElementProps(state, time, yearsRange) {
|
|
2483
2472
|
if (yearsRange === void 0) {
|
|
2484
2473
|
yearsRange = [1900, new Date().getFullYear() + 2];
|
|
2485
2474
|
}
|
|
2486
|
-
|
|
2487
|
-
|
|
2488
|
-
|
|
2489
|
-
|
|
2490
|
-
|
|
2491
|
-
|
|
2492
|
-
|
|
2493
|
-
} = state;
|
|
2494
|
-
const data = [{
|
|
2475
|
+
var year = state.year,
|
|
2476
|
+
month = state.month,
|
|
2477
|
+
day = state.day,
|
|
2478
|
+
hour = state.hour,
|
|
2479
|
+
minute = state.minute,
|
|
2480
|
+
second = state.second;
|
|
2481
|
+
var data = [{
|
|
2495
2482
|
type: "year",
|
|
2496
2483
|
range: yearsRange,
|
|
2497
2484
|
value: year
|
|
@@ -2522,23 +2509,19 @@ function dateElementProps(state, time, yearsRange) {
|
|
|
2522
2509
|
return data;
|
|
2523
2510
|
}
|
|
2524
2511
|
function DateElement(_ref) {
|
|
2525
|
-
|
|
2526
|
-
|
|
2527
|
-
|
|
2528
|
-
|
|
2529
|
-
|
|
2530
|
-
|
|
2531
|
-
|
|
2532
|
-
|
|
2533
|
-
|
|
2534
|
-
|
|
2535
|
-
|
|
2536
|
-
|
|
2537
|
-
|
|
2538
|
-
const id = rootId + "_" + type;
|
|
2539
|
-
const {
|
|
2540
|
-
SelectWidget
|
|
2541
|
-
} = registry.widgets;
|
|
2512
|
+
var type = _ref.type,
|
|
2513
|
+
range = _ref.range,
|
|
2514
|
+
value = _ref.value,
|
|
2515
|
+
select = _ref.select,
|
|
2516
|
+
rootId = _ref.rootId,
|
|
2517
|
+
disabled = _ref.disabled,
|
|
2518
|
+
readonly = _ref.readonly,
|
|
2519
|
+
autofocus = _ref.autofocus,
|
|
2520
|
+
registry = _ref.registry,
|
|
2521
|
+
onBlur = _ref.onBlur,
|
|
2522
|
+
onFocus = _ref.onFocus;
|
|
2523
|
+
var id = rootId + "_" + type;
|
|
2524
|
+
var SelectWidget = registry.widgets.SelectWidget;
|
|
2542
2525
|
return /*#__PURE__*/React.createElement(SelectWidget, {
|
|
2543
2526
|
schema: {
|
|
2544
2527
|
type: "integer"
|
|
@@ -2553,7 +2536,9 @@ function DateElement(_ref) {
|
|
|
2553
2536
|
disabled: disabled,
|
|
2554
2537
|
readonly: readonly,
|
|
2555
2538
|
autofocus: autofocus,
|
|
2556
|
-
onChange:
|
|
2539
|
+
onChange: function onChange(value) {
|
|
2540
|
+
return select(type, value);
|
|
2541
|
+
},
|
|
2557
2542
|
onBlur: onBlur,
|
|
2558
2543
|
onFocus: onFocus,
|
|
2559
2544
|
registry: registry,
|
|
@@ -2564,50 +2549,50 @@ function DateElement(_ref) {
|
|
|
2564
2549
|
* @param props - The `WidgetProps` for this component
|
|
2565
2550
|
*/
|
|
2566
2551
|
function AltDateWidget(_ref2) {
|
|
2567
|
-
|
|
2568
|
-
time = false,
|
|
2569
|
-
disabled =
|
|
2570
|
-
|
|
2571
|
-
|
|
2572
|
-
|
|
2573
|
-
|
|
2574
|
-
|
|
2575
|
-
|
|
2576
|
-
|
|
2577
|
-
|
|
2578
|
-
|
|
2579
|
-
|
|
2580
|
-
|
|
2581
|
-
|
|
2582
|
-
|
|
2583
|
-
|
|
2584
|
-
}
|
|
2585
|
-
|
|
2586
|
-
|
|
2552
|
+
var _ref2$time = _ref2.time,
|
|
2553
|
+
time = _ref2$time === void 0 ? false : _ref2$time,
|
|
2554
|
+
_ref2$disabled = _ref2.disabled,
|
|
2555
|
+
disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
|
|
2556
|
+
_ref2$readonly = _ref2.readonly,
|
|
2557
|
+
readonly = _ref2$readonly === void 0 ? false : _ref2$readonly,
|
|
2558
|
+
_ref2$autofocus = _ref2.autofocus,
|
|
2559
|
+
autofocus = _ref2$autofocus === void 0 ? false : _ref2$autofocus,
|
|
2560
|
+
options = _ref2.options,
|
|
2561
|
+
id = _ref2.id,
|
|
2562
|
+
registry = _ref2.registry,
|
|
2563
|
+
onBlur = _ref2.onBlur,
|
|
2564
|
+
onFocus = _ref2.onFocus,
|
|
2565
|
+
onChange = _ref2.onChange,
|
|
2566
|
+
value = _ref2.value;
|
|
2567
|
+
var _useReducer = useReducer(function (state, action) {
|
|
2568
|
+
return _extends({}, state, action);
|
|
2569
|
+
}, parseDateString(value, time)),
|
|
2570
|
+
state = _useReducer[0],
|
|
2571
|
+
setState = _useReducer[1];
|
|
2572
|
+
useEffect(function () {
|
|
2587
2573
|
if (value && value !== toDateString(state, time)) {
|
|
2588
2574
|
setState(parseDateString(value, time));
|
|
2589
2575
|
}
|
|
2590
2576
|
}, [value, state, time]);
|
|
2591
|
-
useEffect(()
|
|
2577
|
+
useEffect(function () {
|
|
2592
2578
|
if (readyForChange(state)) {
|
|
2593
2579
|
// Only propagate to parent state if we have a complete date{time}
|
|
2594
2580
|
onChange(toDateString(state, time));
|
|
2595
2581
|
}
|
|
2596
2582
|
}, [state, time, onChange]);
|
|
2597
|
-
|
|
2598
|
-
|
|
2599
|
-
|
|
2600
|
-
});
|
|
2583
|
+
var handleChange = useCallback(function (property, value) {
|
|
2584
|
+
var _setState;
|
|
2585
|
+
setState((_setState = {}, _setState[property] = value, _setState));
|
|
2601
2586
|
}, []);
|
|
2602
|
-
|
|
2587
|
+
var handleSetNow = useCallback(function (event) {
|
|
2603
2588
|
event.preventDefault();
|
|
2604
2589
|
if (disabled || readonly) {
|
|
2605
2590
|
return;
|
|
2606
2591
|
}
|
|
2607
|
-
|
|
2592
|
+
var nowDateObj = parseDateString(new Date().toJSON(), time);
|
|
2608
2593
|
setState(nowDateObj);
|
|
2609
2594
|
}, [disabled, readonly, time]);
|
|
2610
|
-
|
|
2595
|
+
var handleClear = useCallback(function (event) {
|
|
2611
2596
|
event.preventDefault();
|
|
2612
2597
|
if (disabled || readonly) {
|
|
2613
2598
|
return;
|
|
@@ -2617,19 +2602,21 @@ function AltDateWidget(_ref2) {
|
|
|
2617
2602
|
}, [disabled, readonly, time, onChange]);
|
|
2618
2603
|
return /*#__PURE__*/React.createElement("ul", {
|
|
2619
2604
|
className: "list-inline"
|
|
2620
|
-
}, dateElementProps(state, time, options.yearsRange).map((elemProps, i)
|
|
2621
|
-
|
|
2622
|
-
|
|
2623
|
-
|
|
2624
|
-
|
|
2625
|
-
|
|
2626
|
-
|
|
2627
|
-
|
|
2628
|
-
|
|
2629
|
-
|
|
2630
|
-
|
|
2631
|
-
|
|
2632
|
-
|
|
2605
|
+
}, dateElementProps(state, time, options.yearsRange).map(function (elemProps, i) {
|
|
2606
|
+
return /*#__PURE__*/React.createElement("li", {
|
|
2607
|
+
key: i
|
|
2608
|
+
}, /*#__PURE__*/React.createElement(DateElement, _extends({
|
|
2609
|
+
rootId: id,
|
|
2610
|
+
select: handleChange
|
|
2611
|
+
}, elemProps, {
|
|
2612
|
+
disabled: disabled,
|
|
2613
|
+
readonly: readonly,
|
|
2614
|
+
registry: registry,
|
|
2615
|
+
onBlur: onBlur,
|
|
2616
|
+
onFocus: onFocus,
|
|
2617
|
+
autofocus: autofocus && i === 0
|
|
2618
|
+
})));
|
|
2619
|
+
}), (options.hideNowButton !== "undefined" ? !options.hideNowButton : true) && /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("a", {
|
|
2633
2620
|
href: "#",
|
|
2634
2621
|
className: "btn btn-info btn-now",
|
|
2635
2622
|
onClick: handleSetNow
|
|
@@ -2640,23 +2627,20 @@ function AltDateWidget(_ref2) {
|
|
|
2640
2627
|
}, "Clear")));
|
|
2641
2628
|
}
|
|
2642
2629
|
|
|
2630
|
+
var _excluded$1 = ["time"];
|
|
2643
2631
|
/** The `AltDateTimeWidget` is an alternative widget for rendering datetime properties.
|
|
2644
2632
|
* It uses the AltDateWidget for rendering, with the `time` prop set to true by default.
|
|
2645
2633
|
*
|
|
2646
2634
|
* @param props - The `WidgetProps` for this component
|
|
2647
2635
|
*/
|
|
2648
2636
|
function AltDateTimeWidget(_ref) {
|
|
2649
|
-
|
|
2650
|
-
time = true,
|
|
2651
|
-
|
|
2652
|
-
|
|
2653
|
-
|
|
2654
|
-
|
|
2655
|
-
}
|
|
2656
|
-
return /*#__PURE__*/React.createElement(AltDateWidget, {
|
|
2657
|
-
time: time,
|
|
2658
|
-
...props
|
|
2659
|
-
});
|
|
2637
|
+
var _ref$time = _ref.time,
|
|
2638
|
+
time = _ref$time === void 0 ? true : _ref$time,
|
|
2639
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
|
|
2640
|
+
var AltDateWidget = props.registry.widgets.AltDateWidget;
|
|
2641
|
+
return /*#__PURE__*/React.createElement(AltDateWidget, _extends({
|
|
2642
|
+
time: time
|
|
2643
|
+
}, props));
|
|
2660
2644
|
}
|
|
2661
2645
|
|
|
2662
2646
|
/** The `CheckBoxWidget` is a widget for rendering boolean properties.
|
|
@@ -2665,31 +2649,36 @@ function AltDateTimeWidget(_ref) {
|
|
|
2665
2649
|
* @param props - The `WidgetProps` for this component
|
|
2666
2650
|
*/
|
|
2667
2651
|
function CheckboxWidget(_ref) {
|
|
2668
|
-
|
|
2669
|
-
|
|
2670
|
-
|
|
2671
|
-
|
|
2672
|
-
|
|
2673
|
-
|
|
2674
|
-
|
|
2675
|
-
|
|
2676
|
-
|
|
2677
|
-
autofocus = false,
|
|
2678
|
-
onBlur,
|
|
2679
|
-
onFocus,
|
|
2680
|
-
onChange,
|
|
2681
|
-
registry
|
|
2682
|
-
|
|
2683
|
-
const DescriptionFieldTemplate = getTemplate("DescriptionFieldTemplate", registry, options);
|
|
2652
|
+
var schema = _ref.schema,
|
|
2653
|
+
uiSchema = _ref.uiSchema,
|
|
2654
|
+
options = _ref.options,
|
|
2655
|
+
id = _ref.id,
|
|
2656
|
+
value = _ref.value,
|
|
2657
|
+
disabled = _ref.disabled,
|
|
2658
|
+
readonly = _ref.readonly,
|
|
2659
|
+
label = _ref.label,
|
|
2660
|
+
_ref$autofocus = _ref.autofocus,
|
|
2661
|
+
autofocus = _ref$autofocus === void 0 ? false : _ref$autofocus,
|
|
2662
|
+
onBlur = _ref.onBlur,
|
|
2663
|
+
onFocus = _ref.onFocus,
|
|
2664
|
+
onChange = _ref.onChange,
|
|
2665
|
+
registry = _ref.registry;
|
|
2666
|
+
var DescriptionFieldTemplate = getTemplate("DescriptionFieldTemplate", registry, options);
|
|
2684
2667
|
// Because an unchecked checkbox will cause html5 validation to fail, only add
|
|
2685
2668
|
// the "required" attribute if the field value must be "true", due to the
|
|
2686
2669
|
// "const" or "enum" keywords
|
|
2687
|
-
|
|
2688
|
-
|
|
2689
|
-
|
|
2690
|
-
|
|
2670
|
+
var required = schemaRequiresTrueValue(schema);
|
|
2671
|
+
var handleChange = useCallback(function (event) {
|
|
2672
|
+
return onChange(event.target.checked);
|
|
2673
|
+
}, [onChange]);
|
|
2674
|
+
var handleBlur = useCallback(function (event) {
|
|
2675
|
+
return onBlur(id, event.target.checked);
|
|
2676
|
+
}, [onBlur, id]);
|
|
2677
|
+
var handleFocus = useCallback(function (event) {
|
|
2678
|
+
return onFocus(id, event.target.checked);
|
|
2679
|
+
}, [onFocus, id]);
|
|
2691
2680
|
return /*#__PURE__*/React.createElement("div", {
|
|
2692
|
-
className:
|
|
2681
|
+
className: "checkbox " + (disabled || readonly ? "disabled" : "")
|
|
2693
2682
|
}, schema.description && /*#__PURE__*/React.createElement(DescriptionFieldTemplate, {
|
|
2694
2683
|
id: id + "__description",
|
|
2695
2684
|
description: schema.description,
|
|
@@ -2711,14 +2700,18 @@ function CheckboxWidget(_ref) {
|
|
|
2711
2700
|
}
|
|
2712
2701
|
|
|
2713
2702
|
function selectValue(value, selected, all) {
|
|
2714
|
-
|
|
2715
|
-
|
|
2703
|
+
var at = all.indexOf(value);
|
|
2704
|
+
var updated = selected.slice(0, at).concat(value, selected.slice(at));
|
|
2716
2705
|
// As inserting values at predefined index positions doesn't work with empty
|
|
2717
2706
|
// arrays, we need to reorder the updated selection to match the initial order
|
|
2718
|
-
return updated.sort((a, b)
|
|
2707
|
+
return updated.sort(function (a, b) {
|
|
2708
|
+
return Number(all.indexOf(a) > all.indexOf(b));
|
|
2709
|
+
});
|
|
2719
2710
|
}
|
|
2720
2711
|
function deselectValue(value, selected) {
|
|
2721
|
-
return selected.filter(
|
|
2712
|
+
return selected.filter(function (v) {
|
|
2713
|
+
return v !== value;
|
|
2714
|
+
});
|
|
2722
2715
|
}
|
|
2723
2716
|
/** The `CheckboxesWidget` is a widget for rendering checkbox groups.
|
|
2724
2717
|
* It is typically used to represent an array of enums.
|
|
@@ -2726,31 +2719,28 @@ function deselectValue(value, selected) {
|
|
|
2726
2719
|
* @param props - The `WidgetProps` for this component
|
|
2727
2720
|
*/
|
|
2728
2721
|
function CheckboxesWidget(_ref) {
|
|
2729
|
-
|
|
2730
|
-
|
|
2731
|
-
|
|
2732
|
-
options
|
|
2733
|
-
|
|
2734
|
-
|
|
2735
|
-
|
|
2736
|
-
|
|
2737
|
-
|
|
2738
|
-
autofocus = false,
|
|
2739
|
-
readonly,
|
|
2740
|
-
onChange
|
|
2741
|
-
} = _ref;
|
|
2722
|
+
var id = _ref.id,
|
|
2723
|
+
disabled = _ref.disabled,
|
|
2724
|
+
_ref$options = _ref.options,
|
|
2725
|
+
_ref$options$inline = _ref$options.inline,
|
|
2726
|
+
inline = _ref$options$inline === void 0 ? false : _ref$options$inline,
|
|
2727
|
+
enumOptions = _ref$options.enumOptions,
|
|
2728
|
+
enumDisabled = _ref$options.enumDisabled,
|
|
2729
|
+
value = _ref.value,
|
|
2730
|
+
_ref$autofocus = _ref.autofocus,
|
|
2731
|
+
autofocus = _ref$autofocus === void 0 ? false : _ref$autofocus,
|
|
2732
|
+
readonly = _ref.readonly,
|
|
2733
|
+
onChange = _ref.onChange;
|
|
2742
2734
|
return /*#__PURE__*/React.createElement("div", {
|
|
2743
2735
|
className: "checkboxes",
|
|
2744
2736
|
id: id
|
|
2745
|
-
}, Array.isArray(enumOptions) && enumOptions.map((option, index)
|
|
2746
|
-
|
|
2747
|
-
|
|
2748
|
-
|
|
2749
|
-
|
|
2750
|
-
|
|
2751
|
-
|
|
2752
|
-
value
|
|
2753
|
-
} = _ref2;
|
|
2737
|
+
}, Array.isArray(enumOptions) && enumOptions.map(function (option, index) {
|
|
2738
|
+
var checked = value.indexOf(option.value) !== -1;
|
|
2739
|
+
var itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) != -1;
|
|
2740
|
+
var disabledCls = disabled || itemDisabled || readonly ? "disabled" : "";
|
|
2741
|
+
var handleChange = function handleChange(event) {
|
|
2742
|
+
var all = enumOptions.map(function (_ref2) {
|
|
2743
|
+
var value = _ref2.value;
|
|
2754
2744
|
return value;
|
|
2755
2745
|
});
|
|
2756
2746
|
if (event.target.checked) {
|
|
@@ -2759,9 +2749,9 @@ function CheckboxesWidget(_ref) {
|
|
|
2759
2749
|
onChange(deselectValue(option.value, value));
|
|
2760
2750
|
}
|
|
2761
2751
|
};
|
|
2762
|
-
|
|
2752
|
+
var checkbox = /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("input", {
|
|
2763
2753
|
type: "checkbox",
|
|
2764
|
-
id:
|
|
2754
|
+
id: id + "-" + option.value,
|
|
2765
2755
|
name: id,
|
|
2766
2756
|
checked: checked,
|
|
2767
2757
|
disabled: disabled || itemDisabled || readonly,
|
|
@@ -2770,10 +2760,10 @@ function CheckboxesWidget(_ref) {
|
|
|
2770
2760
|
}), /*#__PURE__*/React.createElement("span", null, option.label));
|
|
2771
2761
|
return inline ? /*#__PURE__*/React.createElement("label", {
|
|
2772
2762
|
key: option.value,
|
|
2773
|
-
className:
|
|
2763
|
+
className: "checkbox-inline " + disabledCls
|
|
2774
2764
|
}, checkbox) : /*#__PURE__*/React.createElement("div", {
|
|
2775
2765
|
key: option.value,
|
|
2776
|
-
className:
|
|
2766
|
+
className: "checkbox " + disabledCls
|
|
2777
2767
|
}, /*#__PURE__*/React.createElement("label", null, checkbox));
|
|
2778
2768
|
}));
|
|
2779
2769
|
}
|
|
@@ -2784,18 +2774,16 @@ function CheckboxesWidget(_ref) {
|
|
|
2784
2774
|
* @param props - The `WidgetProps` for this component
|
|
2785
2775
|
*/
|
|
2786
2776
|
function ColorWidget(props) {
|
|
2787
|
-
|
|
2788
|
-
|
|
2789
|
-
|
|
2790
|
-
|
|
2791
|
-
|
|
2792
|
-
|
|
2793
|
-
|
|
2794
|
-
|
|
2795
|
-
type: "color",
|
|
2796
|
-
...props,
|
|
2777
|
+
var disabled = props.disabled,
|
|
2778
|
+
readonly = props.readonly,
|
|
2779
|
+
options = props.options,
|
|
2780
|
+
registry = props.registry;
|
|
2781
|
+
var BaseInputTemplate = getTemplate("BaseInputTemplate", registry, options);
|
|
2782
|
+
return /*#__PURE__*/React.createElement(BaseInputTemplate, _extends({
|
|
2783
|
+
type: "color"
|
|
2784
|
+
}, props, {
|
|
2797
2785
|
disabled: disabled || readonly
|
|
2798
|
-
});
|
|
2786
|
+
}));
|
|
2799
2787
|
}
|
|
2800
2788
|
|
|
2801
2789
|
/** The `DateWidget` component uses the `BaseInputTemplate` changing the type to `date` and transforms
|
|
@@ -2804,18 +2792,18 @@ function ColorWidget(props) {
|
|
|
2804
2792
|
* @param props - The `WidgetProps` for this component
|
|
2805
2793
|
*/
|
|
2806
2794
|
function DateWidget(props) {
|
|
2807
|
-
|
|
2808
|
-
|
|
2809
|
-
|
|
2810
|
-
|
|
2811
|
-
|
|
2812
|
-
|
|
2813
|
-
|
|
2814
|
-
return /*#__PURE__*/React.createElement(BaseInputTemplate, {
|
|
2815
|
-
type: "date"
|
|
2816
|
-
|
|
2795
|
+
var onChange = props.onChange,
|
|
2796
|
+
options = props.options,
|
|
2797
|
+
registry = props.registry;
|
|
2798
|
+
var BaseInputTemplate = getTemplate("BaseInputTemplate", registry, options);
|
|
2799
|
+
var handleChange = useCallback(function (value) {
|
|
2800
|
+
return onChange(value || undefined);
|
|
2801
|
+
}, [onChange]);
|
|
2802
|
+
return /*#__PURE__*/React.createElement(BaseInputTemplate, _extends({
|
|
2803
|
+
type: "date"
|
|
2804
|
+
}, props, {
|
|
2817
2805
|
onChange: handleChange
|
|
2818
|
-
});
|
|
2806
|
+
}));
|
|
2819
2807
|
}
|
|
2820
2808
|
|
|
2821
2809
|
/** The `DateTimeWidget` component uses the `BaseInputTemplate` changing the type to `datetime-local` and transforms
|
|
@@ -2824,19 +2812,19 @@ function DateWidget(props) {
|
|
|
2824
2812
|
* @param props - The `WidgetProps` for this component
|
|
2825
2813
|
*/
|
|
2826
2814
|
function DateTimeWidget(props) {
|
|
2827
|
-
|
|
2828
|
-
|
|
2829
|
-
|
|
2830
|
-
|
|
2831
|
-
|
|
2832
|
-
|
|
2833
|
-
|
|
2834
|
-
|
|
2835
|
-
type: "datetime-local",
|
|
2836
|
-
...props,
|
|
2815
|
+
var _onChange = props.onChange,
|
|
2816
|
+
value = props.value,
|
|
2817
|
+
options = props.options,
|
|
2818
|
+
registry = props.registry;
|
|
2819
|
+
var BaseInputTemplate = getTemplate("BaseInputTemplate", registry, options);
|
|
2820
|
+
return /*#__PURE__*/React.createElement(BaseInputTemplate, _extends({
|
|
2821
|
+
type: "datetime-local"
|
|
2822
|
+
}, props, {
|
|
2837
2823
|
value: utcToLocal(value),
|
|
2838
|
-
onChange:
|
|
2839
|
-
|
|
2824
|
+
onChange: function onChange(value) {
|
|
2825
|
+
return _onChange(localToUTC(value));
|
|
2826
|
+
}
|
|
2827
|
+
}));
|
|
2840
2828
|
}
|
|
2841
2829
|
|
|
2842
2830
|
/** The `EmailWidget` component uses the `BaseInputTemplate` changing the type to `email`.
|
|
@@ -2844,47 +2832,42 @@ function DateTimeWidget(props) {
|
|
|
2844
2832
|
* @param props - The `WidgetProps` for this component
|
|
2845
2833
|
*/
|
|
2846
2834
|
function EmailWidget(props) {
|
|
2847
|
-
|
|
2848
|
-
|
|
2849
|
-
|
|
2850
|
-
|
|
2851
|
-
|
|
2852
|
-
|
|
2853
|
-
type: "email",
|
|
2854
|
-
...props
|
|
2855
|
-
});
|
|
2835
|
+
var options = props.options,
|
|
2836
|
+
registry = props.registry;
|
|
2837
|
+
var BaseInputTemplate = getTemplate("BaseInputTemplate", registry, options);
|
|
2838
|
+
return /*#__PURE__*/React.createElement(BaseInputTemplate, _extends({
|
|
2839
|
+
type: "email"
|
|
2840
|
+
}, props));
|
|
2856
2841
|
}
|
|
2857
2842
|
|
|
2858
2843
|
function addNameToDataURL(dataURL, name) {
|
|
2859
2844
|
if (dataURL === null) {
|
|
2860
2845
|
return null;
|
|
2861
2846
|
}
|
|
2862
|
-
return dataURL.replace(";base64",
|
|
2847
|
+
return dataURL.replace(";base64", ";name=" + encodeURIComponent(name) + ";base64");
|
|
2863
2848
|
}
|
|
2864
2849
|
function processFile(file) {
|
|
2865
|
-
|
|
2866
|
-
|
|
2867
|
-
|
|
2868
|
-
|
|
2869
|
-
|
|
2870
|
-
return new Promise((resolve, reject) => {
|
|
2871
|
-
const reader = new window.FileReader();
|
|
2850
|
+
var name = file.name,
|
|
2851
|
+
size = file.size,
|
|
2852
|
+
type = file.type;
|
|
2853
|
+
return new Promise(function (resolve, reject) {
|
|
2854
|
+
var reader = new window.FileReader();
|
|
2872
2855
|
reader.onerror = reject;
|
|
2873
|
-
reader.onload = event
|
|
2856
|
+
reader.onload = function (event) {
|
|
2874
2857
|
var _event$target;
|
|
2875
2858
|
if (typeof ((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.result) === "string") {
|
|
2876
2859
|
resolve({
|
|
2877
2860
|
dataURL: addNameToDataURL(event.target.result, name),
|
|
2878
|
-
name,
|
|
2879
|
-
size,
|
|
2880
|
-
type
|
|
2861
|
+
name: name,
|
|
2862
|
+
size: size,
|
|
2863
|
+
type: type
|
|
2881
2864
|
});
|
|
2882
2865
|
} else {
|
|
2883
2866
|
resolve({
|
|
2884
2867
|
dataURL: null,
|
|
2885
|
-
name,
|
|
2886
|
-
size,
|
|
2887
|
-
type
|
|
2868
|
+
name: name,
|
|
2869
|
+
size: size,
|
|
2870
|
+
type: type
|
|
2888
2871
|
});
|
|
2889
2872
|
}
|
|
2890
2873
|
};
|
|
@@ -2895,31 +2878,28 @@ function processFiles(files) {
|
|
|
2895
2878
|
return Promise.all(Array.from(files).map(processFile));
|
|
2896
2879
|
}
|
|
2897
2880
|
function FilesInfo(_ref) {
|
|
2898
|
-
|
|
2899
|
-
filesInfo
|
|
2900
|
-
} = _ref;
|
|
2881
|
+
var filesInfo = _ref.filesInfo;
|
|
2901
2882
|
if (filesInfo.length === 0) {
|
|
2902
2883
|
return null;
|
|
2903
2884
|
}
|
|
2904
2885
|
return /*#__PURE__*/React.createElement("ul", {
|
|
2905
2886
|
className: "file-info"
|
|
2906
|
-
}, filesInfo.map((fileInfo, key)
|
|
2907
|
-
|
|
2908
|
-
|
|
2909
|
-
|
|
2910
|
-
type
|
|
2911
|
-
} = fileInfo;
|
|
2887
|
+
}, filesInfo.map(function (fileInfo, key) {
|
|
2888
|
+
var name = fileInfo.name,
|
|
2889
|
+
size = fileInfo.size,
|
|
2890
|
+
type = fileInfo.type;
|
|
2912
2891
|
return /*#__PURE__*/React.createElement("li", {
|
|
2913
2892
|
key: key
|
|
2914
2893
|
}, /*#__PURE__*/React.createElement("strong", null, name), " (", type, ", ", size, " bytes)");
|
|
2915
2894
|
}));
|
|
2916
2895
|
}
|
|
2917
2896
|
function extractFileInfo(dataURLs) {
|
|
2918
|
-
return dataURLs.filter(
|
|
2919
|
-
|
|
2920
|
-
|
|
2921
|
-
|
|
2922
|
-
|
|
2897
|
+
return dataURLs.filter(function (dataURL) {
|
|
2898
|
+
return typeof dataURL !== "undefined";
|
|
2899
|
+
}).map(function (dataURL) {
|
|
2900
|
+
var _dataURItoBlob = dataURItoBlob(dataURL),
|
|
2901
|
+
blob = _dataURItoBlob.blob,
|
|
2902
|
+
name = _dataURItoBlob.name;
|
|
2923
2903
|
return {
|
|
2924
2904
|
name: name,
|
|
2925
2905
|
size: blob.size,
|
|
@@ -2932,25 +2912,30 @@ function extractFileInfo(dataURLs) {
|
|
|
2932
2912
|
* It is typically used with a string property with data-url format.
|
|
2933
2913
|
*/
|
|
2934
2914
|
function FileWidget(_ref2) {
|
|
2935
|
-
|
|
2936
|
-
|
|
2937
|
-
|
|
2938
|
-
|
|
2939
|
-
|
|
2940
|
-
|
|
2941
|
-
|
|
2942
|
-
autofocus = false,
|
|
2943
|
-
options
|
|
2944
|
-
|
|
2945
|
-
|
|
2946
|
-
|
|
2947
|
-
|
|
2915
|
+
var multiple = _ref2.multiple,
|
|
2916
|
+
id = _ref2.id,
|
|
2917
|
+
readonly = _ref2.readonly,
|
|
2918
|
+
disabled = _ref2.disabled,
|
|
2919
|
+
onChange = _ref2.onChange,
|
|
2920
|
+
value = _ref2.value,
|
|
2921
|
+
_ref2$autofocus = _ref2.autofocus,
|
|
2922
|
+
autofocus = _ref2$autofocus === void 0 ? false : _ref2$autofocus,
|
|
2923
|
+
options = _ref2.options;
|
|
2924
|
+
var extractedFilesInfo = useMemo(function () {
|
|
2925
|
+
return Array.isArray(value) ? extractFileInfo(value) : extractFileInfo([value]);
|
|
2926
|
+
}, [value]);
|
|
2927
|
+
var _useState = useState(extractedFilesInfo),
|
|
2928
|
+
filesInfo = _useState[0],
|
|
2929
|
+
setFilesInfo = _useState[1];
|
|
2930
|
+
var handleChange = useCallback(function (event) {
|
|
2948
2931
|
if (!event.target.files) {
|
|
2949
2932
|
return;
|
|
2950
2933
|
}
|
|
2951
|
-
processFiles(event.target.files).then(filesInfoEvent
|
|
2934
|
+
processFiles(event.target.files).then(function (filesInfoEvent) {
|
|
2952
2935
|
setFilesInfo(filesInfoEvent);
|
|
2953
|
-
|
|
2936
|
+
var newValue = filesInfoEvent.map(function (fileInfo) {
|
|
2937
|
+
return fileInfo.dataURL;
|
|
2938
|
+
});
|
|
2954
2939
|
if (multiple) {
|
|
2955
2940
|
onChange(newValue);
|
|
2956
2941
|
} else {
|
|
@@ -2979,10 +2964,8 @@ function FileWidget(_ref2) {
|
|
|
2979
2964
|
* @param props - The `WidgetProps` for this component
|
|
2980
2965
|
*/
|
|
2981
2966
|
function HiddenWidget(_ref) {
|
|
2982
|
-
|
|
2983
|
-
|
|
2984
|
-
value
|
|
2985
|
-
} = _ref;
|
|
2967
|
+
var id = _ref.id,
|
|
2968
|
+
value = _ref.value;
|
|
2986
2969
|
return /*#__PURE__*/React.createElement("input", {
|
|
2987
2970
|
type: "hidden",
|
|
2988
2971
|
id: id,
|
|
@@ -2996,15 +2979,12 @@ function HiddenWidget(_ref) {
|
|
|
2996
2979
|
* @param props - The `WidgetProps` for this component
|
|
2997
2980
|
*/
|
|
2998
2981
|
function PasswordWidget(props) {
|
|
2999
|
-
|
|
3000
|
-
|
|
3001
|
-
|
|
3002
|
-
|
|
3003
|
-
|
|
3004
|
-
|
|
3005
|
-
type: "password",
|
|
3006
|
-
...props
|
|
3007
|
-
});
|
|
2982
|
+
var options = props.options,
|
|
2983
|
+
registry = props.registry;
|
|
2984
|
+
var BaseInputTemplate = getTemplate("BaseInputTemplate", registry, options);
|
|
2985
|
+
return /*#__PURE__*/React.createElement(BaseInputTemplate, _extends({
|
|
2986
|
+
type: "password"
|
|
2987
|
+
}, props));
|
|
3008
2988
|
}
|
|
3009
2989
|
|
|
3010
2990
|
/** The `RadioWidget` is a widget for rendering a radio group.
|
|
@@ -3013,40 +2993,43 @@ function PasswordWidget(props) {
|
|
|
3013
2993
|
* @param props - The `WidgetProps` for this component
|
|
3014
2994
|
*/
|
|
3015
2995
|
function RadioWidget(_ref) {
|
|
3016
|
-
|
|
3017
|
-
|
|
3018
|
-
|
|
3019
|
-
|
|
3020
|
-
|
|
3021
|
-
|
|
3022
|
-
autofocus = false,
|
|
3023
|
-
onBlur,
|
|
3024
|
-
onFocus,
|
|
3025
|
-
onChange,
|
|
3026
|
-
id
|
|
3027
|
-
} = _ref;
|
|
2996
|
+
var options = _ref.options,
|
|
2997
|
+
value = _ref.value,
|
|
2998
|
+
required = _ref.required,
|
|
2999
|
+
disabled = _ref.disabled,
|
|
3000
|
+
readonly = _ref.readonly,
|
|
3001
|
+
_ref$autofocus = _ref.autofocus,
|
|
3002
|
+
autofocus = _ref$autofocus === void 0 ? false : _ref$autofocus,
|
|
3003
|
+
onBlur = _ref.onBlur,
|
|
3004
|
+
onFocus = _ref.onFocus,
|
|
3005
|
+
onChange = _ref.onChange,
|
|
3006
|
+
id = _ref.id;
|
|
3028
3007
|
// Generating a unique field name to identify this set of radio buttons
|
|
3029
|
-
|
|
3030
|
-
|
|
3031
|
-
|
|
3032
|
-
|
|
3033
|
-
inline
|
|
3034
|
-
} = options;
|
|
3008
|
+
var name = Math.random().toString();
|
|
3009
|
+
var enumOptions = options.enumOptions,
|
|
3010
|
+
enumDisabled = options.enumDisabled,
|
|
3011
|
+
inline = options.inline;
|
|
3035
3012
|
// checked={checked} has been moved above name={name}, As mentioned in #349;
|
|
3036
3013
|
// this is a temporary fix for radio button rendering bug in React, facebook/react#7630.
|
|
3037
|
-
|
|
3038
|
-
|
|
3014
|
+
var handleBlur = useCallback(function (event) {
|
|
3015
|
+
return onBlur(id, event.target.value);
|
|
3016
|
+
}, [onBlur, id]);
|
|
3017
|
+
var handleFocus = useCallback(function (event) {
|
|
3018
|
+
return onFocus(id, event.target.value);
|
|
3019
|
+
}, [onFocus, id]);
|
|
3039
3020
|
return /*#__PURE__*/React.createElement("div", {
|
|
3040
3021
|
className: "field-radio-group",
|
|
3041
3022
|
id: id
|
|
3042
|
-
}, Array.isArray(enumOptions) && enumOptions.map((option, i)
|
|
3043
|
-
|
|
3044
|
-
|
|
3045
|
-
|
|
3046
|
-
|
|
3047
|
-
|
|
3023
|
+
}, Array.isArray(enumOptions) && enumOptions.map(function (option, i) {
|
|
3024
|
+
var checked = option.value === value;
|
|
3025
|
+
var itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) != -1;
|
|
3026
|
+
var disabledCls = disabled || itemDisabled || readonly ? "disabled" : "";
|
|
3027
|
+
var handleChange = function handleChange() {
|
|
3028
|
+
return onChange(option.value);
|
|
3029
|
+
};
|
|
3030
|
+
var radio = /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("input", {
|
|
3048
3031
|
type: "radio",
|
|
3049
|
-
id:
|
|
3032
|
+
id: id + "-" + option.value,
|
|
3050
3033
|
checked: checked,
|
|
3051
3034
|
name: name,
|
|
3052
3035
|
required: required,
|
|
@@ -3059,10 +3042,10 @@ function RadioWidget(_ref) {
|
|
|
3059
3042
|
}), /*#__PURE__*/React.createElement("span", null, option.label));
|
|
3060
3043
|
return inline ? /*#__PURE__*/React.createElement("label", {
|
|
3061
3044
|
key: option.value,
|
|
3062
|
-
className:
|
|
3045
|
+
className: "radio-inline " + disabledCls
|
|
3063
3046
|
}, radio) : /*#__PURE__*/React.createElement("div", {
|
|
3064
3047
|
key: option.value,
|
|
3065
|
-
className:
|
|
3048
|
+
className: "radio " + disabledCls
|
|
3066
3049
|
}, /*#__PURE__*/React.createElement("label", null, radio));
|
|
3067
3050
|
}));
|
|
3068
3051
|
}
|
|
@@ -3073,27 +3056,24 @@ function RadioWidget(_ref) {
|
|
|
3073
3056
|
* @param props - The `WidgetProps` for this component
|
|
3074
3057
|
*/
|
|
3075
3058
|
function RangeWidget(props) {
|
|
3076
|
-
|
|
3077
|
-
|
|
3078
|
-
registry: {
|
|
3079
|
-
templates: {
|
|
3080
|
-
BaseInputTemplate
|
|
3081
|
-
}
|
|
3082
|
-
}
|
|
3083
|
-
} = props;
|
|
3059
|
+
var value = props.value,
|
|
3060
|
+
BaseInputTemplate = props.registry.templates.BaseInputTemplate;
|
|
3084
3061
|
return /*#__PURE__*/React.createElement("div", {
|
|
3085
3062
|
className: "field-range-wrapper"
|
|
3086
|
-
}, /*#__PURE__*/React.createElement(BaseInputTemplate, {
|
|
3087
|
-
type: "range"
|
|
3088
|
-
|
|
3089
|
-
}), /*#__PURE__*/React.createElement("span", {
|
|
3063
|
+
}, /*#__PURE__*/React.createElement(BaseInputTemplate, _extends({
|
|
3064
|
+
type: "range"
|
|
3065
|
+
}, props)), /*#__PURE__*/React.createElement("span", {
|
|
3090
3066
|
className: "range-view"
|
|
3091
3067
|
}, value));
|
|
3092
3068
|
}
|
|
3093
3069
|
|
|
3094
3070
|
function getValue(event, multiple) {
|
|
3095
3071
|
if (multiple) {
|
|
3096
|
-
return Array.from(event.target.options).slice().filter(
|
|
3072
|
+
return Array.from(event.target.options).slice().filter(function (o) {
|
|
3073
|
+
return o.selected;
|
|
3074
|
+
}).map(function (o) {
|
|
3075
|
+
return o.value;
|
|
3076
|
+
});
|
|
3097
3077
|
}
|
|
3098
3078
|
return event.target.value;
|
|
3099
3079
|
}
|
|
@@ -3103,36 +3083,34 @@ function getValue(event, multiple) {
|
|
|
3103
3083
|
* @param props - The `WidgetProps` for this component
|
|
3104
3084
|
*/
|
|
3105
3085
|
function SelectWidget(_ref) {
|
|
3106
|
-
|
|
3107
|
-
|
|
3108
|
-
|
|
3109
|
-
|
|
3110
|
-
|
|
3111
|
-
|
|
3112
|
-
|
|
3113
|
-
|
|
3114
|
-
multiple = false,
|
|
3115
|
-
autofocus =
|
|
3116
|
-
|
|
3117
|
-
|
|
3118
|
-
|
|
3119
|
-
|
|
3120
|
-
|
|
3121
|
-
|
|
3122
|
-
|
|
3123
|
-
|
|
3124
|
-
|
|
3125
|
-
|
|
3126
|
-
const handleFocus = useCallback(event => {
|
|
3127
|
-
const newValue = getValue(event, multiple);
|
|
3086
|
+
var schema = _ref.schema,
|
|
3087
|
+
id = _ref.id,
|
|
3088
|
+
options = _ref.options,
|
|
3089
|
+
value = _ref.value,
|
|
3090
|
+
required = _ref.required,
|
|
3091
|
+
disabled = _ref.disabled,
|
|
3092
|
+
readonly = _ref.readonly,
|
|
3093
|
+
_ref$multiple = _ref.multiple,
|
|
3094
|
+
multiple = _ref$multiple === void 0 ? false : _ref$multiple,
|
|
3095
|
+
_ref$autofocus = _ref.autofocus,
|
|
3096
|
+
autofocus = _ref$autofocus === void 0 ? false : _ref$autofocus,
|
|
3097
|
+
onChange = _ref.onChange,
|
|
3098
|
+
onBlur = _ref.onBlur,
|
|
3099
|
+
onFocus = _ref.onFocus,
|
|
3100
|
+
placeholder = _ref.placeholder;
|
|
3101
|
+
var enumOptions = options.enumOptions,
|
|
3102
|
+
enumDisabled = options.enumDisabled;
|
|
3103
|
+
var emptyValue = multiple ? [] : "";
|
|
3104
|
+
var handleFocus = useCallback(function (event) {
|
|
3105
|
+
var newValue = getValue(event, multiple);
|
|
3128
3106
|
return onFocus(id, processSelectValue(schema, newValue, options));
|
|
3129
3107
|
}, [onFocus, id, schema, multiple, options]);
|
|
3130
|
-
|
|
3131
|
-
|
|
3108
|
+
var handleBlur = useCallback(function (event) {
|
|
3109
|
+
var newValue = getValue(event, multiple);
|
|
3132
3110
|
return onBlur(id, processSelectValue(schema, newValue, options));
|
|
3133
3111
|
}, [onBlur, id, schema, multiple, options]);
|
|
3134
|
-
|
|
3135
|
-
|
|
3112
|
+
var handleChange = useCallback(function (event) {
|
|
3113
|
+
var newValue = getValue(event, multiple);
|
|
3136
3114
|
return onChange(processSelectValue(schema, newValue, options));
|
|
3137
3115
|
}, [onChange, schema, multiple, options]);
|
|
3138
3116
|
return /*#__PURE__*/React.createElement("select", {
|
|
@@ -3147,14 +3125,12 @@ function SelectWidget(_ref) {
|
|
|
3147
3125
|
onBlur: handleBlur,
|
|
3148
3126
|
onFocus: handleFocus,
|
|
3149
3127
|
onChange: handleChange
|
|
3150
|
-
}, !multiple && schema
|
|
3128
|
+
}, !multiple && schema["default"] === undefined && /*#__PURE__*/React.createElement("option", {
|
|
3151
3129
|
value: ""
|
|
3152
|
-
}, placeholder), Array.isArray(enumOptions) && enumOptions.map((_ref2, i)
|
|
3153
|
-
|
|
3154
|
-
|
|
3155
|
-
|
|
3156
|
-
} = _ref2;
|
|
3157
|
-
const disabled = enumDisabled && enumDisabled.indexOf(value) != -1;
|
|
3130
|
+
}, placeholder), Array.isArray(enumOptions) && enumOptions.map(function (_ref2, i) {
|
|
3131
|
+
var value = _ref2.value,
|
|
3132
|
+
label = _ref2.label;
|
|
3133
|
+
var disabled = enumDisabled && enumDisabled.indexOf(value) != -1;
|
|
3158
3134
|
return /*#__PURE__*/React.createElement("option", {
|
|
3159
3135
|
key: i,
|
|
3160
3136
|
value: value,
|
|
@@ -3168,41 +3144,29 @@ function SelectWidget(_ref) {
|
|
|
3168
3144
|
* @param props - The `WidgetProps` for this component
|
|
3169
3145
|
*/
|
|
3170
3146
|
function TextareaWidget(_ref) {
|
|
3171
|
-
|
|
3172
|
-
|
|
3173
|
-
options = {},
|
|
3174
|
-
placeholder,
|
|
3175
|
-
value,
|
|
3176
|
-
required,
|
|
3177
|
-
disabled,
|
|
3178
|
-
readonly,
|
|
3179
|
-
autofocus =
|
|
3180
|
-
|
|
3181
|
-
|
|
3182
|
-
|
|
3183
|
-
|
|
3184
|
-
|
|
3185
|
-
|
|
3186
|
-
target: {
|
|
3187
|
-
value
|
|
3188
|
-
}
|
|
3189
|
-
} = _ref2;
|
|
3147
|
+
var id = _ref.id,
|
|
3148
|
+
_ref$options = _ref.options,
|
|
3149
|
+
options = _ref$options === void 0 ? {} : _ref$options,
|
|
3150
|
+
placeholder = _ref.placeholder,
|
|
3151
|
+
value = _ref.value,
|
|
3152
|
+
required = _ref.required,
|
|
3153
|
+
disabled = _ref.disabled,
|
|
3154
|
+
readonly = _ref.readonly,
|
|
3155
|
+
_ref$autofocus = _ref.autofocus,
|
|
3156
|
+
autofocus = _ref$autofocus === void 0 ? false : _ref$autofocus,
|
|
3157
|
+
onChange = _ref.onChange,
|
|
3158
|
+
onBlur = _ref.onBlur,
|
|
3159
|
+
onFocus = _ref.onFocus;
|
|
3160
|
+
var handleChange = useCallback(function (_ref2) {
|
|
3161
|
+
var value = _ref2.target.value;
|
|
3190
3162
|
return onChange(value === "" ? options.emptyValue : value);
|
|
3191
3163
|
}, [onChange, options.emptyValue]);
|
|
3192
|
-
|
|
3193
|
-
|
|
3194
|
-
target: {
|
|
3195
|
-
value
|
|
3196
|
-
}
|
|
3197
|
-
} = _ref3;
|
|
3164
|
+
var handleBlur = useCallback(function (_ref3) {
|
|
3165
|
+
var value = _ref3.target.value;
|
|
3198
3166
|
return onBlur(id, value);
|
|
3199
3167
|
}, [onBlur, id]);
|
|
3200
|
-
|
|
3201
|
-
|
|
3202
|
-
target: {
|
|
3203
|
-
value
|
|
3204
|
-
}
|
|
3205
|
-
} = _ref4;
|
|
3168
|
+
var handleFocus = useCallback(function (_ref4) {
|
|
3169
|
+
var value = _ref4.target.value;
|
|
3206
3170
|
return onFocus(id, value);
|
|
3207
3171
|
}, [id, onFocus]);
|
|
3208
3172
|
return /*#__PURE__*/React.createElement("textarea", {
|
|
@@ -3231,14 +3195,10 @@ TextareaWidget.defaultProps = {
|
|
|
3231
3195
|
* @param props - The `WidgetProps` for this component
|
|
3232
3196
|
*/
|
|
3233
3197
|
function TextWidget(props) {
|
|
3234
|
-
|
|
3235
|
-
|
|
3236
|
-
|
|
3237
|
-
}
|
|
3238
|
-
const BaseInputTemplate = getTemplate("BaseInputTemplate", registry, options);
|
|
3239
|
-
return /*#__PURE__*/React.createElement(BaseInputTemplate, {
|
|
3240
|
-
...props
|
|
3241
|
-
});
|
|
3198
|
+
var options = props.options,
|
|
3199
|
+
registry = props.registry;
|
|
3200
|
+
var BaseInputTemplate = getTemplate("BaseInputTemplate", registry, options);
|
|
3201
|
+
return /*#__PURE__*/React.createElement(BaseInputTemplate, _extends({}, props));
|
|
3242
3202
|
}
|
|
3243
3203
|
|
|
3244
3204
|
/** The `URLWidget` component uses the `BaseInputTemplate` changing the type to `url`.
|
|
@@ -3246,15 +3206,12 @@ function TextWidget(props) {
|
|
|
3246
3206
|
* @param props - The `WidgetProps` for this component
|
|
3247
3207
|
*/
|
|
3248
3208
|
function URLWidget(props) {
|
|
3249
|
-
|
|
3250
|
-
|
|
3251
|
-
|
|
3252
|
-
|
|
3253
|
-
|
|
3254
|
-
|
|
3255
|
-
type: "url",
|
|
3256
|
-
...props
|
|
3257
|
-
});
|
|
3209
|
+
var options = props.options,
|
|
3210
|
+
registry = props.registry;
|
|
3211
|
+
var BaseInputTemplate = getTemplate("BaseInputTemplate", registry, options);
|
|
3212
|
+
return /*#__PURE__*/React.createElement(BaseInputTemplate, _extends({
|
|
3213
|
+
type: "url"
|
|
3214
|
+
}, props));
|
|
3258
3215
|
}
|
|
3259
3216
|
|
|
3260
3217
|
/** The `UpDownWidget` component uses the `BaseInputTemplate` changing the type to `number`.
|
|
@@ -3262,37 +3219,34 @@ function URLWidget(props) {
|
|
|
3262
3219
|
* @param props - The `WidgetProps` for this component
|
|
3263
3220
|
*/
|
|
3264
3221
|
function UpDownWidget(props) {
|
|
3265
|
-
|
|
3266
|
-
|
|
3267
|
-
|
|
3268
|
-
|
|
3269
|
-
|
|
3270
|
-
|
|
3271
|
-
type: "number",
|
|
3272
|
-
...props
|
|
3273
|
-
});
|
|
3222
|
+
var options = props.options,
|
|
3223
|
+
registry = props.registry;
|
|
3224
|
+
var BaseInputTemplate = getTemplate("BaseInputTemplate", registry, options);
|
|
3225
|
+
return /*#__PURE__*/React.createElement(BaseInputTemplate, _extends({
|
|
3226
|
+
type: "number"
|
|
3227
|
+
}, props));
|
|
3274
3228
|
}
|
|
3275
3229
|
|
|
3276
3230
|
function widgets() {
|
|
3277
3231
|
return {
|
|
3278
|
-
PasswordWidget,
|
|
3279
|
-
RadioWidget,
|
|
3280
|
-
UpDownWidget,
|
|
3281
|
-
RangeWidget,
|
|
3282
|
-
SelectWidget,
|
|
3283
|
-
TextWidget,
|
|
3284
|
-
DateWidget,
|
|
3285
|
-
DateTimeWidget,
|
|
3286
|
-
AltDateWidget,
|
|
3287
|
-
AltDateTimeWidget,
|
|
3288
|
-
EmailWidget,
|
|
3289
|
-
URLWidget,
|
|
3290
|
-
TextareaWidget,
|
|
3291
|
-
HiddenWidget,
|
|
3292
|
-
ColorWidget,
|
|
3293
|
-
FileWidget,
|
|
3294
|
-
CheckboxWidget,
|
|
3295
|
-
CheckboxesWidget
|
|
3232
|
+
PasswordWidget: PasswordWidget,
|
|
3233
|
+
RadioWidget: RadioWidget,
|
|
3234
|
+
UpDownWidget: UpDownWidget,
|
|
3235
|
+
RangeWidget: RangeWidget,
|
|
3236
|
+
SelectWidget: SelectWidget,
|
|
3237
|
+
TextWidget: TextWidget,
|
|
3238
|
+
DateWidget: DateWidget,
|
|
3239
|
+
DateTimeWidget: DateTimeWidget,
|
|
3240
|
+
AltDateWidget: AltDateWidget,
|
|
3241
|
+
AltDateTimeWidget: AltDateTimeWidget,
|
|
3242
|
+
EmailWidget: EmailWidget,
|
|
3243
|
+
URLWidget: URLWidget,
|
|
3244
|
+
TextareaWidget: TextareaWidget,
|
|
3245
|
+
HiddenWidget: HiddenWidget,
|
|
3246
|
+
ColorWidget: ColorWidget,
|
|
3247
|
+
FileWidget: FileWidget,
|
|
3248
|
+
CheckboxWidget: CheckboxWidget,
|
|
3249
|
+
CheckboxesWidget: CheckboxesWidget
|
|
3296
3250
|
};
|
|
3297
3251
|
}
|
|
3298
3252
|
|
|
@@ -3311,7 +3265,8 @@ function getDefaultRegistry() {
|
|
|
3311
3265
|
}
|
|
3312
3266
|
|
|
3313
3267
|
/** The `Form` component renders the outer form and all the fields defined in the `schema` */
|
|
3314
|
-
|
|
3268
|
+
var Form = /*#__PURE__*/function (_Component) {
|
|
3269
|
+
_inheritsLoose(Form, _Component);
|
|
3315
3270
|
/** The ref used to hold the `form` element, this needs to be `any` because `tagName` or `_internalFormWrapper` can
|
|
3316
3271
|
* provide any possible type here
|
|
3317
3272
|
*/
|
|
@@ -3322,32 +3277,37 @@ class Form extends Component {
|
|
|
3322
3277
|
*
|
|
3323
3278
|
* @param props - The initial props for the `Form`
|
|
3324
3279
|
*/
|
|
3325
|
-
|
|
3326
|
-
|
|
3327
|
-
|
|
3328
|
-
|
|
3280
|
+
function Form(props) {
|
|
3281
|
+
var _this;
|
|
3282
|
+
_this = _Component.call(this, props) || this;
|
|
3283
|
+
_this.formElement = void 0;
|
|
3284
|
+
_this.getUsedFormData = function (formData, fields) {
|
|
3329
3285
|
// For the case of a single input form
|
|
3330
3286
|
if (fields.length === 0 && typeof formData !== "object") {
|
|
3331
3287
|
return formData;
|
|
3332
3288
|
}
|
|
3333
3289
|
// _pick has incorrect type definition, it works with string[][], because lodash/hasIn supports it
|
|
3334
|
-
|
|
3290
|
+
var data = _pick(formData, fields);
|
|
3335
3291
|
if (Array.isArray(formData)) {
|
|
3336
|
-
return Object.keys(data).map(
|
|
3292
|
+
return Object.keys(data).map(function (key) {
|
|
3293
|
+
return data[key];
|
|
3294
|
+
});
|
|
3337
3295
|
}
|
|
3338
3296
|
return data;
|
|
3339
3297
|
};
|
|
3340
|
-
|
|
3341
|
-
|
|
3298
|
+
_this.getFieldNames = function (pathSchema, formData) {
|
|
3299
|
+
var getAllPaths = function getAllPaths(_obj, acc, paths) {
|
|
3342
3300
|
if (acc === void 0) {
|
|
3343
3301
|
acc = [];
|
|
3344
3302
|
}
|
|
3345
3303
|
if (paths === void 0) {
|
|
3346
3304
|
paths = [[]];
|
|
3347
3305
|
}
|
|
3348
|
-
Object.keys(_obj).forEach(key
|
|
3306
|
+
Object.keys(_obj).forEach(function (key) {
|
|
3349
3307
|
if (typeof _obj[key] === "object") {
|
|
3350
|
-
|
|
3308
|
+
var newPaths = paths.map(function (path) {
|
|
3309
|
+
return [].concat(path, [key]);
|
|
3310
|
+
});
|
|
3351
3311
|
// If an object is marked with additionalProperties, all its keys are valid
|
|
3352
3312
|
if (_obj[key][RJSF_ADDITONAL_PROPERTIES_FLAG] && _obj[key][NAME_KEY] !== "") {
|
|
3353
3313
|
acc.push(_obj[key][NAME_KEY]);
|
|
@@ -3355,8 +3315,8 @@ class Form extends Component {
|
|
|
3355
3315
|
getAllPaths(_obj[key], acc, newPaths);
|
|
3356
3316
|
}
|
|
3357
3317
|
} else if (key === NAME_KEY && _obj[key] !== "") {
|
|
3358
|
-
paths.forEach(path
|
|
3359
|
-
|
|
3318
|
+
paths.forEach(function (path) {
|
|
3319
|
+
var formValue = get(formData, path);
|
|
3360
3320
|
// adds path to fieldNames if it points to a value
|
|
3361
3321
|
// or an empty object/array
|
|
3362
3322
|
if (typeof formValue !== "object" || _isEmpty(formValue)) {
|
|
@@ -3369,128 +3329,116 @@ class Form extends Component {
|
|
|
3369
3329
|
};
|
|
3370
3330
|
return getAllPaths(pathSchema);
|
|
3371
3331
|
};
|
|
3372
|
-
|
|
3373
|
-
|
|
3374
|
-
extraErrors,
|
|
3375
|
-
omitExtraData,
|
|
3376
|
-
liveOmit,
|
|
3377
|
-
noValidate,
|
|
3378
|
-
liveValidate,
|
|
3379
|
-
onChange
|
|
3380
|
-
|
|
3381
|
-
|
|
3382
|
-
|
|
3383
|
-
schema
|
|
3384
|
-
} = this.state;
|
|
3332
|
+
_this.onChange = function (formData, newErrorSchema, id) {
|
|
3333
|
+
var _this$props = _this.props,
|
|
3334
|
+
extraErrors = _this$props.extraErrors,
|
|
3335
|
+
omitExtraData = _this$props.omitExtraData,
|
|
3336
|
+
liveOmit = _this$props.liveOmit,
|
|
3337
|
+
noValidate = _this$props.noValidate,
|
|
3338
|
+
liveValidate = _this$props.liveValidate,
|
|
3339
|
+
onChange = _this$props.onChange;
|
|
3340
|
+
var _this$state = _this.state,
|
|
3341
|
+
schemaUtils = _this$state.schemaUtils,
|
|
3342
|
+
schema = _this$state.schema;
|
|
3385
3343
|
if (isObject$1(formData) || Array.isArray(formData)) {
|
|
3386
|
-
|
|
3344
|
+
var newState = _this.getStateFromProps(_this.props, formData);
|
|
3387
3345
|
formData = newState.formData;
|
|
3388
3346
|
}
|
|
3389
|
-
|
|
3390
|
-
|
|
3391
|
-
formData,
|
|
3392
|
-
schema
|
|
3347
|
+
var mustValidate = !noValidate && liveValidate;
|
|
3348
|
+
var state = {
|
|
3349
|
+
formData: formData,
|
|
3350
|
+
schema: schema
|
|
3393
3351
|
};
|
|
3394
|
-
|
|
3352
|
+
var newFormData = formData;
|
|
3395
3353
|
if (omitExtraData === true && liveOmit === true) {
|
|
3396
|
-
|
|
3397
|
-
|
|
3398
|
-
|
|
3399
|
-
newFormData =
|
|
3354
|
+
var retrievedSchema = schemaUtils.retrieveSchema(schema, formData);
|
|
3355
|
+
var pathSchema = schemaUtils.toPathSchema(retrievedSchema, "", formData);
|
|
3356
|
+
var fieldNames = _this.getFieldNames(pathSchema, formData);
|
|
3357
|
+
newFormData = _this.getUsedFormData(formData, fieldNames);
|
|
3400
3358
|
state = {
|
|
3401
3359
|
formData: newFormData
|
|
3402
3360
|
};
|
|
3403
3361
|
}
|
|
3404
3362
|
if (mustValidate) {
|
|
3405
|
-
|
|
3406
|
-
|
|
3407
|
-
|
|
3408
|
-
|
|
3409
|
-
|
|
3363
|
+
var schemaValidation = _this.validate(newFormData);
|
|
3364
|
+
var errors = schemaValidation.errors;
|
|
3365
|
+
var errorSchema = schemaValidation.errorSchema;
|
|
3366
|
+
var schemaValidationErrors = errors;
|
|
3367
|
+
var schemaValidationErrorSchema = errorSchema;
|
|
3410
3368
|
if (extraErrors) {
|
|
3411
|
-
|
|
3369
|
+
var merged = schemaUtils.mergeValidationData(schemaValidation, extraErrors);
|
|
3412
3370
|
errorSchema = merged.errorSchema;
|
|
3413
3371
|
errors = merged.errors;
|
|
3414
3372
|
}
|
|
3415
3373
|
state = {
|
|
3416
3374
|
formData: newFormData,
|
|
3417
|
-
errors,
|
|
3418
|
-
errorSchema,
|
|
3419
|
-
schemaValidationErrors,
|
|
3420
|
-
schemaValidationErrorSchema
|
|
3375
|
+
errors: errors,
|
|
3376
|
+
errorSchema: errorSchema,
|
|
3377
|
+
schemaValidationErrors: schemaValidationErrors,
|
|
3378
|
+
schemaValidationErrorSchema: schemaValidationErrorSchema
|
|
3421
3379
|
};
|
|
3422
3380
|
} else if (!noValidate && newErrorSchema) {
|
|
3423
|
-
|
|
3381
|
+
var _errorSchema = extraErrors ? mergeObjects(newErrorSchema, extraErrors, "preventDuplicates") : newErrorSchema;
|
|
3424
3382
|
state = {
|
|
3425
3383
|
formData: newFormData,
|
|
3426
|
-
errorSchema:
|
|
3427
|
-
errors: schemaUtils.getValidator().toErrorList(
|
|
3384
|
+
errorSchema: _errorSchema,
|
|
3385
|
+
errors: schemaUtils.getValidator().toErrorList(_errorSchema)
|
|
3428
3386
|
};
|
|
3429
3387
|
}
|
|
3430
|
-
|
|
3431
|
-
|
|
3432
|
-
|
|
3433
|
-
}, id));
|
|
3388
|
+
_this.setState(state, function () {
|
|
3389
|
+
return onChange && onChange(_extends({}, _this.state, state), id);
|
|
3390
|
+
});
|
|
3434
3391
|
};
|
|
3435
|
-
|
|
3436
|
-
|
|
3437
|
-
onBlur
|
|
3438
|
-
} = this.props;
|
|
3392
|
+
_this.onBlur = function (id, data) {
|
|
3393
|
+
var onBlur = _this.props.onBlur;
|
|
3439
3394
|
if (onBlur) {
|
|
3440
3395
|
onBlur(id, data);
|
|
3441
3396
|
}
|
|
3442
3397
|
};
|
|
3443
|
-
|
|
3444
|
-
|
|
3445
|
-
onFocus
|
|
3446
|
-
} = this.props;
|
|
3398
|
+
_this.onFocus = function (id, data) {
|
|
3399
|
+
var onFocus = _this.props.onFocus;
|
|
3447
3400
|
if (onFocus) {
|
|
3448
3401
|
onFocus(id, data);
|
|
3449
3402
|
}
|
|
3450
3403
|
};
|
|
3451
|
-
|
|
3404
|
+
_this.onSubmit = function (event) {
|
|
3452
3405
|
event.preventDefault();
|
|
3453
3406
|
if (event.target !== event.currentTarget) {
|
|
3454
3407
|
return;
|
|
3455
3408
|
}
|
|
3456
3409
|
event.persist();
|
|
3457
|
-
|
|
3458
|
-
omitExtraData,
|
|
3459
|
-
extraErrors,
|
|
3460
|
-
noValidate,
|
|
3461
|
-
onSubmit
|
|
3462
|
-
|
|
3463
|
-
|
|
3464
|
-
|
|
3465
|
-
|
|
3466
|
-
const {
|
|
3467
|
-
schema,
|
|
3468
|
-
schemaUtils
|
|
3469
|
-
} = this.state;
|
|
3410
|
+
var _this$props2 = _this.props,
|
|
3411
|
+
omitExtraData = _this$props2.omitExtraData,
|
|
3412
|
+
extraErrors = _this$props2.extraErrors,
|
|
3413
|
+
noValidate = _this$props2.noValidate,
|
|
3414
|
+
onSubmit = _this$props2.onSubmit;
|
|
3415
|
+
var newFormData = _this.state.formData;
|
|
3416
|
+
var _this$state2 = _this.state,
|
|
3417
|
+
schema = _this$state2.schema,
|
|
3418
|
+
schemaUtils = _this$state2.schemaUtils;
|
|
3470
3419
|
if (omitExtraData === true) {
|
|
3471
|
-
|
|
3472
|
-
|
|
3473
|
-
|
|
3474
|
-
newFormData =
|
|
3420
|
+
var retrievedSchema = schemaUtils.retrieveSchema(schema, newFormData);
|
|
3421
|
+
var pathSchema = schemaUtils.toPathSchema(retrievedSchema, "", newFormData);
|
|
3422
|
+
var fieldNames = _this.getFieldNames(pathSchema, newFormData);
|
|
3423
|
+
newFormData = _this.getUsedFormData(newFormData, fieldNames);
|
|
3475
3424
|
}
|
|
3476
|
-
if (noValidate ||
|
|
3425
|
+
if (noValidate || _this.validateForm()) {
|
|
3477
3426
|
// There are no errors generated through schema validation.
|
|
3478
3427
|
// Check for user provided errors and update state accordingly.
|
|
3479
|
-
|
|
3480
|
-
|
|
3481
|
-
|
|
3428
|
+
var errorSchema = extraErrors || {};
|
|
3429
|
+
var errors = extraErrors ? schemaUtils.getValidator().toErrorList(extraErrors) : [];
|
|
3430
|
+
_this.setState({
|
|
3482
3431
|
formData: newFormData,
|
|
3483
|
-
errors,
|
|
3484
|
-
errorSchema,
|
|
3432
|
+
errors: errors,
|
|
3433
|
+
errorSchema: errorSchema,
|
|
3485
3434
|
schemaValidationErrors: [],
|
|
3486
3435
|
schemaValidationErrorSchema: {}
|
|
3487
|
-
}, ()
|
|
3436
|
+
}, function () {
|
|
3488
3437
|
if (onSubmit) {
|
|
3489
|
-
onSubmit({
|
|
3490
|
-
...this.state,
|
|
3438
|
+
onSubmit(_extends({}, _this.state, {
|
|
3491
3439
|
formData: newFormData,
|
|
3492
3440
|
status: "submitted"
|
|
3493
|
-
}, event);
|
|
3441
|
+
}), event);
|
|
3494
3442
|
}
|
|
3495
3443
|
});
|
|
3496
3444
|
}
|
|
@@ -3498,11 +3446,12 @@ class Form extends Component {
|
|
|
3498
3446
|
if (!props.validator) {
|
|
3499
3447
|
throw new Error("A validator is required for Form functionality to work");
|
|
3500
3448
|
}
|
|
3501
|
-
|
|
3502
|
-
if (
|
|
3503
|
-
|
|
3449
|
+
_this.state = _this.getStateFromProps(props, props.formData);
|
|
3450
|
+
if (_this.props.onChange && !deepEquals(_this.state.formData, _this.props.formData)) {
|
|
3451
|
+
_this.props.onChange(_this.state);
|
|
3504
3452
|
}
|
|
3505
|
-
|
|
3453
|
+
_this.formElement = /*#__PURE__*/React.createRef();
|
|
3454
|
+
return _this;
|
|
3506
3455
|
}
|
|
3507
3456
|
/** React lifecycle method that gets called before new props are provided, updates the state based on new props. It
|
|
3508
3457
|
* will also call the`onChange` handler if the `formData` is modified to add missing default values as part of the
|
|
@@ -3510,8 +3459,9 @@ class Form extends Component {
|
|
|
3510
3459
|
*
|
|
3511
3460
|
* @param nextProps - The new set of props about to be applied to the `Form`
|
|
3512
3461
|
*/
|
|
3513
|
-
|
|
3514
|
-
|
|
3462
|
+
var _proto = Form.prototype;
|
|
3463
|
+
_proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
|
|
3464
|
+
var nextState = this.getStateFromProps(nextProps, nextProps.formData);
|
|
3515
3465
|
if (!deepEquals(nextState.formData, nextProps.formData) && !deepEquals(nextState.formData, this.state.formData) && nextProps.onChange) {
|
|
3516
3466
|
nextProps.onChange(nextState);
|
|
3517
3467
|
}
|
|
@@ -3524,22 +3474,22 @@ class Form extends Component {
|
|
|
3524
3474
|
* @param props - The props passed to the `Form`
|
|
3525
3475
|
* @param inputFormData - The new or current data for the `Form`
|
|
3526
3476
|
* @returns - The new state for the `Form`
|
|
3527
|
-
|
|
3528
|
-
getStateFromProps(props, inputFormData) {
|
|
3529
|
-
|
|
3530
|
-
|
|
3531
|
-
|
|
3532
|
-
|
|
3533
|
-
|
|
3534
|
-
|
|
3535
|
-
|
|
3536
|
-
|
|
3477
|
+
*/;
|
|
3478
|
+
_proto.getStateFromProps = function getStateFromProps(props, inputFormData) {
|
|
3479
|
+
var state = this.state || {};
|
|
3480
|
+
var schema = "schema" in props ? props.schema : this.props.schema;
|
|
3481
|
+
var uiSchema = ("uiSchema" in props ? props.uiSchema : this.props.uiSchema) || {};
|
|
3482
|
+
var edit = typeof inputFormData !== "undefined";
|
|
3483
|
+
var liveValidate = "liveValidate" in props ? props.liveValidate : this.props.liveValidate;
|
|
3484
|
+
var mustValidate = edit && !props.noValidate && liveValidate;
|
|
3485
|
+
var rootSchema = schema;
|
|
3486
|
+
var schemaUtils = state.schemaUtils;
|
|
3537
3487
|
if (!schemaUtils || schemaUtils.doesSchemaUtilsDiffer(props.validator, rootSchema)) {
|
|
3538
3488
|
schemaUtils = createSchemaUtils(props.validator, rootSchema);
|
|
3539
3489
|
}
|
|
3540
|
-
|
|
3541
|
-
|
|
3542
|
-
|
|
3490
|
+
var formData = schemaUtils.getDefaultFormState(schema, inputFormData);
|
|
3491
|
+
var retrievedSchema = schemaUtils.retrieveSchema(schema, formData);
|
|
3492
|
+
var getCurrentErrors = function getCurrentErrors() {
|
|
3543
3493
|
if (props.noValidate) {
|
|
3544
3494
|
return {
|
|
3545
3495
|
errors: [],
|
|
@@ -3556,41 +3506,41 @@ class Form extends Component {
|
|
|
3556
3506
|
errorSchema: state.errorSchema || {}
|
|
3557
3507
|
};
|
|
3558
3508
|
};
|
|
3559
|
-
|
|
3560
|
-
|
|
3561
|
-
|
|
3562
|
-
|
|
3509
|
+
var errors;
|
|
3510
|
+
var errorSchema;
|
|
3511
|
+
var schemaValidationErrors = state.schemaValidationErrors;
|
|
3512
|
+
var schemaValidationErrorSchema = state.schemaValidationErrorSchema;
|
|
3563
3513
|
if (mustValidate) {
|
|
3564
|
-
|
|
3514
|
+
var schemaValidation = this.validate(formData, schema, schemaUtils);
|
|
3565
3515
|
errors = schemaValidation.errors;
|
|
3566
3516
|
errorSchema = schemaValidation.errorSchema;
|
|
3567
3517
|
schemaValidationErrors = errors;
|
|
3568
3518
|
schemaValidationErrorSchema = errorSchema;
|
|
3569
3519
|
} else {
|
|
3570
|
-
|
|
3520
|
+
var currentErrors = getCurrentErrors();
|
|
3571
3521
|
errors = currentErrors.errors;
|
|
3572
3522
|
errorSchema = currentErrors.errorSchema;
|
|
3573
3523
|
}
|
|
3574
3524
|
if (props.extraErrors) {
|
|
3575
|
-
|
|
3576
|
-
errorSchema,
|
|
3577
|
-
errors
|
|
3525
|
+
var merged = schemaUtils.mergeValidationData({
|
|
3526
|
+
errorSchema: errorSchema,
|
|
3527
|
+
errors: errors
|
|
3578
3528
|
}, props.extraErrors);
|
|
3579
3529
|
errorSchema = merged.errorSchema;
|
|
3580
3530
|
errors = merged.errors;
|
|
3581
3531
|
}
|
|
3582
|
-
|
|
3583
|
-
|
|
3584
|
-
schemaUtils,
|
|
3585
|
-
schema,
|
|
3586
|
-
uiSchema,
|
|
3587
|
-
idSchema,
|
|
3588
|
-
formData,
|
|
3589
|
-
edit,
|
|
3590
|
-
errors,
|
|
3591
|
-
errorSchema,
|
|
3592
|
-
schemaValidationErrors,
|
|
3593
|
-
schemaValidationErrorSchema
|
|
3532
|
+
var idSchema = schemaUtils.toIdSchema(retrievedSchema, uiSchema["ui:rootFieldId"], formData, props.idPrefix, props.idSeparator);
|
|
3533
|
+
var nextState = {
|
|
3534
|
+
schemaUtils: schemaUtils,
|
|
3535
|
+
schema: schema,
|
|
3536
|
+
uiSchema: uiSchema,
|
|
3537
|
+
idSchema: idSchema,
|
|
3538
|
+
formData: formData,
|
|
3539
|
+
edit: edit,
|
|
3540
|
+
errors: errors,
|
|
3541
|
+
errorSchema: errorSchema,
|
|
3542
|
+
schemaValidationErrors: schemaValidationErrors,
|
|
3543
|
+
schemaValidationErrorSchema: schemaValidationErrorSchema
|
|
3594
3544
|
};
|
|
3595
3545
|
return nextState;
|
|
3596
3546
|
}
|
|
@@ -3599,8 +3549,8 @@ class Form extends Component {
|
|
|
3599
3549
|
* @param nextProps - The next version of the props
|
|
3600
3550
|
* @param nextState - The next version of the state
|
|
3601
3551
|
* @returns - True if the component should be updated, false otherwise
|
|
3602
|
-
|
|
3603
|
-
shouldComponentUpdate(nextProps, nextState) {
|
|
3552
|
+
*/;
|
|
3553
|
+
_proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {
|
|
3604
3554
|
return shouldRender(this, nextProps, nextState);
|
|
3605
3555
|
}
|
|
3606
3556
|
/** Validates the `formData` against the `schema` using the `altSchemaUtils` (if provided otherwise it uses the
|
|
@@ -3609,32 +3559,28 @@ class Form extends Component {
|
|
|
3609
3559
|
* @param formData - The new form data to validate
|
|
3610
3560
|
* @param schema - The schema used to validate against
|
|
3611
3561
|
* @param altSchemaUtils - The alternate schemaUtils to use for validation
|
|
3612
|
-
|
|
3613
|
-
validate(formData, schema, altSchemaUtils) {
|
|
3562
|
+
*/;
|
|
3563
|
+
_proto.validate = function validate(formData, schema, altSchemaUtils) {
|
|
3614
3564
|
if (schema === void 0) {
|
|
3615
3565
|
schema = this.props.schema;
|
|
3616
3566
|
}
|
|
3617
|
-
|
|
3618
|
-
|
|
3619
|
-
customValidate,
|
|
3620
|
-
transformErrors
|
|
3621
|
-
|
|
3622
|
-
const resolvedSchema = schemaUtils.retrieveSchema(schema, formData);
|
|
3567
|
+
var schemaUtils = altSchemaUtils ? altSchemaUtils : this.state.schemaUtils;
|
|
3568
|
+
var _this$props3 = this.props,
|
|
3569
|
+
customValidate = _this$props3.customValidate,
|
|
3570
|
+
transformErrors = _this$props3.transformErrors;
|
|
3571
|
+
var resolvedSchema = schemaUtils.retrieveSchema(schema, formData);
|
|
3623
3572
|
return schemaUtils.getValidator().validateFormData(formData, resolvedSchema, customValidate, transformErrors);
|
|
3624
3573
|
}
|
|
3625
|
-
/** Renders any errors contained in the `state` in using the `ErrorList`, if not disabled by `showErrorList`.
|
|
3626
|
-
renderErrors(registry) {
|
|
3627
|
-
|
|
3628
|
-
errors,
|
|
3629
|
-
errorSchema,
|
|
3630
|
-
schema,
|
|
3631
|
-
uiSchema
|
|
3632
|
-
|
|
3633
|
-
|
|
3634
|
-
|
|
3635
|
-
} = this.props;
|
|
3636
|
-
const options = getUiOptions(uiSchema);
|
|
3637
|
-
const ErrorListTemplate = getTemplate("ErrorListTemplate", registry, options);
|
|
3574
|
+
/** Renders any errors contained in the `state` in using the `ErrorList`, if not disabled by `showErrorList`. */;
|
|
3575
|
+
_proto.renderErrors = function renderErrors(registry) {
|
|
3576
|
+
var _this$state3 = this.state,
|
|
3577
|
+
errors = _this$state3.errors,
|
|
3578
|
+
errorSchema = _this$state3.errorSchema,
|
|
3579
|
+
schema = _this$state3.schema,
|
|
3580
|
+
uiSchema = _this$state3.uiSchema;
|
|
3581
|
+
var formContext = this.props.formContext;
|
|
3582
|
+
var options = getUiOptions(uiSchema);
|
|
3583
|
+
var ErrorListTemplate = getTemplate("ErrorListTemplate", registry, options);
|
|
3638
3584
|
if (errors && errors.length) {
|
|
3639
3585
|
return /*#__PURE__*/React.createElement(ErrorListTemplate, {
|
|
3640
3586
|
errors: errors,
|
|
@@ -3650,44 +3596,29 @@ class Form extends Component {
|
|
|
3650
3596
|
*
|
|
3651
3597
|
* @param formData - The data for the `Form`
|
|
3652
3598
|
* @param fields - The fields to keep while filtering
|
|
3653
|
-
|
|
3654
|
-
|
|
3599
|
+
*/;
|
|
3655
3600
|
/** Returns the registry for the form */
|
|
3656
|
-
getRegistry() {
|
|
3601
|
+
_proto.getRegistry = function getRegistry() {
|
|
3657
3602
|
var _this$props$templates;
|
|
3658
|
-
|
|
3659
|
-
|
|
3660
|
-
|
|
3661
|
-
|
|
3662
|
-
|
|
3663
|
-
|
|
3664
|
-
widgets,
|
|
3665
|
-
formContext
|
|
3666
|
-
} = getDefaultRegistry();
|
|
3603
|
+
var schemaUtils = this.state.schemaUtils;
|
|
3604
|
+
var _getDefaultRegistry = getDefaultRegistry(),
|
|
3605
|
+
fields = _getDefaultRegistry.fields,
|
|
3606
|
+
templates = _getDefaultRegistry.templates,
|
|
3607
|
+
widgets = _getDefaultRegistry.widgets,
|
|
3608
|
+
formContext = _getDefaultRegistry.formContext;
|
|
3667
3609
|
return {
|
|
3668
|
-
fields: {
|
|
3669
|
-
|
|
3670
|
-
|
|
3671
|
-
},
|
|
3672
|
-
|
|
3673
|
-
...templates,
|
|
3674
|
-
...this.props.templates,
|
|
3675
|
-
ButtonTemplates: {
|
|
3676
|
-
...templates.ButtonTemplates,
|
|
3677
|
-
...((_this$props$templates = this.props.templates) === null || _this$props$templates === void 0 ? void 0 : _this$props$templates.ButtonTemplates)
|
|
3678
|
-
}
|
|
3679
|
-
},
|
|
3680
|
-
widgets: {
|
|
3681
|
-
...widgets,
|
|
3682
|
-
...this.props.widgets
|
|
3683
|
-
},
|
|
3610
|
+
fields: _extends({}, fields, this.props.fields),
|
|
3611
|
+
templates: _extends({}, templates, this.props.templates, {
|
|
3612
|
+
ButtonTemplates: _extends({}, templates.ButtonTemplates, (_this$props$templates = this.props.templates) === null || _this$props$templates === void 0 ? void 0 : _this$props$templates.ButtonTemplates)
|
|
3613
|
+
}),
|
|
3614
|
+
widgets: _extends({}, widgets, this.props.widgets),
|
|
3684
3615
|
rootSchema: this.props.schema,
|
|
3685
3616
|
formContext: this.props.formContext || formContext,
|
|
3686
|
-
schemaUtils
|
|
3617
|
+
schemaUtils: schemaUtils
|
|
3687
3618
|
};
|
|
3688
3619
|
}
|
|
3689
|
-
/** Provides a function that can be used to programmatically submit the `Form`
|
|
3690
|
-
submit() {
|
|
3620
|
+
/** Provides a function that can be used to programmatically submit the `Form` */;
|
|
3621
|
+
_proto.submit = function submit() {
|
|
3691
3622
|
if (this.formElement.current) {
|
|
3692
3623
|
this.formElement.current.dispatchEvent(new CustomEvent("submit", {
|
|
3693
3624
|
cancelable: true
|
|
@@ -3699,35 +3630,30 @@ class Form extends Component {
|
|
|
3699
3630
|
* same way as would happen on form submission.
|
|
3700
3631
|
*
|
|
3701
3632
|
* @returns - True if the form is valid, false otherwise.
|
|
3702
|
-
|
|
3703
|
-
validateForm() {
|
|
3704
|
-
|
|
3705
|
-
extraErrors,
|
|
3706
|
-
onError
|
|
3707
|
-
|
|
3708
|
-
|
|
3709
|
-
|
|
3710
|
-
|
|
3711
|
-
|
|
3712
|
-
|
|
3713
|
-
|
|
3714
|
-
const schemaValidation = this.validate(formData);
|
|
3715
|
-
let errors = schemaValidation.errors;
|
|
3716
|
-
let errorSchema = schemaValidation.errorSchema;
|
|
3717
|
-
const schemaValidationErrors = errors;
|
|
3718
|
-
const schemaValidationErrorSchema = errorSchema;
|
|
3633
|
+
*/;
|
|
3634
|
+
_proto.validateForm = function validateForm() {
|
|
3635
|
+
var _this$props4 = this.props,
|
|
3636
|
+
extraErrors = _this$props4.extraErrors,
|
|
3637
|
+
onError = _this$props4.onError;
|
|
3638
|
+
var formData = this.state.formData;
|
|
3639
|
+
var schemaUtils = this.state.schemaUtils;
|
|
3640
|
+
var schemaValidation = this.validate(formData);
|
|
3641
|
+
var errors = schemaValidation.errors;
|
|
3642
|
+
var errorSchema = schemaValidation.errorSchema;
|
|
3643
|
+
var schemaValidationErrors = errors;
|
|
3644
|
+
var schemaValidationErrorSchema = errorSchema;
|
|
3719
3645
|
if (errors.length > 0) {
|
|
3720
3646
|
if (extraErrors) {
|
|
3721
|
-
|
|
3647
|
+
var merged = schemaUtils.mergeValidationData(schemaValidation, extraErrors);
|
|
3722
3648
|
errorSchema = merged.errorSchema;
|
|
3723
3649
|
errors = merged.errors;
|
|
3724
3650
|
}
|
|
3725
3651
|
this.setState({
|
|
3726
|
-
errors,
|
|
3727
|
-
errorSchema,
|
|
3728
|
-
schemaValidationErrors,
|
|
3729
|
-
schemaValidationErrorSchema
|
|
3730
|
-
}, ()
|
|
3652
|
+
errors: errors,
|
|
3653
|
+
errorSchema: errorSchema,
|
|
3654
|
+
schemaValidationErrors: schemaValidationErrors,
|
|
3655
|
+
schemaValidationErrorSchema: schemaValidationErrorSchema
|
|
3656
|
+
}, function () {
|
|
3731
3657
|
if (onError) {
|
|
3732
3658
|
onError(errors);
|
|
3733
3659
|
} else {
|
|
@@ -3740,48 +3666,47 @@ class Form extends Component {
|
|
|
3740
3666
|
}
|
|
3741
3667
|
/** Renders the `Form` fields inside the <form> | `tagName` or `_internalFormWrapper`, rendering any errors if
|
|
3742
3668
|
* needed along with the submit button or any children of the form.
|
|
3743
|
-
|
|
3744
|
-
render() {
|
|
3745
|
-
|
|
3746
|
-
children,
|
|
3747
|
-
id,
|
|
3748
|
-
idPrefix,
|
|
3749
|
-
idSeparator,
|
|
3750
|
-
|
|
3751
|
-
|
|
3752
|
-
|
|
3753
|
-
|
|
3754
|
-
|
|
3755
|
-
|
|
3756
|
-
|
|
3757
|
-
|
|
3758
|
-
|
|
3759
|
-
|
|
3760
|
-
|
|
3761
|
-
|
|
3762
|
-
|
|
3763
|
-
|
|
3764
|
-
|
|
3765
|
-
|
|
3766
|
-
|
|
3767
|
-
|
|
3768
|
-
|
|
3769
|
-
|
|
3770
|
-
|
|
3771
|
-
|
|
3772
|
-
|
|
3773
|
-
|
|
3774
|
-
|
|
3775
|
-
|
|
3776
|
-
|
|
3777
|
-
|
|
3778
|
-
|
|
3779
|
-
} = registry.templates.ButtonTemplates;
|
|
3669
|
+
*/;
|
|
3670
|
+
_proto.render = function render() {
|
|
3671
|
+
var _this$props5 = this.props,
|
|
3672
|
+
children = _this$props5.children,
|
|
3673
|
+
id = _this$props5.id,
|
|
3674
|
+
idPrefix = _this$props5.idPrefix,
|
|
3675
|
+
idSeparator = _this$props5.idSeparator,
|
|
3676
|
+
_this$props5$classNam = _this$props5.className,
|
|
3677
|
+
className = _this$props5$classNam === void 0 ? "" : _this$props5$classNam,
|
|
3678
|
+
tagName = _this$props5.tagName,
|
|
3679
|
+
name = _this$props5.name,
|
|
3680
|
+
method = _this$props5.method,
|
|
3681
|
+
target = _this$props5.target,
|
|
3682
|
+
action = _this$props5.action,
|
|
3683
|
+
autoComplete = _this$props5.autoComplete,
|
|
3684
|
+
enctype = _this$props5.enctype,
|
|
3685
|
+
acceptcharset = _this$props5.acceptcharset,
|
|
3686
|
+
_this$props5$noHtml5V = _this$props5.noHtml5Validate,
|
|
3687
|
+
noHtml5Validate = _this$props5$noHtml5V === void 0 ? false : _this$props5$noHtml5V,
|
|
3688
|
+
_this$props5$disabled = _this$props5.disabled,
|
|
3689
|
+
disabled = _this$props5$disabled === void 0 ? false : _this$props5$disabled,
|
|
3690
|
+
_this$props5$readonly = _this$props5.readonly,
|
|
3691
|
+
readonly = _this$props5$readonly === void 0 ? false : _this$props5$readonly,
|
|
3692
|
+
formContext = _this$props5.formContext,
|
|
3693
|
+
_this$props5$showErro = _this$props5.showErrorList,
|
|
3694
|
+
showErrorList = _this$props5$showErro === void 0 ? "top" : _this$props5$showErro,
|
|
3695
|
+
_internalFormWrapper = _this$props5._internalFormWrapper;
|
|
3696
|
+
var _this$state4 = this.state,
|
|
3697
|
+
schema = _this$state4.schema,
|
|
3698
|
+
uiSchema = _this$state4.uiSchema,
|
|
3699
|
+
formData = _this$state4.formData,
|
|
3700
|
+
errorSchema = _this$state4.errorSchema,
|
|
3701
|
+
idSchema = _this$state4.idSchema;
|
|
3702
|
+
var registry = this.getRegistry();
|
|
3703
|
+
var _SchemaField = registry.fields.SchemaField;
|
|
3704
|
+
var SubmitButton = registry.templates.ButtonTemplates.SubmitButton;
|
|
3780
3705
|
// The `semantic-ui` and `material-ui` themes have `_internalFormWrapper`s that take an `as` prop that is the
|
|
3781
3706
|
// PropTypes.elementType to use for the inner tag, so we'll need to pass `tagName` along if it is provided.
|
|
3782
3707
|
// NOTE, the `as` prop is native to `semantic-ui` and is emulated in the `material-ui` theme
|
|
3783
|
-
|
|
3784
|
-
|
|
3708
|
+
var as = _internalFormWrapper ? tagName : undefined;
|
|
3709
|
+
var FormTag = _internalFormWrapper || tagName || "form";
|
|
3785
3710
|
return /*#__PURE__*/React.createElement(FormTag, {
|
|
3786
3711
|
className: className ? className : "rjsf",
|
|
3787
3712
|
id: id,
|
|
@@ -3815,43 +3740,30 @@ class Form extends Component {
|
|
|
3815
3740
|
}), children ? children : /*#__PURE__*/React.createElement(SubmitButton, {
|
|
3816
3741
|
uiSchema: uiSchema
|
|
3817
3742
|
}), showErrorList === "bottom" && this.renderErrors(registry));
|
|
3818
|
-
}
|
|
3819
|
-
|
|
3743
|
+
};
|
|
3744
|
+
return Form;
|
|
3745
|
+
}(Component);
|
|
3820
3746
|
|
|
3747
|
+
var _excluded = ["fields", "widgets", "templates"];
|
|
3821
3748
|
/** A Higher-Order component that creates a wrapper around a `Form` with the overrides from the `WithThemeProps` */
|
|
3822
3749
|
function withTheme(themeProps) {
|
|
3823
|
-
return /*#__PURE__*/forwardRef((_ref, ref)
|
|
3750
|
+
return /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
3824
3751
|
var _themeProps$templates, _templates;
|
|
3825
|
-
|
|
3826
|
-
|
|
3827
|
-
|
|
3828
|
-
|
|
3829
|
-
|
|
3830
|
-
|
|
3831
|
-
|
|
3832
|
-
|
|
3833
|
-
|
|
3834
|
-
}
|
|
3835
|
-
widgets = {
|
|
3836
|
-
...themeProps.widgets,
|
|
3837
|
-
...widgets
|
|
3838
|
-
};
|
|
3839
|
-
templates = {
|
|
3840
|
-
...themeProps.templates,
|
|
3841
|
-
...templates,
|
|
3842
|
-
ButtonTemplates: {
|
|
3843
|
-
...(themeProps === null || themeProps === void 0 ? void 0 : (_themeProps$templates = themeProps.templates) === null || _themeProps$templates === void 0 ? void 0 : _themeProps$templates.ButtonTemplates),
|
|
3844
|
-
...((_templates = templates) === null || _templates === void 0 ? void 0 : _templates.ButtonTemplates)
|
|
3845
|
-
}
|
|
3846
|
-
};
|
|
3847
|
-
return /*#__PURE__*/React.createElement(Form, {
|
|
3848
|
-
...themeProps,
|
|
3849
|
-
...directProps,
|
|
3752
|
+
var fields = _ref.fields,
|
|
3753
|
+
widgets = _ref.widgets,
|
|
3754
|
+
templates = _ref.templates,
|
|
3755
|
+
directProps = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
3756
|
+
fields = _extends({}, themeProps.fields, fields);
|
|
3757
|
+
widgets = _extends({}, themeProps.widgets, widgets);
|
|
3758
|
+
templates = _extends({}, themeProps.templates, templates, {
|
|
3759
|
+
ButtonTemplates: _extends({}, themeProps === null || themeProps === void 0 ? void 0 : (_themeProps$templates = themeProps.templates) === null || _themeProps$templates === void 0 ? void 0 : _themeProps$templates.ButtonTemplates, (_templates = templates) === null || _templates === void 0 ? void 0 : _templates.ButtonTemplates)
|
|
3760
|
+
});
|
|
3761
|
+
return /*#__PURE__*/React.createElement(Form, _extends({}, themeProps, directProps, {
|
|
3850
3762
|
fields: fields,
|
|
3851
3763
|
widgets: widgets,
|
|
3852
3764
|
templates: templates,
|
|
3853
3765
|
ref: ref
|
|
3854
|
-
});
|
|
3766
|
+
}));
|
|
3855
3767
|
});
|
|
3856
3768
|
}
|
|
3857
3769
|
|