@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.
Files changed (232) hide show
  1. package/dist/core.umd.js +3464 -0
  2. package/dist/index.esm.js +3814 -0
  3. package/dist/index.esm.js.map +7 -0
  4. package/dist/index.js +3714 -5
  5. package/dist/index.js.map +7 -0
  6. package/{dist/index.d.ts → lib/components/Form.d.ts} +321 -337
  7. package/lib/components/Form.js +474 -0
  8. package/lib/components/Form.js.map +1 -0
  9. package/lib/components/fields/ArrayField.d.ts +179 -0
  10. package/lib/components/fields/ArrayField.js +568 -0
  11. package/lib/components/fields/ArrayField.js.map +1 -0
  12. package/lib/components/fields/BooleanField.d.ts +9 -0
  13. package/lib/components/fields/BooleanField.js +62 -0
  14. package/lib/components/fields/BooleanField.js.map +1 -0
  15. package/lib/components/fields/MultiSchemaField.d.ts +47 -0
  16. package/lib/components/fields/MultiSchemaField.js +129 -0
  17. package/lib/components/fields/MultiSchemaField.js.map +1 -0
  18. package/lib/components/fields/NullField.d.ts +8 -0
  19. package/lib/components/fields/NullField.js +17 -0
  20. package/lib/components/fields/NullField.js.map +1 -0
  21. package/lib/components/fields/NumberField.d.ts +21 -0
  22. package/lib/components/fields/NumberField.js +70 -0
  23. package/lib/components/fields/NumberField.js.map +1 -0
  24. package/lib/components/fields/ObjectField.d.ts +73 -0
  25. package/lib/components/fields/ObjectField.js +222 -0
  26. package/lib/components/fields/ObjectField.js.map +1 -0
  27. package/lib/components/fields/SchemaField.d.ts +10 -0
  28. package/lib/components/fields/SchemaField.js +172 -0
  29. package/lib/components/fields/SchemaField.js.map +1 -0
  30. package/lib/components/fields/StringField.d.ts +8 -0
  31. package/lib/components/fields/StringField.js +25 -0
  32. package/lib/components/fields/StringField.js.map +1 -0
  33. package/lib/components/fields/index.d.ts +3 -0
  34. package/lib/components/fields/index.js +24 -0
  35. package/lib/components/fields/index.js.map +1 -0
  36. package/lib/components/templates/ArrayFieldDescriptionTemplate.d.ts +8 -0
  37. package/lib/components/templates/ArrayFieldDescriptionTemplate.js +18 -0
  38. package/lib/components/templates/ArrayFieldDescriptionTemplate.js.map +1 -0
  39. package/lib/components/templates/ArrayFieldItemTemplate.d.ts +7 -0
  40. package/lib/components/templates/ArrayFieldItemTemplate.js +20 -0
  41. package/lib/components/templates/ArrayFieldItemTemplate.js.map +1 -0
  42. package/lib/components/templates/ArrayFieldTemplate.d.ts +7 -0
  43. package/lib/components/templates/ArrayFieldTemplate.js +22 -0
  44. package/lib/components/templates/ArrayFieldTemplate.js.map +1 -0
  45. package/lib/components/templates/ArrayFieldTitleTemplate.d.ts +8 -0
  46. package/lib/components/templates/ArrayFieldTitleTemplate.js +18 -0
  47. package/lib/components/templates/ArrayFieldTitleTemplate.js.map +1 -0
  48. package/lib/components/templates/BaseInputTemplate.d.ts +9 -0
  49. package/lib/components/templates/BaseInputTemplate.js +39 -0
  50. package/lib/components/templates/BaseInputTemplate.js.map +1 -0
  51. package/lib/components/templates/ButtonTemplates/AddButton.d.ts +5 -0
  52. package/lib/components/templates/ButtonTemplates/AddButton.js +10 -0
  53. package/lib/components/templates/ButtonTemplates/AddButton.js.map +1 -0
  54. package/lib/components/templates/ButtonTemplates/IconButton.d.ts +7 -0
  55. package/lib/components/templates/ButtonTemplates/IconButton.js +24 -0
  56. package/lib/components/templates/ButtonTemplates/IconButton.js.map +1 -0
  57. package/lib/components/templates/ButtonTemplates/SubmitButton.d.ts +5 -0
  58. package/lib/components/templates/ButtonTemplates/SubmitButton.js +12 -0
  59. package/lib/components/templates/ButtonTemplates/SubmitButton.js.map +1 -0
  60. package/lib/components/templates/ButtonTemplates/index.d.ts +3 -0
  61. package/lib/components/templates/ButtonTemplates/index.js +15 -0
  62. package/lib/components/templates/ButtonTemplates/index.js.map +1 -0
  63. package/lib/components/templates/DescriptionField.d.ts +7 -0
  64. package/lib/components/templates/DescriptionField.js +18 -0
  65. package/lib/components/templates/DescriptionField.js.map +1 -0
  66. package/lib/components/templates/ErrorList.d.ts +7 -0
  67. package/lib/components/templates/ErrorList.js +13 -0
  68. package/lib/components/templates/ErrorList.js.map +1 -0
  69. package/lib/components/templates/FieldErrorTemplate.d.ts +7 -0
  70. package/lib/components/templates/FieldErrorTemplate.js +19 -0
  71. package/lib/components/templates/FieldErrorTemplate.js.map +1 -0
  72. package/lib/components/templates/FieldHelpTemplate.d.ts +7 -0
  73. package/lib/components/templates/FieldHelpTemplate.js +18 -0
  74. package/lib/components/templates/FieldHelpTemplate.js.map +1 -0
  75. package/lib/components/templates/FieldTemplate/FieldTemplate.d.ts +8 -0
  76. package/lib/components/templates/FieldTemplate/FieldTemplate.js +18 -0
  77. package/lib/components/templates/FieldTemplate/FieldTemplate.js.map +1 -0
  78. package/lib/components/templates/FieldTemplate/Label.d.ts +14 -0
  79. package/lib/components/templates/FieldTemplate/Label.js +14 -0
  80. package/lib/components/templates/FieldTemplate/Label.js.map +1 -0
  81. package/lib/components/templates/FieldTemplate/index.d.ts +2 -0
  82. package/lib/components/templates/FieldTemplate/index.js +3 -0
  83. package/lib/components/templates/FieldTemplate/index.js.map +1 -0
  84. package/lib/components/templates/ObjectFieldTemplate.d.ts +9 -0
  85. package/lib/components/templates/ObjectFieldTemplate.js +18 -0
  86. package/lib/components/templates/ObjectFieldTemplate.js.map +1 -0
  87. package/lib/components/templates/TitleField.d.ts +7 -0
  88. package/lib/components/templates/TitleField.js +11 -0
  89. package/lib/components/templates/TitleField.js.map +1 -0
  90. package/lib/components/templates/UnsupportedField.d.ts +9 -0
  91. package/lib/components/templates/UnsupportedField.js +28 -0
  92. package/lib/components/templates/UnsupportedField.js.map +1 -0
  93. package/lib/components/templates/WrapIfAdditionalTemplate.d.ts +8 -0
  94. package/lib/components/templates/WrapIfAdditionalTemplate.js +21 -0
  95. package/lib/components/templates/WrapIfAdditionalTemplate.js.map +1 -0
  96. package/lib/components/templates/index.d.ts +3 -0
  97. package/lib/components/templates/index.js +36 -0
  98. package/lib/components/templates/index.js.map +1 -0
  99. package/lib/components/widgets/AltDateTimeWidget.d.ts +9 -0
  100. package/lib/components/widgets/AltDateTimeWidget.js +14 -0
  101. package/lib/components/widgets/AltDateTimeWidget.js.map +1 -0
  102. package/lib/components/widgets/AltDateWidget.d.ts +7 -0
  103. package/lib/components/widgets/AltDateWidget.js +77 -0
  104. package/lib/components/widgets/AltDateWidget.js.map +1 -0
  105. package/lib/components/widgets/CheckboxWidget.d.ts +9 -0
  106. package/lib/components/widgets/CheckboxWidget.js +23 -0
  107. package/lib/components/widgets/CheckboxWidget.js.map +1 -0
  108. package/lib/components/widgets/CheckboxesWidget.d.ts +9 -0
  109. package/lib/components/widgets/CheckboxesWidget.js +31 -0
  110. package/lib/components/widgets/CheckboxesWidget.js.map +1 -0
  111. package/lib/components/widgets/ColorWidget.d.ts +8 -0
  112. package/lib/components/widgets/ColorWidget.js +13 -0
  113. package/lib/components/widgets/ColorWidget.js.map +1 -0
  114. package/lib/components/widgets/DateTimeWidget.d.ts +8 -0
  115. package/lib/components/widgets/DateTimeWidget.js +13 -0
  116. package/lib/components/widgets/DateTimeWidget.js.map +1 -0
  117. package/lib/components/widgets/DateWidget.d.ts +8 -0
  118. package/lib/components/widgets/DateWidget.js +15 -0
  119. package/lib/components/widgets/DateWidget.js.map +1 -0
  120. package/lib/components/widgets/EmailWidget.d.ts +7 -0
  121. package/lib/components/widgets/EmailWidget.js +12 -0
  122. package/lib/components/widgets/EmailWidget.js.map +1 -0
  123. package/lib/components/widgets/FileWidget.d.ts +8 -0
  124. package/lib/components/widgets/FileWidget.js +105 -0
  125. package/lib/components/widgets/FileWidget.js.map +1 -0
  126. package/lib/components/widgets/HiddenWidget.d.ts +9 -0
  127. package/lib/components/widgets/HiddenWidget.js +11 -0
  128. package/lib/components/widgets/HiddenWidget.js.map +1 -0
  129. package/lib/components/widgets/PasswordWidget.d.ts +7 -0
  130. package/lib/components/widgets/PasswordWidget.js +12 -0
  131. package/lib/components/widgets/PasswordWidget.js.map +1 -0
  132. package/lib/components/widgets/RadioWidget.d.ts +9 -0
  133. package/lib/components/widgets/RadioWidget.js +24 -0
  134. package/lib/components/widgets/RadioWidget.js.map +1 -0
  135. package/lib/components/widgets/RangeWidget.d.ts +8 -0
  136. package/lib/components/widgets/RangeWidget.js +11 -0
  137. package/lib/components/widgets/RangeWidget.js.map +1 -0
  138. package/lib/components/widgets/SelectWidget.d.ts +9 -0
  139. package/lib/components/widgets/SelectWidget.js +41 -0
  140. package/lib/components/widgets/SelectWidget.js.map +1 -0
  141. package/lib/components/widgets/TextWidget.d.ts +7 -0
  142. package/lib/components/widgets/TextWidget.js +12 -0
  143. package/lib/components/widgets/TextWidget.js.map +1 -0
  144. package/lib/components/widgets/TextareaWidget.d.ts +14 -0
  145. package/lib/components/widgets/TextareaWidget.js +19 -0
  146. package/lib/components/widgets/TextareaWidget.js.map +1 -0
  147. package/lib/components/widgets/TimeWidget.d.ts +8 -0
  148. package/lib/components/widgets/TimeWidget.js +15 -0
  149. package/lib/components/widgets/TimeWidget.js.map +1 -0
  150. package/lib/components/widgets/URLWidget.d.ts +7 -0
  151. package/lib/components/widgets/URLWidget.js +12 -0
  152. package/lib/components/widgets/URLWidget.js.map +1 -0
  153. package/lib/components/widgets/UpDownWidget.d.ts +7 -0
  154. package/lib/components/widgets/UpDownWidget.js +12 -0
  155. package/lib/components/widgets/UpDownWidget.js.map +1 -0
  156. package/lib/components/widgets/index.d.ts +3 -0
  157. package/lib/components/widgets/index.js +44 -0
  158. package/lib/components/widgets/index.js.map +1 -0
  159. package/lib/getDefaultRegistry.d.ts +6 -0
  160. package/lib/getDefaultRegistry.js +19 -0
  161. package/lib/getDefaultRegistry.js.map +1 -0
  162. package/lib/index.d.ts +6 -0
  163. package/lib/index.js +6 -0
  164. package/lib/index.js.map +1 -0
  165. package/lib/withTheme.d.ts +9 -0
  166. package/lib/withTheme.js +16 -0
  167. package/lib/withTheme.js.map +1 -0
  168. package/package.json +23 -16
  169. package/src/components/Form.tsx +853 -0
  170. package/src/components/fields/ArrayField.tsx +875 -0
  171. package/src/components/fields/BooleanField.tsx +114 -0
  172. package/src/components/fields/MultiSchemaField.tsx +221 -0
  173. package/src/components/fields/NullField.tsx +22 -0
  174. package/src/components/fields/NumberField.tsx +86 -0
  175. package/src/components/fields/ObjectField.tsx +331 -0
  176. package/src/components/fields/SchemaField.tsx +360 -0
  177. package/src/components/fields/StringField.tsx +71 -0
  178. package/src/components/fields/index.ts +31 -0
  179. package/src/components/templates/ArrayFieldDescriptionTemplate.tsx +41 -0
  180. package/src/components/templates/ArrayFieldItemTemplate.tsx +90 -0
  181. package/src/components/templates/ArrayFieldTemplate.tsx +88 -0
  182. package/src/components/templates/ArrayFieldTitleTemplate.tsx +43 -0
  183. package/src/components/templates/BaseInputTemplate.tsx +102 -0
  184. package/src/components/templates/ButtonTemplates/AddButton.tsx +29 -0
  185. package/src/components/templates/ButtonTemplates/IconButton.tsx +77 -0
  186. package/src/components/templates/ButtonTemplates/SubmitButton.tsx +21 -0
  187. package/src/components/templates/ButtonTemplates/index.ts +22 -0
  188. package/src/components/templates/DescriptionField.tsx +29 -0
  189. package/src/components/templates/ErrorList.tsx +35 -0
  190. package/src/components/templates/FieldErrorTemplate.tsx +33 -0
  191. package/src/components/templates/FieldHelpTemplate.tsx +29 -0
  192. package/src/components/templates/FieldTemplate/FieldTemplate.tsx +41 -0
  193. package/src/components/templates/FieldTemplate/Label.tsx +27 -0
  194. package/src/components/templates/FieldTemplate/index.ts +3 -0
  195. package/src/components/templates/ObjectFieldTemplate.tsx +83 -0
  196. package/src/components/templates/TitleField.tsx +19 -0
  197. package/src/components/templates/UnsupportedField.tsx +37 -0
  198. package/src/components/templates/WrapIfAdditionalTemplate.tsx +80 -0
  199. package/src/components/templates/index.ts +43 -0
  200. package/src/components/widgets/AltDateTimeWidget.tsx +16 -0
  201. package/src/components/widgets/AltDateWidget.tsx +198 -0
  202. package/src/components/widgets/CheckboxWidget.tsx +92 -0
  203. package/src/components/widgets/CheckboxesWidget.tsx +92 -0
  204. package/src/components/widgets/ColorWidget.tsx +14 -0
  205. package/src/components/widgets/DateTimeWidget.tsx +31 -0
  206. package/src/components/widgets/DateWidget.tsx +17 -0
  207. package/src/components/widgets/EmailWidget.tsx +13 -0
  208. package/src/components/widgets/FileWidget.tsx +178 -0
  209. package/src/components/widgets/HiddenWidget.tsx +15 -0
  210. package/src/components/widgets/PasswordWidget.tsx +15 -0
  211. package/src/components/widgets/RadioWidget.tsx +88 -0
  212. package/src/components/widgets/RangeWidget.tsx +23 -0
  213. package/src/components/widgets/SelectWidget.tsx +100 -0
  214. package/src/components/widgets/TextWidget.tsx +13 -0
  215. package/src/components/widgets/TextareaWidget.tsx +61 -0
  216. package/src/components/widgets/TimeWidget.tsx +17 -0
  217. package/src/components/widgets/URLWidget.tsx +13 -0
  218. package/src/components/widgets/UpDownWidget.tsx +13 -0
  219. package/src/components/widgets/index.ts +51 -0
  220. package/src/getDefaultRegistry.ts +24 -0
  221. package/src/index.ts +8 -0
  222. package/src/withTheme.tsx +42 -0
  223. package/dist/core.cjs.development.js +0 -4403
  224. package/dist/core.cjs.development.js.map +0 -1
  225. package/dist/core.cjs.production.min.js +0 -2
  226. package/dist/core.cjs.production.min.js.map +0 -1
  227. package/dist/core.esm.js +0 -4383
  228. package/dist/core.esm.js.map +0 -1
  229. package/dist/core.umd.development.js +0 -4393
  230. package/dist/core.umd.development.js.map +0 -1
  231. package/dist/core.umd.production.min.js +0 -2
  232. 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