@rjsf/mui 5.10.0 → 5.11.1
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/mui.cjs.development.js +548 -481
- package/dist/mui.cjs.development.js.map +1 -1
- package/dist/mui.cjs.production.min.js +1 -1
- package/dist/mui.cjs.production.min.js.map +1 -1
- package/dist/mui.esm.js +548 -481
- package/dist/mui.esm.js.map +1 -1
- package/dist/mui.umd.development.js +548 -481
- package/dist/mui.umd.development.js.map +1 -1
- package/dist/mui.umd.production.min.js +1 -1
- package/dist/mui.umd.production.min.js.map +1 -1
- package/package.json +11 -10
|
@@ -65,46 +65,22 @@ var RadioGroup__default = /*#__PURE__*/_interopDefaultLegacy(RadioGroup);
|
|
|
65
65
|
var Slider__default = /*#__PURE__*/_interopDefaultLegacy(Slider);
|
|
66
66
|
var MenuItem__default = /*#__PURE__*/_interopDefaultLegacy(MenuItem);
|
|
67
67
|
|
|
68
|
-
function _extends() {
|
|
69
|
-
_extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
70
|
-
for (var i = 1; i < arguments.length; i++) {
|
|
71
|
-
var source = arguments[i];
|
|
72
|
-
for (var key in source) {
|
|
73
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
74
|
-
target[key] = source[key];
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
return target;
|
|
79
|
-
};
|
|
80
|
-
return _extends.apply(this, arguments);
|
|
81
|
-
}
|
|
82
|
-
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
83
|
-
if (source == null) return {};
|
|
84
|
-
var target = {};
|
|
85
|
-
var sourceKeys = Object.keys(source);
|
|
86
|
-
var key, i;
|
|
87
|
-
for (i = 0; i < sourceKeys.length; i++) {
|
|
88
|
-
key = sourceKeys[i];
|
|
89
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
90
|
-
target[key] = source[key];
|
|
91
|
-
}
|
|
92
|
-
return target;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
var _excluded$4 = ["uiSchema", "registry"];
|
|
96
68
|
/** The `AddButton` renders a button that represent the `Add` action on a form
|
|
97
69
|
*/
|
|
98
|
-
function AddButton(
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
70
|
+
function AddButton({
|
|
71
|
+
uiSchema,
|
|
72
|
+
registry,
|
|
73
|
+
...props
|
|
74
|
+
}) {
|
|
75
|
+
const {
|
|
76
|
+
translateString
|
|
77
|
+
} = registry;
|
|
78
|
+
return jsxRuntime.jsx(IconButton__default["default"], {
|
|
79
|
+
title: translateString(utils.TranslatableString.AddItemButton),
|
|
80
|
+
...props,
|
|
105
81
|
color: 'primary',
|
|
106
82
|
children: jsxRuntime.jsx(AddIcon__default["default"], {})
|
|
107
|
-
})
|
|
83
|
+
});
|
|
108
84
|
}
|
|
109
85
|
|
|
110
86
|
/** The `ArrayFieldItemTemplate` component is the template used to render an items of an array.
|
|
@@ -112,26 +88,29 @@ function AddButton(_ref) {
|
|
|
112
88
|
* @param props - The `ArrayFieldTemplateItemType` props for the component
|
|
113
89
|
*/
|
|
114
90
|
function ArrayFieldItemTemplate(props) {
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
91
|
+
const {
|
|
92
|
+
children,
|
|
93
|
+
disabled,
|
|
94
|
+
hasToolbar,
|
|
95
|
+
hasCopy,
|
|
96
|
+
hasMoveDown,
|
|
97
|
+
hasMoveUp,
|
|
98
|
+
hasRemove,
|
|
99
|
+
index,
|
|
100
|
+
onCopyIndexClick,
|
|
101
|
+
onDropIndexClick,
|
|
102
|
+
onReorderClick,
|
|
103
|
+
readonly,
|
|
104
|
+
uiSchema,
|
|
105
|
+
registry
|
|
106
|
+
} = props;
|
|
107
|
+
const {
|
|
108
|
+
CopyButton,
|
|
109
|
+
MoveDownButton,
|
|
110
|
+
MoveUpButton,
|
|
111
|
+
RemoveButton
|
|
112
|
+
} = registry.templates.ButtonTemplates;
|
|
113
|
+
const btnStyle = {
|
|
135
114
|
flex: 1,
|
|
136
115
|
paddingLeft: 6,
|
|
137
116
|
paddingRight: 6,
|
|
@@ -188,29 +167,34 @@ function ArrayFieldItemTemplate(props) {
|
|
|
188
167
|
});
|
|
189
168
|
}
|
|
190
169
|
|
|
191
|
-
var _excluded$3 = ["key"];
|
|
192
170
|
/** The `ArrayFieldTemplate` component is the template used to render all items in an array.
|
|
193
171
|
*
|
|
194
172
|
* @param props - The `ArrayFieldTemplateItemType` props for the component
|
|
195
173
|
*/
|
|
196
174
|
function ArrayFieldTemplate(props) {
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
175
|
+
const {
|
|
176
|
+
canAdd,
|
|
177
|
+
disabled,
|
|
178
|
+
idSchema,
|
|
179
|
+
uiSchema,
|
|
180
|
+
items,
|
|
181
|
+
onAddClick,
|
|
182
|
+
readonly,
|
|
183
|
+
registry,
|
|
184
|
+
required,
|
|
185
|
+
schema,
|
|
186
|
+
title
|
|
187
|
+
} = props;
|
|
188
|
+
const uiOptions = utils.getUiOptions(uiSchema);
|
|
189
|
+
const ArrayFieldDescriptionTemplate = utils.getTemplate('ArrayFieldDescriptionTemplate', registry, uiOptions);
|
|
190
|
+
const ArrayFieldItemTemplate = utils.getTemplate('ArrayFieldItemTemplate', registry, uiOptions);
|
|
191
|
+
const ArrayFieldTitleTemplate = utils.getTemplate('ArrayFieldTitleTemplate', registry, uiOptions);
|
|
212
192
|
// Button templates are not overridden in the uiSchema
|
|
213
|
-
|
|
193
|
+
const {
|
|
194
|
+
ButtonTemplates: {
|
|
195
|
+
AddButton
|
|
196
|
+
}
|
|
197
|
+
} = registry.templates;
|
|
214
198
|
return jsxRuntime.jsx(Paper__default["default"], {
|
|
215
199
|
elevation: 2,
|
|
216
200
|
children: jsxRuntime.jsxs(Box__default["default"], {
|
|
@@ -230,11 +214,12 @@ function ArrayFieldTemplate(props) {
|
|
|
230
214
|
registry: registry
|
|
231
215
|
}), jsxRuntime.jsxs(Grid__default["default"], {
|
|
232
216
|
container: true,
|
|
233
|
-
children: [items && items.map(
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
217
|
+
children: [items && items.map(({
|
|
218
|
+
key,
|
|
219
|
+
...itemProps
|
|
220
|
+
}) => jsxRuntime.jsx(ArrayFieldItemTemplate, {
|
|
221
|
+
...itemProps
|
|
222
|
+
}, key)), canAdd && jsxRuntime.jsx(Grid__default["default"], {
|
|
238
223
|
container: true,
|
|
239
224
|
justifyContent: 'flex-end',
|
|
240
225
|
children: jsxRuntime.jsx(Grid__default["default"], {
|
|
@@ -251,14 +236,12 @@ function ArrayFieldTemplate(props) {
|
|
|
251
236
|
})
|
|
252
237
|
})
|
|
253
238
|
})]
|
|
254
|
-
},
|
|
239
|
+
}, `array-item-list-${idSchema.$id}`)]
|
|
255
240
|
})
|
|
256
241
|
});
|
|
257
242
|
}
|
|
258
243
|
|
|
259
|
-
|
|
260
|
-
_excluded2$1 = ["step", "min", "max"];
|
|
261
|
-
var TYPES_THAT_SHRINK_LABEL = ['date', 'datetime-local', 'file', 'time'];
|
|
244
|
+
const TYPES_THAT_SHRINK_LABEL = ['date', 'datetime-local', 'file', 'time'];
|
|
262
245
|
/** The `BaseInputTemplate` is the template to use to render the basic `<input>` component for the `core` theme.
|
|
263
246
|
* It is used as the template for rendering many of the <input> based widgets that differ by `type` and callbacks only.
|
|
264
247
|
* It can be customized/overridden for other themes or individual implementations as needed.
|
|
@@ -266,77 +249,91 @@ var TYPES_THAT_SHRINK_LABEL = ['date', 'datetime-local', 'file', 'time'];
|
|
|
266
249
|
* @param props - The `WidgetProps` for this template
|
|
267
250
|
*/
|
|
268
251
|
function BaseInputTemplate(props) {
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
252
|
+
const {
|
|
253
|
+
id,
|
|
254
|
+
name,
|
|
255
|
+
// remove this from textFieldProps
|
|
256
|
+
placeholder,
|
|
257
|
+
required,
|
|
258
|
+
readonly,
|
|
259
|
+
disabled,
|
|
260
|
+
type,
|
|
261
|
+
label,
|
|
262
|
+
hideLabel,
|
|
263
|
+
value,
|
|
264
|
+
onChange,
|
|
265
|
+
onChangeOverride,
|
|
266
|
+
onBlur,
|
|
267
|
+
onFocus,
|
|
268
|
+
autofocus,
|
|
269
|
+
options,
|
|
270
|
+
schema,
|
|
271
|
+
uiSchema,
|
|
272
|
+
rawErrors = [],
|
|
273
|
+
formContext,
|
|
274
|
+
registry,
|
|
275
|
+
InputLabelProps,
|
|
276
|
+
...textFieldProps
|
|
277
|
+
} = props;
|
|
278
|
+
const inputProps = utils.getInputProps(schema, type, options);
|
|
290
279
|
// Now we need to pull out the step, min, max into an inner `inputProps` for material-ui
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
};
|
|
308
|
-
var _onBlur = function _onBlur(_ref2) {
|
|
309
|
-
var value = _ref2.target.value;
|
|
310
|
-
return onBlur(id, value);
|
|
311
|
-
};
|
|
312
|
-
var _onFocus = function _onFocus(_ref3) {
|
|
313
|
-
var value = _ref3.target.value;
|
|
314
|
-
return onFocus(id, value);
|
|
280
|
+
const {
|
|
281
|
+
step,
|
|
282
|
+
min,
|
|
283
|
+
max,
|
|
284
|
+
...rest
|
|
285
|
+
} = inputProps;
|
|
286
|
+
const otherProps = {
|
|
287
|
+
inputProps: {
|
|
288
|
+
step,
|
|
289
|
+
min,
|
|
290
|
+
max,
|
|
291
|
+
...(schema.examples ? {
|
|
292
|
+
list: utils.examplesId(id)
|
|
293
|
+
} : undefined)
|
|
294
|
+
},
|
|
295
|
+
...rest
|
|
315
296
|
};
|
|
316
|
-
|
|
297
|
+
const _onChange = ({
|
|
298
|
+
target: {
|
|
299
|
+
value
|
|
300
|
+
}
|
|
301
|
+
}) => onChange(value === '' ? options.emptyValue : value);
|
|
302
|
+
const _onBlur = ({
|
|
303
|
+
target: {
|
|
304
|
+
value
|
|
305
|
+
}
|
|
306
|
+
}) => onBlur(id, value);
|
|
307
|
+
const _onFocus = ({
|
|
308
|
+
target: {
|
|
309
|
+
value
|
|
310
|
+
}
|
|
311
|
+
}) => onFocus(id, value);
|
|
312
|
+
const DisplayInputLabelProps = TYPES_THAT_SHRINK_LABEL.includes(type) ? {
|
|
313
|
+
...InputLabelProps,
|
|
317
314
|
shrink: true
|
|
318
|
-
}
|
|
315
|
+
} : InputLabelProps;
|
|
319
316
|
return jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
320
|
-
children: [jsxRuntime.jsx(TextField__default["default"],
|
|
317
|
+
children: [jsxRuntime.jsx(TextField__default["default"], {
|
|
321
318
|
id: id,
|
|
322
319
|
name: id,
|
|
323
320
|
placeholder: placeholder,
|
|
324
321
|
label: utils.labelValue(label || undefined, hideLabel, false),
|
|
325
322
|
autoFocus: autofocus,
|
|
326
323
|
required: required,
|
|
327
|
-
disabled: disabled || readonly
|
|
328
|
-
|
|
324
|
+
disabled: disabled || readonly,
|
|
325
|
+
...otherProps,
|
|
329
326
|
value: value || value === 0 ? value : '',
|
|
330
327
|
error: rawErrors.length > 0,
|
|
331
328
|
onChange: onChangeOverride || _onChange,
|
|
332
329
|
onBlur: _onBlur,
|
|
333
330
|
onFocus: _onFocus,
|
|
334
|
-
InputLabelProps: DisplayInputLabelProps
|
|
335
|
-
|
|
331
|
+
InputLabelProps: DisplayInputLabelProps,
|
|
332
|
+
...textFieldProps,
|
|
336
333
|
"aria-describedby": utils.ariaDescribedByIds(id, !!schema.examples)
|
|
337
|
-
})
|
|
334
|
+
}), Array.isArray(schema.examples) && jsxRuntime.jsx("datalist", {
|
|
338
335
|
id: utils.examplesId(id),
|
|
339
|
-
children: schema.examples.concat(schema
|
|
336
|
+
children: schema.examples.concat(schema.default && !schema.examples.includes(schema.default) ? [schema.default] : []).map(example => {
|
|
340
337
|
return jsxRuntime.jsx("option", {
|
|
341
338
|
value: example
|
|
342
339
|
}, example);
|
|
@@ -350,8 +347,10 @@ function BaseInputTemplate(props) {
|
|
|
350
347
|
* @param props - The `DescriptionFieldProps` for this component
|
|
351
348
|
*/
|
|
352
349
|
function DescriptionField(props) {
|
|
353
|
-
|
|
354
|
-
|
|
350
|
+
const {
|
|
351
|
+
id,
|
|
352
|
+
description
|
|
353
|
+
} = props;
|
|
355
354
|
if (description) {
|
|
356
355
|
return jsxRuntime.jsx(Typography__default["default"], {
|
|
357
356
|
id: id,
|
|
@@ -369,10 +368,13 @@ function DescriptionField(props) {
|
|
|
369
368
|
*
|
|
370
369
|
* @param props - The `ErrorListProps` for this component
|
|
371
370
|
*/
|
|
372
|
-
function ErrorList(
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
371
|
+
function ErrorList({
|
|
372
|
+
errors,
|
|
373
|
+
registry
|
|
374
|
+
}) {
|
|
375
|
+
const {
|
|
376
|
+
translateString
|
|
377
|
+
} = registry;
|
|
376
378
|
return jsxRuntime.jsx(Paper__default["default"], {
|
|
377
379
|
elevation: 2,
|
|
378
380
|
children: jsxRuntime.jsxs(Box__default["default"], {
|
|
@@ -383,7 +385,7 @@ function ErrorList(_ref) {
|
|
|
383
385
|
children: translateString(utils.TranslatableString.ErrorsLabel)
|
|
384
386
|
}), jsxRuntime.jsx(List__default["default"], {
|
|
385
387
|
dense: true,
|
|
386
|
-
children: errors.map(
|
|
388
|
+
children: errors.map((error, i) => {
|
|
387
389
|
return jsxRuntime.jsxs(ListItem__default["default"], {
|
|
388
390
|
children: [jsxRuntime.jsx(ListItemIcon__default["default"], {
|
|
389
391
|
children: jsxRuntime.jsx(ErrorIcon__default["default"], {
|
|
@@ -399,60 +401,81 @@ function ErrorList(_ref) {
|
|
|
399
401
|
});
|
|
400
402
|
}
|
|
401
403
|
|
|
402
|
-
var _excluded$1 = ["icon", "color", "uiSchema", "registry"],
|
|
403
|
-
_excluded2 = ["iconType"];
|
|
404
404
|
function MuiIconButton(props) {
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
405
|
+
const {
|
|
406
|
+
icon,
|
|
407
|
+
color,
|
|
408
|
+
uiSchema,
|
|
409
|
+
registry,
|
|
410
|
+
...otherProps
|
|
411
|
+
} = props;
|
|
412
|
+
return jsxRuntime.jsx(IconButton__default["default"], {
|
|
413
|
+
...otherProps,
|
|
409
414
|
size: 'small',
|
|
410
415
|
color: color,
|
|
411
416
|
children: icon
|
|
412
|
-
})
|
|
417
|
+
});
|
|
413
418
|
}
|
|
414
419
|
function CopyButton(props) {
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
420
|
+
const {
|
|
421
|
+
registry: {
|
|
422
|
+
translateString
|
|
423
|
+
}
|
|
424
|
+
} = props;
|
|
425
|
+
return jsxRuntime.jsx(MuiIconButton, {
|
|
426
|
+
title: translateString(utils.TranslatableString.CopyButton),
|
|
427
|
+
...props,
|
|
419
428
|
icon: jsxRuntime.jsx(CopyIcon__default["default"], {
|
|
420
429
|
fontSize: 'small'
|
|
421
430
|
})
|
|
422
|
-
})
|
|
431
|
+
});
|
|
423
432
|
}
|
|
424
433
|
function MoveDownButton(props) {
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
434
|
+
const {
|
|
435
|
+
registry: {
|
|
436
|
+
translateString
|
|
437
|
+
}
|
|
438
|
+
} = props;
|
|
439
|
+
return jsxRuntime.jsx(MuiIconButton, {
|
|
440
|
+
title: translateString(utils.TranslatableString.MoveDownButton),
|
|
441
|
+
...props,
|
|
429
442
|
icon: jsxRuntime.jsx(ArrowDownwardIcon__default["default"], {
|
|
430
443
|
fontSize: 'small'
|
|
431
444
|
})
|
|
432
|
-
})
|
|
445
|
+
});
|
|
433
446
|
}
|
|
434
447
|
function MoveUpButton(props) {
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
448
|
+
const {
|
|
449
|
+
registry: {
|
|
450
|
+
translateString
|
|
451
|
+
}
|
|
452
|
+
} = props;
|
|
453
|
+
return jsxRuntime.jsx(MuiIconButton, {
|
|
454
|
+
title: translateString(utils.TranslatableString.MoveUpButton),
|
|
455
|
+
...props,
|
|
439
456
|
icon: jsxRuntime.jsx(ArrowUpwardIcon__default["default"], {
|
|
440
457
|
fontSize: 'small'
|
|
441
458
|
})
|
|
442
|
-
})
|
|
459
|
+
});
|
|
443
460
|
}
|
|
444
461
|
function RemoveButton(props) {
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
462
|
+
const {
|
|
463
|
+
iconType,
|
|
464
|
+
...otherProps
|
|
465
|
+
} = props;
|
|
466
|
+
const {
|
|
467
|
+
registry: {
|
|
468
|
+
translateString
|
|
469
|
+
}
|
|
470
|
+
} = otherProps;
|
|
471
|
+
return jsxRuntime.jsx(MuiIconButton, {
|
|
472
|
+
title: translateString(utils.TranslatableString.RemoveButton),
|
|
473
|
+
...otherProps,
|
|
451
474
|
color: 'error',
|
|
452
475
|
icon: jsxRuntime.jsx(RemoveIcon__default["default"], {
|
|
453
476
|
fontSize: iconType === 'default' ? undefined : 'small'
|
|
454
477
|
})
|
|
455
|
-
})
|
|
478
|
+
});
|
|
456
479
|
}
|
|
457
480
|
|
|
458
481
|
/** The `FieldErrorTemplate` component renders the errors local to the particular field
|
|
@@ -460,17 +483,18 @@ function RemoveButton(props) {
|
|
|
460
483
|
* @param props - The `FieldErrorProps` for the errors being rendered
|
|
461
484
|
*/
|
|
462
485
|
function FieldErrorTemplate(props) {
|
|
463
|
-
|
|
464
|
-
errors =
|
|
465
|
-
idSchema
|
|
486
|
+
const {
|
|
487
|
+
errors = [],
|
|
488
|
+
idSchema
|
|
489
|
+
} = props;
|
|
466
490
|
if (errors.length === 0) {
|
|
467
491
|
return null;
|
|
468
492
|
}
|
|
469
|
-
|
|
493
|
+
const id = utils.errorId(idSchema);
|
|
470
494
|
return jsxRuntime.jsx(List__default["default"], {
|
|
471
495
|
dense: true,
|
|
472
496
|
disablePadding: true,
|
|
473
|
-
children: errors.map(
|
|
497
|
+
children: errors.map((error, i) => {
|
|
474
498
|
return jsxRuntime.jsx(ListItem__default["default"], {
|
|
475
499
|
disableGutters: true,
|
|
476
500
|
children: jsxRuntime.jsx(FormHelperText__default["default"], {
|
|
@@ -487,12 +511,14 @@ function FieldErrorTemplate(props) {
|
|
|
487
511
|
* @param props - The `FieldHelpProps` to be rendered
|
|
488
512
|
*/
|
|
489
513
|
function FieldHelpTemplate(props) {
|
|
490
|
-
|
|
491
|
-
|
|
514
|
+
const {
|
|
515
|
+
idSchema,
|
|
516
|
+
help
|
|
517
|
+
} = props;
|
|
492
518
|
if (!help) {
|
|
493
519
|
return null;
|
|
494
520
|
}
|
|
495
|
-
|
|
521
|
+
const id = utils.helpId(idSchema);
|
|
496
522
|
return jsxRuntime.jsx(FormHelperText__default["default"], {
|
|
497
523
|
id: id,
|
|
498
524
|
children: help
|
|
@@ -505,29 +531,30 @@ function FieldHelpTemplate(props) {
|
|
|
505
531
|
* @param props - The `FieldTemplateProps` for this component
|
|
506
532
|
*/
|
|
507
533
|
function FieldTemplate(props) {
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
rawErrors =
|
|
522
|
-
errors
|
|
523
|
-
help
|
|
524
|
-
description
|
|
525
|
-
rawDescription
|
|
526
|
-
schema
|
|
527
|
-
uiSchema
|
|
528
|
-
registry
|
|
529
|
-
|
|
530
|
-
|
|
534
|
+
const {
|
|
535
|
+
id,
|
|
536
|
+
children,
|
|
537
|
+
classNames,
|
|
538
|
+
style,
|
|
539
|
+
disabled,
|
|
540
|
+
displayLabel,
|
|
541
|
+
hidden,
|
|
542
|
+
label,
|
|
543
|
+
onDropPropertyClick,
|
|
544
|
+
onKeyChange,
|
|
545
|
+
readonly,
|
|
546
|
+
required,
|
|
547
|
+
rawErrors = [],
|
|
548
|
+
errors,
|
|
549
|
+
help,
|
|
550
|
+
description,
|
|
551
|
+
rawDescription,
|
|
552
|
+
schema,
|
|
553
|
+
uiSchema,
|
|
554
|
+
registry
|
|
555
|
+
} = props;
|
|
556
|
+
const uiOptions = utils.getUiOptions(uiSchema);
|
|
557
|
+
const WrapIfAdditionalTemplate = utils.getTemplate('WrapIfAdditionalTemplate', registry, uiOptions);
|
|
531
558
|
if (hidden) {
|
|
532
559
|
return jsxRuntime.jsx("div", {
|
|
533
560
|
style: {
|
|
@@ -569,23 +596,29 @@ function FieldTemplate(props) {
|
|
|
569
596
|
* @param props - The `ObjectFieldTemplateProps` for this component
|
|
570
597
|
*/
|
|
571
598
|
function ObjectFieldTemplate(props) {
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
599
|
+
const {
|
|
600
|
+
description,
|
|
601
|
+
title,
|
|
602
|
+
properties,
|
|
603
|
+
required,
|
|
604
|
+
disabled,
|
|
605
|
+
readonly,
|
|
606
|
+
uiSchema,
|
|
607
|
+
idSchema,
|
|
608
|
+
schema,
|
|
609
|
+
formData,
|
|
610
|
+
onAddClick,
|
|
611
|
+
registry
|
|
612
|
+
} = props;
|
|
613
|
+
const uiOptions = utils.getUiOptions(uiSchema);
|
|
614
|
+
const TitleFieldTemplate = utils.getTemplate('TitleFieldTemplate', registry, uiOptions);
|
|
615
|
+
const DescriptionFieldTemplate = utils.getTemplate('DescriptionFieldTemplate', registry, uiOptions);
|
|
587
616
|
// Button templates are not overridden in the uiSchema
|
|
588
|
-
|
|
617
|
+
const {
|
|
618
|
+
ButtonTemplates: {
|
|
619
|
+
AddButton
|
|
620
|
+
}
|
|
621
|
+
} = registry.templates;
|
|
589
622
|
return jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
590
623
|
children: [title && jsxRuntime.jsx(TitleFieldTemplate, {
|
|
591
624
|
id: utils.titleId(idSchema),
|
|
@@ -606,20 +639,17 @@ function ObjectFieldTemplate(props) {
|
|
|
606
639
|
style: {
|
|
607
640
|
marginTop: '10px'
|
|
608
641
|
},
|
|
609
|
-
children: [properties.map(
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
}, index)
|
|
621
|
-
);
|
|
622
|
-
}), utils.canExpand(schema, uiSchema, formData) && jsxRuntime.jsx(Grid__default["default"], {
|
|
642
|
+
children: [properties.map((element, index) =>
|
|
643
|
+
// Remove the <Grid> if the inner element is hidden as the <Grid>
|
|
644
|
+
// itself would otherwise still take up space.
|
|
645
|
+
element.hidden ? element.content : jsxRuntime.jsx(Grid__default["default"], {
|
|
646
|
+
item: true,
|
|
647
|
+
xs: 12,
|
|
648
|
+
style: {
|
|
649
|
+
marginBottom: '10px'
|
|
650
|
+
},
|
|
651
|
+
children: element.content
|
|
652
|
+
}, index)), utils.canExpand(schema, uiSchema, formData) && jsxRuntime.jsx(Grid__default["default"], {
|
|
623
653
|
container: true,
|
|
624
654
|
justifyContent: 'flex-end',
|
|
625
655
|
children: jsxRuntime.jsx(Grid__default["default"], {
|
|
@@ -639,25 +669,26 @@ function ObjectFieldTemplate(props) {
|
|
|
639
669
|
|
|
640
670
|
/** The `SubmitButton` renders a button that represent the `Submit` action on a form
|
|
641
671
|
*/
|
|
642
|
-
function SubmitButton(
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
submitButtonProps =
|
|
672
|
+
function SubmitButton({
|
|
673
|
+
uiSchema
|
|
674
|
+
}) {
|
|
675
|
+
const {
|
|
676
|
+
submitText,
|
|
677
|
+
norender,
|
|
678
|
+
props: submitButtonProps = {}
|
|
679
|
+
} = utils.getSubmitButtonOptions(uiSchema);
|
|
649
680
|
if (norender) {
|
|
650
681
|
return null;
|
|
651
682
|
}
|
|
652
683
|
return jsxRuntime.jsx(Box__default["default"], {
|
|
653
684
|
marginTop: 3,
|
|
654
|
-
children: jsxRuntime.jsx(Button__default["default"],
|
|
685
|
+
children: jsxRuntime.jsx(Button__default["default"], {
|
|
655
686
|
type: 'submit',
|
|
656
687
|
variant: 'contained',
|
|
657
|
-
color: 'primary'
|
|
658
|
-
|
|
688
|
+
color: 'primary',
|
|
689
|
+
...submitButtonProps,
|
|
659
690
|
children: submitText
|
|
660
|
-
})
|
|
691
|
+
})
|
|
661
692
|
});
|
|
662
693
|
}
|
|
663
694
|
|
|
@@ -665,9 +696,10 @@ function SubmitButton(_ref) {
|
|
|
665
696
|
*
|
|
666
697
|
* @param props - The `TitleFieldProps` for this component
|
|
667
698
|
*/
|
|
668
|
-
function TitleField(
|
|
669
|
-
|
|
670
|
-
|
|
699
|
+
function TitleField({
|
|
700
|
+
id,
|
|
701
|
+
title
|
|
702
|
+
}) {
|
|
671
703
|
return jsxRuntime.jsxs(Box__default["default"], {
|
|
672
704
|
id: id,
|
|
673
705
|
mb: 1,
|
|
@@ -685,26 +717,32 @@ function TitleField(_ref) {
|
|
|
685
717
|
* @param props - The `WrapIfAdditionalProps` for this component
|
|
686
718
|
*/
|
|
687
719
|
function WrapIfAdditionalTemplate(props) {
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
720
|
+
const {
|
|
721
|
+
children,
|
|
722
|
+
classNames,
|
|
723
|
+
style,
|
|
724
|
+
disabled,
|
|
725
|
+
id,
|
|
726
|
+
label,
|
|
727
|
+
onDropPropertyClick,
|
|
728
|
+
onKeyChange,
|
|
729
|
+
readonly,
|
|
730
|
+
required,
|
|
731
|
+
schema,
|
|
732
|
+
uiSchema,
|
|
733
|
+
registry
|
|
734
|
+
} = props;
|
|
735
|
+
const {
|
|
736
|
+
templates,
|
|
737
|
+
translateString
|
|
738
|
+
} = registry;
|
|
703
739
|
// Button templates are not overridden in the uiSchema
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
740
|
+
const {
|
|
741
|
+
RemoveButton
|
|
742
|
+
} = templates.ButtonTemplates;
|
|
743
|
+
const keyLabel = translateString(utils.TranslatableString.KeyLabel, [label]);
|
|
744
|
+
const additional = (utils.ADDITIONAL_PROPERTY_FLAG in schema);
|
|
745
|
+
const btnStyle = {
|
|
708
746
|
flex: 1,
|
|
709
747
|
paddingLeft: 6,
|
|
710
748
|
paddingRight: 6,
|
|
@@ -717,10 +755,9 @@ function WrapIfAdditionalTemplate(props) {
|
|
|
717
755
|
children: children
|
|
718
756
|
});
|
|
719
757
|
}
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
};
|
|
758
|
+
const handleBlur = ({
|
|
759
|
+
target
|
|
760
|
+
}) => onKeyChange(target.value);
|
|
724
761
|
return jsxRuntime.jsxs(Grid__default["default"], {
|
|
725
762
|
container: true,
|
|
726
763
|
alignItems: 'center',
|
|
@@ -736,8 +773,8 @@ function WrapIfAdditionalTemplate(props) {
|
|
|
736
773
|
label: keyLabel,
|
|
737
774
|
defaultValue: label,
|
|
738
775
|
disabled: disabled || readonly,
|
|
739
|
-
id: id
|
|
740
|
-
name: id
|
|
776
|
+
id: `${id}-key`,
|
|
777
|
+
name: `${id}-key`,
|
|
741
778
|
onBlur: !readonly ? handleBlur : undefined,
|
|
742
779
|
type: 'text'
|
|
743
780
|
})
|
|
@@ -756,30 +793,30 @@ function WrapIfAdditionalTemplate(props) {
|
|
|
756
793
|
registry: registry
|
|
757
794
|
})
|
|
758
795
|
})]
|
|
759
|
-
}, id
|
|
796
|
+
}, `${id}-key`);
|
|
760
797
|
}
|
|
761
798
|
|
|
762
799
|
function generateTemplates() {
|
|
763
800
|
return {
|
|
764
|
-
ArrayFieldItemTemplate
|
|
765
|
-
ArrayFieldTemplate
|
|
766
|
-
BaseInputTemplate
|
|
801
|
+
ArrayFieldItemTemplate,
|
|
802
|
+
ArrayFieldTemplate,
|
|
803
|
+
BaseInputTemplate,
|
|
767
804
|
ButtonTemplates: {
|
|
768
|
-
AddButton
|
|
769
|
-
CopyButton
|
|
770
|
-
MoveDownButton
|
|
771
|
-
MoveUpButton
|
|
772
|
-
RemoveButton
|
|
773
|
-
SubmitButton
|
|
805
|
+
AddButton,
|
|
806
|
+
CopyButton,
|
|
807
|
+
MoveDownButton,
|
|
808
|
+
MoveUpButton,
|
|
809
|
+
RemoveButton,
|
|
810
|
+
SubmitButton
|
|
774
811
|
},
|
|
775
812
|
DescriptionFieldTemplate: DescriptionField,
|
|
776
813
|
ErrorListTemplate: ErrorList,
|
|
777
|
-
FieldErrorTemplate
|
|
778
|
-
FieldHelpTemplate
|
|
779
|
-
FieldTemplate
|
|
780
|
-
ObjectFieldTemplate
|
|
814
|
+
FieldErrorTemplate,
|
|
815
|
+
FieldHelpTemplate,
|
|
816
|
+
FieldTemplate,
|
|
817
|
+
ObjectFieldTemplate,
|
|
781
818
|
TitleFieldTemplate: TitleField,
|
|
782
|
-
WrapIfAdditionalTemplate
|
|
819
|
+
WrapIfAdditionalTemplate
|
|
783
820
|
};
|
|
784
821
|
}
|
|
785
822
|
var Templates = /*#__PURE__*/generateTemplates();
|
|
@@ -790,39 +827,39 @@ var Templates = /*#__PURE__*/generateTemplates();
|
|
|
790
827
|
* @param props - The `WidgetProps` for this component
|
|
791
828
|
*/
|
|
792
829
|
function CheckboxWidget(props) {
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
id
|
|
796
|
-
value
|
|
797
|
-
disabled
|
|
798
|
-
readonly
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
830
|
+
const {
|
|
831
|
+
schema,
|
|
832
|
+
id,
|
|
833
|
+
value,
|
|
834
|
+
disabled,
|
|
835
|
+
readonly,
|
|
836
|
+
label = '',
|
|
837
|
+
hideLabel,
|
|
838
|
+
autofocus,
|
|
839
|
+
onChange,
|
|
840
|
+
onBlur,
|
|
841
|
+
onFocus,
|
|
842
|
+
registry,
|
|
843
|
+
options,
|
|
844
|
+
uiSchema
|
|
845
|
+
} = props;
|
|
846
|
+
const DescriptionFieldTemplate = utils.getTemplate('DescriptionFieldTemplate', registry, options);
|
|
810
847
|
// Because an unchecked checkbox will cause html5 validation to fail, only add
|
|
811
848
|
// the "required" attribute if the field value must be "true", due to the
|
|
812
849
|
// "const" or "enum" keywords
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
};
|
|
825
|
-
|
|
850
|
+
const required = utils.schemaRequiresTrueValue(schema);
|
|
851
|
+
const _onChange = (_, checked) => onChange(checked);
|
|
852
|
+
const _onBlur = ({
|
|
853
|
+
target: {
|
|
854
|
+
value
|
|
855
|
+
}
|
|
856
|
+
}) => onBlur(id, value);
|
|
857
|
+
const _onFocus = ({
|
|
858
|
+
target: {
|
|
859
|
+
value
|
|
860
|
+
}
|
|
861
|
+
}) => onFocus(id, value);
|
|
862
|
+
const description = options.description ?? schema.description;
|
|
826
863
|
return jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
827
864
|
children: [!hideLabel && !!description && jsxRuntime.jsx(DescriptionFieldTemplate, {
|
|
828
865
|
id: utils.descriptionId(id),
|
|
@@ -853,42 +890,48 @@ function CheckboxWidget(props) {
|
|
|
853
890
|
*
|
|
854
891
|
* @param props - The `WidgetProps` for this component
|
|
855
892
|
*/
|
|
856
|
-
function CheckboxesWidget(
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
};
|
|
888
|
-
var _onFocus = function _onFocus(_ref4) {
|
|
889
|
-
var value = _ref4.target.value;
|
|
890
|
-
return onFocus(id, utils.enumOptionsValueForIndex(value, enumOptions, emptyValue));
|
|
893
|
+
function CheckboxesWidget({
|
|
894
|
+
label,
|
|
895
|
+
hideLabel,
|
|
896
|
+
id,
|
|
897
|
+
disabled,
|
|
898
|
+
options,
|
|
899
|
+
value,
|
|
900
|
+
autofocus,
|
|
901
|
+
readonly,
|
|
902
|
+
required,
|
|
903
|
+
onChange,
|
|
904
|
+
onBlur,
|
|
905
|
+
onFocus
|
|
906
|
+
}) {
|
|
907
|
+
const {
|
|
908
|
+
enumOptions,
|
|
909
|
+
enumDisabled,
|
|
910
|
+
inline,
|
|
911
|
+
emptyValue
|
|
912
|
+
} = options;
|
|
913
|
+
const checkboxesValues = Array.isArray(value) ? value : [value];
|
|
914
|
+
const _onChange = index => ({
|
|
915
|
+
target: {
|
|
916
|
+
checked
|
|
917
|
+
}
|
|
918
|
+
}) => {
|
|
919
|
+
if (checked) {
|
|
920
|
+
onChange(utils.enumOptionsSelectValue(index, checkboxesValues, enumOptions));
|
|
921
|
+
} else {
|
|
922
|
+
onChange(utils.enumOptionsDeselectValue(index, checkboxesValues, enumOptions));
|
|
923
|
+
}
|
|
891
924
|
};
|
|
925
|
+
const _onBlur = ({
|
|
926
|
+
target: {
|
|
927
|
+
value
|
|
928
|
+
}
|
|
929
|
+
}) => onBlur(id, utils.enumOptionsValueForIndex(value, enumOptions, emptyValue));
|
|
930
|
+
const _onFocus = ({
|
|
931
|
+
target: {
|
|
932
|
+
value
|
|
933
|
+
}
|
|
934
|
+
}) => onFocus(id, utils.enumOptionsValueForIndex(value, enumOptions, emptyValue));
|
|
892
935
|
return jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
893
936
|
children: [utils.labelValue(jsxRuntime.jsx(FormLabel__default["default"], {
|
|
894
937
|
required: required,
|
|
@@ -897,10 +940,10 @@ function CheckboxesWidget(_ref) {
|
|
|
897
940
|
}), hideLabel), jsxRuntime.jsx(FormGroup__default["default"], {
|
|
898
941
|
id: id,
|
|
899
942
|
row: !!inline,
|
|
900
|
-
children: Array.isArray(enumOptions) && enumOptions.map(
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
943
|
+
children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
|
|
944
|
+
const checked = utils.enumOptionsIsSelected(option.value, checkboxesValues);
|
|
945
|
+
const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
|
|
946
|
+
const checkbox = jsxRuntime.jsx(Checkbox__default["default"], {
|
|
904
947
|
id: utils.optionId(id, index),
|
|
905
948
|
name: id,
|
|
906
949
|
checked: checked,
|
|
@@ -925,35 +968,37 @@ function CheckboxesWidget(_ref) {
|
|
|
925
968
|
*
|
|
926
969
|
* @param props - The `WidgetProps` for this component
|
|
927
970
|
*/
|
|
928
|
-
function RadioWidget(
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
971
|
+
function RadioWidget({
|
|
972
|
+
id,
|
|
973
|
+
options,
|
|
974
|
+
value,
|
|
975
|
+
required,
|
|
976
|
+
disabled,
|
|
977
|
+
readonly,
|
|
978
|
+
label,
|
|
979
|
+
hideLabel,
|
|
980
|
+
onChange,
|
|
981
|
+
onBlur,
|
|
982
|
+
onFocus
|
|
983
|
+
}) {
|
|
984
|
+
const {
|
|
985
|
+
enumOptions,
|
|
986
|
+
enumDisabled,
|
|
987
|
+
emptyValue
|
|
988
|
+
} = options;
|
|
989
|
+
const _onChange = (_, value) => onChange(utils.enumOptionsValueForIndex(value, enumOptions, emptyValue));
|
|
990
|
+
const _onBlur = ({
|
|
991
|
+
target: {
|
|
992
|
+
value
|
|
993
|
+
}
|
|
994
|
+
}) => onBlur(id, utils.enumOptionsValueForIndex(value, enumOptions, emptyValue));
|
|
995
|
+
const _onFocus = ({
|
|
996
|
+
target: {
|
|
997
|
+
value
|
|
998
|
+
}
|
|
999
|
+
}) => onFocus(id, utils.enumOptionsValueForIndex(value, enumOptions, emptyValue));
|
|
1000
|
+
const row = options ? options.inline : false;
|
|
1001
|
+
const selectedIndex = utils.enumOptionsIndexForValue(value, enumOptions) ?? null;
|
|
957
1002
|
return jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
958
1003
|
children: [utils.labelValue(jsxRuntime.jsx(FormLabel__default["default"], {
|
|
959
1004
|
required: required,
|
|
@@ -968,9 +1013,9 @@ function RadioWidget(_ref) {
|
|
|
968
1013
|
onBlur: _onBlur,
|
|
969
1014
|
onFocus: _onFocus,
|
|
970
1015
|
"aria-describedby": utils.ariaDescribedByIds(id),
|
|
971
|
-
children: Array.isArray(enumOptions) && enumOptions.map(
|
|
972
|
-
|
|
973
|
-
|
|
1016
|
+
children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
|
|
1017
|
+
const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
|
|
1018
|
+
const radio = jsxRuntime.jsx(FormControlLabel__default["default"], {
|
|
974
1019
|
control: jsxRuntime.jsx(Radio__default["default"], {
|
|
975
1020
|
name: id,
|
|
976
1021
|
id: utils.optionId(id, index),
|
|
@@ -992,96 +1037,112 @@ function RadioWidget(_ref) {
|
|
|
992
1037
|
* @param props - The `WidgetProps` for this component
|
|
993
1038
|
*/
|
|
994
1039
|
function RangeWidget(props) {
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
};
|
|
1016
|
-
var _onBlur = function _onBlur(_ref) {
|
|
1017
|
-
var value = _ref.target.value;
|
|
1018
|
-
return onBlur(id, value);
|
|
1040
|
+
const {
|
|
1041
|
+
value,
|
|
1042
|
+
readonly,
|
|
1043
|
+
disabled,
|
|
1044
|
+
onBlur,
|
|
1045
|
+
onFocus,
|
|
1046
|
+
options,
|
|
1047
|
+
schema,
|
|
1048
|
+
onChange,
|
|
1049
|
+
required,
|
|
1050
|
+
label,
|
|
1051
|
+
hideLabel,
|
|
1052
|
+
id
|
|
1053
|
+
} = props;
|
|
1054
|
+
const sliderProps = {
|
|
1055
|
+
value,
|
|
1056
|
+
label,
|
|
1057
|
+
id,
|
|
1058
|
+
name: id,
|
|
1059
|
+
...utils.rangeSpec(schema)
|
|
1019
1060
|
};
|
|
1020
|
-
|
|
1021
|
-
|
|
1022
|
-
return onFocus(id, value);
|
|
1061
|
+
const _onChange = (_, value) => {
|
|
1062
|
+
onChange(value ?? options.emptyValue);
|
|
1023
1063
|
};
|
|
1064
|
+
const _onBlur = ({
|
|
1065
|
+
target: {
|
|
1066
|
+
value
|
|
1067
|
+
}
|
|
1068
|
+
}) => onBlur(id, value);
|
|
1069
|
+
const _onFocus = ({
|
|
1070
|
+
target: {
|
|
1071
|
+
value
|
|
1072
|
+
}
|
|
1073
|
+
}) => onFocus(id, value);
|
|
1024
1074
|
return jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
1025
1075
|
children: [utils.labelValue(jsxRuntime.jsx(FormLabel__default["default"], {
|
|
1026
1076
|
required: required,
|
|
1027
1077
|
htmlFor: id,
|
|
1028
1078
|
children: label || undefined
|
|
1029
|
-
}), hideLabel), jsxRuntime.jsx(Slider__default["default"],
|
|
1079
|
+
}), hideLabel), jsxRuntime.jsx(Slider__default["default"], {
|
|
1030
1080
|
disabled: disabled || readonly,
|
|
1031
1081
|
onChange: _onChange,
|
|
1032
1082
|
onBlur: _onBlur,
|
|
1033
1083
|
onFocus: _onFocus,
|
|
1034
|
-
valueLabelDisplay: 'auto'
|
|
1035
|
-
|
|
1084
|
+
valueLabelDisplay: 'auto',
|
|
1085
|
+
...sliderProps,
|
|
1036
1086
|
"aria-describedby": utils.ariaDescribedByIds(id)
|
|
1037
|
-
})
|
|
1087
|
+
})]
|
|
1038
1088
|
});
|
|
1039
1089
|
}
|
|
1040
1090
|
|
|
1041
|
-
var _excluded = ["schema", "id", "name", "options", "label", "hideLabel", "required", "disabled", "placeholder", "readonly", "value", "multiple", "autofocus", "onChange", "onBlur", "onFocus", "rawErrors", "registry", "uiSchema", "hideError", "formContext"];
|
|
1042
1091
|
/** The `SelectWidget` is a widget for rendering dropdowns.
|
|
1043
1092
|
* It is typically used with string properties constrained with enum options.
|
|
1044
1093
|
*
|
|
1045
1094
|
* @param props - The `WidgetProps` for this component
|
|
1046
1095
|
*/
|
|
1047
|
-
function SelectWidget(
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1096
|
+
function SelectWidget({
|
|
1097
|
+
schema,
|
|
1098
|
+
id,
|
|
1099
|
+
name,
|
|
1100
|
+
// remove this from textFieldProps
|
|
1101
|
+
options,
|
|
1102
|
+
label,
|
|
1103
|
+
hideLabel,
|
|
1104
|
+
required,
|
|
1105
|
+
disabled,
|
|
1106
|
+
placeholder,
|
|
1107
|
+
readonly,
|
|
1108
|
+
value,
|
|
1109
|
+
multiple,
|
|
1110
|
+
autofocus,
|
|
1111
|
+
onChange,
|
|
1112
|
+
onBlur,
|
|
1113
|
+
onFocus,
|
|
1114
|
+
rawErrors = [],
|
|
1115
|
+
registry,
|
|
1116
|
+
uiSchema,
|
|
1117
|
+
hideError,
|
|
1118
|
+
formContext,
|
|
1119
|
+
...textFieldProps
|
|
1120
|
+
}) {
|
|
1121
|
+
const {
|
|
1122
|
+
enumOptions,
|
|
1123
|
+
enumDisabled,
|
|
1124
|
+
emptyValue: optEmptyVal
|
|
1125
|
+
} = options;
|
|
1068
1126
|
multiple = typeof multiple === 'undefined' ? false : !!multiple;
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
|
|
1127
|
+
const emptyValue = multiple ? [] : '';
|
|
1128
|
+
const isEmpty = typeof value === 'undefined' || multiple && value.length < 1 || !multiple && value === emptyValue;
|
|
1129
|
+
const _onChange = ({
|
|
1130
|
+
target: {
|
|
1131
|
+
value
|
|
1132
|
+
}
|
|
1133
|
+
}) => onChange(utils.enumOptionsValueForIndex(value, enumOptions, optEmptyVal));
|
|
1134
|
+
const _onBlur = ({
|
|
1135
|
+
target: {
|
|
1136
|
+
value
|
|
1137
|
+
}
|
|
1138
|
+
}) => onBlur(id, utils.enumOptionsValueForIndex(value, enumOptions, optEmptyVal));
|
|
1139
|
+
const _onFocus = ({
|
|
1140
|
+
target: {
|
|
1141
|
+
value
|
|
1142
|
+
}
|
|
1143
|
+
}) => onFocus(id, utils.enumOptionsValueForIndex(value, enumOptions, optEmptyVal));
|
|
1144
|
+
const selectedIndexes = utils.enumOptionsIndexForValue(value, enumOptions, multiple);
|
|
1145
|
+
return jsxRuntime.jsx(TextField__default["default"], {
|
|
1085
1146
|
id: id,
|
|
1086
1147
|
name: id,
|
|
1087
1148
|
label: utils.labelValue(label || undefined, hideLabel, false),
|
|
@@ -1093,28 +1154,31 @@ function SelectWidget(_ref) {
|
|
|
1093
1154
|
error: rawErrors.length > 0,
|
|
1094
1155
|
onChange: _onChange,
|
|
1095
1156
|
onBlur: _onBlur,
|
|
1096
|
-
onFocus: _onFocus
|
|
1097
|
-
|
|
1157
|
+
onFocus: _onFocus,
|
|
1158
|
+
...textFieldProps,
|
|
1098
1159
|
select // Apply this and the following props after the potential overrides defined in textFieldProps
|
|
1099
1160
|
: true,
|
|
1100
|
-
InputLabelProps:
|
|
1161
|
+
InputLabelProps: {
|
|
1162
|
+
...textFieldProps.InputLabelProps,
|
|
1101
1163
|
shrink: !isEmpty
|
|
1102
|
-
}
|
|
1103
|
-
SelectProps:
|
|
1104
|
-
|
|
1105
|
-
|
|
1164
|
+
},
|
|
1165
|
+
SelectProps: {
|
|
1166
|
+
...textFieldProps.SelectProps,
|
|
1167
|
+
multiple
|
|
1168
|
+
},
|
|
1106
1169
|
"aria-describedby": utils.ariaDescribedByIds(id),
|
|
1107
|
-
children: Array.isArray(enumOptions) && enumOptions.map(
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1170
|
+
children: Array.isArray(enumOptions) && enumOptions.map(({
|
|
1171
|
+
value,
|
|
1172
|
+
label
|
|
1173
|
+
}, i) => {
|
|
1174
|
+
const disabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(value) !== -1;
|
|
1111
1175
|
return jsxRuntime.jsx(MenuItem__default["default"], {
|
|
1112
1176
|
value: String(i),
|
|
1113
1177
|
disabled: disabled,
|
|
1114
1178
|
children: label
|
|
1115
1179
|
}, i);
|
|
1116
1180
|
})
|
|
1117
|
-
})
|
|
1181
|
+
});
|
|
1118
1182
|
}
|
|
1119
1183
|
|
|
1120
1184
|
/** The `TextareaWidget` is a widget for rendering input fields as textarea.
|
|
@@ -1122,27 +1186,30 @@ function SelectWidget(_ref) {
|
|
|
1122
1186
|
* @param props - The `WidgetProps` for this component
|
|
1123
1187
|
*/
|
|
1124
1188
|
function TextareaWidget(props) {
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1189
|
+
const {
|
|
1190
|
+
options,
|
|
1191
|
+
registry
|
|
1192
|
+
} = props;
|
|
1193
|
+
const BaseInputTemplate = utils.getTemplate('BaseInputTemplate', registry, options);
|
|
1194
|
+
let rows = 5;
|
|
1129
1195
|
if (typeof options.rows === 'string' || typeof options.rows === 'number') {
|
|
1130
1196
|
rows = options.rows;
|
|
1131
1197
|
}
|
|
1132
|
-
return jsxRuntime.jsx(BaseInputTemplate,
|
|
1198
|
+
return jsxRuntime.jsx(BaseInputTemplate, {
|
|
1199
|
+
...props,
|
|
1133
1200
|
multiline: true,
|
|
1134
1201
|
rows: rows
|
|
1135
|
-
})
|
|
1202
|
+
});
|
|
1136
1203
|
}
|
|
1137
1204
|
|
|
1138
1205
|
function generateWidgets() {
|
|
1139
1206
|
return {
|
|
1140
|
-
CheckboxWidget
|
|
1141
|
-
CheckboxesWidget
|
|
1142
|
-
RadioWidget
|
|
1143
|
-
RangeWidget
|
|
1144
|
-
SelectWidget
|
|
1145
|
-
TextareaWidget
|
|
1207
|
+
CheckboxWidget,
|
|
1208
|
+
CheckboxesWidget,
|
|
1209
|
+
RadioWidget,
|
|
1210
|
+
RangeWidget,
|
|
1211
|
+
SelectWidget,
|
|
1212
|
+
TextareaWidget
|
|
1146
1213
|
};
|
|
1147
1214
|
}
|
|
1148
1215
|
var Widgets = /*#__PURE__*/generateWidgets();
|