@rjsf/core 5.11.2 → 5.12.0
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.umd.js +3464 -0
- package/dist/index.esm.js +3814 -0
- package/dist/index.esm.js.map +7 -0
- package/dist/index.js +3714 -5
- package/dist/index.js.map +7 -0
- package/{dist/index.d.ts → lib/components/Form.d.ts} +321 -337
- package/lib/components/Form.js +474 -0
- package/lib/components/Form.js.map +1 -0
- package/lib/components/fields/ArrayField.d.ts +179 -0
- package/lib/components/fields/ArrayField.js +568 -0
- package/lib/components/fields/ArrayField.js.map +1 -0
- package/lib/components/fields/BooleanField.d.ts +9 -0
- package/lib/components/fields/BooleanField.js +62 -0
- package/lib/components/fields/BooleanField.js.map +1 -0
- package/lib/components/fields/MultiSchemaField.d.ts +47 -0
- package/lib/components/fields/MultiSchemaField.js +129 -0
- package/lib/components/fields/MultiSchemaField.js.map +1 -0
- package/lib/components/fields/NullField.d.ts +8 -0
- package/lib/components/fields/NullField.js +17 -0
- package/lib/components/fields/NullField.js.map +1 -0
- package/lib/components/fields/NumberField.d.ts +21 -0
- package/lib/components/fields/NumberField.js +70 -0
- package/lib/components/fields/NumberField.js.map +1 -0
- package/lib/components/fields/ObjectField.d.ts +73 -0
- package/lib/components/fields/ObjectField.js +222 -0
- package/lib/components/fields/ObjectField.js.map +1 -0
- package/lib/components/fields/SchemaField.d.ts +10 -0
- package/lib/components/fields/SchemaField.js +172 -0
- package/lib/components/fields/SchemaField.js.map +1 -0
- package/lib/components/fields/StringField.d.ts +8 -0
- package/lib/components/fields/StringField.js +25 -0
- package/lib/components/fields/StringField.js.map +1 -0
- package/lib/components/fields/index.d.ts +3 -0
- package/lib/components/fields/index.js +24 -0
- package/lib/components/fields/index.js.map +1 -0
- package/lib/components/templates/ArrayFieldDescriptionTemplate.d.ts +8 -0
- package/lib/components/templates/ArrayFieldDescriptionTemplate.js +18 -0
- package/lib/components/templates/ArrayFieldDescriptionTemplate.js.map +1 -0
- package/lib/components/templates/ArrayFieldItemTemplate.d.ts +7 -0
- package/lib/components/templates/ArrayFieldItemTemplate.js +20 -0
- package/lib/components/templates/ArrayFieldItemTemplate.js.map +1 -0
- package/lib/components/templates/ArrayFieldTemplate.d.ts +7 -0
- package/lib/components/templates/ArrayFieldTemplate.js +22 -0
- package/lib/components/templates/ArrayFieldTemplate.js.map +1 -0
- package/lib/components/templates/ArrayFieldTitleTemplate.d.ts +8 -0
- package/lib/components/templates/ArrayFieldTitleTemplate.js +18 -0
- package/lib/components/templates/ArrayFieldTitleTemplate.js.map +1 -0
- package/lib/components/templates/BaseInputTemplate.d.ts +9 -0
- package/lib/components/templates/BaseInputTemplate.js +39 -0
- package/lib/components/templates/BaseInputTemplate.js.map +1 -0
- package/lib/components/templates/ButtonTemplates/AddButton.d.ts +5 -0
- package/lib/components/templates/ButtonTemplates/AddButton.js +10 -0
- package/lib/components/templates/ButtonTemplates/AddButton.js.map +1 -0
- package/lib/components/templates/ButtonTemplates/IconButton.d.ts +7 -0
- package/lib/components/templates/ButtonTemplates/IconButton.js +24 -0
- package/lib/components/templates/ButtonTemplates/IconButton.js.map +1 -0
- package/lib/components/templates/ButtonTemplates/SubmitButton.d.ts +5 -0
- package/lib/components/templates/ButtonTemplates/SubmitButton.js +12 -0
- package/lib/components/templates/ButtonTemplates/SubmitButton.js.map +1 -0
- package/lib/components/templates/ButtonTemplates/index.d.ts +3 -0
- package/lib/components/templates/ButtonTemplates/index.js +15 -0
- package/lib/components/templates/ButtonTemplates/index.js.map +1 -0
- package/lib/components/templates/DescriptionField.d.ts +7 -0
- package/lib/components/templates/DescriptionField.js +18 -0
- package/lib/components/templates/DescriptionField.js.map +1 -0
- package/lib/components/templates/ErrorList.d.ts +7 -0
- package/lib/components/templates/ErrorList.js +13 -0
- package/lib/components/templates/ErrorList.js.map +1 -0
- package/lib/components/templates/FieldErrorTemplate.d.ts +7 -0
- package/lib/components/templates/FieldErrorTemplate.js +19 -0
- package/lib/components/templates/FieldErrorTemplate.js.map +1 -0
- package/lib/components/templates/FieldHelpTemplate.d.ts +7 -0
- package/lib/components/templates/FieldHelpTemplate.js +18 -0
- package/lib/components/templates/FieldHelpTemplate.js.map +1 -0
- package/lib/components/templates/FieldTemplate/FieldTemplate.d.ts +8 -0
- package/lib/components/templates/FieldTemplate/FieldTemplate.js +18 -0
- package/lib/components/templates/FieldTemplate/FieldTemplate.js.map +1 -0
- package/lib/components/templates/FieldTemplate/Label.d.ts +14 -0
- package/lib/components/templates/FieldTemplate/Label.js +14 -0
- package/lib/components/templates/FieldTemplate/Label.js.map +1 -0
- package/lib/components/templates/FieldTemplate/index.d.ts +2 -0
- package/lib/components/templates/FieldTemplate/index.js +3 -0
- package/lib/components/templates/FieldTemplate/index.js.map +1 -0
- package/lib/components/templates/ObjectFieldTemplate.d.ts +9 -0
- package/lib/components/templates/ObjectFieldTemplate.js +18 -0
- package/lib/components/templates/ObjectFieldTemplate.js.map +1 -0
- package/lib/components/templates/TitleField.d.ts +7 -0
- package/lib/components/templates/TitleField.js +11 -0
- package/lib/components/templates/TitleField.js.map +1 -0
- package/lib/components/templates/UnsupportedField.d.ts +9 -0
- package/lib/components/templates/UnsupportedField.js +28 -0
- package/lib/components/templates/UnsupportedField.js.map +1 -0
- package/lib/components/templates/WrapIfAdditionalTemplate.d.ts +8 -0
- package/lib/components/templates/WrapIfAdditionalTemplate.js +21 -0
- package/lib/components/templates/WrapIfAdditionalTemplate.js.map +1 -0
- package/lib/components/templates/index.d.ts +3 -0
- package/lib/components/templates/index.js +36 -0
- package/lib/components/templates/index.js.map +1 -0
- package/lib/components/widgets/AltDateTimeWidget.d.ts +9 -0
- package/lib/components/widgets/AltDateTimeWidget.js +14 -0
- package/lib/components/widgets/AltDateTimeWidget.js.map +1 -0
- package/lib/components/widgets/AltDateWidget.d.ts +7 -0
- package/lib/components/widgets/AltDateWidget.js +77 -0
- package/lib/components/widgets/AltDateWidget.js.map +1 -0
- package/lib/components/widgets/CheckboxWidget.d.ts +9 -0
- package/lib/components/widgets/CheckboxWidget.js +23 -0
- package/lib/components/widgets/CheckboxWidget.js.map +1 -0
- package/lib/components/widgets/CheckboxesWidget.d.ts +9 -0
- package/lib/components/widgets/CheckboxesWidget.js +31 -0
- package/lib/components/widgets/CheckboxesWidget.js.map +1 -0
- package/lib/components/widgets/ColorWidget.d.ts +8 -0
- package/lib/components/widgets/ColorWidget.js +13 -0
- package/lib/components/widgets/ColorWidget.js.map +1 -0
- package/lib/components/widgets/DateTimeWidget.d.ts +8 -0
- package/lib/components/widgets/DateTimeWidget.js +13 -0
- package/lib/components/widgets/DateTimeWidget.js.map +1 -0
- package/lib/components/widgets/DateWidget.d.ts +8 -0
- package/lib/components/widgets/DateWidget.js +15 -0
- package/lib/components/widgets/DateWidget.js.map +1 -0
- package/lib/components/widgets/EmailWidget.d.ts +7 -0
- package/lib/components/widgets/EmailWidget.js +12 -0
- package/lib/components/widgets/EmailWidget.js.map +1 -0
- package/lib/components/widgets/FileWidget.d.ts +8 -0
- package/lib/components/widgets/FileWidget.js +105 -0
- package/lib/components/widgets/FileWidget.js.map +1 -0
- package/lib/components/widgets/HiddenWidget.d.ts +9 -0
- package/lib/components/widgets/HiddenWidget.js +11 -0
- package/lib/components/widgets/HiddenWidget.js.map +1 -0
- package/lib/components/widgets/PasswordWidget.d.ts +7 -0
- package/lib/components/widgets/PasswordWidget.js +12 -0
- package/lib/components/widgets/PasswordWidget.js.map +1 -0
- package/lib/components/widgets/RadioWidget.d.ts +9 -0
- package/lib/components/widgets/RadioWidget.js +24 -0
- package/lib/components/widgets/RadioWidget.js.map +1 -0
- package/lib/components/widgets/RangeWidget.d.ts +8 -0
- package/lib/components/widgets/RangeWidget.js +11 -0
- package/lib/components/widgets/RangeWidget.js.map +1 -0
- package/lib/components/widgets/SelectWidget.d.ts +9 -0
- package/lib/components/widgets/SelectWidget.js +41 -0
- package/lib/components/widgets/SelectWidget.js.map +1 -0
- package/lib/components/widgets/TextWidget.d.ts +7 -0
- package/lib/components/widgets/TextWidget.js +12 -0
- package/lib/components/widgets/TextWidget.js.map +1 -0
- package/lib/components/widgets/TextareaWidget.d.ts +14 -0
- package/lib/components/widgets/TextareaWidget.js +19 -0
- package/lib/components/widgets/TextareaWidget.js.map +1 -0
- package/lib/components/widgets/TimeWidget.d.ts +8 -0
- package/lib/components/widgets/TimeWidget.js +15 -0
- package/lib/components/widgets/TimeWidget.js.map +1 -0
- package/lib/components/widgets/URLWidget.d.ts +7 -0
- package/lib/components/widgets/URLWidget.js +12 -0
- package/lib/components/widgets/URLWidget.js.map +1 -0
- package/lib/components/widgets/UpDownWidget.d.ts +7 -0
- package/lib/components/widgets/UpDownWidget.js +12 -0
- package/lib/components/widgets/UpDownWidget.js.map +1 -0
- package/lib/components/widgets/index.d.ts +3 -0
- package/lib/components/widgets/index.js +44 -0
- package/lib/components/widgets/index.js.map +1 -0
- package/lib/getDefaultRegistry.d.ts +6 -0
- package/lib/getDefaultRegistry.js +19 -0
- package/lib/getDefaultRegistry.js.map +1 -0
- package/lib/index.d.ts +6 -0
- package/lib/index.js +6 -0
- package/lib/index.js.map +1 -0
- package/lib/withTheme.d.ts +9 -0
- package/lib/withTheme.js +16 -0
- package/lib/withTheme.js.map +1 -0
- package/package.json +23 -16
- package/src/components/Form.tsx +853 -0
- package/src/components/fields/ArrayField.tsx +875 -0
- package/src/components/fields/BooleanField.tsx +114 -0
- package/src/components/fields/MultiSchemaField.tsx +221 -0
- package/src/components/fields/NullField.tsx +22 -0
- package/src/components/fields/NumberField.tsx +86 -0
- package/src/components/fields/ObjectField.tsx +331 -0
- package/src/components/fields/SchemaField.tsx +360 -0
- package/src/components/fields/StringField.tsx +71 -0
- package/src/components/fields/index.ts +31 -0
- package/src/components/templates/ArrayFieldDescriptionTemplate.tsx +41 -0
- package/src/components/templates/ArrayFieldItemTemplate.tsx +90 -0
- package/src/components/templates/ArrayFieldTemplate.tsx +88 -0
- package/src/components/templates/ArrayFieldTitleTemplate.tsx +43 -0
- package/src/components/templates/BaseInputTemplate.tsx +102 -0
- package/src/components/templates/ButtonTemplates/AddButton.tsx +29 -0
- package/src/components/templates/ButtonTemplates/IconButton.tsx +77 -0
- package/src/components/templates/ButtonTemplates/SubmitButton.tsx +21 -0
- package/src/components/templates/ButtonTemplates/index.ts +22 -0
- package/src/components/templates/DescriptionField.tsx +29 -0
- package/src/components/templates/ErrorList.tsx +35 -0
- package/src/components/templates/FieldErrorTemplate.tsx +33 -0
- package/src/components/templates/FieldHelpTemplate.tsx +29 -0
- package/src/components/templates/FieldTemplate/FieldTemplate.tsx +41 -0
- package/src/components/templates/FieldTemplate/Label.tsx +27 -0
- package/src/components/templates/FieldTemplate/index.ts +3 -0
- package/src/components/templates/ObjectFieldTemplate.tsx +83 -0
- package/src/components/templates/TitleField.tsx +19 -0
- package/src/components/templates/UnsupportedField.tsx +37 -0
- package/src/components/templates/WrapIfAdditionalTemplate.tsx +80 -0
- package/src/components/templates/index.ts +43 -0
- package/src/components/widgets/AltDateTimeWidget.tsx +16 -0
- package/src/components/widgets/AltDateWidget.tsx +198 -0
- package/src/components/widgets/CheckboxWidget.tsx +92 -0
- package/src/components/widgets/CheckboxesWidget.tsx +92 -0
- package/src/components/widgets/ColorWidget.tsx +14 -0
- package/src/components/widgets/DateTimeWidget.tsx +31 -0
- package/src/components/widgets/DateWidget.tsx +17 -0
- package/src/components/widgets/EmailWidget.tsx +13 -0
- package/src/components/widgets/FileWidget.tsx +178 -0
- package/src/components/widgets/HiddenWidget.tsx +15 -0
- package/src/components/widgets/PasswordWidget.tsx +15 -0
- package/src/components/widgets/RadioWidget.tsx +88 -0
- package/src/components/widgets/RangeWidget.tsx +23 -0
- package/src/components/widgets/SelectWidget.tsx +100 -0
- package/src/components/widgets/TextWidget.tsx +13 -0
- package/src/components/widgets/TextareaWidget.tsx +61 -0
- package/src/components/widgets/TimeWidget.tsx +17 -0
- package/src/components/widgets/URLWidget.tsx +13 -0
- package/src/components/widgets/UpDownWidget.tsx +13 -0
- package/src/components/widgets/index.ts +51 -0
- package/src/getDefaultRegistry.ts +24 -0
- package/src/index.ts +8 -0
- package/src/withTheme.tsx +42 -0
- package/dist/core.cjs.development.js +0 -4403
- package/dist/core.cjs.development.js.map +0 -1
- package/dist/core.cjs.production.min.js +0 -2
- package/dist/core.cjs.production.min.js.map +0 -1
- package/dist/core.esm.js +0 -4383
- package/dist/core.esm.js.map +0 -1
- package/dist/core.umd.development.js +0 -4393
- package/dist/core.umd.development.js.map +0 -1
- package/dist/core.umd.production.min.js +0 -2
- package/dist/core.umd.production.min.js.map +0 -1
|
@@ -1,4403 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var react = require('react');
|
|
7
|
-
var utils = require('@rjsf/utils');
|
|
8
|
-
var get = require('lodash/get');
|
|
9
|
-
var isEmpty = require('lodash/isEmpty');
|
|
10
|
-
var _pick = require('lodash/pick');
|
|
11
|
-
var _toPath = require('lodash/toPath');
|
|
12
|
-
var cloneDeep = require('lodash/cloneDeep');
|
|
13
|
-
var isObject = require('lodash/isObject');
|
|
14
|
-
var set = require('lodash/set');
|
|
15
|
-
var nanoid = require('nanoid');
|
|
16
|
-
var omit = require('lodash/omit');
|
|
17
|
-
var unset = require('lodash/unset');
|
|
18
|
-
var Markdown = require('markdown-to-jsx');
|
|
19
|
-
var has = require('lodash/has');
|
|
20
|
-
|
|
21
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
22
|
-
|
|
23
|
-
var get__default = /*#__PURE__*/_interopDefaultLegacy(get);
|
|
24
|
-
var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty);
|
|
25
|
-
var _pick__default = /*#__PURE__*/_interopDefaultLegacy(_pick);
|
|
26
|
-
var _toPath__default = /*#__PURE__*/_interopDefaultLegacy(_toPath);
|
|
27
|
-
var cloneDeep__default = /*#__PURE__*/_interopDefaultLegacy(cloneDeep);
|
|
28
|
-
var isObject__default = /*#__PURE__*/_interopDefaultLegacy(isObject);
|
|
29
|
-
var set__default = /*#__PURE__*/_interopDefaultLegacy(set);
|
|
30
|
-
var omit__default = /*#__PURE__*/_interopDefaultLegacy(omit);
|
|
31
|
-
var unset__default = /*#__PURE__*/_interopDefaultLegacy(unset);
|
|
32
|
-
var Markdown__default = /*#__PURE__*/_interopDefaultLegacy(Markdown);
|
|
33
|
-
var has__default = /*#__PURE__*/_interopDefaultLegacy(has);
|
|
34
|
-
|
|
35
|
-
/** Used to generate a unique ID for an element in a row */
|
|
36
|
-
function generateRowId() {
|
|
37
|
-
return nanoid.nanoid();
|
|
38
|
-
}
|
|
39
|
-
/** Converts the `formData` into `KeyedFormDataType` data, using the `generateRowId()` function to create the key
|
|
40
|
-
*
|
|
41
|
-
* @param formData - The data for the form
|
|
42
|
-
* @returns - The `formData` converted into a `KeyedFormDataType` element
|
|
43
|
-
*/
|
|
44
|
-
function generateKeyedFormData(formData) {
|
|
45
|
-
return !Array.isArray(formData) ? [] : formData.map(item => {
|
|
46
|
-
return {
|
|
47
|
-
key: generateRowId(),
|
|
48
|
-
item
|
|
49
|
-
};
|
|
50
|
-
});
|
|
51
|
-
}
|
|
52
|
-
/** Converts `KeyedFormDataType` data into the inner `formData`
|
|
53
|
-
*
|
|
54
|
-
* @param keyedFormData - The `KeyedFormDataType` to be converted
|
|
55
|
-
* @returns - The inner `formData` item(s) in the `keyedFormData`
|
|
56
|
-
*/
|
|
57
|
-
function keyedToPlainFormData(keyedFormData) {
|
|
58
|
-
if (Array.isArray(keyedFormData)) {
|
|
59
|
-
return keyedFormData.map(keyedItem => keyedItem.item);
|
|
60
|
-
}
|
|
61
|
-
return [];
|
|
62
|
-
}
|
|
63
|
-
/** The `ArrayField` component is used to render a field in the schema that is of type `array`. It supports both normal
|
|
64
|
-
* and fixed array, allowing user to add and remove elements from the array data.
|
|
65
|
-
*/
|
|
66
|
-
class ArrayField extends react.Component {
|
|
67
|
-
/** Constructs an `ArrayField` from the `props`, generating the initial keyed data from the `formData`
|
|
68
|
-
*
|
|
69
|
-
* @param props - The `FieldProps` for this template
|
|
70
|
-
*/
|
|
71
|
-
constructor(props) {
|
|
72
|
-
super(props);
|
|
73
|
-
/** Returns the default form information for an item based on the schema for that item. Deals with the possibility
|
|
74
|
-
* that the schema is fixed and allows additional items.
|
|
75
|
-
*/
|
|
76
|
-
this._getNewFormDataRow = () => {
|
|
77
|
-
const {
|
|
78
|
-
schema,
|
|
79
|
-
registry
|
|
80
|
-
} = this.props;
|
|
81
|
-
const {
|
|
82
|
-
schemaUtils
|
|
83
|
-
} = registry;
|
|
84
|
-
let itemSchema = schema.items;
|
|
85
|
-
if (utils.isFixedItems(schema) && utils.allowAdditionalItems(schema)) {
|
|
86
|
-
itemSchema = schema.additionalItems;
|
|
87
|
-
}
|
|
88
|
-
// Cast this as a T to work around schema utils being for T[] caused by the FieldProps<T[], S, F> call on the class
|
|
89
|
-
return schemaUtils.getDefaultFormState(itemSchema);
|
|
90
|
-
};
|
|
91
|
-
/** Callback handler for when the user clicks on the add button. Creates a new row of keyed form data at the end of
|
|
92
|
-
* the list, adding it into the state, and then returning `onChange()` with the plain form data converted from the
|
|
93
|
-
* keyed data
|
|
94
|
-
*
|
|
95
|
-
* @param event - The event for the click
|
|
96
|
-
*/
|
|
97
|
-
this.onAddClick = event => {
|
|
98
|
-
this._handleAddClick(event);
|
|
99
|
-
};
|
|
100
|
-
/** Callback handler for when the user clicks on the add button on an existing array element. Creates a new row of
|
|
101
|
-
* keyed form data inserted at the `index`, adding it into the state, and then returning `onChange()` with the plain
|
|
102
|
-
* form data converted from the keyed data
|
|
103
|
-
*
|
|
104
|
-
* @param index - The index at which the add button is clicked
|
|
105
|
-
*/
|
|
106
|
-
this.onAddIndexClick = index => {
|
|
107
|
-
return event => {
|
|
108
|
-
this._handleAddClick(event, index);
|
|
109
|
-
};
|
|
110
|
-
};
|
|
111
|
-
/** Callback handler for when the user clicks on the copy button on an existing array element. Clones the row of
|
|
112
|
-
* keyed form data at the `index` into the next position in the state, and then returning `onChange()` with the plain
|
|
113
|
-
* form data converted from the keyed data
|
|
114
|
-
*
|
|
115
|
-
* @param index - The index at which the copy button is clicked
|
|
116
|
-
*/
|
|
117
|
-
this.onCopyIndexClick = index => {
|
|
118
|
-
return event => {
|
|
119
|
-
if (event) {
|
|
120
|
-
event.preventDefault();
|
|
121
|
-
}
|
|
122
|
-
const {
|
|
123
|
-
onChange
|
|
124
|
-
} = this.props;
|
|
125
|
-
const {
|
|
126
|
-
keyedFormData
|
|
127
|
-
} = this.state;
|
|
128
|
-
const newKeyedFormDataRow = {
|
|
129
|
-
key: generateRowId(),
|
|
130
|
-
item: cloneDeep__default["default"](keyedFormData[index].item)
|
|
131
|
-
};
|
|
132
|
-
const newKeyedFormData = [...keyedFormData];
|
|
133
|
-
if (index !== undefined) {
|
|
134
|
-
newKeyedFormData.splice(index + 1, 0, newKeyedFormDataRow);
|
|
135
|
-
} else {
|
|
136
|
-
newKeyedFormData.push(newKeyedFormDataRow);
|
|
137
|
-
}
|
|
138
|
-
this.setState({
|
|
139
|
-
keyedFormData: newKeyedFormData,
|
|
140
|
-
updatedKeyedFormData: true
|
|
141
|
-
}, () => onChange(keyedToPlainFormData(newKeyedFormData)));
|
|
142
|
-
};
|
|
143
|
-
};
|
|
144
|
-
/** Callback handler for when the user clicks on the remove button on an existing array element. Removes the row of
|
|
145
|
-
* keyed form data at the `index` in the state, and then returning `onChange()` with the plain form data converted
|
|
146
|
-
* from the keyed data
|
|
147
|
-
*
|
|
148
|
-
* @param index - The index at which the remove button is clicked
|
|
149
|
-
*/
|
|
150
|
-
this.onDropIndexClick = index => {
|
|
151
|
-
return event => {
|
|
152
|
-
if (event) {
|
|
153
|
-
event.preventDefault();
|
|
154
|
-
}
|
|
155
|
-
const {
|
|
156
|
-
onChange,
|
|
157
|
-
errorSchema
|
|
158
|
-
} = this.props;
|
|
159
|
-
const {
|
|
160
|
-
keyedFormData
|
|
161
|
-
} = this.state;
|
|
162
|
-
// refs #195: revalidate to ensure properly reindexing errors
|
|
163
|
-
let newErrorSchema;
|
|
164
|
-
if (errorSchema) {
|
|
165
|
-
newErrorSchema = {};
|
|
166
|
-
for (const idx in errorSchema) {
|
|
167
|
-
const i = parseInt(idx);
|
|
168
|
-
if (i < index) {
|
|
169
|
-
set__default["default"](newErrorSchema, [i], errorSchema[idx]);
|
|
170
|
-
} else if (i > index) {
|
|
171
|
-
set__default["default"](newErrorSchema, [i - 1], errorSchema[idx]);
|
|
172
|
-
}
|
|
173
|
-
}
|
|
174
|
-
}
|
|
175
|
-
const newKeyedFormData = keyedFormData.filter((_, i) => i !== index);
|
|
176
|
-
this.setState({
|
|
177
|
-
keyedFormData: newKeyedFormData,
|
|
178
|
-
updatedKeyedFormData: true
|
|
179
|
-
}, () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema));
|
|
180
|
-
};
|
|
181
|
-
};
|
|
182
|
-
/** Callback handler for when the user clicks on one of the move item buttons on an existing array element. Moves the
|
|
183
|
-
* row of keyed form data at the `index` to the `newIndex` in the state, and then returning `onChange()` with the
|
|
184
|
-
* plain form data converted from the keyed data
|
|
185
|
-
*
|
|
186
|
-
* @param index - The index of the item to move
|
|
187
|
-
* @param newIndex - The index to where the item is to be moved
|
|
188
|
-
*/
|
|
189
|
-
this.onReorderClick = (index, newIndex) => {
|
|
190
|
-
return event => {
|
|
191
|
-
if (event) {
|
|
192
|
-
event.preventDefault();
|
|
193
|
-
event.currentTarget.blur();
|
|
194
|
-
}
|
|
195
|
-
const {
|
|
196
|
-
onChange,
|
|
197
|
-
errorSchema
|
|
198
|
-
} = this.props;
|
|
199
|
-
let newErrorSchema;
|
|
200
|
-
if (errorSchema) {
|
|
201
|
-
newErrorSchema = {};
|
|
202
|
-
for (const idx in errorSchema) {
|
|
203
|
-
const i = parseInt(idx);
|
|
204
|
-
if (i == index) {
|
|
205
|
-
set__default["default"](newErrorSchema, [newIndex], errorSchema[index]);
|
|
206
|
-
} else if (i == newIndex) {
|
|
207
|
-
set__default["default"](newErrorSchema, [index], errorSchema[newIndex]);
|
|
208
|
-
} else {
|
|
209
|
-
set__default["default"](newErrorSchema, [idx], errorSchema[i]);
|
|
210
|
-
}
|
|
211
|
-
}
|
|
212
|
-
}
|
|
213
|
-
const {
|
|
214
|
-
keyedFormData
|
|
215
|
-
} = this.state;
|
|
216
|
-
function reOrderArray() {
|
|
217
|
-
// Copy item
|
|
218
|
-
const _newKeyedFormData = keyedFormData.slice();
|
|
219
|
-
// Moves item from index to newIndex
|
|
220
|
-
_newKeyedFormData.splice(index, 1);
|
|
221
|
-
_newKeyedFormData.splice(newIndex, 0, keyedFormData[index]);
|
|
222
|
-
return _newKeyedFormData;
|
|
223
|
-
}
|
|
224
|
-
const newKeyedFormData = reOrderArray();
|
|
225
|
-
this.setState({
|
|
226
|
-
keyedFormData: newKeyedFormData
|
|
227
|
-
}, () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema));
|
|
228
|
-
};
|
|
229
|
-
};
|
|
230
|
-
/** Callback handler used to deal with changing the value of the data in the array at the `index`. Calls the
|
|
231
|
-
* `onChange` callback with the updated form data
|
|
232
|
-
*
|
|
233
|
-
* @param index - The index of the item being changed
|
|
234
|
-
*/
|
|
235
|
-
this.onChangeForIndex = index => {
|
|
236
|
-
return (value, newErrorSchema, id) => {
|
|
237
|
-
const {
|
|
238
|
-
formData,
|
|
239
|
-
onChange,
|
|
240
|
-
errorSchema
|
|
241
|
-
} = this.props;
|
|
242
|
-
const arrayData = Array.isArray(formData) ? formData : [];
|
|
243
|
-
const newFormData = arrayData.map((item, i) => {
|
|
244
|
-
// We need to treat undefined items as nulls to have validation.
|
|
245
|
-
// See https://github.com/tdegrunt/jsonschema/issues/206
|
|
246
|
-
const jsonValue = typeof value === 'undefined' ? null : value;
|
|
247
|
-
return index === i ? jsonValue : item;
|
|
248
|
-
});
|
|
249
|
-
onChange(newFormData, errorSchema && errorSchema && {
|
|
250
|
-
...errorSchema,
|
|
251
|
-
[index]: newErrorSchema
|
|
252
|
-
}, id);
|
|
253
|
-
};
|
|
254
|
-
};
|
|
255
|
-
/** Callback handler used to change the value for a checkbox */
|
|
256
|
-
this.onSelectChange = value => {
|
|
257
|
-
const {
|
|
258
|
-
onChange,
|
|
259
|
-
idSchema
|
|
260
|
-
} = this.props;
|
|
261
|
-
onChange(value, undefined, idSchema && idSchema.$id);
|
|
262
|
-
};
|
|
263
|
-
const {
|
|
264
|
-
formData: _formData = []
|
|
265
|
-
} = props;
|
|
266
|
-
const _keyedFormData = generateKeyedFormData(_formData);
|
|
267
|
-
this.state = {
|
|
268
|
-
keyedFormData: _keyedFormData,
|
|
269
|
-
updatedKeyedFormData: false
|
|
270
|
-
};
|
|
271
|
-
}
|
|
272
|
-
/** React lifecycle method that is called when the props are about to change allowing the state to be updated. It
|
|
273
|
-
* regenerates the keyed form data and returns it
|
|
274
|
-
*
|
|
275
|
-
* @param nextProps - The next set of props data
|
|
276
|
-
* @param prevState - The previous set of state data
|
|
277
|
-
*/
|
|
278
|
-
static getDerivedStateFromProps(nextProps, prevState) {
|
|
279
|
-
// Don't call getDerivedStateFromProps if keyed formdata was just updated.
|
|
280
|
-
if (prevState.updatedKeyedFormData) {
|
|
281
|
-
return {
|
|
282
|
-
updatedKeyedFormData: false
|
|
283
|
-
};
|
|
284
|
-
}
|
|
285
|
-
const nextFormData = Array.isArray(nextProps.formData) ? nextProps.formData : [];
|
|
286
|
-
const previousKeyedFormData = prevState.keyedFormData || [];
|
|
287
|
-
const newKeyedFormData = nextFormData.length === previousKeyedFormData.length ? previousKeyedFormData.map((previousKeyedFormDatum, index) => {
|
|
288
|
-
return {
|
|
289
|
-
key: previousKeyedFormDatum.key,
|
|
290
|
-
item: nextFormData[index]
|
|
291
|
-
};
|
|
292
|
-
}) : generateKeyedFormData(nextFormData);
|
|
293
|
-
return {
|
|
294
|
-
keyedFormData: newKeyedFormData
|
|
295
|
-
};
|
|
296
|
-
}
|
|
297
|
-
/** Returns the appropriate title for an item by getting first the title from the schema.items, then falling back to
|
|
298
|
-
* the description from the schema.items, and finally the string "Item"
|
|
299
|
-
*/
|
|
300
|
-
get itemTitle() {
|
|
301
|
-
const {
|
|
302
|
-
schema,
|
|
303
|
-
registry
|
|
304
|
-
} = this.props;
|
|
305
|
-
const {
|
|
306
|
-
translateString
|
|
307
|
-
} = registry;
|
|
308
|
-
return get__default["default"](schema, [utils.ITEMS_KEY, 'title'], get__default["default"](schema, [utils.ITEMS_KEY, 'description'], translateString(utils.TranslatableString.ArrayItemTitle)));
|
|
309
|
-
}
|
|
310
|
-
/** Determines whether the item described in the schema is always required, which is determined by whether any item
|
|
311
|
-
* may be null.
|
|
312
|
-
*
|
|
313
|
-
* @param itemSchema - The schema for the item
|
|
314
|
-
* @return - True if the item schema type does not contain the "null" type
|
|
315
|
-
*/
|
|
316
|
-
isItemRequired(itemSchema) {
|
|
317
|
-
if (Array.isArray(itemSchema.type)) {
|
|
318
|
-
// While we don't yet support composite/nullable jsonschema types, it's
|
|
319
|
-
// future-proof to check for requirement against these.
|
|
320
|
-
return !itemSchema.type.includes('null');
|
|
321
|
-
}
|
|
322
|
-
// All non-null array item types are inherently required by design
|
|
323
|
-
return itemSchema.type !== 'null';
|
|
324
|
-
}
|
|
325
|
-
/** Determines whether more items can be added to the array. If the uiSchema indicates the array doesn't allow adding
|
|
326
|
-
* then false is returned. Otherwise, if the schema indicates that there are a maximum number of items and the
|
|
327
|
-
* `formData` matches that value, then false is returned, otherwise true is returned.
|
|
328
|
-
*
|
|
329
|
-
* @param formItems - The list of items in the form
|
|
330
|
-
* @returns - True if the item is addable otherwise false
|
|
331
|
-
*/
|
|
332
|
-
canAddItem(formItems) {
|
|
333
|
-
const {
|
|
334
|
-
schema,
|
|
335
|
-
uiSchema,
|
|
336
|
-
registry
|
|
337
|
-
} = this.props;
|
|
338
|
-
let {
|
|
339
|
-
addable
|
|
340
|
-
} = utils.getUiOptions(uiSchema, registry.globalUiOptions);
|
|
341
|
-
if (addable !== false) {
|
|
342
|
-
// if ui:options.addable was not explicitly set to false, we can add
|
|
343
|
-
// another item if we have not exceeded maxItems yet
|
|
344
|
-
if (schema.maxItems !== undefined) {
|
|
345
|
-
addable = formItems.length < schema.maxItems;
|
|
346
|
-
} else {
|
|
347
|
-
addable = true;
|
|
348
|
-
}
|
|
349
|
-
}
|
|
350
|
-
return addable;
|
|
351
|
-
}
|
|
352
|
-
/** Callback handler for when the user clicks on the add or add at index buttons. Creates a new row of keyed form data
|
|
353
|
-
* either at the end of the list (when index is not specified) or inserted at the `index` when it is, adding it into
|
|
354
|
-
* the state, and then returning `onChange()` with the plain form data converted from the keyed data
|
|
355
|
-
*
|
|
356
|
-
* @param event - The event for the click
|
|
357
|
-
* @param [index] - The optional index at which to add the new data
|
|
358
|
-
*/
|
|
359
|
-
_handleAddClick(event, index) {
|
|
360
|
-
if (event) {
|
|
361
|
-
event.preventDefault();
|
|
362
|
-
}
|
|
363
|
-
const {
|
|
364
|
-
onChange
|
|
365
|
-
} = this.props;
|
|
366
|
-
const {
|
|
367
|
-
keyedFormData
|
|
368
|
-
} = this.state;
|
|
369
|
-
const newKeyedFormDataRow = {
|
|
370
|
-
key: generateRowId(),
|
|
371
|
-
item: this._getNewFormDataRow()
|
|
372
|
-
};
|
|
373
|
-
const newKeyedFormData = [...keyedFormData];
|
|
374
|
-
if (index !== undefined) {
|
|
375
|
-
newKeyedFormData.splice(index, 0, newKeyedFormDataRow);
|
|
376
|
-
} else {
|
|
377
|
-
newKeyedFormData.push(newKeyedFormDataRow);
|
|
378
|
-
}
|
|
379
|
-
this.setState({
|
|
380
|
-
keyedFormData: newKeyedFormData,
|
|
381
|
-
updatedKeyedFormData: true
|
|
382
|
-
}, () => onChange(keyedToPlainFormData(newKeyedFormData)));
|
|
383
|
-
}
|
|
384
|
-
/** Renders the `ArrayField` depending on the specific needs of the schema and uischema elements
|
|
385
|
-
*/
|
|
386
|
-
render() {
|
|
387
|
-
const {
|
|
388
|
-
schema,
|
|
389
|
-
uiSchema,
|
|
390
|
-
idSchema,
|
|
391
|
-
registry
|
|
392
|
-
} = this.props;
|
|
393
|
-
const {
|
|
394
|
-
schemaUtils,
|
|
395
|
-
translateString
|
|
396
|
-
} = registry;
|
|
397
|
-
if (!(utils.ITEMS_KEY in schema)) {
|
|
398
|
-
const uiOptions = utils.getUiOptions(uiSchema);
|
|
399
|
-
const UnsupportedFieldTemplate = utils.getTemplate('UnsupportedFieldTemplate', registry, uiOptions);
|
|
400
|
-
return jsxRuntime.jsx(UnsupportedFieldTemplate, {
|
|
401
|
-
schema: schema,
|
|
402
|
-
idSchema: idSchema,
|
|
403
|
-
reason: translateString(utils.TranslatableString.MissingItems),
|
|
404
|
-
registry: registry
|
|
405
|
-
});
|
|
406
|
-
}
|
|
407
|
-
if (schemaUtils.isMultiSelect(schema)) {
|
|
408
|
-
// If array has enum or uniqueItems set to true, call renderMultiSelect() to render the default multiselect widget or a custom widget, if specified.
|
|
409
|
-
return this.renderMultiSelect();
|
|
410
|
-
}
|
|
411
|
-
if (utils.isCustomWidget(uiSchema)) {
|
|
412
|
-
return this.renderCustomWidget();
|
|
413
|
-
}
|
|
414
|
-
if (utils.isFixedItems(schema)) {
|
|
415
|
-
return this.renderFixedArray();
|
|
416
|
-
}
|
|
417
|
-
if (schemaUtils.isFilesArray(schema, uiSchema)) {
|
|
418
|
-
return this.renderFiles();
|
|
419
|
-
}
|
|
420
|
-
return this.renderNormalArray();
|
|
421
|
-
}
|
|
422
|
-
/** Renders a normal array without any limitations of length
|
|
423
|
-
*/
|
|
424
|
-
renderNormalArray() {
|
|
425
|
-
const {
|
|
426
|
-
schema,
|
|
427
|
-
uiSchema = {},
|
|
428
|
-
errorSchema,
|
|
429
|
-
idSchema,
|
|
430
|
-
name,
|
|
431
|
-
disabled = false,
|
|
432
|
-
readonly = false,
|
|
433
|
-
autofocus = false,
|
|
434
|
-
required = false,
|
|
435
|
-
registry,
|
|
436
|
-
onBlur,
|
|
437
|
-
onFocus,
|
|
438
|
-
idPrefix,
|
|
439
|
-
idSeparator = '_',
|
|
440
|
-
rawErrors
|
|
441
|
-
} = this.props;
|
|
442
|
-
const {
|
|
443
|
-
keyedFormData
|
|
444
|
-
} = this.state;
|
|
445
|
-
const title = schema.title === undefined ? name : schema.title;
|
|
446
|
-
const {
|
|
447
|
-
schemaUtils,
|
|
448
|
-
formContext
|
|
449
|
-
} = registry;
|
|
450
|
-
const uiOptions = utils.getUiOptions(uiSchema);
|
|
451
|
-
const _schemaItems = isObject__default["default"](schema.items) ? schema.items : {};
|
|
452
|
-
const itemsSchema = schemaUtils.retrieveSchema(_schemaItems);
|
|
453
|
-
const formData = keyedToPlainFormData(this.state.keyedFormData);
|
|
454
|
-
const canAdd = this.canAddItem(formData);
|
|
455
|
-
const arrayProps = {
|
|
456
|
-
canAdd,
|
|
457
|
-
items: keyedFormData.map((keyedItem, index) => {
|
|
458
|
-
const {
|
|
459
|
-
key,
|
|
460
|
-
item
|
|
461
|
-
} = keyedItem;
|
|
462
|
-
// While we are actually dealing with a single item of type T, the types require a T[], so cast
|
|
463
|
-
const itemCast = item;
|
|
464
|
-
const itemSchema = schemaUtils.retrieveSchema(_schemaItems, itemCast);
|
|
465
|
-
const itemErrorSchema = errorSchema ? errorSchema[index] : undefined;
|
|
466
|
-
const itemIdPrefix = idSchema.$id + idSeparator + index;
|
|
467
|
-
const itemIdSchema = schemaUtils.toIdSchema(itemSchema, itemIdPrefix, itemCast, idPrefix, idSeparator);
|
|
468
|
-
return this.renderArrayFieldItem({
|
|
469
|
-
key,
|
|
470
|
-
index,
|
|
471
|
-
name: name && `${name}-${index}`,
|
|
472
|
-
canAdd,
|
|
473
|
-
canMoveUp: index > 0,
|
|
474
|
-
canMoveDown: index < formData.length - 1,
|
|
475
|
-
itemSchema,
|
|
476
|
-
itemIdSchema,
|
|
477
|
-
itemErrorSchema,
|
|
478
|
-
itemData: itemCast,
|
|
479
|
-
itemUiSchema: uiSchema.items,
|
|
480
|
-
autofocus: autofocus && index === 0,
|
|
481
|
-
onBlur,
|
|
482
|
-
onFocus,
|
|
483
|
-
rawErrors,
|
|
484
|
-
totalItems: keyedFormData.length
|
|
485
|
-
});
|
|
486
|
-
}),
|
|
487
|
-
className: `field field-array field-array-of-${itemsSchema.type}`,
|
|
488
|
-
disabled,
|
|
489
|
-
idSchema,
|
|
490
|
-
uiSchema,
|
|
491
|
-
onAddClick: this.onAddClick,
|
|
492
|
-
readonly,
|
|
493
|
-
required,
|
|
494
|
-
schema,
|
|
495
|
-
title,
|
|
496
|
-
formContext,
|
|
497
|
-
formData,
|
|
498
|
-
rawErrors,
|
|
499
|
-
registry
|
|
500
|
-
};
|
|
501
|
-
const Template = utils.getTemplate('ArrayFieldTemplate', registry, uiOptions);
|
|
502
|
-
return jsxRuntime.jsx(Template, {
|
|
503
|
-
...arrayProps
|
|
504
|
-
});
|
|
505
|
-
}
|
|
506
|
-
/** Renders an array using the custom widget provided by the user in the `uiSchema`
|
|
507
|
-
*/
|
|
508
|
-
renderCustomWidget() {
|
|
509
|
-
const {
|
|
510
|
-
schema,
|
|
511
|
-
idSchema,
|
|
512
|
-
uiSchema,
|
|
513
|
-
disabled = false,
|
|
514
|
-
readonly = false,
|
|
515
|
-
autofocus = false,
|
|
516
|
-
required = false,
|
|
517
|
-
hideError,
|
|
518
|
-
placeholder,
|
|
519
|
-
onBlur,
|
|
520
|
-
onFocus,
|
|
521
|
-
formData: items = [],
|
|
522
|
-
registry,
|
|
523
|
-
rawErrors,
|
|
524
|
-
name
|
|
525
|
-
} = this.props;
|
|
526
|
-
const {
|
|
527
|
-
widgets,
|
|
528
|
-
formContext,
|
|
529
|
-
globalUiOptions,
|
|
530
|
-
schemaUtils
|
|
531
|
-
} = registry;
|
|
532
|
-
const {
|
|
533
|
-
widget,
|
|
534
|
-
title: uiTitle,
|
|
535
|
-
...options
|
|
536
|
-
} = utils.getUiOptions(uiSchema, globalUiOptions);
|
|
537
|
-
const Widget = utils.getWidget(schema, widget, widgets);
|
|
538
|
-
const label = uiTitle ?? schema.title ?? name;
|
|
539
|
-
const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
|
|
540
|
-
return jsxRuntime.jsx(Widget, {
|
|
541
|
-
id: idSchema.$id,
|
|
542
|
-
name: name,
|
|
543
|
-
multiple: true,
|
|
544
|
-
onChange: this.onSelectChange,
|
|
545
|
-
onBlur: onBlur,
|
|
546
|
-
onFocus: onFocus,
|
|
547
|
-
options: options,
|
|
548
|
-
schema: schema,
|
|
549
|
-
uiSchema: uiSchema,
|
|
550
|
-
registry: registry,
|
|
551
|
-
value: items,
|
|
552
|
-
disabled: disabled,
|
|
553
|
-
readonly: readonly,
|
|
554
|
-
hideError: hideError,
|
|
555
|
-
required: required,
|
|
556
|
-
label: label,
|
|
557
|
-
hideLabel: !displayLabel,
|
|
558
|
-
placeholder: placeholder,
|
|
559
|
-
formContext: formContext,
|
|
560
|
-
autofocus: autofocus,
|
|
561
|
-
rawErrors: rawErrors
|
|
562
|
-
});
|
|
563
|
-
}
|
|
564
|
-
/** Renders an array as a set of checkboxes
|
|
565
|
-
*/
|
|
566
|
-
renderMultiSelect() {
|
|
567
|
-
const {
|
|
568
|
-
schema,
|
|
569
|
-
idSchema,
|
|
570
|
-
uiSchema,
|
|
571
|
-
formData: items = [],
|
|
572
|
-
disabled = false,
|
|
573
|
-
readonly = false,
|
|
574
|
-
autofocus = false,
|
|
575
|
-
required = false,
|
|
576
|
-
placeholder,
|
|
577
|
-
onBlur,
|
|
578
|
-
onFocus,
|
|
579
|
-
registry,
|
|
580
|
-
rawErrors,
|
|
581
|
-
name
|
|
582
|
-
} = this.props;
|
|
583
|
-
const {
|
|
584
|
-
widgets,
|
|
585
|
-
schemaUtils,
|
|
586
|
-
formContext,
|
|
587
|
-
globalUiOptions
|
|
588
|
-
} = registry;
|
|
589
|
-
const itemsSchema = schemaUtils.retrieveSchema(schema.items, items);
|
|
590
|
-
const enumOptions = utils.optionsList(itemsSchema);
|
|
591
|
-
const {
|
|
592
|
-
widget = 'select',
|
|
593
|
-
title: uiTitle,
|
|
594
|
-
...options
|
|
595
|
-
} = utils.getUiOptions(uiSchema, globalUiOptions);
|
|
596
|
-
const Widget = utils.getWidget(schema, widget, widgets);
|
|
597
|
-
const label = uiTitle ?? schema.title ?? name;
|
|
598
|
-
const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
|
|
599
|
-
return jsxRuntime.jsx(Widget, {
|
|
600
|
-
id: idSchema.$id,
|
|
601
|
-
name: name,
|
|
602
|
-
multiple: true,
|
|
603
|
-
onChange: this.onSelectChange,
|
|
604
|
-
onBlur: onBlur,
|
|
605
|
-
onFocus: onFocus,
|
|
606
|
-
options: {
|
|
607
|
-
...options,
|
|
608
|
-
enumOptions
|
|
609
|
-
},
|
|
610
|
-
schema: schema,
|
|
611
|
-
uiSchema: uiSchema,
|
|
612
|
-
registry: registry,
|
|
613
|
-
value: items,
|
|
614
|
-
disabled: disabled,
|
|
615
|
-
readonly: readonly,
|
|
616
|
-
required: required,
|
|
617
|
-
label: label,
|
|
618
|
-
hideLabel: !displayLabel,
|
|
619
|
-
placeholder: placeholder,
|
|
620
|
-
formContext: formContext,
|
|
621
|
-
autofocus: autofocus,
|
|
622
|
-
rawErrors: rawErrors
|
|
623
|
-
});
|
|
624
|
-
}
|
|
625
|
-
/** Renders an array of files using the `FileWidget`
|
|
626
|
-
*/
|
|
627
|
-
renderFiles() {
|
|
628
|
-
const {
|
|
629
|
-
schema,
|
|
630
|
-
uiSchema,
|
|
631
|
-
idSchema,
|
|
632
|
-
name,
|
|
633
|
-
disabled = false,
|
|
634
|
-
readonly = false,
|
|
635
|
-
autofocus = false,
|
|
636
|
-
required = false,
|
|
637
|
-
onBlur,
|
|
638
|
-
onFocus,
|
|
639
|
-
registry,
|
|
640
|
-
formData: items = [],
|
|
641
|
-
rawErrors
|
|
642
|
-
} = this.props;
|
|
643
|
-
const {
|
|
644
|
-
widgets,
|
|
645
|
-
formContext,
|
|
646
|
-
globalUiOptions,
|
|
647
|
-
schemaUtils
|
|
648
|
-
} = registry;
|
|
649
|
-
const {
|
|
650
|
-
widget = 'files',
|
|
651
|
-
title: uiTitle,
|
|
652
|
-
...options
|
|
653
|
-
} = utils.getUiOptions(uiSchema, globalUiOptions);
|
|
654
|
-
const Widget = utils.getWidget(schema, widget, widgets);
|
|
655
|
-
const label = uiTitle ?? schema.title ?? name;
|
|
656
|
-
const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
|
|
657
|
-
return jsxRuntime.jsx(Widget, {
|
|
658
|
-
options: options,
|
|
659
|
-
id: idSchema.$id,
|
|
660
|
-
name: name,
|
|
661
|
-
multiple: true,
|
|
662
|
-
onChange: this.onSelectChange,
|
|
663
|
-
onBlur: onBlur,
|
|
664
|
-
onFocus: onFocus,
|
|
665
|
-
schema: schema,
|
|
666
|
-
uiSchema: uiSchema,
|
|
667
|
-
value: items,
|
|
668
|
-
disabled: disabled,
|
|
669
|
-
readonly: readonly,
|
|
670
|
-
required: required,
|
|
671
|
-
registry: registry,
|
|
672
|
-
formContext: formContext,
|
|
673
|
-
autofocus: autofocus,
|
|
674
|
-
rawErrors: rawErrors,
|
|
675
|
-
label: label,
|
|
676
|
-
hideLabel: !displayLabel
|
|
677
|
-
});
|
|
678
|
-
}
|
|
679
|
-
/** Renders an array that has a maximum limit of items
|
|
680
|
-
*/
|
|
681
|
-
renderFixedArray() {
|
|
682
|
-
const {
|
|
683
|
-
schema,
|
|
684
|
-
uiSchema = {},
|
|
685
|
-
formData = [],
|
|
686
|
-
errorSchema,
|
|
687
|
-
idPrefix,
|
|
688
|
-
idSeparator = '_',
|
|
689
|
-
idSchema,
|
|
690
|
-
name,
|
|
691
|
-
disabled = false,
|
|
692
|
-
readonly = false,
|
|
693
|
-
autofocus = false,
|
|
694
|
-
required = false,
|
|
695
|
-
registry,
|
|
696
|
-
onBlur,
|
|
697
|
-
onFocus,
|
|
698
|
-
rawErrors
|
|
699
|
-
} = this.props;
|
|
700
|
-
const {
|
|
701
|
-
keyedFormData
|
|
702
|
-
} = this.state;
|
|
703
|
-
let {
|
|
704
|
-
formData: items = []
|
|
705
|
-
} = this.props;
|
|
706
|
-
const title = schema.title || name;
|
|
707
|
-
const uiOptions = utils.getUiOptions(uiSchema);
|
|
708
|
-
const {
|
|
709
|
-
schemaUtils,
|
|
710
|
-
formContext
|
|
711
|
-
} = registry;
|
|
712
|
-
const _schemaItems = isObject__default["default"](schema.items) ? schema.items : [];
|
|
713
|
-
const itemSchemas = _schemaItems.map((item, index) => schemaUtils.retrieveSchema(item, formData[index]));
|
|
714
|
-
const additionalSchema = isObject__default["default"](schema.additionalItems) ? schemaUtils.retrieveSchema(schema.additionalItems, formData) : null;
|
|
715
|
-
if (!items || items.length < itemSchemas.length) {
|
|
716
|
-
// to make sure at least all fixed items are generated
|
|
717
|
-
items = items || [];
|
|
718
|
-
items = items.concat(new Array(itemSchemas.length - items.length));
|
|
719
|
-
}
|
|
720
|
-
// These are the props passed into the render function
|
|
721
|
-
const canAdd = this.canAddItem(items) && !!additionalSchema;
|
|
722
|
-
const arrayProps = {
|
|
723
|
-
canAdd,
|
|
724
|
-
className: 'field field-array field-array-fixed-items',
|
|
725
|
-
disabled,
|
|
726
|
-
idSchema,
|
|
727
|
-
formData,
|
|
728
|
-
items: keyedFormData.map((keyedItem, index) => {
|
|
729
|
-
const {
|
|
730
|
-
key,
|
|
731
|
-
item
|
|
732
|
-
} = keyedItem;
|
|
733
|
-
// While we are actually dealing with a single item of type T, the types require a T[], so cast
|
|
734
|
-
const itemCast = item;
|
|
735
|
-
const additional = index >= itemSchemas.length;
|
|
736
|
-
const itemSchema = additional && isObject__default["default"](schema.additionalItems) ? schemaUtils.retrieveSchema(schema.additionalItems, itemCast) : itemSchemas[index];
|
|
737
|
-
const itemIdPrefix = idSchema.$id + idSeparator + index;
|
|
738
|
-
const itemIdSchema = schemaUtils.toIdSchema(itemSchema, itemIdPrefix, itemCast, idPrefix, idSeparator);
|
|
739
|
-
const itemUiSchema = additional ? uiSchema.additionalItems || {} : Array.isArray(uiSchema.items) ? uiSchema.items[index] : uiSchema.items || {};
|
|
740
|
-
const itemErrorSchema = errorSchema ? errorSchema[index] : undefined;
|
|
741
|
-
return this.renderArrayFieldItem({
|
|
742
|
-
key,
|
|
743
|
-
index,
|
|
744
|
-
name: name && `${name}-${index}`,
|
|
745
|
-
canAdd,
|
|
746
|
-
canRemove: additional,
|
|
747
|
-
canMoveUp: index >= itemSchemas.length + 1,
|
|
748
|
-
canMoveDown: additional && index < items.length - 1,
|
|
749
|
-
itemSchema,
|
|
750
|
-
itemData: itemCast,
|
|
751
|
-
itemUiSchema,
|
|
752
|
-
itemIdSchema,
|
|
753
|
-
itemErrorSchema,
|
|
754
|
-
autofocus: autofocus && index === 0,
|
|
755
|
-
onBlur,
|
|
756
|
-
onFocus,
|
|
757
|
-
rawErrors,
|
|
758
|
-
totalItems: keyedFormData.length
|
|
759
|
-
});
|
|
760
|
-
}),
|
|
761
|
-
onAddClick: this.onAddClick,
|
|
762
|
-
readonly,
|
|
763
|
-
required,
|
|
764
|
-
registry,
|
|
765
|
-
schema,
|
|
766
|
-
uiSchema,
|
|
767
|
-
title,
|
|
768
|
-
formContext,
|
|
769
|
-
rawErrors
|
|
770
|
-
};
|
|
771
|
-
const Template = utils.getTemplate('ArrayFieldTemplate', registry, uiOptions);
|
|
772
|
-
return jsxRuntime.jsx(Template, {
|
|
773
|
-
...arrayProps
|
|
774
|
-
});
|
|
775
|
-
}
|
|
776
|
-
/** Renders the individual array item using a `SchemaField` along with the additional properties required to be send
|
|
777
|
-
* back to the `ArrayFieldItemTemplate`.
|
|
778
|
-
*
|
|
779
|
-
* @param props - The props for the individual array item to be rendered
|
|
780
|
-
*/
|
|
781
|
-
renderArrayFieldItem(props) {
|
|
782
|
-
const {
|
|
783
|
-
key,
|
|
784
|
-
index,
|
|
785
|
-
name,
|
|
786
|
-
canAdd,
|
|
787
|
-
canRemove = true,
|
|
788
|
-
canMoveUp,
|
|
789
|
-
canMoveDown,
|
|
790
|
-
itemSchema,
|
|
791
|
-
itemData,
|
|
792
|
-
itemUiSchema,
|
|
793
|
-
itemIdSchema,
|
|
794
|
-
itemErrorSchema,
|
|
795
|
-
autofocus,
|
|
796
|
-
onBlur,
|
|
797
|
-
onFocus,
|
|
798
|
-
rawErrors,
|
|
799
|
-
totalItems
|
|
800
|
-
} = props;
|
|
801
|
-
const {
|
|
802
|
-
disabled,
|
|
803
|
-
hideError,
|
|
804
|
-
idPrefix,
|
|
805
|
-
idSeparator,
|
|
806
|
-
readonly,
|
|
807
|
-
uiSchema,
|
|
808
|
-
registry,
|
|
809
|
-
formContext
|
|
810
|
-
} = this.props;
|
|
811
|
-
const {
|
|
812
|
-
fields: {
|
|
813
|
-
ArraySchemaField,
|
|
814
|
-
SchemaField
|
|
815
|
-
},
|
|
816
|
-
globalUiOptions
|
|
817
|
-
} = registry;
|
|
818
|
-
const ItemSchemaField = ArraySchemaField || SchemaField;
|
|
819
|
-
const {
|
|
820
|
-
orderable = true,
|
|
821
|
-
removable = true,
|
|
822
|
-
copyable = false
|
|
823
|
-
} = utils.getUiOptions(uiSchema, globalUiOptions);
|
|
824
|
-
const has = {
|
|
825
|
-
moveUp: orderable && canMoveUp,
|
|
826
|
-
moveDown: orderable && canMoveDown,
|
|
827
|
-
copy: copyable && canAdd,
|
|
828
|
-
remove: removable && canRemove,
|
|
829
|
-
toolbar: false
|
|
830
|
-
};
|
|
831
|
-
has.toolbar = Object.keys(has).some(key => has[key]);
|
|
832
|
-
return {
|
|
833
|
-
children: jsxRuntime.jsx(ItemSchemaField, {
|
|
834
|
-
name: name,
|
|
835
|
-
index: index,
|
|
836
|
-
schema: itemSchema,
|
|
837
|
-
uiSchema: itemUiSchema,
|
|
838
|
-
formData: itemData,
|
|
839
|
-
formContext: formContext,
|
|
840
|
-
errorSchema: itemErrorSchema,
|
|
841
|
-
idPrefix: idPrefix,
|
|
842
|
-
idSeparator: idSeparator,
|
|
843
|
-
idSchema: itemIdSchema,
|
|
844
|
-
required: this.isItemRequired(itemSchema),
|
|
845
|
-
onChange: this.onChangeForIndex(index),
|
|
846
|
-
onBlur: onBlur,
|
|
847
|
-
onFocus: onFocus,
|
|
848
|
-
registry: registry,
|
|
849
|
-
disabled: disabled,
|
|
850
|
-
readonly: readonly,
|
|
851
|
-
hideError: hideError,
|
|
852
|
-
autofocus: autofocus,
|
|
853
|
-
rawErrors: rawErrors
|
|
854
|
-
}),
|
|
855
|
-
className: 'array-item',
|
|
856
|
-
disabled,
|
|
857
|
-
canAdd,
|
|
858
|
-
hasCopy: has.copy,
|
|
859
|
-
hasToolbar: has.toolbar,
|
|
860
|
-
hasMoveUp: has.moveUp,
|
|
861
|
-
hasMoveDown: has.moveDown,
|
|
862
|
-
hasRemove: has.remove,
|
|
863
|
-
index,
|
|
864
|
-
totalItems,
|
|
865
|
-
key,
|
|
866
|
-
onAddIndexClick: this.onAddIndexClick,
|
|
867
|
-
onCopyIndexClick: this.onCopyIndexClick,
|
|
868
|
-
onDropIndexClick: this.onDropIndexClick,
|
|
869
|
-
onReorderClick: this.onReorderClick,
|
|
870
|
-
readonly,
|
|
871
|
-
registry,
|
|
872
|
-
schema: itemSchema,
|
|
873
|
-
uiSchema: itemUiSchema
|
|
874
|
-
};
|
|
875
|
-
}
|
|
876
|
-
}
|
|
877
|
-
|
|
878
|
-
/** The `BooleanField` component is used to render a field in the schema is boolean. It constructs `enumOptions` for the
|
|
879
|
-
* two boolean values based on the various alternatives in the schema.
|
|
880
|
-
*
|
|
881
|
-
* @param props - The `FieldProps` for this template
|
|
882
|
-
*/
|
|
883
|
-
function BooleanField(props) {
|
|
884
|
-
const {
|
|
885
|
-
schema,
|
|
886
|
-
name,
|
|
887
|
-
uiSchema,
|
|
888
|
-
idSchema,
|
|
889
|
-
formData,
|
|
890
|
-
registry,
|
|
891
|
-
required,
|
|
892
|
-
disabled,
|
|
893
|
-
readonly,
|
|
894
|
-
autofocus,
|
|
895
|
-
onChange,
|
|
896
|
-
onFocus,
|
|
897
|
-
onBlur,
|
|
898
|
-
rawErrors
|
|
899
|
-
} = props;
|
|
900
|
-
const {
|
|
901
|
-
title
|
|
902
|
-
} = schema;
|
|
903
|
-
const {
|
|
904
|
-
widgets,
|
|
905
|
-
formContext,
|
|
906
|
-
translateString,
|
|
907
|
-
globalUiOptions
|
|
908
|
-
} = registry;
|
|
909
|
-
const {
|
|
910
|
-
widget = 'checkbox',
|
|
911
|
-
title: uiTitle,
|
|
912
|
-
// Unlike the other fields, don't use `getDisplayLabel()` since it always returns false for the boolean type
|
|
913
|
-
label: displayLabel = true,
|
|
914
|
-
...options
|
|
915
|
-
} = utils.getUiOptions(uiSchema, globalUiOptions);
|
|
916
|
-
const Widget = utils.getWidget(schema, widget, widgets);
|
|
917
|
-
const yes = translateString(utils.TranslatableString.YesLabel);
|
|
918
|
-
const no = translateString(utils.TranslatableString.NoLabel);
|
|
919
|
-
let enumOptions;
|
|
920
|
-
const label = uiTitle ?? title ?? name;
|
|
921
|
-
if (Array.isArray(schema.oneOf)) {
|
|
922
|
-
enumOptions = utils.optionsList({
|
|
923
|
-
oneOf: schema.oneOf.map(option => {
|
|
924
|
-
if (isObject__default["default"](option)) {
|
|
925
|
-
return {
|
|
926
|
-
...option,
|
|
927
|
-
title: option.title || (option.const === true ? yes : no)
|
|
928
|
-
};
|
|
929
|
-
}
|
|
930
|
-
return undefined;
|
|
931
|
-
}).filter(o => o) // cast away the error that typescript can't grok is fixed
|
|
932
|
-
});
|
|
933
|
-
} else {
|
|
934
|
-
// We deprecated enumNames in v5. It's intentionally omitted from RSJFSchema type, so we need to cast here.
|
|
935
|
-
const schemaWithEnumNames = schema;
|
|
936
|
-
const enums = schema.enum ?? [true, false];
|
|
937
|
-
if (!schemaWithEnumNames.enumNames && enums.length === 2 && enums.every(v => typeof v === 'boolean')) {
|
|
938
|
-
enumOptions = [{
|
|
939
|
-
value: enums[0],
|
|
940
|
-
label: enums[0] ? yes : no
|
|
941
|
-
}, {
|
|
942
|
-
value: enums[1],
|
|
943
|
-
label: enums[1] ? yes : no
|
|
944
|
-
}];
|
|
945
|
-
} else {
|
|
946
|
-
enumOptions = utils.optionsList({
|
|
947
|
-
enum: enums,
|
|
948
|
-
// NOTE: enumNames is deprecated, but still supported for now.
|
|
949
|
-
enumNames: schemaWithEnumNames.enumNames
|
|
950
|
-
});
|
|
951
|
-
}
|
|
952
|
-
}
|
|
953
|
-
return jsxRuntime.jsx(Widget, {
|
|
954
|
-
options: {
|
|
955
|
-
...options,
|
|
956
|
-
enumOptions
|
|
957
|
-
},
|
|
958
|
-
schema: schema,
|
|
959
|
-
uiSchema: uiSchema,
|
|
960
|
-
id: idSchema.$id,
|
|
961
|
-
name: name,
|
|
962
|
-
onChange: onChange,
|
|
963
|
-
onFocus: onFocus,
|
|
964
|
-
onBlur: onBlur,
|
|
965
|
-
label: label,
|
|
966
|
-
hideLabel: !displayLabel,
|
|
967
|
-
value: formData,
|
|
968
|
-
required: required,
|
|
969
|
-
disabled: disabled,
|
|
970
|
-
readonly: readonly,
|
|
971
|
-
registry: registry,
|
|
972
|
-
formContext: formContext,
|
|
973
|
-
autofocus: autofocus,
|
|
974
|
-
rawErrors: rawErrors
|
|
975
|
-
});
|
|
976
|
-
}
|
|
977
|
-
|
|
978
|
-
/** The `AnyOfField` component is used to render a field in the schema that is an `anyOf`, `allOf` or `oneOf`. It tracks
|
|
979
|
-
* the currently selected option and cleans up any irrelevant data in `formData`.
|
|
980
|
-
*
|
|
981
|
-
* @param props - The `FieldProps` for this template
|
|
982
|
-
*/
|
|
983
|
-
class AnyOfField extends react.Component {
|
|
984
|
-
/** Constructs an `AnyOfField` with the given `props` to initialize the initially selected option in state
|
|
985
|
-
*
|
|
986
|
-
* @param props - The `FieldProps` for this template
|
|
987
|
-
*/
|
|
988
|
-
constructor(props) {
|
|
989
|
-
super(props);
|
|
990
|
-
/** Callback handler to remember what the currently selected option is. In addition to that the `formData` is updated
|
|
991
|
-
* to remove properties that are not part of the newly selected option schema, and then the updated data is passed to
|
|
992
|
-
* the `onChange` handler.
|
|
993
|
-
*
|
|
994
|
-
* @param option - The new option value being selected
|
|
995
|
-
*/
|
|
996
|
-
this.onOptionChange = option => {
|
|
997
|
-
const {
|
|
998
|
-
selectedOption,
|
|
999
|
-
retrievedOptions
|
|
1000
|
-
} = this.state;
|
|
1001
|
-
const {
|
|
1002
|
-
formData,
|
|
1003
|
-
onChange,
|
|
1004
|
-
registry
|
|
1005
|
-
} = this.props;
|
|
1006
|
-
const {
|
|
1007
|
-
schemaUtils
|
|
1008
|
-
} = registry;
|
|
1009
|
-
const intOption = option !== undefined ? parseInt(option, 10) : -1;
|
|
1010
|
-
if (intOption === selectedOption) {
|
|
1011
|
-
return;
|
|
1012
|
-
}
|
|
1013
|
-
const newOption = intOption >= 0 ? retrievedOptions[intOption] : undefined;
|
|
1014
|
-
const oldOption = selectedOption >= 0 ? retrievedOptions[selectedOption] : undefined;
|
|
1015
|
-
let newFormData = schemaUtils.sanitizeDataForNewSchema(newOption, oldOption, formData);
|
|
1016
|
-
if (newFormData && newOption) {
|
|
1017
|
-
// Call getDefaultFormState to make sure defaults are populated on change. Pass "excludeObjectChildren"
|
|
1018
|
-
// so that only the root objects themselves are created without adding undefined children properties
|
|
1019
|
-
newFormData = schemaUtils.getDefaultFormState(newOption, newFormData, 'excludeObjectChildren');
|
|
1020
|
-
}
|
|
1021
|
-
onChange(newFormData, undefined, this.getFieldId());
|
|
1022
|
-
this.setState({
|
|
1023
|
-
selectedOption: intOption
|
|
1024
|
-
});
|
|
1025
|
-
};
|
|
1026
|
-
const {
|
|
1027
|
-
formData: _formData,
|
|
1028
|
-
options,
|
|
1029
|
-
registry: {
|
|
1030
|
-
schemaUtils: _schemaUtils
|
|
1031
|
-
}
|
|
1032
|
-
} = this.props;
|
|
1033
|
-
// cache the retrieved options in state in case they have $refs to save doing it later
|
|
1034
|
-
const _retrievedOptions = options.map(opt => _schemaUtils.retrieveSchema(opt, _formData));
|
|
1035
|
-
this.state = {
|
|
1036
|
-
retrievedOptions: _retrievedOptions,
|
|
1037
|
-
selectedOption: this.getMatchingOption(0, _formData, _retrievedOptions)
|
|
1038
|
-
};
|
|
1039
|
-
}
|
|
1040
|
-
/** React lifecycle method that is called when the props and/or state for this component is updated. It recomputes the
|
|
1041
|
-
* currently selected option based on the overall `formData`
|
|
1042
|
-
*
|
|
1043
|
-
* @param prevProps - The previous `FieldProps` for this template
|
|
1044
|
-
* @param prevState - The previous `AnyOfFieldState` for this template
|
|
1045
|
-
*/
|
|
1046
|
-
componentDidUpdate(prevProps, prevState) {
|
|
1047
|
-
const {
|
|
1048
|
-
formData,
|
|
1049
|
-
options,
|
|
1050
|
-
idSchema
|
|
1051
|
-
} = this.props;
|
|
1052
|
-
const {
|
|
1053
|
-
selectedOption
|
|
1054
|
-
} = this.state;
|
|
1055
|
-
let newState = this.state;
|
|
1056
|
-
if (!utils.deepEquals(prevProps.options, options)) {
|
|
1057
|
-
const {
|
|
1058
|
-
registry: {
|
|
1059
|
-
schemaUtils
|
|
1060
|
-
}
|
|
1061
|
-
} = this.props;
|
|
1062
|
-
// re-cache the retrieved options in state in case they have $refs to save doing it later
|
|
1063
|
-
const retrievedOptions = options.map(opt => schemaUtils.retrieveSchema(opt, formData));
|
|
1064
|
-
newState = {
|
|
1065
|
-
selectedOption,
|
|
1066
|
-
retrievedOptions
|
|
1067
|
-
};
|
|
1068
|
-
}
|
|
1069
|
-
if (!utils.deepEquals(formData, prevProps.formData) && idSchema.$id === prevProps.idSchema.$id) {
|
|
1070
|
-
const {
|
|
1071
|
-
retrievedOptions
|
|
1072
|
-
} = newState;
|
|
1073
|
-
const matchingOption = this.getMatchingOption(selectedOption, formData, retrievedOptions);
|
|
1074
|
-
if (prevState && matchingOption !== selectedOption) {
|
|
1075
|
-
newState = {
|
|
1076
|
-
selectedOption: matchingOption,
|
|
1077
|
-
retrievedOptions
|
|
1078
|
-
};
|
|
1079
|
-
}
|
|
1080
|
-
}
|
|
1081
|
-
if (newState !== this.state) {
|
|
1082
|
-
this.setState(newState);
|
|
1083
|
-
}
|
|
1084
|
-
}
|
|
1085
|
-
/** Determines the best matching option for the given `formData` and `options`.
|
|
1086
|
-
*
|
|
1087
|
-
* @param formData - The new formData
|
|
1088
|
-
* @param options - The list of options to choose from
|
|
1089
|
-
* @return - The index of the `option` that best matches the `formData`
|
|
1090
|
-
*/
|
|
1091
|
-
getMatchingOption(selectedOption, formData, options) {
|
|
1092
|
-
const {
|
|
1093
|
-
schema,
|
|
1094
|
-
registry: {
|
|
1095
|
-
schemaUtils
|
|
1096
|
-
}
|
|
1097
|
-
} = this.props;
|
|
1098
|
-
const discriminator = utils.getDiscriminatorFieldFromSchema(schema);
|
|
1099
|
-
const option = schemaUtils.getClosestMatchingOption(formData, options, selectedOption, discriminator);
|
|
1100
|
-
return option;
|
|
1101
|
-
}
|
|
1102
|
-
getFieldId() {
|
|
1103
|
-
const {
|
|
1104
|
-
idSchema,
|
|
1105
|
-
schema
|
|
1106
|
-
} = this.props;
|
|
1107
|
-
return `${idSchema.$id}${schema.oneOf ? '__oneof_select' : '__anyof_select'}`;
|
|
1108
|
-
}
|
|
1109
|
-
/** Renders the `AnyOfField` selector along with a `SchemaField` for the value of the `formData`
|
|
1110
|
-
*/
|
|
1111
|
-
render() {
|
|
1112
|
-
const {
|
|
1113
|
-
name,
|
|
1114
|
-
disabled = false,
|
|
1115
|
-
errorSchema = {},
|
|
1116
|
-
formContext,
|
|
1117
|
-
onBlur,
|
|
1118
|
-
onFocus,
|
|
1119
|
-
registry,
|
|
1120
|
-
schema,
|
|
1121
|
-
uiSchema
|
|
1122
|
-
} = this.props;
|
|
1123
|
-
const {
|
|
1124
|
-
widgets,
|
|
1125
|
-
fields,
|
|
1126
|
-
translateString,
|
|
1127
|
-
globalUiOptions,
|
|
1128
|
-
schemaUtils
|
|
1129
|
-
} = registry;
|
|
1130
|
-
const {
|
|
1131
|
-
SchemaField: _SchemaField
|
|
1132
|
-
} = fields;
|
|
1133
|
-
const {
|
|
1134
|
-
selectedOption,
|
|
1135
|
-
retrievedOptions
|
|
1136
|
-
} = this.state;
|
|
1137
|
-
const {
|
|
1138
|
-
widget = 'select',
|
|
1139
|
-
placeholder,
|
|
1140
|
-
autofocus,
|
|
1141
|
-
autocomplete,
|
|
1142
|
-
title = schema.title,
|
|
1143
|
-
...uiOptions
|
|
1144
|
-
} = utils.getUiOptions(uiSchema, globalUiOptions);
|
|
1145
|
-
const Widget = utils.getWidget({
|
|
1146
|
-
type: 'number'
|
|
1147
|
-
}, widget, widgets);
|
|
1148
|
-
const rawErrors = get__default["default"](errorSchema, utils.ERRORS_KEY, []);
|
|
1149
|
-
const fieldErrorSchema = omit__default["default"](errorSchema, [utils.ERRORS_KEY]);
|
|
1150
|
-
const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
|
|
1151
|
-
const option = selectedOption >= 0 ? retrievedOptions[selectedOption] || null : null;
|
|
1152
|
-
let optionSchema;
|
|
1153
|
-
if (option) {
|
|
1154
|
-
const {
|
|
1155
|
-
oneOf,
|
|
1156
|
-
anyOf,
|
|
1157
|
-
...remaining
|
|
1158
|
-
} = schema;
|
|
1159
|
-
// Merge in all the non-oneOf/anyOf properties and also skip the special ADDITIONAL_PROPERTY_FLAG property
|
|
1160
|
-
unset__default["default"](remaining, utils.ADDITIONAL_PROPERTY_FLAG);
|
|
1161
|
-
optionSchema = !isEmpty__default["default"](remaining) ? utils.mergeSchemas(remaining, option) : option;
|
|
1162
|
-
}
|
|
1163
|
-
const translateEnum = title ? utils.TranslatableString.TitleOptionPrefix : utils.TranslatableString.OptionPrefix;
|
|
1164
|
-
const translateParams = title ? [title] : [];
|
|
1165
|
-
const enumOptions = retrievedOptions.map((opt, index) => ({
|
|
1166
|
-
label: opt.title || translateString(translateEnum, translateParams.concat(String(index + 1))),
|
|
1167
|
-
value: index
|
|
1168
|
-
}));
|
|
1169
|
-
return jsxRuntime.jsxs("div", {
|
|
1170
|
-
className: 'panel panel-default panel-body',
|
|
1171
|
-
children: [jsxRuntime.jsx("div", {
|
|
1172
|
-
className: 'form-group',
|
|
1173
|
-
children: jsxRuntime.jsx(Widget, {
|
|
1174
|
-
id: this.getFieldId(),
|
|
1175
|
-
name: `${name}${schema.oneOf ? '__oneof_select' : '__anyof_select'}`,
|
|
1176
|
-
schema: {
|
|
1177
|
-
type: 'number',
|
|
1178
|
-
default: 0
|
|
1179
|
-
},
|
|
1180
|
-
onChange: this.onOptionChange,
|
|
1181
|
-
onBlur: onBlur,
|
|
1182
|
-
onFocus: onFocus,
|
|
1183
|
-
disabled: disabled || isEmpty__default["default"](enumOptions),
|
|
1184
|
-
multiple: false,
|
|
1185
|
-
rawErrors: rawErrors,
|
|
1186
|
-
errorSchema: fieldErrorSchema,
|
|
1187
|
-
value: selectedOption >= 0 ? selectedOption : undefined,
|
|
1188
|
-
options: {
|
|
1189
|
-
enumOptions,
|
|
1190
|
-
...uiOptions
|
|
1191
|
-
},
|
|
1192
|
-
registry: registry,
|
|
1193
|
-
formContext: formContext,
|
|
1194
|
-
placeholder: placeholder,
|
|
1195
|
-
autocomplete: autocomplete,
|
|
1196
|
-
autofocus: autofocus,
|
|
1197
|
-
label: title ?? name,
|
|
1198
|
-
hideLabel: !displayLabel
|
|
1199
|
-
})
|
|
1200
|
-
}), option !== null && jsxRuntime.jsx(_SchemaField, {
|
|
1201
|
-
...this.props,
|
|
1202
|
-
schema: optionSchema
|
|
1203
|
-
})]
|
|
1204
|
-
});
|
|
1205
|
-
}
|
|
1206
|
-
}
|
|
1207
|
-
|
|
1208
|
-
// Matches a string that ends in a . character, optionally followed by a sequence of
|
|
1209
|
-
// digits followed by any number of 0 characters up until the end of the line.
|
|
1210
|
-
// Ensuring that there is at least one prefixed character is important so that
|
|
1211
|
-
// you don't incorrectly match against "0".
|
|
1212
|
-
const trailingCharMatcherWithPrefix = /\.([0-9]*0)*$/;
|
|
1213
|
-
// This is used for trimming the trailing 0 and . characters without affecting
|
|
1214
|
-
// the rest of the string. Its possible to use one RegEx with groups for this
|
|
1215
|
-
// functionality, but it is fairly complex compared to simply defining two
|
|
1216
|
-
// different matchers.
|
|
1217
|
-
const trailingCharMatcher = /[0.]0*$/;
|
|
1218
|
-
/**
|
|
1219
|
-
* The NumberField class has some special handling for dealing with trailing
|
|
1220
|
-
* decimal points and/or zeroes. This logic is designed to allow trailing values
|
|
1221
|
-
* to be visible in the input element, but not be represented in the
|
|
1222
|
-
* corresponding form data.
|
|
1223
|
-
*
|
|
1224
|
-
* The algorithm is as follows:
|
|
1225
|
-
*
|
|
1226
|
-
* 1. When the input value changes the value is cached in the component state
|
|
1227
|
-
*
|
|
1228
|
-
* 2. The value is then normalized, removing trailing decimal points and zeros,
|
|
1229
|
-
* then passed to the "onChange" callback
|
|
1230
|
-
*
|
|
1231
|
-
* 3. When the component is rendered, the formData value is checked against the
|
|
1232
|
-
* value cached in the state. If it matches the cached value, the cached
|
|
1233
|
-
* value is passed to the input instead of the formData value
|
|
1234
|
-
*/
|
|
1235
|
-
function NumberField(props) {
|
|
1236
|
-
const {
|
|
1237
|
-
registry,
|
|
1238
|
-
onChange,
|
|
1239
|
-
formData,
|
|
1240
|
-
value: initialValue
|
|
1241
|
-
} = props;
|
|
1242
|
-
const [lastValue, setLastValue] = react.useState(initialValue);
|
|
1243
|
-
const {
|
|
1244
|
-
StringField
|
|
1245
|
-
} = registry.fields;
|
|
1246
|
-
let value = formData;
|
|
1247
|
-
/** Handle the change from the `StringField` to properly convert to a number
|
|
1248
|
-
*
|
|
1249
|
-
* @param value - The current value for the change occurring
|
|
1250
|
-
*/
|
|
1251
|
-
const handleChange = react.useCallback(value => {
|
|
1252
|
-
// Cache the original value in component state
|
|
1253
|
-
setLastValue(value);
|
|
1254
|
-
// Normalize decimals that don't start with a zero character in advance so
|
|
1255
|
-
// that the rest of the normalization logic is simpler
|
|
1256
|
-
if (`${value}`.charAt(0) === '.') {
|
|
1257
|
-
value = `0${value}`;
|
|
1258
|
-
}
|
|
1259
|
-
// Check that the value is a string (this can happen if the widget used is a
|
|
1260
|
-
// <select>, due to an enum declaration etc) then, if the value ends in a
|
|
1261
|
-
// trailing decimal point or multiple zeroes, strip the trailing values
|
|
1262
|
-
const processed = typeof value === 'string' && value.match(trailingCharMatcherWithPrefix) ? utils.asNumber(value.replace(trailingCharMatcher, '')) : utils.asNumber(value);
|
|
1263
|
-
onChange(processed);
|
|
1264
|
-
}, [onChange]);
|
|
1265
|
-
if (typeof lastValue === 'string' && typeof value === 'number') {
|
|
1266
|
-
// Construct a regular expression that checks for a string that consists
|
|
1267
|
-
// of the formData value suffixed with zero or one '.' characters and zero
|
|
1268
|
-
// or more '0' characters
|
|
1269
|
-
const re = new RegExp(`${value}`.replace('.', '\\.') + '\\.?0*$');
|
|
1270
|
-
// If the cached "lastValue" is a match, use that instead of the formData
|
|
1271
|
-
// value to prevent the input value from changing in the UI
|
|
1272
|
-
if (lastValue.match(re)) {
|
|
1273
|
-
value = lastValue;
|
|
1274
|
-
}
|
|
1275
|
-
}
|
|
1276
|
-
return jsxRuntime.jsx(StringField, {
|
|
1277
|
-
...props,
|
|
1278
|
-
formData: value,
|
|
1279
|
-
onChange: handleChange
|
|
1280
|
-
});
|
|
1281
|
-
}
|
|
1282
|
-
|
|
1283
|
-
/** The `ObjectField` component is used to render a field in the schema that is of type `object`. It tracks whether an
|
|
1284
|
-
* additional property key was modified and what it was modified to
|
|
1285
|
-
*
|
|
1286
|
-
* @param props - The `FieldProps` for this template
|
|
1287
|
-
*/
|
|
1288
|
-
class ObjectField extends react.Component {
|
|
1289
|
-
constructor(...args) {
|
|
1290
|
-
super(...args);
|
|
1291
|
-
/** Set up the initial state */
|
|
1292
|
-
this.state = {
|
|
1293
|
-
wasPropertyKeyModified: false,
|
|
1294
|
-
additionalProperties: {}
|
|
1295
|
-
};
|
|
1296
|
-
/** Returns the `onPropertyChange` handler for the `name` field. Handles the special case where a user is attempting
|
|
1297
|
-
* to clear the data for a field added as an additional property. Calls the `onChange()` handler with the updated
|
|
1298
|
-
* formData.
|
|
1299
|
-
*
|
|
1300
|
-
* @param name - The name of the property
|
|
1301
|
-
* @param addedByAdditionalProperties - Flag indicating whether this property is an additional property
|
|
1302
|
-
* @returns - The onPropertyChange callback for the `name` property
|
|
1303
|
-
*/
|
|
1304
|
-
this.onPropertyChange = (name, addedByAdditionalProperties = false) => {
|
|
1305
|
-
return (value, newErrorSchema, id) => {
|
|
1306
|
-
const {
|
|
1307
|
-
formData,
|
|
1308
|
-
onChange,
|
|
1309
|
-
errorSchema
|
|
1310
|
-
} = this.props;
|
|
1311
|
-
if (value === undefined && addedByAdditionalProperties) {
|
|
1312
|
-
// Don't set value = undefined for fields added by
|
|
1313
|
-
// additionalProperties. Doing so removes them from the
|
|
1314
|
-
// formData, which causes them to completely disappear
|
|
1315
|
-
// (including the input field for the property name). Unlike
|
|
1316
|
-
// fields which are "mandated" by the schema, these fields can
|
|
1317
|
-
// be set to undefined by clicking a "delete field" button, so
|
|
1318
|
-
// set empty values to the empty string.
|
|
1319
|
-
value = '';
|
|
1320
|
-
}
|
|
1321
|
-
const newFormData = {
|
|
1322
|
-
...formData,
|
|
1323
|
-
[name]: value
|
|
1324
|
-
};
|
|
1325
|
-
onChange(newFormData, errorSchema && errorSchema && {
|
|
1326
|
-
...errorSchema,
|
|
1327
|
-
[name]: newErrorSchema
|
|
1328
|
-
}, id);
|
|
1329
|
-
};
|
|
1330
|
-
};
|
|
1331
|
-
/** Returns a callback to handle the onDropPropertyClick event for the given `key` which removes the old `key` data
|
|
1332
|
-
* and calls the `onChange` callback with it
|
|
1333
|
-
*
|
|
1334
|
-
* @param key - The key for which the drop callback is desired
|
|
1335
|
-
* @returns - The drop property click callback
|
|
1336
|
-
*/
|
|
1337
|
-
this.onDropPropertyClick = key => {
|
|
1338
|
-
return event => {
|
|
1339
|
-
event.preventDefault();
|
|
1340
|
-
const {
|
|
1341
|
-
onChange,
|
|
1342
|
-
formData
|
|
1343
|
-
} = this.props;
|
|
1344
|
-
const copiedFormData = {
|
|
1345
|
-
...formData
|
|
1346
|
-
};
|
|
1347
|
-
unset__default["default"](copiedFormData, key);
|
|
1348
|
-
onChange(copiedFormData);
|
|
1349
|
-
};
|
|
1350
|
-
};
|
|
1351
|
-
/** Computes the next available key name from the `preferredKey`, indexing through the already existing keys until one
|
|
1352
|
-
* that is already not assigned is found.
|
|
1353
|
-
*
|
|
1354
|
-
* @param preferredKey - The preferred name of a new key
|
|
1355
|
-
* @param [formData] - The form data in which to check if the desired key already exists
|
|
1356
|
-
* @returns - The name of the next available key from `preferredKey`
|
|
1357
|
-
*/
|
|
1358
|
-
this.getAvailableKey = (preferredKey, formData) => {
|
|
1359
|
-
const {
|
|
1360
|
-
uiSchema,
|
|
1361
|
-
registry
|
|
1362
|
-
} = this.props;
|
|
1363
|
-
const {
|
|
1364
|
-
duplicateKeySuffixSeparator = '-'
|
|
1365
|
-
} = utils.getUiOptions(uiSchema, registry.globalUiOptions);
|
|
1366
|
-
let index = 0;
|
|
1367
|
-
let newKey = preferredKey;
|
|
1368
|
-
while (has__default["default"](formData, newKey)) {
|
|
1369
|
-
newKey = `${preferredKey}${duplicateKeySuffixSeparator}${++index}`;
|
|
1370
|
-
}
|
|
1371
|
-
return newKey;
|
|
1372
|
-
};
|
|
1373
|
-
/** Returns a callback function that deals with the rename of a key for an additional property for a schema. That
|
|
1374
|
-
* callback will attempt to rename the key and move the existing data to that key, calling `onChange` when it does.
|
|
1375
|
-
*
|
|
1376
|
-
* @param oldValue - The old value of a field
|
|
1377
|
-
* @returns - The key change callback function
|
|
1378
|
-
*/
|
|
1379
|
-
this.onKeyChange = oldValue => {
|
|
1380
|
-
return (value, newErrorSchema) => {
|
|
1381
|
-
if (oldValue === value) {
|
|
1382
|
-
return;
|
|
1383
|
-
}
|
|
1384
|
-
const {
|
|
1385
|
-
formData,
|
|
1386
|
-
onChange,
|
|
1387
|
-
errorSchema
|
|
1388
|
-
} = this.props;
|
|
1389
|
-
value = this.getAvailableKey(value, formData);
|
|
1390
|
-
const newFormData = {
|
|
1391
|
-
...formData
|
|
1392
|
-
};
|
|
1393
|
-
const newKeys = {
|
|
1394
|
-
[oldValue]: value
|
|
1395
|
-
};
|
|
1396
|
-
const keyValues = Object.keys(newFormData).map(key => {
|
|
1397
|
-
const newKey = newKeys[key] || key;
|
|
1398
|
-
return {
|
|
1399
|
-
[newKey]: newFormData[key]
|
|
1400
|
-
};
|
|
1401
|
-
});
|
|
1402
|
-
const renamedObj = Object.assign({}, ...keyValues);
|
|
1403
|
-
this.setState({
|
|
1404
|
-
wasPropertyKeyModified: true
|
|
1405
|
-
});
|
|
1406
|
-
onChange(renamedObj, errorSchema && errorSchema && {
|
|
1407
|
-
...errorSchema,
|
|
1408
|
-
[value]: newErrorSchema
|
|
1409
|
-
});
|
|
1410
|
-
};
|
|
1411
|
-
};
|
|
1412
|
-
/** Handles the adding of a new additional property on the given `schema`. Calls the `onChange` callback once the new
|
|
1413
|
-
* default data for that field has been added to the formData.
|
|
1414
|
-
*
|
|
1415
|
-
* @param schema - The schema element to which the new property is being added
|
|
1416
|
-
*/
|
|
1417
|
-
this.handleAddClick = schema => () => {
|
|
1418
|
-
if (!schema.additionalProperties) {
|
|
1419
|
-
return;
|
|
1420
|
-
}
|
|
1421
|
-
const {
|
|
1422
|
-
formData,
|
|
1423
|
-
onChange,
|
|
1424
|
-
registry
|
|
1425
|
-
} = this.props;
|
|
1426
|
-
const newFormData = {
|
|
1427
|
-
...formData
|
|
1428
|
-
};
|
|
1429
|
-
let type = undefined;
|
|
1430
|
-
if (isObject__default["default"](schema.additionalProperties)) {
|
|
1431
|
-
type = schema.additionalProperties.type;
|
|
1432
|
-
let apSchema = schema.additionalProperties;
|
|
1433
|
-
if (utils.REF_KEY in apSchema) {
|
|
1434
|
-
const {
|
|
1435
|
-
schemaUtils
|
|
1436
|
-
} = registry;
|
|
1437
|
-
apSchema = schemaUtils.retrieveSchema({
|
|
1438
|
-
$ref: apSchema[utils.REF_KEY]
|
|
1439
|
-
}, formData);
|
|
1440
|
-
type = apSchema.type;
|
|
1441
|
-
}
|
|
1442
|
-
if (!type && (utils.ANY_OF_KEY in apSchema || utils.ONE_OF_KEY in apSchema)) {
|
|
1443
|
-
type = 'object';
|
|
1444
|
-
}
|
|
1445
|
-
}
|
|
1446
|
-
const newKey = this.getAvailableKey('newKey', newFormData);
|
|
1447
|
-
// Cast this to make the `set` work properly
|
|
1448
|
-
set__default["default"](newFormData, newKey, this.getDefaultValue(type));
|
|
1449
|
-
onChange(newFormData);
|
|
1450
|
-
};
|
|
1451
|
-
}
|
|
1452
|
-
/** Returns a flag indicating whether the `name` field is required in the object schema
|
|
1453
|
-
*
|
|
1454
|
-
* @param name - The name of the field to check for required-ness
|
|
1455
|
-
* @returns - True if the field `name` is required, false otherwise
|
|
1456
|
-
*/
|
|
1457
|
-
isRequired(name) {
|
|
1458
|
-
const {
|
|
1459
|
-
schema
|
|
1460
|
-
} = this.props;
|
|
1461
|
-
return Array.isArray(schema.required) && schema.required.indexOf(name) !== -1;
|
|
1462
|
-
}
|
|
1463
|
-
/** Returns a default value to be used for a new additional schema property of the given `type`
|
|
1464
|
-
*
|
|
1465
|
-
* @param type - The type of the new additional schema property
|
|
1466
|
-
*/
|
|
1467
|
-
getDefaultValue(type) {
|
|
1468
|
-
const {
|
|
1469
|
-
registry: {
|
|
1470
|
-
translateString
|
|
1471
|
-
}
|
|
1472
|
-
} = this.props;
|
|
1473
|
-
switch (type) {
|
|
1474
|
-
case 'array':
|
|
1475
|
-
return [];
|
|
1476
|
-
case 'boolean':
|
|
1477
|
-
return false;
|
|
1478
|
-
case 'null':
|
|
1479
|
-
return null;
|
|
1480
|
-
case 'number':
|
|
1481
|
-
return 0;
|
|
1482
|
-
case 'object':
|
|
1483
|
-
return {};
|
|
1484
|
-
case 'string':
|
|
1485
|
-
default:
|
|
1486
|
-
// We don't have a datatype for some reason (perhaps additionalProperties was true)
|
|
1487
|
-
return translateString(utils.TranslatableString.NewStringDefault);
|
|
1488
|
-
}
|
|
1489
|
-
}
|
|
1490
|
-
/** Renders the `ObjectField` from the given props
|
|
1491
|
-
*/
|
|
1492
|
-
render() {
|
|
1493
|
-
const {
|
|
1494
|
-
schema: rawSchema,
|
|
1495
|
-
uiSchema = {},
|
|
1496
|
-
formData,
|
|
1497
|
-
errorSchema,
|
|
1498
|
-
idSchema,
|
|
1499
|
-
name,
|
|
1500
|
-
required = false,
|
|
1501
|
-
disabled = false,
|
|
1502
|
-
readonly = false,
|
|
1503
|
-
hideError,
|
|
1504
|
-
idPrefix,
|
|
1505
|
-
idSeparator,
|
|
1506
|
-
onBlur,
|
|
1507
|
-
onFocus,
|
|
1508
|
-
registry
|
|
1509
|
-
} = this.props;
|
|
1510
|
-
const {
|
|
1511
|
-
fields,
|
|
1512
|
-
formContext,
|
|
1513
|
-
schemaUtils,
|
|
1514
|
-
translateString,
|
|
1515
|
-
globalUiOptions
|
|
1516
|
-
} = registry;
|
|
1517
|
-
const {
|
|
1518
|
-
SchemaField
|
|
1519
|
-
} = fields;
|
|
1520
|
-
const schema = schemaUtils.retrieveSchema(rawSchema, formData);
|
|
1521
|
-
const uiOptions = utils.getUiOptions(uiSchema, globalUiOptions);
|
|
1522
|
-
const {
|
|
1523
|
-
properties: schemaProperties = {}
|
|
1524
|
-
} = schema;
|
|
1525
|
-
const title = uiOptions.title ?? schema.title ?? name;
|
|
1526
|
-
const description = uiOptions.description ?? schema.description;
|
|
1527
|
-
let orderedProperties;
|
|
1528
|
-
try {
|
|
1529
|
-
const properties = Object.keys(schemaProperties);
|
|
1530
|
-
orderedProperties = utils.orderProperties(properties, uiOptions.order);
|
|
1531
|
-
} catch (err) {
|
|
1532
|
-
return jsxRuntime.jsxs("div", {
|
|
1533
|
-
children: [jsxRuntime.jsx("p", {
|
|
1534
|
-
className: 'config-error',
|
|
1535
|
-
style: {
|
|
1536
|
-
color: 'red'
|
|
1537
|
-
},
|
|
1538
|
-
children: jsxRuntime.jsx(Markdown__default["default"], {
|
|
1539
|
-
children: translateString(utils.TranslatableString.InvalidObjectField, [name || 'root', err.message])
|
|
1540
|
-
})
|
|
1541
|
-
}), jsxRuntime.jsx("pre", {
|
|
1542
|
-
children: JSON.stringify(schema)
|
|
1543
|
-
})]
|
|
1544
|
-
});
|
|
1545
|
-
}
|
|
1546
|
-
const Template = utils.getTemplate('ObjectFieldTemplate', registry, uiOptions);
|
|
1547
|
-
const templateProps = {
|
|
1548
|
-
// getDisplayLabel() always returns false for object types, so just check the `uiOptions.label`
|
|
1549
|
-
title: uiOptions.label === false ? '' : title,
|
|
1550
|
-
description: uiOptions.label === false ? undefined : description,
|
|
1551
|
-
properties: orderedProperties.map(name => {
|
|
1552
|
-
const addedByAdditionalProperties = has__default["default"](schema, [utils.PROPERTIES_KEY, name, utils.ADDITIONAL_PROPERTY_FLAG]);
|
|
1553
|
-
const fieldUiSchema = addedByAdditionalProperties ? uiSchema.additionalProperties : uiSchema[name];
|
|
1554
|
-
const hidden = utils.getUiOptions(fieldUiSchema).widget === 'hidden';
|
|
1555
|
-
const fieldIdSchema = get__default["default"](idSchema, [name], {});
|
|
1556
|
-
return {
|
|
1557
|
-
content: jsxRuntime.jsx(SchemaField, {
|
|
1558
|
-
name: name,
|
|
1559
|
-
required: this.isRequired(name),
|
|
1560
|
-
schema: get__default["default"](schema, [utils.PROPERTIES_KEY, name], {}),
|
|
1561
|
-
uiSchema: fieldUiSchema,
|
|
1562
|
-
errorSchema: get__default["default"](errorSchema, name),
|
|
1563
|
-
idSchema: fieldIdSchema,
|
|
1564
|
-
idPrefix: idPrefix,
|
|
1565
|
-
idSeparator: idSeparator,
|
|
1566
|
-
formData: get__default["default"](formData, name),
|
|
1567
|
-
formContext: formContext,
|
|
1568
|
-
wasPropertyKeyModified: this.state.wasPropertyKeyModified,
|
|
1569
|
-
onKeyChange: this.onKeyChange(name),
|
|
1570
|
-
onChange: this.onPropertyChange(name, addedByAdditionalProperties),
|
|
1571
|
-
onBlur: onBlur,
|
|
1572
|
-
onFocus: onFocus,
|
|
1573
|
-
registry: registry,
|
|
1574
|
-
disabled: disabled,
|
|
1575
|
-
readonly: readonly,
|
|
1576
|
-
hideError: hideError,
|
|
1577
|
-
onDropPropertyClick: this.onDropPropertyClick
|
|
1578
|
-
}, name),
|
|
1579
|
-
name,
|
|
1580
|
-
readonly,
|
|
1581
|
-
disabled,
|
|
1582
|
-
required,
|
|
1583
|
-
hidden
|
|
1584
|
-
};
|
|
1585
|
-
}),
|
|
1586
|
-
readonly,
|
|
1587
|
-
disabled,
|
|
1588
|
-
required,
|
|
1589
|
-
idSchema,
|
|
1590
|
-
uiSchema,
|
|
1591
|
-
errorSchema,
|
|
1592
|
-
schema,
|
|
1593
|
-
formData,
|
|
1594
|
-
formContext,
|
|
1595
|
-
registry
|
|
1596
|
-
};
|
|
1597
|
-
return jsxRuntime.jsx(Template, {
|
|
1598
|
-
...templateProps,
|
|
1599
|
-
onAddClick: this.handleAddClick
|
|
1600
|
-
});
|
|
1601
|
-
}
|
|
1602
|
-
}
|
|
1603
|
-
|
|
1604
|
-
/** The map of component type to FieldName */
|
|
1605
|
-
const COMPONENT_TYPES = {
|
|
1606
|
-
array: 'ArrayField',
|
|
1607
|
-
boolean: 'BooleanField',
|
|
1608
|
-
integer: 'NumberField',
|
|
1609
|
-
number: 'NumberField',
|
|
1610
|
-
object: 'ObjectField',
|
|
1611
|
-
string: 'StringField',
|
|
1612
|
-
null: 'NullField'
|
|
1613
|
-
};
|
|
1614
|
-
/** Computes and returns which `Field` implementation to return in order to render the field represented by the
|
|
1615
|
-
* `schema`. The `uiOptions` are used to alter what potential `Field` implementation is actually returned. If no
|
|
1616
|
-
* appropriate `Field` implementation can be found then a wrapper around `UnsupportedFieldTemplate` is used.
|
|
1617
|
-
*
|
|
1618
|
-
* @param schema - The schema from which to obtain the type
|
|
1619
|
-
* @param uiOptions - The UI Options that may affect the component decision
|
|
1620
|
-
* @param idSchema - The id that is passed to the `UnsupportedFieldTemplate`
|
|
1621
|
-
* @param registry - The registry from which fields and templates are obtained
|
|
1622
|
-
* @returns - The `Field` component that is used to render the actual field data
|
|
1623
|
-
*/
|
|
1624
|
-
function getFieldComponent(schema, uiOptions, idSchema, registry) {
|
|
1625
|
-
const field = uiOptions.field;
|
|
1626
|
-
const {
|
|
1627
|
-
fields,
|
|
1628
|
-
translateString
|
|
1629
|
-
} = registry;
|
|
1630
|
-
if (typeof field === 'function') {
|
|
1631
|
-
return field;
|
|
1632
|
-
}
|
|
1633
|
-
if (typeof field === 'string' && field in fields) {
|
|
1634
|
-
return fields[field];
|
|
1635
|
-
}
|
|
1636
|
-
const schemaType = utils.getSchemaType(schema);
|
|
1637
|
-
const type = Array.isArray(schemaType) ? schemaType[0] : schemaType || '';
|
|
1638
|
-
const schemaId = schema.$id;
|
|
1639
|
-
let componentName = COMPONENT_TYPES[type];
|
|
1640
|
-
if (schemaId && schemaId in fields) {
|
|
1641
|
-
componentName = schemaId;
|
|
1642
|
-
}
|
|
1643
|
-
// If the type is not defined and the schema uses 'anyOf' or 'oneOf', don't
|
|
1644
|
-
// render a field and let the MultiSchemaField component handle the form display
|
|
1645
|
-
if (!componentName && (schema.anyOf || schema.oneOf)) {
|
|
1646
|
-
return () => null;
|
|
1647
|
-
}
|
|
1648
|
-
return componentName in fields ? fields[componentName] : () => {
|
|
1649
|
-
const UnsupportedFieldTemplate = utils.getTemplate('UnsupportedFieldTemplate', registry, uiOptions);
|
|
1650
|
-
return jsxRuntime.jsx(UnsupportedFieldTemplate, {
|
|
1651
|
-
schema: schema,
|
|
1652
|
-
idSchema: idSchema,
|
|
1653
|
-
reason: translateString(utils.TranslatableString.UnknownFieldType, [String(schema.type)]),
|
|
1654
|
-
registry: registry
|
|
1655
|
-
});
|
|
1656
|
-
};
|
|
1657
|
-
}
|
|
1658
|
-
/** The `SchemaFieldRender` component is the work-horse of react-jsonschema-form, determining what kind of real field to
|
|
1659
|
-
* render based on the `schema`, `uiSchema` and all the other props. It also deals with rendering the `anyOf` and
|
|
1660
|
-
* `oneOf` fields.
|
|
1661
|
-
*
|
|
1662
|
-
* @param props - The `FieldProps` for this component
|
|
1663
|
-
*/
|
|
1664
|
-
function SchemaFieldRender(props) {
|
|
1665
|
-
const {
|
|
1666
|
-
schema: _schema,
|
|
1667
|
-
idSchema: _idSchema,
|
|
1668
|
-
uiSchema,
|
|
1669
|
-
formData,
|
|
1670
|
-
errorSchema,
|
|
1671
|
-
idPrefix,
|
|
1672
|
-
idSeparator,
|
|
1673
|
-
name,
|
|
1674
|
-
onChange,
|
|
1675
|
-
onKeyChange,
|
|
1676
|
-
onDropPropertyClick,
|
|
1677
|
-
required,
|
|
1678
|
-
registry,
|
|
1679
|
-
wasPropertyKeyModified = false
|
|
1680
|
-
} = props;
|
|
1681
|
-
const {
|
|
1682
|
-
formContext,
|
|
1683
|
-
schemaUtils,
|
|
1684
|
-
globalUiOptions
|
|
1685
|
-
} = registry;
|
|
1686
|
-
const uiOptions = utils.getUiOptions(uiSchema, globalUiOptions);
|
|
1687
|
-
const FieldTemplate = utils.getTemplate('FieldTemplate', registry, uiOptions);
|
|
1688
|
-
const DescriptionFieldTemplate = utils.getTemplate('DescriptionFieldTemplate', registry, uiOptions);
|
|
1689
|
-
const FieldHelpTemplate = utils.getTemplate('FieldHelpTemplate', registry, uiOptions);
|
|
1690
|
-
const FieldErrorTemplate = utils.getTemplate('FieldErrorTemplate', registry, uiOptions);
|
|
1691
|
-
const schema = schemaUtils.retrieveSchema(_schema, formData);
|
|
1692
|
-
const fieldId = _idSchema[utils.ID_KEY];
|
|
1693
|
-
const idSchema = utils.mergeObjects(schemaUtils.toIdSchema(schema, fieldId, formData, idPrefix, idSeparator), _idSchema);
|
|
1694
|
-
/** Intermediary `onChange` handler for field components that will inject the `id` of the current field into the
|
|
1695
|
-
* `onChange` chain if it is not already being provided from a deeper level in the hierarchy
|
|
1696
|
-
*/
|
|
1697
|
-
const handleFieldComponentChange = react.useCallback((formData, newErrorSchema, id) => {
|
|
1698
|
-
const theId = id || fieldId;
|
|
1699
|
-
return onChange(formData, newErrorSchema, theId);
|
|
1700
|
-
}, [fieldId, onChange]);
|
|
1701
|
-
const FieldComponent = getFieldComponent(schema, uiOptions, idSchema, registry);
|
|
1702
|
-
const disabled = Boolean(props.disabled || uiOptions.disabled);
|
|
1703
|
-
const readonly = Boolean(props.readonly || uiOptions.readonly || props.schema.readOnly || schema.readOnly);
|
|
1704
|
-
const uiSchemaHideError = uiOptions.hideError;
|
|
1705
|
-
// Set hideError to the value provided in the uiSchema, otherwise stick with the prop to propagate to children
|
|
1706
|
-
const hideError = uiSchemaHideError === undefined ? props.hideError : Boolean(uiSchemaHideError);
|
|
1707
|
-
const autofocus = Boolean(props.autofocus || uiOptions.autofocus);
|
|
1708
|
-
if (Object.keys(schema).length === 0) {
|
|
1709
|
-
return null;
|
|
1710
|
-
}
|
|
1711
|
-
const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
|
|
1712
|
-
const {
|
|
1713
|
-
__errors,
|
|
1714
|
-
...fieldErrorSchema
|
|
1715
|
-
} = errorSchema || {};
|
|
1716
|
-
// See #439: uiSchema: Don't pass consumed class names or style to child components
|
|
1717
|
-
const fieldUiSchema = omit__default["default"](uiSchema, ['ui:classNames', 'classNames', 'ui:style']);
|
|
1718
|
-
if (utils.UI_OPTIONS_KEY in fieldUiSchema) {
|
|
1719
|
-
fieldUiSchema[utils.UI_OPTIONS_KEY] = omit__default["default"](fieldUiSchema[utils.UI_OPTIONS_KEY], ['classNames', 'style']);
|
|
1720
|
-
}
|
|
1721
|
-
const field = jsxRuntime.jsx(FieldComponent, {
|
|
1722
|
-
...props,
|
|
1723
|
-
onChange: handleFieldComponentChange,
|
|
1724
|
-
idSchema: idSchema,
|
|
1725
|
-
schema: schema,
|
|
1726
|
-
uiSchema: fieldUiSchema,
|
|
1727
|
-
disabled: disabled,
|
|
1728
|
-
readonly: readonly,
|
|
1729
|
-
hideError: hideError,
|
|
1730
|
-
autofocus: autofocus,
|
|
1731
|
-
errorSchema: fieldErrorSchema,
|
|
1732
|
-
formContext: formContext,
|
|
1733
|
-
rawErrors: __errors
|
|
1734
|
-
});
|
|
1735
|
-
const id = idSchema[utils.ID_KEY];
|
|
1736
|
-
// If this schema has a title defined, but the user has set a new key/label, retain their input.
|
|
1737
|
-
let label;
|
|
1738
|
-
if (wasPropertyKeyModified) {
|
|
1739
|
-
label = name;
|
|
1740
|
-
} else {
|
|
1741
|
-
label = utils.ADDITIONAL_PROPERTY_FLAG in schema ? name : uiOptions.title || props.schema.title || schema.title || name;
|
|
1742
|
-
}
|
|
1743
|
-
const description = uiOptions.description || props.schema.description || schema.description || '';
|
|
1744
|
-
const richDescription = uiOptions.enableMarkdownInDescription ? jsxRuntime.jsx(Markdown__default["default"], {
|
|
1745
|
-
children: description
|
|
1746
|
-
}) : description;
|
|
1747
|
-
const help = uiOptions.help;
|
|
1748
|
-
const hidden = uiOptions.widget === 'hidden';
|
|
1749
|
-
const classNames = ['form-group', 'field', `field-${utils.getSchemaType(schema)}`];
|
|
1750
|
-
if (!hideError && __errors && __errors.length > 0) {
|
|
1751
|
-
classNames.push('field-error has-error has-danger');
|
|
1752
|
-
}
|
|
1753
|
-
if (uiSchema !== null && uiSchema !== void 0 && uiSchema.classNames) {
|
|
1754
|
-
{
|
|
1755
|
-
console.warn("'uiSchema.classNames' is deprecated and may be removed in a major release; Use 'ui:classNames' instead.");
|
|
1756
|
-
}
|
|
1757
|
-
classNames.push(uiSchema.classNames);
|
|
1758
|
-
}
|
|
1759
|
-
if (uiOptions.classNames) {
|
|
1760
|
-
classNames.push(uiOptions.classNames);
|
|
1761
|
-
}
|
|
1762
|
-
const helpComponent = jsxRuntime.jsx(FieldHelpTemplate, {
|
|
1763
|
-
help: help,
|
|
1764
|
-
idSchema: idSchema,
|
|
1765
|
-
schema: schema,
|
|
1766
|
-
uiSchema: uiSchema,
|
|
1767
|
-
hasErrors: !hideError && __errors && __errors.length > 0,
|
|
1768
|
-
registry: registry
|
|
1769
|
-
});
|
|
1770
|
-
/*
|
|
1771
|
-
* AnyOf/OneOf errors handled by child schema
|
|
1772
|
-
*/
|
|
1773
|
-
const errorsComponent = hideError || schema.anyOf || schema.oneOf ? undefined : jsxRuntime.jsx(FieldErrorTemplate, {
|
|
1774
|
-
errors: __errors,
|
|
1775
|
-
errorSchema: errorSchema,
|
|
1776
|
-
idSchema: idSchema,
|
|
1777
|
-
schema: schema,
|
|
1778
|
-
uiSchema: uiSchema,
|
|
1779
|
-
registry: registry
|
|
1780
|
-
});
|
|
1781
|
-
const fieldProps = {
|
|
1782
|
-
description: jsxRuntime.jsx(DescriptionFieldTemplate, {
|
|
1783
|
-
id: utils.descriptionId(id),
|
|
1784
|
-
description: richDescription,
|
|
1785
|
-
schema: schema,
|
|
1786
|
-
uiSchema: uiSchema,
|
|
1787
|
-
registry: registry
|
|
1788
|
-
}),
|
|
1789
|
-
rawDescription: description,
|
|
1790
|
-
help: helpComponent,
|
|
1791
|
-
rawHelp: typeof help === 'string' ? help : undefined,
|
|
1792
|
-
errors: errorsComponent,
|
|
1793
|
-
rawErrors: hideError ? undefined : __errors,
|
|
1794
|
-
id,
|
|
1795
|
-
label,
|
|
1796
|
-
hidden,
|
|
1797
|
-
onChange,
|
|
1798
|
-
onKeyChange,
|
|
1799
|
-
onDropPropertyClick,
|
|
1800
|
-
required,
|
|
1801
|
-
disabled,
|
|
1802
|
-
readonly,
|
|
1803
|
-
hideError,
|
|
1804
|
-
displayLabel,
|
|
1805
|
-
classNames: classNames.join(' ').trim(),
|
|
1806
|
-
style: uiOptions.style,
|
|
1807
|
-
formContext,
|
|
1808
|
-
formData,
|
|
1809
|
-
schema,
|
|
1810
|
-
uiSchema,
|
|
1811
|
-
registry
|
|
1812
|
-
};
|
|
1813
|
-
const _AnyOfField = registry.fields.AnyOfField;
|
|
1814
|
-
const _OneOfField = registry.fields.OneOfField;
|
|
1815
|
-
const isReplacingAnyOrOneOf = (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema['ui:field']) && (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema['ui:fieldReplacesAnyOrOneOf']) === true;
|
|
1816
|
-
return jsxRuntime.jsx(FieldTemplate, {
|
|
1817
|
-
...fieldProps,
|
|
1818
|
-
children: jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
1819
|
-
children: [field, schema.anyOf && !isReplacingAnyOrOneOf && !schemaUtils.isSelect(schema) && jsxRuntime.jsx(_AnyOfField, {
|
|
1820
|
-
name: name,
|
|
1821
|
-
disabled: disabled,
|
|
1822
|
-
readonly: readonly,
|
|
1823
|
-
hideError: hideError,
|
|
1824
|
-
errorSchema: errorSchema,
|
|
1825
|
-
formData: formData,
|
|
1826
|
-
formContext: formContext,
|
|
1827
|
-
idPrefix: idPrefix,
|
|
1828
|
-
idSchema: idSchema,
|
|
1829
|
-
idSeparator: idSeparator,
|
|
1830
|
-
onBlur: props.onBlur,
|
|
1831
|
-
onChange: props.onChange,
|
|
1832
|
-
onFocus: props.onFocus,
|
|
1833
|
-
options: schema.anyOf.map(_schema => schemaUtils.retrieveSchema(isObject__default["default"](_schema) ? _schema : {}, formData)),
|
|
1834
|
-
registry: registry,
|
|
1835
|
-
schema: schema,
|
|
1836
|
-
uiSchema: uiSchema
|
|
1837
|
-
}), schema.oneOf && !isReplacingAnyOrOneOf && !schemaUtils.isSelect(schema) && jsxRuntime.jsx(_OneOfField, {
|
|
1838
|
-
name: name,
|
|
1839
|
-
disabled: disabled,
|
|
1840
|
-
readonly: readonly,
|
|
1841
|
-
hideError: hideError,
|
|
1842
|
-
errorSchema: errorSchema,
|
|
1843
|
-
formData: formData,
|
|
1844
|
-
formContext: formContext,
|
|
1845
|
-
idPrefix: idPrefix,
|
|
1846
|
-
idSchema: idSchema,
|
|
1847
|
-
idSeparator: idSeparator,
|
|
1848
|
-
onBlur: props.onBlur,
|
|
1849
|
-
onChange: props.onChange,
|
|
1850
|
-
onFocus: props.onFocus,
|
|
1851
|
-
options: schema.oneOf.map(_schema => schemaUtils.retrieveSchema(isObject__default["default"](_schema) ? _schema : {}, formData)),
|
|
1852
|
-
registry: registry,
|
|
1853
|
-
schema: schema,
|
|
1854
|
-
uiSchema: uiSchema
|
|
1855
|
-
})]
|
|
1856
|
-
})
|
|
1857
|
-
});
|
|
1858
|
-
}
|
|
1859
|
-
/** The `SchemaField` component determines whether it is necessary to rerender the component based on any props changes
|
|
1860
|
-
* and if so, calls the `SchemaFieldRender` component with the props.
|
|
1861
|
-
*/
|
|
1862
|
-
class SchemaField extends react.Component {
|
|
1863
|
-
shouldComponentUpdate(nextProps) {
|
|
1864
|
-
return !utils.deepEquals(this.props, nextProps);
|
|
1865
|
-
}
|
|
1866
|
-
render() {
|
|
1867
|
-
return jsxRuntime.jsx(SchemaFieldRender, {
|
|
1868
|
-
...this.props
|
|
1869
|
-
});
|
|
1870
|
-
}
|
|
1871
|
-
}
|
|
1872
|
-
|
|
1873
|
-
/** The `StringField` component is used to render a schema field that represents a string type
|
|
1874
|
-
*
|
|
1875
|
-
* @param props - The `FieldProps` for this template
|
|
1876
|
-
*/
|
|
1877
|
-
function StringField(props) {
|
|
1878
|
-
const {
|
|
1879
|
-
schema,
|
|
1880
|
-
name,
|
|
1881
|
-
uiSchema,
|
|
1882
|
-
idSchema,
|
|
1883
|
-
formData,
|
|
1884
|
-
required,
|
|
1885
|
-
disabled = false,
|
|
1886
|
-
readonly = false,
|
|
1887
|
-
autofocus = false,
|
|
1888
|
-
onChange,
|
|
1889
|
-
onBlur,
|
|
1890
|
-
onFocus,
|
|
1891
|
-
registry,
|
|
1892
|
-
rawErrors
|
|
1893
|
-
} = props;
|
|
1894
|
-
const {
|
|
1895
|
-
title,
|
|
1896
|
-
format
|
|
1897
|
-
} = schema;
|
|
1898
|
-
const {
|
|
1899
|
-
widgets,
|
|
1900
|
-
formContext,
|
|
1901
|
-
schemaUtils,
|
|
1902
|
-
globalUiOptions
|
|
1903
|
-
} = registry;
|
|
1904
|
-
const enumOptions = schemaUtils.isSelect(schema) ? utils.optionsList(schema) : undefined;
|
|
1905
|
-
let defaultWidget = enumOptions ? 'select' : 'text';
|
|
1906
|
-
if (format && utils.hasWidget(schema, format, widgets)) {
|
|
1907
|
-
defaultWidget = format;
|
|
1908
|
-
}
|
|
1909
|
-
const {
|
|
1910
|
-
widget = defaultWidget,
|
|
1911
|
-
placeholder = '',
|
|
1912
|
-
title: uiTitle,
|
|
1913
|
-
...options
|
|
1914
|
-
} = utils.getUiOptions(uiSchema);
|
|
1915
|
-
const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
|
|
1916
|
-
const label = uiTitle ?? title ?? name;
|
|
1917
|
-
const Widget = utils.getWidget(schema, widget, widgets);
|
|
1918
|
-
return jsxRuntime.jsx(Widget, {
|
|
1919
|
-
options: {
|
|
1920
|
-
...options,
|
|
1921
|
-
enumOptions
|
|
1922
|
-
},
|
|
1923
|
-
schema: schema,
|
|
1924
|
-
uiSchema: uiSchema,
|
|
1925
|
-
id: idSchema.$id,
|
|
1926
|
-
name: name,
|
|
1927
|
-
label: label,
|
|
1928
|
-
hideLabel: !displayLabel,
|
|
1929
|
-
value: formData,
|
|
1930
|
-
onChange: onChange,
|
|
1931
|
-
onBlur: onBlur,
|
|
1932
|
-
onFocus: onFocus,
|
|
1933
|
-
required: required,
|
|
1934
|
-
disabled: disabled,
|
|
1935
|
-
readonly: readonly,
|
|
1936
|
-
formContext: formContext,
|
|
1937
|
-
autofocus: autofocus,
|
|
1938
|
-
registry: registry,
|
|
1939
|
-
placeholder: placeholder,
|
|
1940
|
-
rawErrors: rawErrors
|
|
1941
|
-
});
|
|
1942
|
-
}
|
|
1943
|
-
|
|
1944
|
-
/** The `NullField` component is used to render a field in the schema is null. It also ensures that the `formData` is
|
|
1945
|
-
* also set to null if it has no value.
|
|
1946
|
-
*
|
|
1947
|
-
* @param props - The `FieldProps` for this template
|
|
1948
|
-
*/
|
|
1949
|
-
function NullField(props) {
|
|
1950
|
-
const {
|
|
1951
|
-
formData,
|
|
1952
|
-
onChange
|
|
1953
|
-
} = props;
|
|
1954
|
-
react.useEffect(() => {
|
|
1955
|
-
if (formData === undefined) {
|
|
1956
|
-
onChange(null);
|
|
1957
|
-
}
|
|
1958
|
-
}, [formData, onChange]);
|
|
1959
|
-
return null;
|
|
1960
|
-
}
|
|
1961
|
-
|
|
1962
|
-
function fields() {
|
|
1963
|
-
return {
|
|
1964
|
-
AnyOfField: AnyOfField,
|
|
1965
|
-
ArrayField: ArrayField,
|
|
1966
|
-
// ArrayField falls back to SchemaField if ArraySchemaField is not defined, which it isn't by default
|
|
1967
|
-
BooleanField,
|
|
1968
|
-
NumberField,
|
|
1969
|
-
ObjectField,
|
|
1970
|
-
OneOfField: AnyOfField,
|
|
1971
|
-
SchemaField,
|
|
1972
|
-
StringField,
|
|
1973
|
-
NullField
|
|
1974
|
-
};
|
|
1975
|
-
}
|
|
1976
|
-
|
|
1977
|
-
/** The `ArrayFieldDescriptionTemplate` component renders a `DescriptionFieldTemplate` with an `id` derived from
|
|
1978
|
-
* the `idSchema`.
|
|
1979
|
-
*
|
|
1980
|
-
* @param props - The `ArrayFieldDescriptionProps` for the component
|
|
1981
|
-
*/
|
|
1982
|
-
function ArrayFieldDescriptionTemplate(props) {
|
|
1983
|
-
const {
|
|
1984
|
-
idSchema,
|
|
1985
|
-
description,
|
|
1986
|
-
registry,
|
|
1987
|
-
schema,
|
|
1988
|
-
uiSchema
|
|
1989
|
-
} = props;
|
|
1990
|
-
const options = utils.getUiOptions(uiSchema, registry.globalUiOptions);
|
|
1991
|
-
const {
|
|
1992
|
-
label: displayLabel = true
|
|
1993
|
-
} = options;
|
|
1994
|
-
if (!description || !displayLabel) {
|
|
1995
|
-
return null;
|
|
1996
|
-
}
|
|
1997
|
-
const DescriptionFieldTemplate = utils.getTemplate('DescriptionFieldTemplate', registry, options);
|
|
1998
|
-
return jsxRuntime.jsx(DescriptionFieldTemplate, {
|
|
1999
|
-
id: utils.descriptionId(idSchema),
|
|
2000
|
-
description: description,
|
|
2001
|
-
schema: schema,
|
|
2002
|
-
uiSchema: uiSchema,
|
|
2003
|
-
registry: registry
|
|
2004
|
-
});
|
|
2005
|
-
}
|
|
2006
|
-
|
|
2007
|
-
/** The `ArrayFieldItemTemplate` component is the template used to render an items of an array.
|
|
2008
|
-
*
|
|
2009
|
-
* @param props - The `ArrayFieldTemplateItemType` props for the component
|
|
2010
|
-
*/
|
|
2011
|
-
function ArrayFieldItemTemplate(props) {
|
|
2012
|
-
const {
|
|
2013
|
-
children,
|
|
2014
|
-
className,
|
|
2015
|
-
disabled,
|
|
2016
|
-
hasToolbar,
|
|
2017
|
-
hasMoveDown,
|
|
2018
|
-
hasMoveUp,
|
|
2019
|
-
hasRemove,
|
|
2020
|
-
hasCopy,
|
|
2021
|
-
index,
|
|
2022
|
-
onCopyIndexClick,
|
|
2023
|
-
onDropIndexClick,
|
|
2024
|
-
onReorderClick,
|
|
2025
|
-
readonly,
|
|
2026
|
-
registry,
|
|
2027
|
-
uiSchema
|
|
2028
|
-
} = props;
|
|
2029
|
-
const {
|
|
2030
|
-
CopyButton,
|
|
2031
|
-
MoveDownButton,
|
|
2032
|
-
MoveUpButton,
|
|
2033
|
-
RemoveButton
|
|
2034
|
-
} = registry.templates.ButtonTemplates;
|
|
2035
|
-
const btnStyle = {
|
|
2036
|
-
flex: 1,
|
|
2037
|
-
paddingLeft: 6,
|
|
2038
|
-
paddingRight: 6,
|
|
2039
|
-
fontWeight: 'bold'
|
|
2040
|
-
};
|
|
2041
|
-
return jsxRuntime.jsxs("div", {
|
|
2042
|
-
className: className,
|
|
2043
|
-
children: [jsxRuntime.jsx("div", {
|
|
2044
|
-
className: hasToolbar ? 'col-xs-9' : 'col-xs-12',
|
|
2045
|
-
children: children
|
|
2046
|
-
}), hasToolbar && jsxRuntime.jsx("div", {
|
|
2047
|
-
className: 'col-xs-3 array-item-toolbox',
|
|
2048
|
-
children: jsxRuntime.jsxs("div", {
|
|
2049
|
-
className: 'btn-group',
|
|
2050
|
-
style: {
|
|
2051
|
-
display: 'flex',
|
|
2052
|
-
justifyContent: 'space-around'
|
|
2053
|
-
},
|
|
2054
|
-
children: [(hasMoveUp || hasMoveDown) && jsxRuntime.jsx(MoveUpButton, {
|
|
2055
|
-
style: btnStyle,
|
|
2056
|
-
disabled: disabled || readonly || !hasMoveUp,
|
|
2057
|
-
onClick: onReorderClick(index, index - 1),
|
|
2058
|
-
uiSchema: uiSchema,
|
|
2059
|
-
registry: registry
|
|
2060
|
-
}), (hasMoveUp || hasMoveDown) && jsxRuntime.jsx(MoveDownButton, {
|
|
2061
|
-
style: btnStyle,
|
|
2062
|
-
disabled: disabled || readonly || !hasMoveDown,
|
|
2063
|
-
onClick: onReorderClick(index, index + 1),
|
|
2064
|
-
uiSchema: uiSchema,
|
|
2065
|
-
registry: registry
|
|
2066
|
-
}), hasCopy && jsxRuntime.jsx(CopyButton, {
|
|
2067
|
-
style: btnStyle,
|
|
2068
|
-
disabled: disabled || readonly,
|
|
2069
|
-
onClick: onCopyIndexClick(index),
|
|
2070
|
-
uiSchema: uiSchema,
|
|
2071
|
-
registry: registry
|
|
2072
|
-
}), hasRemove && jsxRuntime.jsx(RemoveButton, {
|
|
2073
|
-
style: btnStyle,
|
|
2074
|
-
disabled: disabled || readonly,
|
|
2075
|
-
onClick: onDropIndexClick(index),
|
|
2076
|
-
uiSchema: uiSchema,
|
|
2077
|
-
registry: registry
|
|
2078
|
-
})]
|
|
2079
|
-
})
|
|
2080
|
-
})]
|
|
2081
|
-
});
|
|
2082
|
-
}
|
|
2083
|
-
|
|
2084
|
-
/** The `ArrayFieldTemplate` component is the template used to render all items in an array.
|
|
2085
|
-
*
|
|
2086
|
-
* @param props - The `ArrayFieldTemplateItemType` props for the component
|
|
2087
|
-
*/
|
|
2088
|
-
function ArrayFieldTemplate(props) {
|
|
2089
|
-
const {
|
|
2090
|
-
canAdd,
|
|
2091
|
-
className,
|
|
2092
|
-
disabled,
|
|
2093
|
-
idSchema,
|
|
2094
|
-
uiSchema,
|
|
2095
|
-
items,
|
|
2096
|
-
onAddClick,
|
|
2097
|
-
readonly,
|
|
2098
|
-
registry,
|
|
2099
|
-
required,
|
|
2100
|
-
schema,
|
|
2101
|
-
title
|
|
2102
|
-
} = props;
|
|
2103
|
-
const uiOptions = utils.getUiOptions(uiSchema);
|
|
2104
|
-
const ArrayFieldDescriptionTemplate = utils.getTemplate('ArrayFieldDescriptionTemplate', registry, uiOptions);
|
|
2105
|
-
const ArrayFieldItemTemplate = utils.getTemplate('ArrayFieldItemTemplate', registry, uiOptions);
|
|
2106
|
-
const ArrayFieldTitleTemplate = utils.getTemplate('ArrayFieldTitleTemplate', registry, uiOptions);
|
|
2107
|
-
// Button templates are not overridden in the uiSchema
|
|
2108
|
-
const {
|
|
2109
|
-
ButtonTemplates: {
|
|
2110
|
-
AddButton
|
|
2111
|
-
}
|
|
2112
|
-
} = registry.templates;
|
|
2113
|
-
return jsxRuntime.jsxs("fieldset", {
|
|
2114
|
-
className: className,
|
|
2115
|
-
id: idSchema.$id,
|
|
2116
|
-
children: [jsxRuntime.jsx(ArrayFieldTitleTemplate, {
|
|
2117
|
-
idSchema: idSchema,
|
|
2118
|
-
title: uiOptions.title || title,
|
|
2119
|
-
required: required,
|
|
2120
|
-
schema: schema,
|
|
2121
|
-
uiSchema: uiSchema,
|
|
2122
|
-
registry: registry
|
|
2123
|
-
}), jsxRuntime.jsx(ArrayFieldDescriptionTemplate, {
|
|
2124
|
-
idSchema: idSchema,
|
|
2125
|
-
description: uiOptions.description || schema.description,
|
|
2126
|
-
schema: schema,
|
|
2127
|
-
uiSchema: uiSchema,
|
|
2128
|
-
registry: registry
|
|
2129
|
-
}), jsxRuntime.jsx("div", {
|
|
2130
|
-
className: 'row array-item-list',
|
|
2131
|
-
children: items && items.map(({
|
|
2132
|
-
key,
|
|
2133
|
-
...itemProps
|
|
2134
|
-
}) => jsxRuntime.jsx(ArrayFieldItemTemplate, {
|
|
2135
|
-
...itemProps
|
|
2136
|
-
}, key))
|
|
2137
|
-
}), canAdd && jsxRuntime.jsx(AddButton, {
|
|
2138
|
-
className: 'array-item-add',
|
|
2139
|
-
onClick: onAddClick,
|
|
2140
|
-
disabled: disabled || readonly,
|
|
2141
|
-
uiSchema: uiSchema,
|
|
2142
|
-
registry: registry
|
|
2143
|
-
})]
|
|
2144
|
-
});
|
|
2145
|
-
}
|
|
2146
|
-
|
|
2147
|
-
/** The `ArrayFieldTitleTemplate` component renders a `TitleFieldTemplate` with an `id` derived from
|
|
2148
|
-
* the `idSchema`.
|
|
2149
|
-
*
|
|
2150
|
-
* @param props - The `ArrayFieldTitleProps` for the component
|
|
2151
|
-
*/
|
|
2152
|
-
function ArrayFieldTitleTemplate(props) {
|
|
2153
|
-
const {
|
|
2154
|
-
idSchema,
|
|
2155
|
-
title,
|
|
2156
|
-
schema,
|
|
2157
|
-
uiSchema,
|
|
2158
|
-
required,
|
|
2159
|
-
registry
|
|
2160
|
-
} = props;
|
|
2161
|
-
const options = utils.getUiOptions(uiSchema, registry.globalUiOptions);
|
|
2162
|
-
const {
|
|
2163
|
-
label: displayLabel = true
|
|
2164
|
-
} = options;
|
|
2165
|
-
if (!title || !displayLabel) {
|
|
2166
|
-
return null;
|
|
2167
|
-
}
|
|
2168
|
-
const TitleFieldTemplate = utils.getTemplate('TitleFieldTemplate', registry, options);
|
|
2169
|
-
return jsxRuntime.jsx(TitleFieldTemplate, {
|
|
2170
|
-
id: utils.titleId(idSchema),
|
|
2171
|
-
title: title,
|
|
2172
|
-
required: required,
|
|
2173
|
-
schema: schema,
|
|
2174
|
-
uiSchema: uiSchema,
|
|
2175
|
-
registry: registry
|
|
2176
|
-
});
|
|
2177
|
-
}
|
|
2178
|
-
|
|
2179
|
-
/** The `BaseInputTemplate` is the template to use to render the basic `<input>` component for the `core` theme.
|
|
2180
|
-
* It is used as the template for rendering many of the <input> based widgets that differ by `type` and callbacks only.
|
|
2181
|
-
* It can be customized/overridden for other themes or individual implementations as needed.
|
|
2182
|
-
*
|
|
2183
|
-
* @param props - The `WidgetProps` for this template
|
|
2184
|
-
*/
|
|
2185
|
-
function BaseInputTemplate(props) {
|
|
2186
|
-
const {
|
|
2187
|
-
id,
|
|
2188
|
-
name,
|
|
2189
|
-
// remove this from ...rest
|
|
2190
|
-
value,
|
|
2191
|
-
readonly,
|
|
2192
|
-
disabled,
|
|
2193
|
-
autofocus,
|
|
2194
|
-
onBlur,
|
|
2195
|
-
onFocus,
|
|
2196
|
-
onChange,
|
|
2197
|
-
onChangeOverride,
|
|
2198
|
-
options,
|
|
2199
|
-
schema,
|
|
2200
|
-
uiSchema,
|
|
2201
|
-
formContext,
|
|
2202
|
-
registry,
|
|
2203
|
-
rawErrors,
|
|
2204
|
-
type,
|
|
2205
|
-
hideLabel,
|
|
2206
|
-
// remove this from ...rest
|
|
2207
|
-
hideError,
|
|
2208
|
-
// remove this from ...rest
|
|
2209
|
-
...rest
|
|
2210
|
-
} = props;
|
|
2211
|
-
// Note: since React 15.2.0 we can't forward unknown element attributes, so we
|
|
2212
|
-
// exclude the "options" and "schema" ones here.
|
|
2213
|
-
if (!id) {
|
|
2214
|
-
console.log('No id for', props);
|
|
2215
|
-
throw new Error(`no id for props ${JSON.stringify(props)}`);
|
|
2216
|
-
}
|
|
2217
|
-
const inputProps = {
|
|
2218
|
-
...rest,
|
|
2219
|
-
...utils.getInputProps(schema, type, options)
|
|
2220
|
-
};
|
|
2221
|
-
let inputValue;
|
|
2222
|
-
if (inputProps.type === 'number' || inputProps.type === 'integer') {
|
|
2223
|
-
inputValue = value || value === 0 ? value : '';
|
|
2224
|
-
} else {
|
|
2225
|
-
inputValue = value == null ? '' : value;
|
|
2226
|
-
}
|
|
2227
|
-
const _onChange = react.useCallback(({
|
|
2228
|
-
target: {
|
|
2229
|
-
value
|
|
2230
|
-
}
|
|
2231
|
-
}) => onChange(value === '' ? options.emptyValue : value), [onChange, options]);
|
|
2232
|
-
const _onBlur = react.useCallback(({
|
|
2233
|
-
target: {
|
|
2234
|
-
value
|
|
2235
|
-
}
|
|
2236
|
-
}) => onBlur(id, value), [onBlur, id]);
|
|
2237
|
-
const _onFocus = react.useCallback(({
|
|
2238
|
-
target: {
|
|
2239
|
-
value
|
|
2240
|
-
}
|
|
2241
|
-
}) => onFocus(id, value), [onFocus, id]);
|
|
2242
|
-
return jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
2243
|
-
children: [jsxRuntime.jsx("input", {
|
|
2244
|
-
id: id,
|
|
2245
|
-
name: id,
|
|
2246
|
-
className: 'form-control',
|
|
2247
|
-
readOnly: readonly,
|
|
2248
|
-
disabled: disabled,
|
|
2249
|
-
autoFocus: autofocus,
|
|
2250
|
-
value: inputValue,
|
|
2251
|
-
...inputProps,
|
|
2252
|
-
list: schema.examples ? utils.examplesId(id) : undefined,
|
|
2253
|
-
onChange: onChangeOverride || _onChange,
|
|
2254
|
-
onBlur: _onBlur,
|
|
2255
|
-
onFocus: _onFocus,
|
|
2256
|
-
"aria-describedby": utils.ariaDescribedByIds(id, !!schema.examples)
|
|
2257
|
-
}), Array.isArray(schema.examples) && jsxRuntime.jsx("datalist", {
|
|
2258
|
-
id: utils.examplesId(id),
|
|
2259
|
-
children: schema.examples.concat(schema.default && !schema.examples.includes(schema.default) ? [schema.default] : []).map(example => {
|
|
2260
|
-
return jsxRuntime.jsx("option", {
|
|
2261
|
-
value: example
|
|
2262
|
-
}, example);
|
|
2263
|
-
})
|
|
2264
|
-
}, `datalist_${id}`)]
|
|
2265
|
-
});
|
|
2266
|
-
}
|
|
2267
|
-
|
|
2268
|
-
/** The `SubmitButton` renders a button that represent the `Submit` action on a form
|
|
2269
|
-
*/
|
|
2270
|
-
function SubmitButton({
|
|
2271
|
-
uiSchema
|
|
2272
|
-
}) {
|
|
2273
|
-
const {
|
|
2274
|
-
submitText,
|
|
2275
|
-
norender,
|
|
2276
|
-
props: submitButtonProps = {}
|
|
2277
|
-
} = utils.getSubmitButtonOptions(uiSchema);
|
|
2278
|
-
if (norender) {
|
|
2279
|
-
return null;
|
|
2280
|
-
}
|
|
2281
|
-
return jsxRuntime.jsx("div", {
|
|
2282
|
-
children: jsxRuntime.jsx("button", {
|
|
2283
|
-
type: 'submit',
|
|
2284
|
-
...submitButtonProps,
|
|
2285
|
-
className: `btn btn-info ${submitButtonProps.className || ''}`,
|
|
2286
|
-
children: submitText
|
|
2287
|
-
})
|
|
2288
|
-
});
|
|
2289
|
-
}
|
|
2290
|
-
|
|
2291
|
-
function IconButton(props) {
|
|
2292
|
-
const {
|
|
2293
|
-
iconType = 'default',
|
|
2294
|
-
icon,
|
|
2295
|
-
className,
|
|
2296
|
-
uiSchema,
|
|
2297
|
-
registry,
|
|
2298
|
-
...otherProps
|
|
2299
|
-
} = props;
|
|
2300
|
-
return jsxRuntime.jsx("button", {
|
|
2301
|
-
type: 'button',
|
|
2302
|
-
className: `btn btn-${iconType} ${className}`,
|
|
2303
|
-
...otherProps,
|
|
2304
|
-
children: jsxRuntime.jsx("i", {
|
|
2305
|
-
className: `glyphicon glyphicon-${icon}`
|
|
2306
|
-
})
|
|
2307
|
-
});
|
|
2308
|
-
}
|
|
2309
|
-
function CopyButton(props) {
|
|
2310
|
-
const {
|
|
2311
|
-
registry: {
|
|
2312
|
-
translateString
|
|
2313
|
-
}
|
|
2314
|
-
} = props;
|
|
2315
|
-
return jsxRuntime.jsx(IconButton, {
|
|
2316
|
-
title: translateString(utils.TranslatableString.CopyButton),
|
|
2317
|
-
className: 'array-item-copy',
|
|
2318
|
-
...props,
|
|
2319
|
-
icon: 'copy'
|
|
2320
|
-
});
|
|
2321
|
-
}
|
|
2322
|
-
function MoveDownButton(props) {
|
|
2323
|
-
const {
|
|
2324
|
-
registry: {
|
|
2325
|
-
translateString
|
|
2326
|
-
}
|
|
2327
|
-
} = props;
|
|
2328
|
-
return jsxRuntime.jsx(IconButton, {
|
|
2329
|
-
title: translateString(utils.TranslatableString.MoveDownButton),
|
|
2330
|
-
className: 'array-item-move-down',
|
|
2331
|
-
...props,
|
|
2332
|
-
icon: 'arrow-down'
|
|
2333
|
-
});
|
|
2334
|
-
}
|
|
2335
|
-
function MoveUpButton(props) {
|
|
2336
|
-
const {
|
|
2337
|
-
registry: {
|
|
2338
|
-
translateString
|
|
2339
|
-
}
|
|
2340
|
-
} = props;
|
|
2341
|
-
return jsxRuntime.jsx(IconButton, {
|
|
2342
|
-
title: translateString(utils.TranslatableString.MoveUpButton),
|
|
2343
|
-
className: 'array-item-move-up',
|
|
2344
|
-
...props,
|
|
2345
|
-
icon: 'arrow-up'
|
|
2346
|
-
});
|
|
2347
|
-
}
|
|
2348
|
-
function RemoveButton(props) {
|
|
2349
|
-
const {
|
|
2350
|
-
registry: {
|
|
2351
|
-
translateString
|
|
2352
|
-
}
|
|
2353
|
-
} = props;
|
|
2354
|
-
return jsxRuntime.jsx(IconButton, {
|
|
2355
|
-
title: translateString(utils.TranslatableString.RemoveButton),
|
|
2356
|
-
className: 'array-item-remove',
|
|
2357
|
-
...props,
|
|
2358
|
-
iconType: 'danger',
|
|
2359
|
-
icon: 'remove'
|
|
2360
|
-
});
|
|
2361
|
-
}
|
|
2362
|
-
|
|
2363
|
-
/** The `AddButton` renders a button that represent the `Add` action on a form
|
|
2364
|
-
*/
|
|
2365
|
-
function AddButton({
|
|
2366
|
-
className,
|
|
2367
|
-
onClick,
|
|
2368
|
-
disabled,
|
|
2369
|
-
registry
|
|
2370
|
-
}) {
|
|
2371
|
-
const {
|
|
2372
|
-
translateString
|
|
2373
|
-
} = registry;
|
|
2374
|
-
return jsxRuntime.jsx("div", {
|
|
2375
|
-
className: 'row',
|
|
2376
|
-
children: jsxRuntime.jsx("p", {
|
|
2377
|
-
className: `col-xs-3 col-xs-offset-9 text-right ${className}`,
|
|
2378
|
-
children: jsxRuntime.jsx(IconButton, {
|
|
2379
|
-
iconType: 'info',
|
|
2380
|
-
icon: 'plus',
|
|
2381
|
-
className: 'btn-add col-xs-12',
|
|
2382
|
-
title: translateString(utils.TranslatableString.AddButton),
|
|
2383
|
-
onClick: onClick,
|
|
2384
|
-
disabled: disabled,
|
|
2385
|
-
registry: registry
|
|
2386
|
-
})
|
|
2387
|
-
})
|
|
2388
|
-
});
|
|
2389
|
-
}
|
|
2390
|
-
|
|
2391
|
-
function buttonTemplates() {
|
|
2392
|
-
return {
|
|
2393
|
-
SubmitButton,
|
|
2394
|
-
AddButton,
|
|
2395
|
-
CopyButton,
|
|
2396
|
-
MoveDownButton,
|
|
2397
|
-
MoveUpButton,
|
|
2398
|
-
RemoveButton
|
|
2399
|
-
};
|
|
2400
|
-
}
|
|
2401
|
-
|
|
2402
|
-
/** The `DescriptionField` is the template to use to render the description of a field
|
|
2403
|
-
*
|
|
2404
|
-
* @param props - The `DescriptionFieldProps` for this component
|
|
2405
|
-
*/
|
|
2406
|
-
function DescriptionField(props) {
|
|
2407
|
-
const {
|
|
2408
|
-
id,
|
|
2409
|
-
description
|
|
2410
|
-
} = props;
|
|
2411
|
-
if (!description) {
|
|
2412
|
-
return null;
|
|
2413
|
-
}
|
|
2414
|
-
if (typeof description === 'string') {
|
|
2415
|
-
return jsxRuntime.jsx("p", {
|
|
2416
|
-
id: id,
|
|
2417
|
-
className: 'field-description',
|
|
2418
|
-
children: description
|
|
2419
|
-
});
|
|
2420
|
-
} else {
|
|
2421
|
-
return jsxRuntime.jsx("div", {
|
|
2422
|
-
id: id,
|
|
2423
|
-
className: 'field-description',
|
|
2424
|
-
children: description
|
|
2425
|
-
});
|
|
2426
|
-
}
|
|
2427
|
-
}
|
|
2428
|
-
|
|
2429
|
-
/** The `ErrorList` component is the template that renders the all the errors associated with the fields in the `Form`
|
|
2430
|
-
*
|
|
2431
|
-
* @param props - The `ErrorListProps` for this component
|
|
2432
|
-
*/
|
|
2433
|
-
function ErrorList({
|
|
2434
|
-
errors,
|
|
2435
|
-
registry
|
|
2436
|
-
}) {
|
|
2437
|
-
const {
|
|
2438
|
-
translateString
|
|
2439
|
-
} = registry;
|
|
2440
|
-
return jsxRuntime.jsxs("div", {
|
|
2441
|
-
className: 'panel panel-danger errors',
|
|
2442
|
-
children: [jsxRuntime.jsx("div", {
|
|
2443
|
-
className: 'panel-heading',
|
|
2444
|
-
children: jsxRuntime.jsx("h3", {
|
|
2445
|
-
className: 'panel-title',
|
|
2446
|
-
children: translateString(utils.TranslatableString.ErrorsLabel)
|
|
2447
|
-
})
|
|
2448
|
-
}), jsxRuntime.jsx("ul", {
|
|
2449
|
-
className: 'list-group',
|
|
2450
|
-
children: errors.map((error, i) => {
|
|
2451
|
-
return jsxRuntime.jsx("li", {
|
|
2452
|
-
className: 'list-group-item text-danger',
|
|
2453
|
-
children: error.stack
|
|
2454
|
-
}, i);
|
|
2455
|
-
})
|
|
2456
|
-
})]
|
|
2457
|
-
});
|
|
2458
|
-
}
|
|
2459
|
-
|
|
2460
|
-
const REQUIRED_FIELD_SYMBOL$1 = '*';
|
|
2461
|
-
/** Renders a label for a field
|
|
2462
|
-
*
|
|
2463
|
-
* @param props - The `LabelProps` for this component
|
|
2464
|
-
*/
|
|
2465
|
-
function Label(props) {
|
|
2466
|
-
const {
|
|
2467
|
-
label,
|
|
2468
|
-
required,
|
|
2469
|
-
id
|
|
2470
|
-
} = props;
|
|
2471
|
-
if (!label) {
|
|
2472
|
-
return null;
|
|
2473
|
-
}
|
|
2474
|
-
return jsxRuntime.jsxs("label", {
|
|
2475
|
-
className: 'control-label',
|
|
2476
|
-
htmlFor: id,
|
|
2477
|
-
children: [label, required && jsxRuntime.jsx("span", {
|
|
2478
|
-
className: 'required',
|
|
2479
|
-
children: REQUIRED_FIELD_SYMBOL$1
|
|
2480
|
-
})]
|
|
2481
|
-
});
|
|
2482
|
-
}
|
|
2483
|
-
|
|
2484
|
-
/** The `FieldTemplate` component is the template used by `SchemaField` to render any field. It renders the field
|
|
2485
|
-
* content, (label, description, children, errors and help) inside of a `WrapIfAdditional` component.
|
|
2486
|
-
*
|
|
2487
|
-
* @param props - The `FieldTemplateProps` for this component
|
|
2488
|
-
*/
|
|
2489
|
-
function FieldTemplate(props) {
|
|
2490
|
-
const {
|
|
2491
|
-
id,
|
|
2492
|
-
label,
|
|
2493
|
-
children,
|
|
2494
|
-
errors,
|
|
2495
|
-
help,
|
|
2496
|
-
description,
|
|
2497
|
-
hidden,
|
|
2498
|
-
required,
|
|
2499
|
-
displayLabel,
|
|
2500
|
-
registry,
|
|
2501
|
-
uiSchema
|
|
2502
|
-
} = props;
|
|
2503
|
-
const uiOptions = utils.getUiOptions(uiSchema);
|
|
2504
|
-
const WrapIfAdditionalTemplate = utils.getTemplate('WrapIfAdditionalTemplate', registry, uiOptions);
|
|
2505
|
-
if (hidden) {
|
|
2506
|
-
return jsxRuntime.jsx("div", {
|
|
2507
|
-
className: 'hidden',
|
|
2508
|
-
children: children
|
|
2509
|
-
});
|
|
2510
|
-
}
|
|
2511
|
-
return jsxRuntime.jsxs(WrapIfAdditionalTemplate, {
|
|
2512
|
-
...props,
|
|
2513
|
-
children: [displayLabel && jsxRuntime.jsx(Label, {
|
|
2514
|
-
label: label,
|
|
2515
|
-
required: required,
|
|
2516
|
-
id: id
|
|
2517
|
-
}), displayLabel && description ? description : null, children, errors, help]
|
|
2518
|
-
});
|
|
2519
|
-
}
|
|
2520
|
-
|
|
2521
|
-
/** The `FieldErrorTemplate` component renders the errors local to the particular field
|
|
2522
|
-
*
|
|
2523
|
-
* @param props - The `FieldErrorProps` for the errors being rendered
|
|
2524
|
-
*/
|
|
2525
|
-
function FieldErrorTemplate(props) {
|
|
2526
|
-
const {
|
|
2527
|
-
errors = [],
|
|
2528
|
-
idSchema
|
|
2529
|
-
} = props;
|
|
2530
|
-
if (errors.length === 0) {
|
|
2531
|
-
return null;
|
|
2532
|
-
}
|
|
2533
|
-
const id = utils.errorId(idSchema);
|
|
2534
|
-
return jsxRuntime.jsx("div", {
|
|
2535
|
-
children: jsxRuntime.jsx("ul", {
|
|
2536
|
-
id: id,
|
|
2537
|
-
className: 'error-detail bs-callout bs-callout-info',
|
|
2538
|
-
children: errors.filter(elem => !!elem).map((error, index) => {
|
|
2539
|
-
return jsxRuntime.jsx("li", {
|
|
2540
|
-
className: 'text-danger',
|
|
2541
|
-
children: error
|
|
2542
|
-
}, index);
|
|
2543
|
-
})
|
|
2544
|
-
})
|
|
2545
|
-
});
|
|
2546
|
-
}
|
|
2547
|
-
|
|
2548
|
-
/** The `FieldHelpTemplate` component renders any help desired for a field
|
|
2549
|
-
*
|
|
2550
|
-
* @param props - The `FieldHelpProps` to be rendered
|
|
2551
|
-
*/
|
|
2552
|
-
function FieldHelpTemplate(props) {
|
|
2553
|
-
const {
|
|
2554
|
-
idSchema,
|
|
2555
|
-
help
|
|
2556
|
-
} = props;
|
|
2557
|
-
if (!help) {
|
|
2558
|
-
return null;
|
|
2559
|
-
}
|
|
2560
|
-
const id = utils.helpId(idSchema);
|
|
2561
|
-
if (typeof help === 'string') {
|
|
2562
|
-
return jsxRuntime.jsx("p", {
|
|
2563
|
-
id: id,
|
|
2564
|
-
className: 'help-block',
|
|
2565
|
-
children: help
|
|
2566
|
-
});
|
|
2567
|
-
}
|
|
2568
|
-
return jsxRuntime.jsx("div", {
|
|
2569
|
-
id: id,
|
|
2570
|
-
className: 'help-block',
|
|
2571
|
-
children: help
|
|
2572
|
-
});
|
|
2573
|
-
}
|
|
2574
|
-
|
|
2575
|
-
/** The `ObjectFieldTemplate` is the template to use to render all the inner properties of an object along with the
|
|
2576
|
-
* title and description if available. If the object is expandable, then an `AddButton` is also rendered after all
|
|
2577
|
-
* the properties.
|
|
2578
|
-
*
|
|
2579
|
-
* @param props - The `ObjectFieldTemplateProps` for this component
|
|
2580
|
-
*/
|
|
2581
|
-
function ObjectFieldTemplate(props) {
|
|
2582
|
-
const {
|
|
2583
|
-
description,
|
|
2584
|
-
disabled,
|
|
2585
|
-
formData,
|
|
2586
|
-
idSchema,
|
|
2587
|
-
onAddClick,
|
|
2588
|
-
properties,
|
|
2589
|
-
readonly,
|
|
2590
|
-
registry,
|
|
2591
|
-
required,
|
|
2592
|
-
schema,
|
|
2593
|
-
title,
|
|
2594
|
-
uiSchema
|
|
2595
|
-
} = props;
|
|
2596
|
-
const options = utils.getUiOptions(uiSchema);
|
|
2597
|
-
const TitleFieldTemplate = utils.getTemplate('TitleFieldTemplate', registry, options);
|
|
2598
|
-
const DescriptionFieldTemplate = utils.getTemplate('DescriptionFieldTemplate', registry, options);
|
|
2599
|
-
// Button templates are not overridden in the uiSchema
|
|
2600
|
-
const {
|
|
2601
|
-
ButtonTemplates: {
|
|
2602
|
-
AddButton
|
|
2603
|
-
}
|
|
2604
|
-
} = registry.templates;
|
|
2605
|
-
return jsxRuntime.jsxs("fieldset", {
|
|
2606
|
-
id: idSchema.$id,
|
|
2607
|
-
children: [title && jsxRuntime.jsx(TitleFieldTemplate, {
|
|
2608
|
-
id: utils.titleId(idSchema),
|
|
2609
|
-
title: title,
|
|
2610
|
-
required: required,
|
|
2611
|
-
schema: schema,
|
|
2612
|
-
uiSchema: uiSchema,
|
|
2613
|
-
registry: registry
|
|
2614
|
-
}), description && jsxRuntime.jsx(DescriptionFieldTemplate, {
|
|
2615
|
-
id: utils.descriptionId(idSchema),
|
|
2616
|
-
description: description,
|
|
2617
|
-
schema: schema,
|
|
2618
|
-
uiSchema: uiSchema,
|
|
2619
|
-
registry: registry
|
|
2620
|
-
}), properties.map(prop => prop.content), utils.canExpand(schema, uiSchema, formData) && jsxRuntime.jsx(AddButton, {
|
|
2621
|
-
className: 'object-property-expand',
|
|
2622
|
-
onClick: onAddClick(schema),
|
|
2623
|
-
disabled: disabled || readonly,
|
|
2624
|
-
uiSchema: uiSchema,
|
|
2625
|
-
registry: registry
|
|
2626
|
-
})]
|
|
2627
|
-
});
|
|
2628
|
-
}
|
|
2629
|
-
|
|
2630
|
-
const REQUIRED_FIELD_SYMBOL = '*';
|
|
2631
|
-
/** The `TitleField` is the template to use to render the title of a field
|
|
2632
|
-
*
|
|
2633
|
-
* @param props - The `TitleFieldProps` for this component
|
|
2634
|
-
*/
|
|
2635
|
-
function TitleField(props) {
|
|
2636
|
-
const {
|
|
2637
|
-
id,
|
|
2638
|
-
title,
|
|
2639
|
-
required
|
|
2640
|
-
} = props;
|
|
2641
|
-
return jsxRuntime.jsxs("legend", {
|
|
2642
|
-
id: id,
|
|
2643
|
-
children: [title, required && jsxRuntime.jsx("span", {
|
|
2644
|
-
className: 'required',
|
|
2645
|
-
children: REQUIRED_FIELD_SYMBOL
|
|
2646
|
-
})]
|
|
2647
|
-
});
|
|
2648
|
-
}
|
|
2649
|
-
|
|
2650
|
-
/** The `UnsupportedField` component is used to render a field in the schema is one that is not supported by
|
|
2651
|
-
* react-jsonschema-form.
|
|
2652
|
-
*
|
|
2653
|
-
* @param props - The `FieldProps` for this template
|
|
2654
|
-
*/
|
|
2655
|
-
function UnsupportedField(props) {
|
|
2656
|
-
const {
|
|
2657
|
-
schema,
|
|
2658
|
-
idSchema,
|
|
2659
|
-
reason,
|
|
2660
|
-
registry
|
|
2661
|
-
} = props;
|
|
2662
|
-
const {
|
|
2663
|
-
translateString
|
|
2664
|
-
} = registry;
|
|
2665
|
-
let translateEnum = utils.TranslatableString.UnsupportedField;
|
|
2666
|
-
const translateParams = [];
|
|
2667
|
-
if (idSchema && idSchema.$id) {
|
|
2668
|
-
translateEnum = utils.TranslatableString.UnsupportedFieldWithId;
|
|
2669
|
-
translateParams.push(idSchema.$id);
|
|
2670
|
-
}
|
|
2671
|
-
if (reason) {
|
|
2672
|
-
translateEnum = translateEnum === utils.TranslatableString.UnsupportedField ? utils.TranslatableString.UnsupportedFieldWithReason : utils.TranslatableString.UnsupportedFieldWithIdAndReason;
|
|
2673
|
-
translateParams.push(reason);
|
|
2674
|
-
}
|
|
2675
|
-
return jsxRuntime.jsxs("div", {
|
|
2676
|
-
className: 'unsupported-field',
|
|
2677
|
-
children: [jsxRuntime.jsx("p", {
|
|
2678
|
-
children: jsxRuntime.jsx(Markdown__default["default"], {
|
|
2679
|
-
children: translateString(translateEnum, translateParams)
|
|
2680
|
-
})
|
|
2681
|
-
}), schema && jsxRuntime.jsx("pre", {
|
|
2682
|
-
children: JSON.stringify(schema, null, 2)
|
|
2683
|
-
})]
|
|
2684
|
-
});
|
|
2685
|
-
}
|
|
2686
|
-
|
|
2687
|
-
/** The `WrapIfAdditional` component is used by the `FieldTemplate` to rename, or remove properties that are
|
|
2688
|
-
* part of an `additionalProperties` part of a schema.
|
|
2689
|
-
*
|
|
2690
|
-
* @param props - The `WrapIfAdditionalProps` for this component
|
|
2691
|
-
*/
|
|
2692
|
-
function WrapIfAdditionalTemplate(props) {
|
|
2693
|
-
const {
|
|
2694
|
-
id,
|
|
2695
|
-
classNames,
|
|
2696
|
-
style,
|
|
2697
|
-
disabled,
|
|
2698
|
-
label,
|
|
2699
|
-
onKeyChange,
|
|
2700
|
-
onDropPropertyClick,
|
|
2701
|
-
readonly,
|
|
2702
|
-
required,
|
|
2703
|
-
schema,
|
|
2704
|
-
children,
|
|
2705
|
-
uiSchema,
|
|
2706
|
-
registry
|
|
2707
|
-
} = props;
|
|
2708
|
-
const {
|
|
2709
|
-
templates,
|
|
2710
|
-
translateString
|
|
2711
|
-
} = registry;
|
|
2712
|
-
// Button templates are not overridden in the uiSchema
|
|
2713
|
-
const {
|
|
2714
|
-
RemoveButton
|
|
2715
|
-
} = templates.ButtonTemplates;
|
|
2716
|
-
const keyLabel = translateString(utils.TranslatableString.KeyLabel, [label]);
|
|
2717
|
-
const additional = (utils.ADDITIONAL_PROPERTY_FLAG in schema);
|
|
2718
|
-
if (!additional) {
|
|
2719
|
-
return jsxRuntime.jsx("div", {
|
|
2720
|
-
className: classNames,
|
|
2721
|
-
style: style,
|
|
2722
|
-
children: children
|
|
2723
|
-
});
|
|
2724
|
-
}
|
|
2725
|
-
return jsxRuntime.jsx("div", {
|
|
2726
|
-
className: classNames,
|
|
2727
|
-
style: style,
|
|
2728
|
-
children: jsxRuntime.jsxs("div", {
|
|
2729
|
-
className: 'row',
|
|
2730
|
-
children: [jsxRuntime.jsx("div", {
|
|
2731
|
-
className: 'col-xs-5 form-additional',
|
|
2732
|
-
children: jsxRuntime.jsxs("div", {
|
|
2733
|
-
className: 'form-group',
|
|
2734
|
-
children: [jsxRuntime.jsx(Label, {
|
|
2735
|
-
label: keyLabel,
|
|
2736
|
-
required: required,
|
|
2737
|
-
id: `${id}-key`
|
|
2738
|
-
}), jsxRuntime.jsx("input", {
|
|
2739
|
-
className: 'form-control',
|
|
2740
|
-
type: 'text',
|
|
2741
|
-
id: `${id}-key`,
|
|
2742
|
-
onBlur: event => onKeyChange(event.target.value),
|
|
2743
|
-
defaultValue: label
|
|
2744
|
-
})]
|
|
2745
|
-
})
|
|
2746
|
-
}), jsxRuntime.jsx("div", {
|
|
2747
|
-
className: 'form-additional form-group col-xs-5',
|
|
2748
|
-
children: children
|
|
2749
|
-
}), jsxRuntime.jsx("div", {
|
|
2750
|
-
className: 'col-xs-2',
|
|
2751
|
-
children: jsxRuntime.jsx(RemoveButton, {
|
|
2752
|
-
className: 'array-item-remove btn-block',
|
|
2753
|
-
style: {
|
|
2754
|
-
border: '0'
|
|
2755
|
-
},
|
|
2756
|
-
disabled: disabled || readonly,
|
|
2757
|
-
onClick: onDropPropertyClick(label),
|
|
2758
|
-
uiSchema: uiSchema,
|
|
2759
|
-
registry: registry
|
|
2760
|
-
})
|
|
2761
|
-
})]
|
|
2762
|
-
})
|
|
2763
|
-
});
|
|
2764
|
-
}
|
|
2765
|
-
|
|
2766
|
-
function templates() {
|
|
2767
|
-
return {
|
|
2768
|
-
ArrayFieldDescriptionTemplate,
|
|
2769
|
-
ArrayFieldItemTemplate,
|
|
2770
|
-
ArrayFieldTemplate,
|
|
2771
|
-
ArrayFieldTitleTemplate,
|
|
2772
|
-
ButtonTemplates: buttonTemplates(),
|
|
2773
|
-
BaseInputTemplate,
|
|
2774
|
-
DescriptionFieldTemplate: DescriptionField,
|
|
2775
|
-
ErrorListTemplate: ErrorList,
|
|
2776
|
-
FieldTemplate,
|
|
2777
|
-
FieldErrorTemplate,
|
|
2778
|
-
FieldHelpTemplate,
|
|
2779
|
-
ObjectFieldTemplate,
|
|
2780
|
-
TitleFieldTemplate: TitleField,
|
|
2781
|
-
UnsupportedFieldTemplate: UnsupportedField,
|
|
2782
|
-
WrapIfAdditionalTemplate
|
|
2783
|
-
};
|
|
2784
|
-
}
|
|
2785
|
-
|
|
2786
|
-
function rangeOptions(start, stop) {
|
|
2787
|
-
const options = [];
|
|
2788
|
-
for (let i = start; i <= stop; i++) {
|
|
2789
|
-
options.push({
|
|
2790
|
-
value: i,
|
|
2791
|
-
label: utils.pad(i, 2)
|
|
2792
|
-
});
|
|
2793
|
-
}
|
|
2794
|
-
return options;
|
|
2795
|
-
}
|
|
2796
|
-
function readyForChange(state) {
|
|
2797
|
-
return Object.values(state).every(value => value !== -1);
|
|
2798
|
-
}
|
|
2799
|
-
function dateElementProps(state, time, yearsRange = [1900, new Date().getFullYear() + 2]) {
|
|
2800
|
-
const {
|
|
2801
|
-
year,
|
|
2802
|
-
month,
|
|
2803
|
-
day,
|
|
2804
|
-
hour,
|
|
2805
|
-
minute,
|
|
2806
|
-
second
|
|
2807
|
-
} = state;
|
|
2808
|
-
const data = [{
|
|
2809
|
-
type: 'year',
|
|
2810
|
-
range: yearsRange,
|
|
2811
|
-
value: year
|
|
2812
|
-
}, {
|
|
2813
|
-
type: 'month',
|
|
2814
|
-
range: [1, 12],
|
|
2815
|
-
value: month
|
|
2816
|
-
}, {
|
|
2817
|
-
type: 'day',
|
|
2818
|
-
range: [1, 31],
|
|
2819
|
-
value: day
|
|
2820
|
-
}];
|
|
2821
|
-
if (time) {
|
|
2822
|
-
data.push({
|
|
2823
|
-
type: 'hour',
|
|
2824
|
-
range: [0, 23],
|
|
2825
|
-
value: hour
|
|
2826
|
-
}, {
|
|
2827
|
-
type: 'minute',
|
|
2828
|
-
range: [0, 59],
|
|
2829
|
-
value: minute
|
|
2830
|
-
}, {
|
|
2831
|
-
type: 'second',
|
|
2832
|
-
range: [0, 59],
|
|
2833
|
-
value: second
|
|
2834
|
-
});
|
|
2835
|
-
}
|
|
2836
|
-
return data;
|
|
2837
|
-
}
|
|
2838
|
-
function DateElement({
|
|
2839
|
-
type,
|
|
2840
|
-
range,
|
|
2841
|
-
value,
|
|
2842
|
-
select,
|
|
2843
|
-
rootId,
|
|
2844
|
-
name,
|
|
2845
|
-
disabled,
|
|
2846
|
-
readonly,
|
|
2847
|
-
autofocus,
|
|
2848
|
-
registry,
|
|
2849
|
-
onBlur,
|
|
2850
|
-
onFocus
|
|
2851
|
-
}) {
|
|
2852
|
-
const id = rootId + '_' + type;
|
|
2853
|
-
const {
|
|
2854
|
-
SelectWidget
|
|
2855
|
-
} = registry.widgets;
|
|
2856
|
-
return jsxRuntime.jsx(SelectWidget, {
|
|
2857
|
-
schema: {
|
|
2858
|
-
type: 'integer'
|
|
2859
|
-
},
|
|
2860
|
-
id: id,
|
|
2861
|
-
name: name,
|
|
2862
|
-
className: 'form-control',
|
|
2863
|
-
options: {
|
|
2864
|
-
enumOptions: rangeOptions(range[0], range[1])
|
|
2865
|
-
},
|
|
2866
|
-
placeholder: type,
|
|
2867
|
-
value: value,
|
|
2868
|
-
disabled: disabled,
|
|
2869
|
-
readonly: readonly,
|
|
2870
|
-
autofocus: autofocus,
|
|
2871
|
-
onChange: value => select(type, value),
|
|
2872
|
-
onBlur: onBlur,
|
|
2873
|
-
onFocus: onFocus,
|
|
2874
|
-
registry: registry,
|
|
2875
|
-
label: '',
|
|
2876
|
-
"aria-describedby": utils.ariaDescribedByIds(rootId)
|
|
2877
|
-
});
|
|
2878
|
-
}
|
|
2879
|
-
/** The `AltDateWidget` is an alternative widget for rendering date properties.
|
|
2880
|
-
* @param props - The `WidgetProps` for this component
|
|
2881
|
-
*/
|
|
2882
|
-
function AltDateWidget({
|
|
2883
|
-
time = false,
|
|
2884
|
-
disabled = false,
|
|
2885
|
-
readonly = false,
|
|
2886
|
-
autofocus = false,
|
|
2887
|
-
options,
|
|
2888
|
-
id,
|
|
2889
|
-
name,
|
|
2890
|
-
registry,
|
|
2891
|
-
onBlur,
|
|
2892
|
-
onFocus,
|
|
2893
|
-
onChange,
|
|
2894
|
-
value
|
|
2895
|
-
}) {
|
|
2896
|
-
const {
|
|
2897
|
-
translateString
|
|
2898
|
-
} = registry;
|
|
2899
|
-
const [lastValue, setLastValue] = react.useState(value);
|
|
2900
|
-
const [state, setState] = react.useReducer((state, action) => {
|
|
2901
|
-
return {
|
|
2902
|
-
...state,
|
|
2903
|
-
...action
|
|
2904
|
-
};
|
|
2905
|
-
}, utils.parseDateString(value, time));
|
|
2906
|
-
react.useEffect(() => {
|
|
2907
|
-
const stateValue = utils.toDateString(state, time);
|
|
2908
|
-
if (readyForChange(state) && stateValue !== value) {
|
|
2909
|
-
// The user changed the date to a new valid data via the comboboxes, so call onChange
|
|
2910
|
-
onChange(stateValue);
|
|
2911
|
-
} else if (lastValue !== value) {
|
|
2912
|
-
// We got a new value in the props
|
|
2913
|
-
setLastValue(value);
|
|
2914
|
-
setState(utils.parseDateString(value, time));
|
|
2915
|
-
}
|
|
2916
|
-
}, [time, value, onChange, state, lastValue]);
|
|
2917
|
-
const handleChange = react.useCallback((property, value) => {
|
|
2918
|
-
setState({
|
|
2919
|
-
[property]: value
|
|
2920
|
-
});
|
|
2921
|
-
}, []);
|
|
2922
|
-
const handleSetNow = react.useCallback(event => {
|
|
2923
|
-
event.preventDefault();
|
|
2924
|
-
if (disabled || readonly) {
|
|
2925
|
-
return;
|
|
2926
|
-
}
|
|
2927
|
-
const nextState = utils.parseDateString(new Date().toJSON(), time);
|
|
2928
|
-
onChange(utils.toDateString(nextState, time));
|
|
2929
|
-
}, [disabled, readonly, time]);
|
|
2930
|
-
const handleClear = react.useCallback(event => {
|
|
2931
|
-
event.preventDefault();
|
|
2932
|
-
if (disabled || readonly) {
|
|
2933
|
-
return;
|
|
2934
|
-
}
|
|
2935
|
-
onChange(undefined);
|
|
2936
|
-
}, [disabled, readonly, onChange]);
|
|
2937
|
-
return jsxRuntime.jsxs("ul", {
|
|
2938
|
-
className: 'list-inline',
|
|
2939
|
-
children: [dateElementProps(state, time, options.yearsRange).map((elemProps, i) => jsxRuntime.jsx("li", {
|
|
2940
|
-
className: 'list-inline-item',
|
|
2941
|
-
children: jsxRuntime.jsx(DateElement, {
|
|
2942
|
-
rootId: id,
|
|
2943
|
-
name: name,
|
|
2944
|
-
select: handleChange,
|
|
2945
|
-
...elemProps,
|
|
2946
|
-
disabled: disabled,
|
|
2947
|
-
readonly: readonly,
|
|
2948
|
-
registry: registry,
|
|
2949
|
-
onBlur: onBlur,
|
|
2950
|
-
onFocus: onFocus,
|
|
2951
|
-
autofocus: autofocus && i === 0
|
|
2952
|
-
})
|
|
2953
|
-
}, i)), (options.hideNowButton !== 'undefined' ? !options.hideNowButton : true) && jsxRuntime.jsx("li", {
|
|
2954
|
-
className: 'list-inline-item',
|
|
2955
|
-
children: jsxRuntime.jsx("a", {
|
|
2956
|
-
href: '#',
|
|
2957
|
-
className: 'btn btn-info btn-now',
|
|
2958
|
-
onClick: handleSetNow,
|
|
2959
|
-
children: translateString(utils.TranslatableString.NowLabel)
|
|
2960
|
-
})
|
|
2961
|
-
}), (options.hideClearButton !== 'undefined' ? !options.hideClearButton : true) && jsxRuntime.jsx("li", {
|
|
2962
|
-
className: 'list-inline-item',
|
|
2963
|
-
children: jsxRuntime.jsx("a", {
|
|
2964
|
-
href: '#',
|
|
2965
|
-
className: 'btn btn-warning btn-clear',
|
|
2966
|
-
onClick: handleClear,
|
|
2967
|
-
children: translateString(utils.TranslatableString.ClearLabel)
|
|
2968
|
-
})
|
|
2969
|
-
})]
|
|
2970
|
-
});
|
|
2971
|
-
}
|
|
2972
|
-
|
|
2973
|
-
/** The `AltDateTimeWidget` is an alternative widget for rendering datetime properties.
|
|
2974
|
-
* It uses the AltDateWidget for rendering, with the `time` prop set to true by default.
|
|
2975
|
-
*
|
|
2976
|
-
* @param props - The `WidgetProps` for this component
|
|
2977
|
-
*/
|
|
2978
|
-
function AltDateTimeWidget({
|
|
2979
|
-
time = true,
|
|
2980
|
-
...props
|
|
2981
|
-
}) {
|
|
2982
|
-
const {
|
|
2983
|
-
AltDateWidget
|
|
2984
|
-
} = props.registry.widgets;
|
|
2985
|
-
return jsxRuntime.jsx(AltDateWidget, {
|
|
2986
|
-
time: time,
|
|
2987
|
-
...props
|
|
2988
|
-
});
|
|
2989
|
-
}
|
|
2990
|
-
|
|
2991
|
-
/** The `CheckBoxWidget` is a widget for rendering boolean properties.
|
|
2992
|
-
* It is typically used to represent a boolean.
|
|
2993
|
-
*
|
|
2994
|
-
* @param props - The `WidgetProps` for this component
|
|
2995
|
-
*/
|
|
2996
|
-
function CheckboxWidget({
|
|
2997
|
-
schema,
|
|
2998
|
-
uiSchema,
|
|
2999
|
-
options,
|
|
3000
|
-
id,
|
|
3001
|
-
value,
|
|
3002
|
-
disabled,
|
|
3003
|
-
readonly,
|
|
3004
|
-
label,
|
|
3005
|
-
hideLabel,
|
|
3006
|
-
autofocus = false,
|
|
3007
|
-
onBlur,
|
|
3008
|
-
onFocus,
|
|
3009
|
-
onChange,
|
|
3010
|
-
registry
|
|
3011
|
-
}) {
|
|
3012
|
-
const DescriptionFieldTemplate = utils.getTemplate('DescriptionFieldTemplate', registry, options);
|
|
3013
|
-
// Because an unchecked checkbox will cause html5 validation to fail, only add
|
|
3014
|
-
// the "required" attribute if the field value must be "true", due to the
|
|
3015
|
-
// "const" or "enum" keywords
|
|
3016
|
-
const required = utils.schemaRequiresTrueValue(schema);
|
|
3017
|
-
const handleChange = react.useCallback(event => onChange(event.target.checked), [onChange]);
|
|
3018
|
-
const handleBlur = react.useCallback(event => onBlur(id, event.target.checked), [onBlur, id]);
|
|
3019
|
-
const handleFocus = react.useCallback(event => onFocus(id, event.target.checked), [onFocus, id]);
|
|
3020
|
-
const description = options.description ?? schema.description;
|
|
3021
|
-
return jsxRuntime.jsxs("div", {
|
|
3022
|
-
className: `checkbox ${disabled || readonly ? 'disabled' : ''}`,
|
|
3023
|
-
children: [!hideLabel && !!description && jsxRuntime.jsx(DescriptionFieldTemplate, {
|
|
3024
|
-
id: utils.descriptionId(id),
|
|
3025
|
-
description: description,
|
|
3026
|
-
schema: schema,
|
|
3027
|
-
uiSchema: uiSchema,
|
|
3028
|
-
registry: registry
|
|
3029
|
-
}), jsxRuntime.jsxs("label", {
|
|
3030
|
-
children: [jsxRuntime.jsx("input", {
|
|
3031
|
-
type: 'checkbox',
|
|
3032
|
-
id: id,
|
|
3033
|
-
name: id,
|
|
3034
|
-
checked: typeof value === 'undefined' ? false : value,
|
|
3035
|
-
required: required,
|
|
3036
|
-
disabled: disabled || readonly,
|
|
3037
|
-
autoFocus: autofocus,
|
|
3038
|
-
onChange: handleChange,
|
|
3039
|
-
onBlur: handleBlur,
|
|
3040
|
-
onFocus: handleFocus,
|
|
3041
|
-
"aria-describedby": utils.ariaDescribedByIds(id)
|
|
3042
|
-
}), utils.labelValue(jsxRuntime.jsx("span", {
|
|
3043
|
-
children: label
|
|
3044
|
-
}), hideLabel)]
|
|
3045
|
-
})]
|
|
3046
|
-
});
|
|
3047
|
-
}
|
|
3048
|
-
|
|
3049
|
-
/** The `CheckboxesWidget` is a widget for rendering checkbox groups.
|
|
3050
|
-
* It is typically used to represent an array of enums.
|
|
3051
|
-
*
|
|
3052
|
-
* @param props - The `WidgetProps` for this component
|
|
3053
|
-
*/
|
|
3054
|
-
function CheckboxesWidget({
|
|
3055
|
-
id,
|
|
3056
|
-
disabled,
|
|
3057
|
-
options: {
|
|
3058
|
-
inline = false,
|
|
3059
|
-
enumOptions,
|
|
3060
|
-
enumDisabled,
|
|
3061
|
-
emptyValue
|
|
3062
|
-
},
|
|
3063
|
-
value,
|
|
3064
|
-
autofocus = false,
|
|
3065
|
-
readonly,
|
|
3066
|
-
onChange,
|
|
3067
|
-
onBlur,
|
|
3068
|
-
onFocus
|
|
3069
|
-
}) {
|
|
3070
|
-
const checkboxesValues = Array.isArray(value) ? value : [value];
|
|
3071
|
-
const handleBlur = react.useCallback(({
|
|
3072
|
-
target: {
|
|
3073
|
-
value
|
|
3074
|
-
}
|
|
3075
|
-
}) => onBlur(id, utils.enumOptionsValueForIndex(value, enumOptions, emptyValue)), [onBlur, id]);
|
|
3076
|
-
const handleFocus = react.useCallback(({
|
|
3077
|
-
target: {
|
|
3078
|
-
value
|
|
3079
|
-
}
|
|
3080
|
-
}) => onFocus(id, utils.enumOptionsValueForIndex(value, enumOptions, emptyValue)), [onFocus, id]);
|
|
3081
|
-
return jsxRuntime.jsx("div", {
|
|
3082
|
-
className: 'checkboxes',
|
|
3083
|
-
id: id,
|
|
3084
|
-
children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
|
|
3085
|
-
const checked = utils.enumOptionsIsSelected(option.value, checkboxesValues);
|
|
3086
|
-
const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
|
|
3087
|
-
const disabledCls = disabled || itemDisabled || readonly ? 'disabled' : '';
|
|
3088
|
-
const handleChange = event => {
|
|
3089
|
-
if (event.target.checked) {
|
|
3090
|
-
onChange(utils.enumOptionsSelectValue(index, checkboxesValues, enumOptions));
|
|
3091
|
-
} else {
|
|
3092
|
-
onChange(utils.enumOptionsDeselectValue(index, checkboxesValues, enumOptions));
|
|
3093
|
-
}
|
|
3094
|
-
};
|
|
3095
|
-
const checkbox = jsxRuntime.jsxs("span", {
|
|
3096
|
-
children: [jsxRuntime.jsx("input", {
|
|
3097
|
-
type: 'checkbox',
|
|
3098
|
-
id: utils.optionId(id, index),
|
|
3099
|
-
name: id,
|
|
3100
|
-
checked: checked,
|
|
3101
|
-
value: String(index),
|
|
3102
|
-
disabled: disabled || itemDisabled || readonly,
|
|
3103
|
-
autoFocus: autofocus && index === 0,
|
|
3104
|
-
onChange: handleChange,
|
|
3105
|
-
onBlur: handleBlur,
|
|
3106
|
-
onFocus: handleFocus,
|
|
3107
|
-
"aria-describedby": utils.ariaDescribedByIds(id)
|
|
3108
|
-
}), jsxRuntime.jsx("span", {
|
|
3109
|
-
children: option.label
|
|
3110
|
-
})]
|
|
3111
|
-
});
|
|
3112
|
-
return inline ? jsxRuntime.jsx("label", {
|
|
3113
|
-
className: `checkbox-inline ${disabledCls}`,
|
|
3114
|
-
children: checkbox
|
|
3115
|
-
}, index) : jsxRuntime.jsx("div", {
|
|
3116
|
-
className: `checkbox ${disabledCls}`,
|
|
3117
|
-
children: jsxRuntime.jsx("label", {
|
|
3118
|
-
children: checkbox
|
|
3119
|
-
})
|
|
3120
|
-
}, index);
|
|
3121
|
-
})
|
|
3122
|
-
});
|
|
3123
|
-
}
|
|
3124
|
-
|
|
3125
|
-
/** The `ColorWidget` component uses the `BaseInputTemplate` changing the type to `color` and disables it when it is
|
|
3126
|
-
* either disabled or readonly.
|
|
3127
|
-
*
|
|
3128
|
-
* @param props - The `WidgetProps` for this component
|
|
3129
|
-
*/
|
|
3130
|
-
function ColorWidget(props) {
|
|
3131
|
-
const {
|
|
3132
|
-
disabled,
|
|
3133
|
-
readonly,
|
|
3134
|
-
options,
|
|
3135
|
-
registry
|
|
3136
|
-
} = props;
|
|
3137
|
-
const BaseInputTemplate = utils.getTemplate('BaseInputTemplate', registry, options);
|
|
3138
|
-
return jsxRuntime.jsx(BaseInputTemplate, {
|
|
3139
|
-
type: 'color',
|
|
3140
|
-
...props,
|
|
3141
|
-
disabled: disabled || readonly
|
|
3142
|
-
});
|
|
3143
|
-
}
|
|
3144
|
-
|
|
3145
|
-
/** The `DateWidget` component uses the `BaseInputTemplate` changing the type to `date` and transforms
|
|
3146
|
-
* the value to undefined when it is falsy during the `onChange` handling.
|
|
3147
|
-
*
|
|
3148
|
-
* @param props - The `WidgetProps` for this component
|
|
3149
|
-
*/
|
|
3150
|
-
function DateWidget(props) {
|
|
3151
|
-
const {
|
|
3152
|
-
onChange,
|
|
3153
|
-
options,
|
|
3154
|
-
registry
|
|
3155
|
-
} = props;
|
|
3156
|
-
const BaseInputTemplate = utils.getTemplate('BaseInputTemplate', registry, options);
|
|
3157
|
-
const handleChange = react.useCallback(value => onChange(value || undefined), [onChange]);
|
|
3158
|
-
return jsxRuntime.jsx(BaseInputTemplate, {
|
|
3159
|
-
type: 'date',
|
|
3160
|
-
...props,
|
|
3161
|
-
onChange: handleChange
|
|
3162
|
-
});
|
|
3163
|
-
}
|
|
3164
|
-
|
|
3165
|
-
/** The `DateTimeWidget` component uses the `BaseInputTemplate` changing the type to `datetime-local` and transforms
|
|
3166
|
-
* the value to/from utc using the appropriate utility functions.
|
|
3167
|
-
*
|
|
3168
|
-
* @param props - The `WidgetProps` for this component
|
|
3169
|
-
*/
|
|
3170
|
-
function DateTimeWidget(props) {
|
|
3171
|
-
const {
|
|
3172
|
-
onChange,
|
|
3173
|
-
value,
|
|
3174
|
-
options,
|
|
3175
|
-
registry
|
|
3176
|
-
} = props;
|
|
3177
|
-
const BaseInputTemplate = utils.getTemplate('BaseInputTemplate', registry, options);
|
|
3178
|
-
return jsxRuntime.jsx(BaseInputTemplate, {
|
|
3179
|
-
type: 'datetime-local',
|
|
3180
|
-
...props,
|
|
3181
|
-
value: utils.utcToLocal(value),
|
|
3182
|
-
onChange: value => onChange(utils.localToUTC(value))
|
|
3183
|
-
});
|
|
3184
|
-
}
|
|
3185
|
-
|
|
3186
|
-
/** The `EmailWidget` component uses the `BaseInputTemplate` changing the type to `email`.
|
|
3187
|
-
*
|
|
3188
|
-
* @param props - The `WidgetProps` for this component
|
|
3189
|
-
*/
|
|
3190
|
-
function EmailWidget(props) {
|
|
3191
|
-
const {
|
|
3192
|
-
options,
|
|
3193
|
-
registry
|
|
3194
|
-
} = props;
|
|
3195
|
-
const BaseInputTemplate = utils.getTemplate('BaseInputTemplate', registry, options);
|
|
3196
|
-
return jsxRuntime.jsx(BaseInputTemplate, {
|
|
3197
|
-
type: 'email',
|
|
3198
|
-
...props
|
|
3199
|
-
});
|
|
3200
|
-
}
|
|
3201
|
-
|
|
3202
|
-
function addNameToDataURL(dataURL, name) {
|
|
3203
|
-
if (dataURL === null) {
|
|
3204
|
-
return null;
|
|
3205
|
-
}
|
|
3206
|
-
return dataURL.replace(';base64', `;name=${encodeURIComponent(name)};base64`);
|
|
3207
|
-
}
|
|
3208
|
-
function processFile(file) {
|
|
3209
|
-
const {
|
|
3210
|
-
name,
|
|
3211
|
-
size,
|
|
3212
|
-
type
|
|
3213
|
-
} = file;
|
|
3214
|
-
return new Promise((resolve, reject) => {
|
|
3215
|
-
const reader = new window.FileReader();
|
|
3216
|
-
reader.onerror = reject;
|
|
3217
|
-
reader.onload = event => {
|
|
3218
|
-
var _event$target;
|
|
3219
|
-
if (typeof ((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.result) === 'string') {
|
|
3220
|
-
resolve({
|
|
3221
|
-
dataURL: addNameToDataURL(event.target.result, name),
|
|
3222
|
-
name,
|
|
3223
|
-
size,
|
|
3224
|
-
type
|
|
3225
|
-
});
|
|
3226
|
-
} else {
|
|
3227
|
-
resolve({
|
|
3228
|
-
dataURL: null,
|
|
3229
|
-
name,
|
|
3230
|
-
size,
|
|
3231
|
-
type
|
|
3232
|
-
});
|
|
3233
|
-
}
|
|
3234
|
-
};
|
|
3235
|
-
reader.readAsDataURL(file);
|
|
3236
|
-
});
|
|
3237
|
-
}
|
|
3238
|
-
function processFiles(files) {
|
|
3239
|
-
return Promise.all(Array.from(files).map(processFile));
|
|
3240
|
-
}
|
|
3241
|
-
function FileInfoPreview({
|
|
3242
|
-
fileInfo,
|
|
3243
|
-
registry
|
|
3244
|
-
}) {
|
|
3245
|
-
const {
|
|
3246
|
-
translateString
|
|
3247
|
-
} = registry;
|
|
3248
|
-
const {
|
|
3249
|
-
dataURL,
|
|
3250
|
-
type,
|
|
3251
|
-
name
|
|
3252
|
-
} = fileInfo;
|
|
3253
|
-
if (!dataURL) {
|
|
3254
|
-
return null;
|
|
3255
|
-
}
|
|
3256
|
-
if (type.indexOf('image') !== -1) {
|
|
3257
|
-
return jsxRuntime.jsx("img", {
|
|
3258
|
-
src: dataURL,
|
|
3259
|
-
style: {
|
|
3260
|
-
maxWidth: '100%'
|
|
3261
|
-
},
|
|
3262
|
-
className: 'file-preview'
|
|
3263
|
-
});
|
|
3264
|
-
}
|
|
3265
|
-
return jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
3266
|
-
children: [' ', jsxRuntime.jsx("a", {
|
|
3267
|
-
download: `preview-${name}`,
|
|
3268
|
-
href: dataURL,
|
|
3269
|
-
className: 'file-download',
|
|
3270
|
-
children: translateString(utils.TranslatableString.PreviewLabel)
|
|
3271
|
-
})]
|
|
3272
|
-
});
|
|
3273
|
-
}
|
|
3274
|
-
function FilesInfo({
|
|
3275
|
-
filesInfo,
|
|
3276
|
-
registry,
|
|
3277
|
-
preview
|
|
3278
|
-
}) {
|
|
3279
|
-
if (filesInfo.length === 0) {
|
|
3280
|
-
return null;
|
|
3281
|
-
}
|
|
3282
|
-
const {
|
|
3283
|
-
translateString
|
|
3284
|
-
} = registry;
|
|
3285
|
-
return jsxRuntime.jsx("ul", {
|
|
3286
|
-
className: 'file-info',
|
|
3287
|
-
children: filesInfo.map((fileInfo, key) => {
|
|
3288
|
-
const {
|
|
3289
|
-
name,
|
|
3290
|
-
size,
|
|
3291
|
-
type
|
|
3292
|
-
} = fileInfo;
|
|
3293
|
-
return jsxRuntime.jsxs("li", {
|
|
3294
|
-
children: [jsxRuntime.jsx(Markdown__default["default"], {
|
|
3295
|
-
children: translateString(utils.TranslatableString.FilesInfo, [name, type, String(size)])
|
|
3296
|
-
}), preview && jsxRuntime.jsx(FileInfoPreview, {
|
|
3297
|
-
fileInfo: fileInfo,
|
|
3298
|
-
registry: registry
|
|
3299
|
-
})]
|
|
3300
|
-
}, key);
|
|
3301
|
-
})
|
|
3302
|
-
});
|
|
3303
|
-
}
|
|
3304
|
-
function extractFileInfo(dataURLs) {
|
|
3305
|
-
return dataURLs.filter(dataURL => dataURL).map(dataURL => {
|
|
3306
|
-
const {
|
|
3307
|
-
blob,
|
|
3308
|
-
name
|
|
3309
|
-
} = utils.dataURItoBlob(dataURL);
|
|
3310
|
-
return {
|
|
3311
|
-
dataURL,
|
|
3312
|
-
name: name,
|
|
3313
|
-
size: blob.size,
|
|
3314
|
-
type: blob.type
|
|
3315
|
-
};
|
|
3316
|
-
});
|
|
3317
|
-
}
|
|
3318
|
-
/**
|
|
3319
|
-
* The `FileWidget` is a widget for rendering file upload fields.
|
|
3320
|
-
* It is typically used with a string property with data-url format.
|
|
3321
|
-
*/
|
|
3322
|
-
function FileWidget(props) {
|
|
3323
|
-
const {
|
|
3324
|
-
disabled,
|
|
3325
|
-
readonly,
|
|
3326
|
-
required,
|
|
3327
|
-
multiple,
|
|
3328
|
-
onChange,
|
|
3329
|
-
value,
|
|
3330
|
-
options,
|
|
3331
|
-
registry
|
|
3332
|
-
} = props;
|
|
3333
|
-
const BaseInputTemplate = utils.getTemplate('BaseInputTemplate', registry, options);
|
|
3334
|
-
const [filesInfo, setFilesInfo] = react.useState(Array.isArray(value) ? extractFileInfo(value) : extractFileInfo([value]));
|
|
3335
|
-
const handleChange = react.useCallback(event => {
|
|
3336
|
-
if (!event.target.files) {
|
|
3337
|
-
return;
|
|
3338
|
-
}
|
|
3339
|
-
// Due to variances in themes, dealing with multiple files for the array case now happens one file at a time.
|
|
3340
|
-
// This is because we don't pass `multiple` into the `BaseInputTemplate` anymore. Instead, we deal with the single
|
|
3341
|
-
// file in each event and concatenate them together ourselves
|
|
3342
|
-
processFiles(event.target.files).then(filesInfoEvent => {
|
|
3343
|
-
const newValue = filesInfoEvent.map(fileInfo => fileInfo.dataURL);
|
|
3344
|
-
if (multiple) {
|
|
3345
|
-
setFilesInfo(filesInfo.concat(filesInfoEvent[0]));
|
|
3346
|
-
onChange(value.concat(newValue[0]));
|
|
3347
|
-
} else {
|
|
3348
|
-
setFilesInfo(filesInfoEvent);
|
|
3349
|
-
onChange(newValue[0]);
|
|
3350
|
-
}
|
|
3351
|
-
});
|
|
3352
|
-
}, [multiple, value, filesInfo, onChange]);
|
|
3353
|
-
return jsxRuntime.jsxs("div", {
|
|
3354
|
-
children: [jsxRuntime.jsx(BaseInputTemplate, {
|
|
3355
|
-
...props,
|
|
3356
|
-
disabled: disabled || readonly,
|
|
3357
|
-
type: 'file',
|
|
3358
|
-
required: value ? false : required,
|
|
3359
|
-
onChangeOverride: handleChange,
|
|
3360
|
-
value: '',
|
|
3361
|
-
accept: options.accept ? String(options.accept) : undefined
|
|
3362
|
-
}), jsxRuntime.jsx(FilesInfo, {
|
|
3363
|
-
filesInfo: filesInfo,
|
|
3364
|
-
registry: registry,
|
|
3365
|
-
preview: options.filePreview
|
|
3366
|
-
})]
|
|
3367
|
-
});
|
|
3368
|
-
}
|
|
3369
|
-
|
|
3370
|
-
/** The `HiddenWidget` is a widget for rendering a hidden input field.
|
|
3371
|
-
* It is typically used by setting type to "hidden".
|
|
3372
|
-
*
|
|
3373
|
-
* @param props - The `WidgetProps` for this component
|
|
3374
|
-
*/
|
|
3375
|
-
function HiddenWidget({
|
|
3376
|
-
id,
|
|
3377
|
-
value
|
|
3378
|
-
}) {
|
|
3379
|
-
return jsxRuntime.jsx("input", {
|
|
3380
|
-
type: 'hidden',
|
|
3381
|
-
id: id,
|
|
3382
|
-
name: id,
|
|
3383
|
-
value: typeof value === 'undefined' ? '' : value
|
|
3384
|
-
});
|
|
3385
|
-
}
|
|
3386
|
-
|
|
3387
|
-
/** The `PasswordWidget` component uses the `BaseInputTemplate` changing the type to `password`.
|
|
3388
|
-
*
|
|
3389
|
-
* @param props - The `WidgetProps` for this component
|
|
3390
|
-
*/
|
|
3391
|
-
function PasswordWidget(props) {
|
|
3392
|
-
const {
|
|
3393
|
-
options,
|
|
3394
|
-
registry
|
|
3395
|
-
} = props;
|
|
3396
|
-
const BaseInputTemplate = utils.getTemplate('BaseInputTemplate', registry, options);
|
|
3397
|
-
return jsxRuntime.jsx(BaseInputTemplate, {
|
|
3398
|
-
type: 'password',
|
|
3399
|
-
...props
|
|
3400
|
-
});
|
|
3401
|
-
}
|
|
3402
|
-
|
|
3403
|
-
/** The `RadioWidget` is a widget for rendering a radio group.
|
|
3404
|
-
* It is typically used with a string property constrained with enum options.
|
|
3405
|
-
*
|
|
3406
|
-
* @param props - The `WidgetProps` for this component
|
|
3407
|
-
*/
|
|
3408
|
-
function RadioWidget({
|
|
3409
|
-
options,
|
|
3410
|
-
value,
|
|
3411
|
-
required,
|
|
3412
|
-
disabled,
|
|
3413
|
-
readonly,
|
|
3414
|
-
autofocus = false,
|
|
3415
|
-
onBlur,
|
|
3416
|
-
onFocus,
|
|
3417
|
-
onChange,
|
|
3418
|
-
id
|
|
3419
|
-
}) {
|
|
3420
|
-
const {
|
|
3421
|
-
enumOptions,
|
|
3422
|
-
enumDisabled,
|
|
3423
|
-
inline,
|
|
3424
|
-
emptyValue
|
|
3425
|
-
} = options;
|
|
3426
|
-
const handleBlur = react.useCallback(({
|
|
3427
|
-
target: {
|
|
3428
|
-
value
|
|
3429
|
-
}
|
|
3430
|
-
}) => onBlur(id, utils.enumOptionsValueForIndex(value, enumOptions, emptyValue)), [onBlur, id]);
|
|
3431
|
-
const handleFocus = react.useCallback(({
|
|
3432
|
-
target: {
|
|
3433
|
-
value
|
|
3434
|
-
}
|
|
3435
|
-
}) => onFocus(id, utils.enumOptionsValueForIndex(value, enumOptions, emptyValue)), [onFocus, id]);
|
|
3436
|
-
return jsxRuntime.jsx("div", {
|
|
3437
|
-
className: 'field-radio-group',
|
|
3438
|
-
id: id,
|
|
3439
|
-
children: Array.isArray(enumOptions) && enumOptions.map((option, i) => {
|
|
3440
|
-
const checked = utils.enumOptionsIsSelected(option.value, value);
|
|
3441
|
-
const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
|
|
3442
|
-
const disabledCls = disabled || itemDisabled || readonly ? 'disabled' : '';
|
|
3443
|
-
const handleChange = () => onChange(option.value);
|
|
3444
|
-
const radio = jsxRuntime.jsxs("span", {
|
|
3445
|
-
children: [jsxRuntime.jsx("input", {
|
|
3446
|
-
type: 'radio',
|
|
3447
|
-
id: utils.optionId(id, i),
|
|
3448
|
-
checked: checked,
|
|
3449
|
-
name: id,
|
|
3450
|
-
required: required,
|
|
3451
|
-
value: String(i),
|
|
3452
|
-
disabled: disabled || itemDisabled || readonly,
|
|
3453
|
-
autoFocus: autofocus && i === 0,
|
|
3454
|
-
onChange: handleChange,
|
|
3455
|
-
onBlur: handleBlur,
|
|
3456
|
-
onFocus: handleFocus,
|
|
3457
|
-
"aria-describedby": utils.ariaDescribedByIds(id)
|
|
3458
|
-
}), jsxRuntime.jsx("span", {
|
|
3459
|
-
children: option.label
|
|
3460
|
-
})]
|
|
3461
|
-
});
|
|
3462
|
-
return inline ? jsxRuntime.jsx("label", {
|
|
3463
|
-
className: `radio-inline ${disabledCls}`,
|
|
3464
|
-
children: radio
|
|
3465
|
-
}, i) : jsxRuntime.jsx("div", {
|
|
3466
|
-
className: `radio ${disabledCls}`,
|
|
3467
|
-
children: jsxRuntime.jsx("label", {
|
|
3468
|
-
children: radio
|
|
3469
|
-
})
|
|
3470
|
-
}, i);
|
|
3471
|
-
})
|
|
3472
|
-
});
|
|
3473
|
-
}
|
|
3474
|
-
|
|
3475
|
-
/** The `RangeWidget` component uses the `BaseInputTemplate` changing the type to `range` and wrapping the result
|
|
3476
|
-
* in a div, with the value along side it.
|
|
3477
|
-
*
|
|
3478
|
-
* @param props - The `WidgetProps` for this component
|
|
3479
|
-
*/
|
|
3480
|
-
function RangeWidget(props) {
|
|
3481
|
-
const {
|
|
3482
|
-
value,
|
|
3483
|
-
registry: {
|
|
3484
|
-
templates: {
|
|
3485
|
-
BaseInputTemplate
|
|
3486
|
-
}
|
|
3487
|
-
}
|
|
3488
|
-
} = props;
|
|
3489
|
-
return jsxRuntime.jsxs("div", {
|
|
3490
|
-
className: 'field-range-wrapper',
|
|
3491
|
-
children: [jsxRuntime.jsx(BaseInputTemplate, {
|
|
3492
|
-
type: 'range',
|
|
3493
|
-
...props
|
|
3494
|
-
}), jsxRuntime.jsx("span", {
|
|
3495
|
-
className: 'range-view',
|
|
3496
|
-
children: value
|
|
3497
|
-
})]
|
|
3498
|
-
});
|
|
3499
|
-
}
|
|
3500
|
-
|
|
3501
|
-
function getValue(event, multiple) {
|
|
3502
|
-
if (multiple) {
|
|
3503
|
-
return Array.from(event.target.options).slice().filter(o => o.selected).map(o => o.value);
|
|
3504
|
-
}
|
|
3505
|
-
return event.target.value;
|
|
3506
|
-
}
|
|
3507
|
-
/** The `SelectWidget` is a widget for rendering dropdowns.
|
|
3508
|
-
* It is typically used with string properties constrained with enum options.
|
|
3509
|
-
*
|
|
3510
|
-
* @param props - The `WidgetProps` for this component
|
|
3511
|
-
*/
|
|
3512
|
-
function SelectWidget({
|
|
3513
|
-
schema,
|
|
3514
|
-
id,
|
|
3515
|
-
options,
|
|
3516
|
-
value,
|
|
3517
|
-
required,
|
|
3518
|
-
disabled,
|
|
3519
|
-
readonly,
|
|
3520
|
-
multiple = false,
|
|
3521
|
-
autofocus = false,
|
|
3522
|
-
onChange,
|
|
3523
|
-
onBlur,
|
|
3524
|
-
onFocus,
|
|
3525
|
-
placeholder
|
|
3526
|
-
}) {
|
|
3527
|
-
const {
|
|
3528
|
-
enumOptions,
|
|
3529
|
-
enumDisabled,
|
|
3530
|
-
emptyValue: optEmptyVal
|
|
3531
|
-
} = options;
|
|
3532
|
-
const emptyValue = multiple ? [] : '';
|
|
3533
|
-
const handleFocus = react.useCallback(event => {
|
|
3534
|
-
const newValue = getValue(event, multiple);
|
|
3535
|
-
return onFocus(id, utils.enumOptionsValueForIndex(newValue, enumOptions, optEmptyVal));
|
|
3536
|
-
}, [onFocus, id, schema, multiple, options]);
|
|
3537
|
-
const handleBlur = react.useCallback(event => {
|
|
3538
|
-
const newValue = getValue(event, multiple);
|
|
3539
|
-
return onBlur(id, utils.enumOptionsValueForIndex(newValue, enumOptions, optEmptyVal));
|
|
3540
|
-
}, [onBlur, id, schema, multiple, options]);
|
|
3541
|
-
const handleChange = react.useCallback(event => {
|
|
3542
|
-
const newValue = getValue(event, multiple);
|
|
3543
|
-
return onChange(utils.enumOptionsValueForIndex(newValue, enumOptions, optEmptyVal));
|
|
3544
|
-
}, [onChange, schema, multiple, options]);
|
|
3545
|
-
const selectedIndexes = utils.enumOptionsIndexForValue(value, enumOptions, multiple);
|
|
3546
|
-
return jsxRuntime.jsxs("select", {
|
|
3547
|
-
id: id,
|
|
3548
|
-
name: id,
|
|
3549
|
-
multiple: multiple,
|
|
3550
|
-
className: 'form-control',
|
|
3551
|
-
value: typeof selectedIndexes === 'undefined' ? emptyValue : selectedIndexes,
|
|
3552
|
-
required: required,
|
|
3553
|
-
disabled: disabled || readonly,
|
|
3554
|
-
autoFocus: autofocus,
|
|
3555
|
-
onBlur: handleBlur,
|
|
3556
|
-
onFocus: handleFocus,
|
|
3557
|
-
onChange: handleChange,
|
|
3558
|
-
"aria-describedby": utils.ariaDescribedByIds(id),
|
|
3559
|
-
children: [!multiple && schema.default === undefined && jsxRuntime.jsx("option", {
|
|
3560
|
-
value: '',
|
|
3561
|
-
children: placeholder
|
|
3562
|
-
}), Array.isArray(enumOptions) && enumOptions.map(({
|
|
3563
|
-
value,
|
|
3564
|
-
label
|
|
3565
|
-
}, i) => {
|
|
3566
|
-
const disabled = enumDisabled && enumDisabled.indexOf(value) !== -1;
|
|
3567
|
-
return jsxRuntime.jsx("option", {
|
|
3568
|
-
value: String(i),
|
|
3569
|
-
disabled: disabled,
|
|
3570
|
-
children: label
|
|
3571
|
-
}, i);
|
|
3572
|
-
})]
|
|
3573
|
-
});
|
|
3574
|
-
}
|
|
3575
|
-
|
|
3576
|
-
/** The `TextareaWidget` is a widget for rendering input fields as textarea.
|
|
3577
|
-
*
|
|
3578
|
-
* @param props - The `WidgetProps` for this component
|
|
3579
|
-
*/
|
|
3580
|
-
function TextareaWidget({
|
|
3581
|
-
id,
|
|
3582
|
-
options = {},
|
|
3583
|
-
placeholder,
|
|
3584
|
-
value,
|
|
3585
|
-
required,
|
|
3586
|
-
disabled,
|
|
3587
|
-
readonly,
|
|
3588
|
-
autofocus = false,
|
|
3589
|
-
onChange,
|
|
3590
|
-
onBlur,
|
|
3591
|
-
onFocus
|
|
3592
|
-
}) {
|
|
3593
|
-
const handleChange = react.useCallback(({
|
|
3594
|
-
target: {
|
|
3595
|
-
value
|
|
3596
|
-
}
|
|
3597
|
-
}) => onChange(value === '' ? options.emptyValue : value), [onChange, options.emptyValue]);
|
|
3598
|
-
const handleBlur = react.useCallback(({
|
|
3599
|
-
target: {
|
|
3600
|
-
value
|
|
3601
|
-
}
|
|
3602
|
-
}) => onBlur(id, value), [onBlur, id]);
|
|
3603
|
-
const handleFocus = react.useCallback(({
|
|
3604
|
-
target: {
|
|
3605
|
-
value
|
|
3606
|
-
}
|
|
3607
|
-
}) => onFocus(id, value), [id, onFocus]);
|
|
3608
|
-
return jsxRuntime.jsx("textarea", {
|
|
3609
|
-
id: id,
|
|
3610
|
-
name: id,
|
|
3611
|
-
className: 'form-control',
|
|
3612
|
-
value: value ? value : '',
|
|
3613
|
-
placeholder: placeholder,
|
|
3614
|
-
required: required,
|
|
3615
|
-
disabled: disabled,
|
|
3616
|
-
readOnly: readonly,
|
|
3617
|
-
autoFocus: autofocus,
|
|
3618
|
-
rows: options.rows,
|
|
3619
|
-
onBlur: handleBlur,
|
|
3620
|
-
onFocus: handleFocus,
|
|
3621
|
-
onChange: handleChange,
|
|
3622
|
-
"aria-describedby": utils.ariaDescribedByIds(id)
|
|
3623
|
-
});
|
|
3624
|
-
}
|
|
3625
|
-
TextareaWidget.defaultProps = {
|
|
3626
|
-
autofocus: false,
|
|
3627
|
-
options: {}
|
|
3628
|
-
};
|
|
3629
|
-
|
|
3630
|
-
/** The `TextWidget` component uses the `BaseInputTemplate`.
|
|
3631
|
-
*
|
|
3632
|
-
* @param props - The `WidgetProps` for this component
|
|
3633
|
-
*/
|
|
3634
|
-
function TextWidget(props) {
|
|
3635
|
-
const {
|
|
3636
|
-
options,
|
|
3637
|
-
registry
|
|
3638
|
-
} = props;
|
|
3639
|
-
const BaseInputTemplate = utils.getTemplate('BaseInputTemplate', registry, options);
|
|
3640
|
-
return jsxRuntime.jsx(BaseInputTemplate, {
|
|
3641
|
-
...props
|
|
3642
|
-
});
|
|
3643
|
-
}
|
|
3644
|
-
|
|
3645
|
-
/** The `TimeWidget` component uses the `BaseInputTemplate` changing the type to `time` and transforms
|
|
3646
|
-
* the value to undefined when it is falsy during the `onChange` handling.
|
|
3647
|
-
*
|
|
3648
|
-
* @param props - The `WidgetProps` for this component
|
|
3649
|
-
*/
|
|
3650
|
-
function TimeWidget(props) {
|
|
3651
|
-
const {
|
|
3652
|
-
onChange,
|
|
3653
|
-
options,
|
|
3654
|
-
registry
|
|
3655
|
-
} = props;
|
|
3656
|
-
const BaseInputTemplate = utils.getTemplate('BaseInputTemplate', registry, options);
|
|
3657
|
-
const handleChange = react.useCallback(value => onChange(value ? `${value}:00` : undefined), [onChange]);
|
|
3658
|
-
return jsxRuntime.jsx(BaseInputTemplate, {
|
|
3659
|
-
type: 'time',
|
|
3660
|
-
...props,
|
|
3661
|
-
onChange: handleChange
|
|
3662
|
-
});
|
|
3663
|
-
}
|
|
3664
|
-
|
|
3665
|
-
/** The `URLWidget` component uses the `BaseInputTemplate` changing the type to `url`.
|
|
3666
|
-
*
|
|
3667
|
-
* @param props - The `WidgetProps` for this component
|
|
3668
|
-
*/
|
|
3669
|
-
function URLWidget(props) {
|
|
3670
|
-
const {
|
|
3671
|
-
options,
|
|
3672
|
-
registry
|
|
3673
|
-
} = props;
|
|
3674
|
-
const BaseInputTemplate = utils.getTemplate('BaseInputTemplate', registry, options);
|
|
3675
|
-
return jsxRuntime.jsx(BaseInputTemplate, {
|
|
3676
|
-
type: 'url',
|
|
3677
|
-
...props
|
|
3678
|
-
});
|
|
3679
|
-
}
|
|
3680
|
-
|
|
3681
|
-
/** The `UpDownWidget` component uses the `BaseInputTemplate` changing the type to `number`.
|
|
3682
|
-
*
|
|
3683
|
-
* @param props - The `WidgetProps` for this component
|
|
3684
|
-
*/
|
|
3685
|
-
function UpDownWidget(props) {
|
|
3686
|
-
const {
|
|
3687
|
-
options,
|
|
3688
|
-
registry
|
|
3689
|
-
} = props;
|
|
3690
|
-
const BaseInputTemplate = utils.getTemplate('BaseInputTemplate', registry, options);
|
|
3691
|
-
return jsxRuntime.jsx(BaseInputTemplate, {
|
|
3692
|
-
type: 'number',
|
|
3693
|
-
...props
|
|
3694
|
-
});
|
|
3695
|
-
}
|
|
3696
|
-
|
|
3697
|
-
function widgets() {
|
|
3698
|
-
return {
|
|
3699
|
-
AltDateWidget,
|
|
3700
|
-
AltDateTimeWidget,
|
|
3701
|
-
CheckboxWidget,
|
|
3702
|
-
CheckboxesWidget,
|
|
3703
|
-
ColorWidget,
|
|
3704
|
-
DateWidget,
|
|
3705
|
-
DateTimeWidget,
|
|
3706
|
-
EmailWidget,
|
|
3707
|
-
FileWidget,
|
|
3708
|
-
HiddenWidget,
|
|
3709
|
-
PasswordWidget,
|
|
3710
|
-
RadioWidget,
|
|
3711
|
-
RangeWidget,
|
|
3712
|
-
SelectWidget,
|
|
3713
|
-
TextWidget,
|
|
3714
|
-
TextareaWidget,
|
|
3715
|
-
TimeWidget,
|
|
3716
|
-
UpDownWidget,
|
|
3717
|
-
URLWidget
|
|
3718
|
-
};
|
|
3719
|
-
}
|
|
3720
|
-
|
|
3721
|
-
/** The default registry consists of all the fields, templates and widgets provided in the core implementation,
|
|
3722
|
-
* plus an empty `rootSchema` and `formContext. We omit schemaUtils here because it cannot be defaulted without a
|
|
3723
|
-
* rootSchema and validator. It will be added into the computed registry later in the Form.
|
|
3724
|
-
*/
|
|
3725
|
-
function getDefaultRegistry() {
|
|
3726
|
-
return {
|
|
3727
|
-
fields: fields(),
|
|
3728
|
-
templates: templates(),
|
|
3729
|
-
widgets: widgets(),
|
|
3730
|
-
rootSchema: {},
|
|
3731
|
-
formContext: {},
|
|
3732
|
-
translateString: utils.englishStringTranslator
|
|
3733
|
-
};
|
|
3734
|
-
}
|
|
3735
|
-
|
|
3736
|
-
/** The `Form` component renders the outer form and all the fields defined in the `schema` */
|
|
3737
|
-
class Form extends react.Component {
|
|
3738
|
-
/** Constructs the `Form` from the `props`. Will setup the initial state from the props. It will also call the
|
|
3739
|
-
* `onChange` handler if the initially provided `formData` is modified to add missing default values as part of the
|
|
3740
|
-
* state construction.
|
|
3741
|
-
*
|
|
3742
|
-
* @param props - The initial props for the `Form`
|
|
3743
|
-
*/
|
|
3744
|
-
constructor(props) {
|
|
3745
|
-
super(props);
|
|
3746
|
-
/** The ref used to hold the `form` element, this needs to be `any` because `tagName` or `_internalFormWrapper` can
|
|
3747
|
-
* provide any possible type here
|
|
3748
|
-
*/
|
|
3749
|
-
this.formElement = void 0;
|
|
3750
|
-
/** Returns the `formData` with only the elements specified in the `fields` list
|
|
3751
|
-
*
|
|
3752
|
-
* @param formData - The data for the `Form`
|
|
3753
|
-
* @param fields - The fields to keep while filtering
|
|
3754
|
-
*/
|
|
3755
|
-
this.getUsedFormData = (formData, fields) => {
|
|
3756
|
-
// For the case of a single input form
|
|
3757
|
-
if (fields.length === 0 && typeof formData !== 'object') {
|
|
3758
|
-
return formData;
|
|
3759
|
-
}
|
|
3760
|
-
// _pick has incorrect type definition, it works with string[][], because lodash/hasIn supports it
|
|
3761
|
-
const data = _pick__default["default"](formData, fields);
|
|
3762
|
-
if (Array.isArray(formData)) {
|
|
3763
|
-
return Object.keys(data).map(key => data[key]);
|
|
3764
|
-
}
|
|
3765
|
-
return data;
|
|
3766
|
-
};
|
|
3767
|
-
/** Returns the list of field names from inspecting the `pathSchema` as well as using the `formData`
|
|
3768
|
-
*
|
|
3769
|
-
* @param pathSchema - The `PathSchema` object for the form
|
|
3770
|
-
* @param [formData] - The form data to use while checking for empty objects/arrays
|
|
3771
|
-
*/
|
|
3772
|
-
this.getFieldNames = (pathSchema, formData) => {
|
|
3773
|
-
const getAllPaths = (_obj, acc = [], paths = [[]]) => {
|
|
3774
|
-
Object.keys(_obj).forEach(key => {
|
|
3775
|
-
if (typeof _obj[key] === 'object') {
|
|
3776
|
-
const newPaths = paths.map(path => [...path, key]);
|
|
3777
|
-
// If an object is marked with additionalProperties, all its keys are valid
|
|
3778
|
-
if (_obj[key][utils.RJSF_ADDITONAL_PROPERTIES_FLAG] && _obj[key][utils.NAME_KEY] !== '') {
|
|
3779
|
-
acc.push(_obj[key][utils.NAME_KEY]);
|
|
3780
|
-
} else {
|
|
3781
|
-
getAllPaths(_obj[key], acc, newPaths);
|
|
3782
|
-
}
|
|
3783
|
-
} else if (key === utils.NAME_KEY && _obj[key] !== '') {
|
|
3784
|
-
paths.forEach(path => {
|
|
3785
|
-
const formValue = get__default["default"](formData, path);
|
|
3786
|
-
// adds path to fieldNames if it points to a value
|
|
3787
|
-
// or an empty object/array
|
|
3788
|
-
if (typeof formValue !== 'object' || isEmpty__default["default"](formValue)) {
|
|
3789
|
-
acc.push(path);
|
|
3790
|
-
}
|
|
3791
|
-
});
|
|
3792
|
-
}
|
|
3793
|
-
});
|
|
3794
|
-
return acc;
|
|
3795
|
-
};
|
|
3796
|
-
return getAllPaths(pathSchema);
|
|
3797
|
-
};
|
|
3798
|
-
/** Function to handle changes made to a field in the `Form`. This handler receives an entirely new copy of the
|
|
3799
|
-
* `formData` along with a new `ErrorSchema`. It will first update the `formData` with any missing default fields and
|
|
3800
|
-
* then, if `omitExtraData` and `liveOmit` are turned on, the `formData` will be filterer to remove any extra data not
|
|
3801
|
-
* in a form field. Then, the resulting formData will be validated if required. The state will be updated with the new
|
|
3802
|
-
* updated (potentially filtered) `formData`, any errors that resulted from validation. Finally the `onChange`
|
|
3803
|
-
* callback will be called if specified with the updated state.
|
|
3804
|
-
*
|
|
3805
|
-
* @param formData - The new form data from a change to a field
|
|
3806
|
-
* @param newErrorSchema - The new `ErrorSchema` based on the field change
|
|
3807
|
-
* @param id - The id of the field that caused the change
|
|
3808
|
-
*/
|
|
3809
|
-
this.onChange = (formData, newErrorSchema, id) => {
|
|
3810
|
-
const {
|
|
3811
|
-
extraErrors,
|
|
3812
|
-
omitExtraData,
|
|
3813
|
-
liveOmit,
|
|
3814
|
-
noValidate,
|
|
3815
|
-
liveValidate,
|
|
3816
|
-
onChange
|
|
3817
|
-
} = this.props;
|
|
3818
|
-
const {
|
|
3819
|
-
schemaUtils,
|
|
3820
|
-
schema
|
|
3821
|
-
} = this.state;
|
|
3822
|
-
if (utils.isObject(formData) || Array.isArray(formData)) {
|
|
3823
|
-
const newState = this.getStateFromProps(this.props, formData);
|
|
3824
|
-
formData = newState.formData;
|
|
3825
|
-
}
|
|
3826
|
-
const mustValidate = !noValidate && liveValidate;
|
|
3827
|
-
let state = {
|
|
3828
|
-
formData,
|
|
3829
|
-
schema
|
|
3830
|
-
};
|
|
3831
|
-
let newFormData = formData;
|
|
3832
|
-
if (omitExtraData === true && liveOmit === true) {
|
|
3833
|
-
const retrievedSchema = schemaUtils.retrieveSchema(schema, formData);
|
|
3834
|
-
const pathSchema = schemaUtils.toPathSchema(retrievedSchema, '', formData);
|
|
3835
|
-
const fieldNames = this.getFieldNames(pathSchema, formData);
|
|
3836
|
-
newFormData = this.getUsedFormData(formData, fieldNames);
|
|
3837
|
-
state = {
|
|
3838
|
-
formData: newFormData
|
|
3839
|
-
};
|
|
3840
|
-
}
|
|
3841
|
-
if (mustValidate) {
|
|
3842
|
-
const schemaValidation = this.validate(newFormData);
|
|
3843
|
-
let errors = schemaValidation.errors;
|
|
3844
|
-
let errorSchema = schemaValidation.errorSchema;
|
|
3845
|
-
const schemaValidationErrors = errors;
|
|
3846
|
-
const schemaValidationErrorSchema = errorSchema;
|
|
3847
|
-
if (extraErrors) {
|
|
3848
|
-
const merged = utils.validationDataMerge(schemaValidation, extraErrors);
|
|
3849
|
-
errorSchema = merged.errorSchema;
|
|
3850
|
-
errors = merged.errors;
|
|
3851
|
-
}
|
|
3852
|
-
state = {
|
|
3853
|
-
formData: newFormData,
|
|
3854
|
-
errors,
|
|
3855
|
-
errorSchema,
|
|
3856
|
-
schemaValidationErrors,
|
|
3857
|
-
schemaValidationErrorSchema
|
|
3858
|
-
};
|
|
3859
|
-
} else if (!noValidate && newErrorSchema) {
|
|
3860
|
-
const errorSchema = extraErrors ? utils.mergeObjects(newErrorSchema, extraErrors, 'preventDuplicates') : newErrorSchema;
|
|
3861
|
-
state = {
|
|
3862
|
-
formData: newFormData,
|
|
3863
|
-
errorSchema: errorSchema,
|
|
3864
|
-
errors: utils.toErrorList(errorSchema)
|
|
3865
|
-
};
|
|
3866
|
-
}
|
|
3867
|
-
this.setState(state, () => onChange && onChange({
|
|
3868
|
-
...this.state,
|
|
3869
|
-
...state
|
|
3870
|
-
}, id));
|
|
3871
|
-
};
|
|
3872
|
-
/**
|
|
3873
|
-
* Callback function to handle reset form data.
|
|
3874
|
-
* - Reset all fields with default values.
|
|
3875
|
-
* - Reset validations and errors
|
|
3876
|
-
*
|
|
3877
|
-
*/
|
|
3878
|
-
this.reset = () => {
|
|
3879
|
-
const {
|
|
3880
|
-
onChange
|
|
3881
|
-
} = this.props;
|
|
3882
|
-
const newState = this.getStateFromProps(this.props, undefined);
|
|
3883
|
-
const newFormData = newState.formData;
|
|
3884
|
-
const state = {
|
|
3885
|
-
formData: newFormData,
|
|
3886
|
-
errorSchema: {},
|
|
3887
|
-
errors: [],
|
|
3888
|
-
schemaValidationErrors: [],
|
|
3889
|
-
schemaValidationErrorSchema: {}
|
|
3890
|
-
};
|
|
3891
|
-
this.setState(state, () => onChange && onChange({
|
|
3892
|
-
...this.state,
|
|
3893
|
-
...state
|
|
3894
|
-
}));
|
|
3895
|
-
};
|
|
3896
|
-
/** Callback function to handle when a field on the form is blurred. Calls the `onBlur` callback for the `Form` if it
|
|
3897
|
-
* was provided.
|
|
3898
|
-
*
|
|
3899
|
-
* @param id - The unique `id` of the field that was blurred
|
|
3900
|
-
* @param data - The data associated with the field that was blurred
|
|
3901
|
-
*/
|
|
3902
|
-
this.onBlur = (id, data) => {
|
|
3903
|
-
const {
|
|
3904
|
-
onBlur
|
|
3905
|
-
} = this.props;
|
|
3906
|
-
if (onBlur) {
|
|
3907
|
-
onBlur(id, data);
|
|
3908
|
-
}
|
|
3909
|
-
};
|
|
3910
|
-
/** Callback function to handle when a field on the form is focused. Calls the `onFocus` callback for the `Form` if it
|
|
3911
|
-
* was provided.
|
|
3912
|
-
*
|
|
3913
|
-
* @param id - The unique `id` of the field that was focused
|
|
3914
|
-
* @param data - The data associated with the field that was focused
|
|
3915
|
-
*/
|
|
3916
|
-
this.onFocus = (id, data) => {
|
|
3917
|
-
const {
|
|
3918
|
-
onFocus
|
|
3919
|
-
} = this.props;
|
|
3920
|
-
if (onFocus) {
|
|
3921
|
-
onFocus(id, data);
|
|
3922
|
-
}
|
|
3923
|
-
};
|
|
3924
|
-
/** Callback function to handle when the form is submitted. First, it prevents the default event behavior. Nothing
|
|
3925
|
-
* happens if the target and currentTarget of the event are not the same. It will omit any extra data in the
|
|
3926
|
-
* `formData` in the state if `omitExtraData` is true. It will validate the resulting `formData`, reporting errors
|
|
3927
|
-
* via the `onError()` callback unless validation is disabled. Finally, it will add in any `extraErrors` and then call
|
|
3928
|
-
* back the `onSubmit` callback if it was provided.
|
|
3929
|
-
*
|
|
3930
|
-
* @param event - The submit HTML form event
|
|
3931
|
-
*/
|
|
3932
|
-
this.onSubmit = event => {
|
|
3933
|
-
event.preventDefault();
|
|
3934
|
-
if (event.target !== event.currentTarget) {
|
|
3935
|
-
return;
|
|
3936
|
-
}
|
|
3937
|
-
event.persist();
|
|
3938
|
-
const {
|
|
3939
|
-
omitExtraData,
|
|
3940
|
-
extraErrors,
|
|
3941
|
-
noValidate,
|
|
3942
|
-
onSubmit
|
|
3943
|
-
} = this.props;
|
|
3944
|
-
let {
|
|
3945
|
-
formData: newFormData
|
|
3946
|
-
} = this.state;
|
|
3947
|
-
const {
|
|
3948
|
-
schema,
|
|
3949
|
-
schemaUtils
|
|
3950
|
-
} = this.state;
|
|
3951
|
-
if (omitExtraData === true) {
|
|
3952
|
-
const retrievedSchema = schemaUtils.retrieveSchema(schema, newFormData);
|
|
3953
|
-
const pathSchema = schemaUtils.toPathSchema(retrievedSchema, '', newFormData);
|
|
3954
|
-
const fieldNames = this.getFieldNames(pathSchema, newFormData);
|
|
3955
|
-
newFormData = this.getUsedFormData(newFormData, fieldNames);
|
|
3956
|
-
}
|
|
3957
|
-
if (noValidate || this.validateForm()) {
|
|
3958
|
-
// There are no errors generated through schema validation.
|
|
3959
|
-
// Check for user provided errors and update state accordingly.
|
|
3960
|
-
const errorSchema = extraErrors || {};
|
|
3961
|
-
const errors = extraErrors ? utils.toErrorList(extraErrors) : [];
|
|
3962
|
-
this.setState({
|
|
3963
|
-
formData: newFormData,
|
|
3964
|
-
errors,
|
|
3965
|
-
errorSchema,
|
|
3966
|
-
schemaValidationErrors: [],
|
|
3967
|
-
schemaValidationErrorSchema: {}
|
|
3968
|
-
}, () => {
|
|
3969
|
-
if (onSubmit) {
|
|
3970
|
-
onSubmit({
|
|
3971
|
-
...this.state,
|
|
3972
|
-
formData: newFormData,
|
|
3973
|
-
status: 'submitted'
|
|
3974
|
-
}, event);
|
|
3975
|
-
}
|
|
3976
|
-
});
|
|
3977
|
-
}
|
|
3978
|
-
};
|
|
3979
|
-
if (!props.validator) {
|
|
3980
|
-
throw new Error('A validator is required for Form functionality to work');
|
|
3981
|
-
}
|
|
3982
|
-
this.state = this.getStateFromProps(props, props.formData);
|
|
3983
|
-
if (this.props.onChange && !utils.deepEquals(this.state.formData, this.props.formData)) {
|
|
3984
|
-
this.props.onChange(this.state);
|
|
3985
|
-
}
|
|
3986
|
-
this.formElement = /*#__PURE__*/react.createRef();
|
|
3987
|
-
}
|
|
3988
|
-
/** React lifecycle method that gets called before new props are provided, updates the state based on new props. It
|
|
3989
|
-
* will also call the`onChange` handler if the `formData` is modified to add missing default values as part of the
|
|
3990
|
-
* state construction.
|
|
3991
|
-
*
|
|
3992
|
-
* @param nextProps - The new set of props about to be applied to the `Form`
|
|
3993
|
-
*/
|
|
3994
|
-
UNSAFE_componentWillReceiveProps(nextProps) {
|
|
3995
|
-
const nextState = this.getStateFromProps(nextProps, nextProps.formData);
|
|
3996
|
-
if (!utils.deepEquals(nextState.formData, nextProps.formData) && !utils.deepEquals(nextState.formData, this.state.formData) && nextProps.onChange) {
|
|
3997
|
-
nextProps.onChange(nextState);
|
|
3998
|
-
}
|
|
3999
|
-
this.setState(nextState);
|
|
4000
|
-
}
|
|
4001
|
-
/** Extracts the updated state from the given `props` and `inputFormData`. As part of this process, the
|
|
4002
|
-
* `inputFormData` is first processed to add any missing required defaults. After that, the data is run through the
|
|
4003
|
-
* validation process IF required by the `props`.
|
|
4004
|
-
*
|
|
4005
|
-
* @param props - The props passed to the `Form`
|
|
4006
|
-
* @param inputFormData - The new or current data for the `Form`
|
|
4007
|
-
* @returns - The new state for the `Form`
|
|
4008
|
-
*/
|
|
4009
|
-
getStateFromProps(props, inputFormData) {
|
|
4010
|
-
const state = this.state || {};
|
|
4011
|
-
const schema = 'schema' in props ? props.schema : this.props.schema;
|
|
4012
|
-
const uiSchema = ('uiSchema' in props ? props.uiSchema : this.props.uiSchema) || {};
|
|
4013
|
-
const edit = typeof inputFormData !== 'undefined';
|
|
4014
|
-
const liveValidate = 'liveValidate' in props ? props.liveValidate : this.props.liveValidate;
|
|
4015
|
-
const mustValidate = edit && !props.noValidate && liveValidate;
|
|
4016
|
-
const rootSchema = schema;
|
|
4017
|
-
const experimental_defaultFormStateBehavior = 'experimental_defaultFormStateBehavior' in props ? props.experimental_defaultFormStateBehavior : this.props.experimental_defaultFormStateBehavior;
|
|
4018
|
-
let schemaUtils = state.schemaUtils;
|
|
4019
|
-
if (!schemaUtils || schemaUtils.doesSchemaUtilsDiffer(props.validator, rootSchema, experimental_defaultFormStateBehavior)) {
|
|
4020
|
-
schemaUtils = utils.createSchemaUtils(props.validator, rootSchema, experimental_defaultFormStateBehavior);
|
|
4021
|
-
}
|
|
4022
|
-
const formData = schemaUtils.getDefaultFormState(schema, inputFormData);
|
|
4023
|
-
const retrievedSchema = schemaUtils.retrieveSchema(schema, formData);
|
|
4024
|
-
const getCurrentErrors = () => {
|
|
4025
|
-
if (props.noValidate) {
|
|
4026
|
-
return {
|
|
4027
|
-
errors: [],
|
|
4028
|
-
errorSchema: {}
|
|
4029
|
-
};
|
|
4030
|
-
} else if (!props.liveValidate) {
|
|
4031
|
-
return {
|
|
4032
|
-
errors: state.schemaValidationErrors || [],
|
|
4033
|
-
errorSchema: state.schemaValidationErrorSchema || {}
|
|
4034
|
-
};
|
|
4035
|
-
}
|
|
4036
|
-
return {
|
|
4037
|
-
errors: state.errors || [],
|
|
4038
|
-
errorSchema: state.errorSchema || {}
|
|
4039
|
-
};
|
|
4040
|
-
};
|
|
4041
|
-
let errors;
|
|
4042
|
-
let errorSchema;
|
|
4043
|
-
let schemaValidationErrors = state.schemaValidationErrors;
|
|
4044
|
-
let schemaValidationErrorSchema = state.schemaValidationErrorSchema;
|
|
4045
|
-
if (mustValidate) {
|
|
4046
|
-
const schemaValidation = this.validate(formData, schema, schemaUtils);
|
|
4047
|
-
errors = schemaValidation.errors;
|
|
4048
|
-
errorSchema = schemaValidation.errorSchema;
|
|
4049
|
-
schemaValidationErrors = errors;
|
|
4050
|
-
schemaValidationErrorSchema = errorSchema;
|
|
4051
|
-
} else {
|
|
4052
|
-
const currentErrors = getCurrentErrors();
|
|
4053
|
-
errors = currentErrors.errors;
|
|
4054
|
-
errorSchema = currentErrors.errorSchema;
|
|
4055
|
-
}
|
|
4056
|
-
if (props.extraErrors) {
|
|
4057
|
-
const merged = utils.validationDataMerge({
|
|
4058
|
-
errorSchema,
|
|
4059
|
-
errors
|
|
4060
|
-
}, props.extraErrors);
|
|
4061
|
-
errorSchema = merged.errorSchema;
|
|
4062
|
-
errors = merged.errors;
|
|
4063
|
-
}
|
|
4064
|
-
const idSchema = schemaUtils.toIdSchema(retrievedSchema, uiSchema['ui:rootFieldId'], formData, props.idPrefix, props.idSeparator);
|
|
4065
|
-
const nextState = {
|
|
4066
|
-
schemaUtils,
|
|
4067
|
-
schema,
|
|
4068
|
-
uiSchema,
|
|
4069
|
-
idSchema,
|
|
4070
|
-
formData,
|
|
4071
|
-
edit,
|
|
4072
|
-
errors,
|
|
4073
|
-
errorSchema,
|
|
4074
|
-
schemaValidationErrors,
|
|
4075
|
-
schemaValidationErrorSchema
|
|
4076
|
-
};
|
|
4077
|
-
return nextState;
|
|
4078
|
-
}
|
|
4079
|
-
/** React lifecycle method that is used to determine whether component should be updated.
|
|
4080
|
-
*
|
|
4081
|
-
* @param nextProps - The next version of the props
|
|
4082
|
-
* @param nextState - The next version of the state
|
|
4083
|
-
* @returns - True if the component should be updated, false otherwise
|
|
4084
|
-
*/
|
|
4085
|
-
shouldComponentUpdate(nextProps, nextState) {
|
|
4086
|
-
return utils.shouldRender(this, nextProps, nextState);
|
|
4087
|
-
}
|
|
4088
|
-
/** Validates the `formData` against the `schema` using the `altSchemaUtils` (if provided otherwise it uses the
|
|
4089
|
-
* `schemaUtils` in the state), returning the results.
|
|
4090
|
-
*
|
|
4091
|
-
* @param formData - The new form data to validate
|
|
4092
|
-
* @param schema - The schema used to validate against
|
|
4093
|
-
* @param altSchemaUtils - The alternate schemaUtils to use for validation
|
|
4094
|
-
*/
|
|
4095
|
-
validate(formData, schema = this.props.schema, altSchemaUtils) {
|
|
4096
|
-
const schemaUtils = altSchemaUtils ? altSchemaUtils : this.state.schemaUtils;
|
|
4097
|
-
const {
|
|
4098
|
-
customValidate,
|
|
4099
|
-
transformErrors,
|
|
4100
|
-
uiSchema
|
|
4101
|
-
} = this.props;
|
|
4102
|
-
const resolvedSchema = schemaUtils.retrieveSchema(schema, formData);
|
|
4103
|
-
return schemaUtils.getValidator().validateFormData(formData, resolvedSchema, customValidate, transformErrors, uiSchema);
|
|
4104
|
-
}
|
|
4105
|
-
/** Renders any errors contained in the `state` in using the `ErrorList`, if not disabled by `showErrorList`. */
|
|
4106
|
-
renderErrors(registry) {
|
|
4107
|
-
const {
|
|
4108
|
-
errors,
|
|
4109
|
-
errorSchema,
|
|
4110
|
-
schema,
|
|
4111
|
-
uiSchema
|
|
4112
|
-
} = this.state;
|
|
4113
|
-
const {
|
|
4114
|
-
formContext
|
|
4115
|
-
} = this.props;
|
|
4116
|
-
const options = utils.getUiOptions(uiSchema);
|
|
4117
|
-
const ErrorListTemplate = utils.getTemplate('ErrorListTemplate', registry, options);
|
|
4118
|
-
if (errors && errors.length) {
|
|
4119
|
-
return jsxRuntime.jsx(ErrorListTemplate, {
|
|
4120
|
-
errors: errors,
|
|
4121
|
-
errorSchema: errorSchema || {},
|
|
4122
|
-
schema: schema,
|
|
4123
|
-
uiSchema: uiSchema,
|
|
4124
|
-
formContext: formContext,
|
|
4125
|
-
registry: registry
|
|
4126
|
-
});
|
|
4127
|
-
}
|
|
4128
|
-
return null;
|
|
4129
|
-
}
|
|
4130
|
-
/** Returns the registry for the form */
|
|
4131
|
-
getRegistry() {
|
|
4132
|
-
var _this$props$templates;
|
|
4133
|
-
const {
|
|
4134
|
-
translateString: customTranslateString,
|
|
4135
|
-
uiSchema = {}
|
|
4136
|
-
} = this.props;
|
|
4137
|
-
const {
|
|
4138
|
-
schemaUtils
|
|
4139
|
-
} = this.state;
|
|
4140
|
-
const {
|
|
4141
|
-
fields,
|
|
4142
|
-
templates,
|
|
4143
|
-
widgets,
|
|
4144
|
-
formContext,
|
|
4145
|
-
translateString
|
|
4146
|
-
} = getDefaultRegistry();
|
|
4147
|
-
return {
|
|
4148
|
-
fields: {
|
|
4149
|
-
...fields,
|
|
4150
|
-
...this.props.fields
|
|
4151
|
-
},
|
|
4152
|
-
templates: {
|
|
4153
|
-
...templates,
|
|
4154
|
-
...this.props.templates,
|
|
4155
|
-
ButtonTemplates: {
|
|
4156
|
-
...templates.ButtonTemplates,
|
|
4157
|
-
...((_this$props$templates = this.props.templates) === null || _this$props$templates === void 0 ? void 0 : _this$props$templates.ButtonTemplates)
|
|
4158
|
-
}
|
|
4159
|
-
},
|
|
4160
|
-
widgets: {
|
|
4161
|
-
...widgets,
|
|
4162
|
-
...this.props.widgets
|
|
4163
|
-
},
|
|
4164
|
-
rootSchema: this.props.schema,
|
|
4165
|
-
formContext: this.props.formContext || formContext,
|
|
4166
|
-
schemaUtils,
|
|
4167
|
-
translateString: customTranslateString || translateString,
|
|
4168
|
-
globalUiOptions: uiSchema[utils.UI_GLOBAL_OPTIONS_KEY]
|
|
4169
|
-
};
|
|
4170
|
-
}
|
|
4171
|
-
/** Provides a function that can be used to programmatically submit the `Form` */
|
|
4172
|
-
submit() {
|
|
4173
|
-
if (this.formElement.current) {
|
|
4174
|
-
this.formElement.current.dispatchEvent(new CustomEvent('submit', {
|
|
4175
|
-
cancelable: true
|
|
4176
|
-
}));
|
|
4177
|
-
this.formElement.current.requestSubmit();
|
|
4178
|
-
}
|
|
4179
|
-
}
|
|
4180
|
-
/** Attempts to focus on the field associated with the `error`. Uses the `property` field to compute path of the error
|
|
4181
|
-
* field, then, using the `idPrefix` and `idSeparator` converts that path into an id. Then the input element with that
|
|
4182
|
-
* id is attempted to be found using the `formElement` ref. If it is located, then it is focused.
|
|
4183
|
-
*
|
|
4184
|
-
* @param error - The error on which to focus
|
|
4185
|
-
*/
|
|
4186
|
-
focusOnError(error) {
|
|
4187
|
-
const {
|
|
4188
|
-
idPrefix = 'root',
|
|
4189
|
-
idSeparator = '_'
|
|
4190
|
-
} = this.props;
|
|
4191
|
-
const {
|
|
4192
|
-
property
|
|
4193
|
-
} = error;
|
|
4194
|
-
const path = _toPath__default["default"](property);
|
|
4195
|
-
if (path[0] === '') {
|
|
4196
|
-
// Most of the time the `.foo` property results in the first element being empty, so replace it with the idPrefix
|
|
4197
|
-
path[0] = idPrefix;
|
|
4198
|
-
} else {
|
|
4199
|
-
// Otherwise insert the idPrefix into the first location using unshift
|
|
4200
|
-
path.unshift(idPrefix);
|
|
4201
|
-
}
|
|
4202
|
-
const elementId = path.join(idSeparator);
|
|
4203
|
-
let field = this.formElement.current.elements[elementId];
|
|
4204
|
-
if (!field) {
|
|
4205
|
-
// if not an exact match, try finding an input starting with the element id (like radio buttons or checkboxes)
|
|
4206
|
-
field = this.formElement.current.querySelector(`input[id^=${elementId}`);
|
|
4207
|
-
}
|
|
4208
|
-
if (field && field.length) {
|
|
4209
|
-
// If we got a list with length > 0
|
|
4210
|
-
field = field[0];
|
|
4211
|
-
}
|
|
4212
|
-
if (field) {
|
|
4213
|
-
field.focus();
|
|
4214
|
-
}
|
|
4215
|
-
}
|
|
4216
|
-
/** Programmatically validate the form. If `onError` is provided, then it will be called with the list of errors the
|
|
4217
|
-
* same way as would happen on form submission.
|
|
4218
|
-
*
|
|
4219
|
-
* @returns - True if the form is valid, false otherwise.
|
|
4220
|
-
*/
|
|
4221
|
-
validateForm() {
|
|
4222
|
-
const {
|
|
4223
|
-
extraErrors,
|
|
4224
|
-
extraErrorsBlockSubmit,
|
|
4225
|
-
focusOnFirstError,
|
|
4226
|
-
onError
|
|
4227
|
-
} = this.props;
|
|
4228
|
-
const {
|
|
4229
|
-
formData
|
|
4230
|
-
} = this.state;
|
|
4231
|
-
const schemaValidation = this.validate(formData);
|
|
4232
|
-
let errors = schemaValidation.errors;
|
|
4233
|
-
let errorSchema = schemaValidation.errorSchema;
|
|
4234
|
-
const schemaValidationErrors = errors;
|
|
4235
|
-
const schemaValidationErrorSchema = errorSchema;
|
|
4236
|
-
if (errors.length > 0 || extraErrors && extraErrorsBlockSubmit) {
|
|
4237
|
-
if (extraErrors) {
|
|
4238
|
-
const merged = utils.validationDataMerge(schemaValidation, extraErrors);
|
|
4239
|
-
errorSchema = merged.errorSchema;
|
|
4240
|
-
errors = merged.errors;
|
|
4241
|
-
}
|
|
4242
|
-
if (focusOnFirstError) {
|
|
4243
|
-
if (typeof focusOnFirstError === 'function') {
|
|
4244
|
-
focusOnFirstError(errors[0]);
|
|
4245
|
-
} else {
|
|
4246
|
-
this.focusOnError(errors[0]);
|
|
4247
|
-
}
|
|
4248
|
-
}
|
|
4249
|
-
this.setState({
|
|
4250
|
-
errors,
|
|
4251
|
-
errorSchema,
|
|
4252
|
-
schemaValidationErrors,
|
|
4253
|
-
schemaValidationErrorSchema
|
|
4254
|
-
}, () => {
|
|
4255
|
-
if (onError) {
|
|
4256
|
-
onError(errors);
|
|
4257
|
-
} else {
|
|
4258
|
-
console.error('Form validation failed', errors);
|
|
4259
|
-
}
|
|
4260
|
-
});
|
|
4261
|
-
return false;
|
|
4262
|
-
}
|
|
4263
|
-
return true;
|
|
4264
|
-
}
|
|
4265
|
-
/** Renders the `Form` fields inside the <form> | `tagName` or `_internalFormWrapper`, rendering any errors if
|
|
4266
|
-
* needed along with the submit button or any children of the form.
|
|
4267
|
-
*/
|
|
4268
|
-
render() {
|
|
4269
|
-
const {
|
|
4270
|
-
children,
|
|
4271
|
-
id,
|
|
4272
|
-
idPrefix,
|
|
4273
|
-
idSeparator,
|
|
4274
|
-
className = '',
|
|
4275
|
-
tagName,
|
|
4276
|
-
name,
|
|
4277
|
-
method,
|
|
4278
|
-
target,
|
|
4279
|
-
action,
|
|
4280
|
-
autoComplete,
|
|
4281
|
-
enctype,
|
|
4282
|
-
acceptcharset,
|
|
4283
|
-
noHtml5Validate = false,
|
|
4284
|
-
disabled = false,
|
|
4285
|
-
readonly = false,
|
|
4286
|
-
formContext,
|
|
4287
|
-
showErrorList = 'top',
|
|
4288
|
-
_internalFormWrapper
|
|
4289
|
-
} = this.props;
|
|
4290
|
-
const {
|
|
4291
|
-
schema,
|
|
4292
|
-
uiSchema,
|
|
4293
|
-
formData,
|
|
4294
|
-
errorSchema,
|
|
4295
|
-
idSchema
|
|
4296
|
-
} = this.state;
|
|
4297
|
-
const registry = this.getRegistry();
|
|
4298
|
-
const {
|
|
4299
|
-
SchemaField: _SchemaField
|
|
4300
|
-
} = registry.fields;
|
|
4301
|
-
const {
|
|
4302
|
-
SubmitButton
|
|
4303
|
-
} = registry.templates.ButtonTemplates;
|
|
4304
|
-
// The `semantic-ui` and `material-ui` themes have `_internalFormWrapper`s that take an `as` prop that is the
|
|
4305
|
-
// PropTypes.elementType to use for the inner tag, so we'll need to pass `tagName` along if it is provided.
|
|
4306
|
-
// NOTE, the `as` prop is native to `semantic-ui` and is emulated in the `material-ui` theme
|
|
4307
|
-
const as = _internalFormWrapper ? tagName : undefined;
|
|
4308
|
-
const FormTag = _internalFormWrapper || tagName || 'form';
|
|
4309
|
-
let {
|
|
4310
|
-
[utils.SUBMIT_BTN_OPTIONS_KEY]: submitOptions = {}
|
|
4311
|
-
} = utils.getUiOptions(uiSchema);
|
|
4312
|
-
if (disabled) {
|
|
4313
|
-
submitOptions = {
|
|
4314
|
-
...submitOptions,
|
|
4315
|
-
props: {
|
|
4316
|
-
...submitOptions.props,
|
|
4317
|
-
disabled: true
|
|
4318
|
-
}
|
|
4319
|
-
};
|
|
4320
|
-
}
|
|
4321
|
-
const submitUiSchema = {
|
|
4322
|
-
[utils.UI_OPTIONS_KEY]: {
|
|
4323
|
-
[utils.SUBMIT_BTN_OPTIONS_KEY]: submitOptions
|
|
4324
|
-
}
|
|
4325
|
-
};
|
|
4326
|
-
return jsxRuntime.jsxs(FormTag, {
|
|
4327
|
-
className: className ? className : 'rjsf',
|
|
4328
|
-
id: id,
|
|
4329
|
-
name: name,
|
|
4330
|
-
method: method,
|
|
4331
|
-
target: target,
|
|
4332
|
-
action: action,
|
|
4333
|
-
autoComplete: autoComplete,
|
|
4334
|
-
encType: enctype,
|
|
4335
|
-
acceptCharset: acceptcharset,
|
|
4336
|
-
noValidate: noHtml5Validate,
|
|
4337
|
-
onSubmit: this.onSubmit,
|
|
4338
|
-
as: as,
|
|
4339
|
-
ref: this.formElement,
|
|
4340
|
-
children: [showErrorList === 'top' && this.renderErrors(registry), jsxRuntime.jsx(_SchemaField, {
|
|
4341
|
-
name: '',
|
|
4342
|
-
schema: schema,
|
|
4343
|
-
uiSchema: uiSchema,
|
|
4344
|
-
errorSchema: errorSchema,
|
|
4345
|
-
idSchema: idSchema,
|
|
4346
|
-
idPrefix: idPrefix,
|
|
4347
|
-
idSeparator: idSeparator,
|
|
4348
|
-
formContext: formContext,
|
|
4349
|
-
formData: formData,
|
|
4350
|
-
onChange: this.onChange,
|
|
4351
|
-
onBlur: this.onBlur,
|
|
4352
|
-
onFocus: this.onFocus,
|
|
4353
|
-
registry: registry,
|
|
4354
|
-
disabled: disabled,
|
|
4355
|
-
readonly: readonly
|
|
4356
|
-
}), children ? children : jsxRuntime.jsx(SubmitButton, {
|
|
4357
|
-
uiSchema: submitUiSchema,
|
|
4358
|
-
registry: registry
|
|
4359
|
-
}), showErrorList === 'bottom' && this.renderErrors(registry)]
|
|
4360
|
-
});
|
|
4361
|
-
}
|
|
4362
|
-
}
|
|
4363
|
-
|
|
4364
|
-
/** A Higher-Order component that creates a wrapper around a `Form` with the overrides from the `WithThemeProps` */
|
|
4365
|
-
function withTheme(themeProps) {
|
|
4366
|
-
return /*#__PURE__*/react.forwardRef(({
|
|
4367
|
-
fields,
|
|
4368
|
-
widgets,
|
|
4369
|
-
templates,
|
|
4370
|
-
...directProps
|
|
4371
|
-
}, ref) => {
|
|
4372
|
-
var _themeProps$templates, _templates;
|
|
4373
|
-
fields = {
|
|
4374
|
-
...(themeProps === null || themeProps === void 0 ? void 0 : themeProps.fields),
|
|
4375
|
-
...fields
|
|
4376
|
-
};
|
|
4377
|
-
widgets = {
|
|
4378
|
-
...(themeProps === null || themeProps === void 0 ? void 0 : themeProps.widgets),
|
|
4379
|
-
...widgets
|
|
4380
|
-
};
|
|
4381
|
-
templates = {
|
|
4382
|
-
...(themeProps === null || themeProps === void 0 ? void 0 : themeProps.templates),
|
|
4383
|
-
...templates,
|
|
4384
|
-
ButtonTemplates: {
|
|
4385
|
-
...(themeProps === null || themeProps === void 0 ? void 0 : (_themeProps$templates = themeProps.templates) === null || _themeProps$templates === void 0 ? void 0 : _themeProps$templates.ButtonTemplates),
|
|
4386
|
-
...((_templates = templates) === null || _templates === void 0 ? void 0 : _templates.ButtonTemplates)
|
|
4387
|
-
}
|
|
4388
|
-
};
|
|
4389
|
-
return jsxRuntime.jsx(Form, {
|
|
4390
|
-
...themeProps,
|
|
4391
|
-
...directProps,
|
|
4392
|
-
fields: fields,
|
|
4393
|
-
widgets: widgets,
|
|
4394
|
-
templates: templates,
|
|
4395
|
-
ref: ref
|
|
4396
|
-
});
|
|
4397
|
-
});
|
|
4398
|
-
}
|
|
4399
|
-
|
|
4400
|
-
exports["default"] = Form;
|
|
4401
|
-
exports.getDefaultRegistry = getDefaultRegistry;
|
|
4402
|
-
exports.withTheme = withTheme;
|
|
4403
|
-
//# sourceMappingURL=core.cjs.development.js.map
|