@rjsf/semantic-ui 5.9.0 → 5.11.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/semantic-ui.cjs.development.js +649 -632
- package/dist/semantic-ui.cjs.development.js.map +1 -1
- package/dist/semantic-ui.cjs.production.min.js +1 -1
- package/dist/semantic-ui.cjs.production.min.js.map +1 -1
- package/dist/semantic-ui.esm.js +649 -632
- package/dist/semantic-ui.esm.js.map +1 -1
- package/dist/semantic-ui.umd.development.js +649 -632
- package/dist/semantic-ui.umd.development.js.map +1 -1
- package/dist/semantic-ui.umd.production.min.js +1 -1
- package/dist/semantic-ui.umd.production.min.js.map +1 -1
- package/package.json +14 -14
|
@@ -14,54 +14,29 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
14
14
|
|
|
15
15
|
var map__default = /*#__PURE__*/_interopDefaultLegacy(map);
|
|
16
16
|
|
|
17
|
-
function _extends() {
|
|
18
|
-
_extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
19
|
-
for (var i = 1; i < arguments.length; i++) {
|
|
20
|
-
var source = arguments[i];
|
|
21
|
-
for (var key in source) {
|
|
22
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
23
|
-
target[key] = source[key];
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
return target;
|
|
28
|
-
};
|
|
29
|
-
return _extends.apply(this, arguments);
|
|
30
|
-
}
|
|
31
|
-
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
32
|
-
if (source == null) return {};
|
|
33
|
-
var target = {};
|
|
34
|
-
var sourceKeys = Object.keys(source);
|
|
35
|
-
var key, i;
|
|
36
|
-
for (i = 0; i < sourceKeys.length; i++) {
|
|
37
|
-
key = sourceKeys[i];
|
|
38
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
39
|
-
target[key] = source[key];
|
|
40
|
-
}
|
|
41
|
-
return target;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
var _excluded$4 = ["uiSchema", "registry", "color"];
|
|
45
17
|
/** The `AddButton` renders a button that represent the `Add` action on a form
|
|
46
18
|
*/
|
|
47
|
-
function AddButton(
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
19
|
+
function AddButton({
|
|
20
|
+
uiSchema,
|
|
21
|
+
registry,
|
|
22
|
+
color,
|
|
23
|
+
...props
|
|
24
|
+
}) {
|
|
25
|
+
const {
|
|
26
|
+
translateString
|
|
27
|
+
} = registry;
|
|
28
|
+
return jsxRuntime.jsx(semanticUiReact.Button, {
|
|
53
29
|
title: translateString(utils.TranslatableString.AddItemButton),
|
|
54
|
-
color: color
|
|
55
|
-
|
|
30
|
+
color: color,
|
|
31
|
+
...props,
|
|
56
32
|
icon: true,
|
|
57
33
|
size: 'tiny',
|
|
58
34
|
children: jsxRuntime.jsx(semanticUiReact.Icon, {
|
|
59
35
|
name: 'plus'
|
|
60
36
|
})
|
|
61
|
-
})
|
|
37
|
+
});
|
|
62
38
|
}
|
|
63
39
|
|
|
64
|
-
var _excluded$3 = ["wrap", "component"];
|
|
65
40
|
/**
|
|
66
41
|
* Extract props meant for semantic UI components from props that are
|
|
67
42
|
* passed to Widgets, Templates and Fields.
|
|
@@ -73,25 +48,25 @@ var _excluded$3 = ["wrap", "component"];
|
|
|
73
48
|
* @param {Object?} params.defaultContextProps
|
|
74
49
|
* @returns {any}
|
|
75
50
|
*/
|
|
76
|
-
function getSemanticProps(
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
defaultContextProps = _ref$defaultContextPr === void 0 ? {} : _ref$defaultContextPr;
|
|
90
|
-
var formContextProps = formContext.semantic;
|
|
91
|
-
var schemaProps = utils.getUiOptions(uiSchema).semantic;
|
|
92
|
-
var optionProps = options.semantic;
|
|
51
|
+
function getSemanticProps({
|
|
52
|
+
formContext = {},
|
|
53
|
+
uiSchema = {},
|
|
54
|
+
options = {},
|
|
55
|
+
defaultSchemaProps = {
|
|
56
|
+
fluid: true,
|
|
57
|
+
inverted: false
|
|
58
|
+
},
|
|
59
|
+
defaultContextProps = {}
|
|
60
|
+
}) {
|
|
61
|
+
const formContextProps = formContext.semantic;
|
|
62
|
+
const schemaProps = utils.getUiOptions(uiSchema).semantic;
|
|
63
|
+
const optionProps = options.semantic;
|
|
93
64
|
// formContext props should overide other props
|
|
94
|
-
return Object.assign({},
|
|
65
|
+
return Object.assign({}, {
|
|
66
|
+
...defaultSchemaProps
|
|
67
|
+
}, {
|
|
68
|
+
...defaultContextProps
|
|
69
|
+
}, schemaProps, optionProps, formContextProps);
|
|
95
70
|
}
|
|
96
71
|
/**
|
|
97
72
|
* Extract error props meant for semantic UI components from props that are
|
|
@@ -102,23 +77,22 @@ function getSemanticProps(_ref) {
|
|
|
102
77
|
* @param {Object?} params.defaultProps
|
|
103
78
|
* @returns {any}
|
|
104
79
|
*/
|
|
105
|
-
function getSemanticErrorProps(
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
return Object.assign({}, _extends({}, defaultProps), schemaProps, optionProps, formContextProps);
|
|
80
|
+
function getSemanticErrorProps({
|
|
81
|
+
formContext = {},
|
|
82
|
+
uiSchema = {},
|
|
83
|
+
options = {},
|
|
84
|
+
defaultProps = {
|
|
85
|
+
size: 'small',
|
|
86
|
+
pointing: 'above'
|
|
87
|
+
}
|
|
88
|
+
}) {
|
|
89
|
+
const formContextProps = formContext.semantic && formContext.semantic.errorOptions;
|
|
90
|
+
const semanticOptions = utils.getUiOptions(uiSchema).semantic;
|
|
91
|
+
const schemaProps = semanticOptions && semanticOptions.errorOptions;
|
|
92
|
+
const optionProps = options.semantic && options.semantic.errorOptions;
|
|
93
|
+
return Object.assign({}, {
|
|
94
|
+
...defaultProps
|
|
95
|
+
}, schemaProps, optionProps, formContextProps);
|
|
122
96
|
}
|
|
123
97
|
/**
|
|
124
98
|
* Combine multiple strings containing class names into a single string,
|
|
@@ -129,20 +103,13 @@ function getSemanticErrorProps(_ref2) {
|
|
|
129
103
|
* @param {Array} omit
|
|
130
104
|
* @returns {string}
|
|
131
105
|
*/
|
|
132
|
-
function cleanClassNames(classNameArr, omit) {
|
|
133
|
-
if (omit === void 0) {
|
|
134
|
-
omit = [];
|
|
135
|
-
}
|
|
106
|
+
function cleanClassNames(classNameArr, omit = []) {
|
|
136
107
|
// Split each arg on whitespace, and add it to an array. Skip false-y args
|
|
137
108
|
// like "" and undefined.
|
|
138
|
-
|
|
139
|
-
return previous.concat(current.trim().split(/\s+/));
|
|
140
|
-
}, []);
|
|
109
|
+
const classList = classNameArr.filter(Boolean).reduce((previous, current) => previous.concat(current.trim().split(/\s+/)), []);
|
|
141
110
|
// Remove any class names from omit, and make the rest unique before
|
|
142
111
|
// returning them as a string
|
|
143
|
-
return [
|
|
144
|
-
return !omit.includes(cn);
|
|
145
|
-
}))).join(' ');
|
|
112
|
+
return [...new Set(classList.filter(cn => !omit.includes(cn)))].join(' ');
|
|
146
113
|
}
|
|
147
114
|
/**
|
|
148
115
|
*
|
|
@@ -152,60 +119,63 @@ function cleanClassNames(classNameArr, omit) {
|
|
|
152
119
|
* @returns {*}
|
|
153
120
|
* @constructor
|
|
154
121
|
*/
|
|
155
|
-
function MaybeWrap(
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
return wrap ? jsxRuntime.jsx(Component,
|
|
122
|
+
function MaybeWrap({
|
|
123
|
+
wrap,
|
|
124
|
+
component: Component = 'div',
|
|
125
|
+
...props
|
|
126
|
+
}) {
|
|
127
|
+
return wrap ? jsxRuntime.jsx(Component, {
|
|
128
|
+
...props
|
|
129
|
+
}) : props.children;
|
|
161
130
|
}
|
|
162
131
|
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
};
|
|
168
|
-
};
|
|
132
|
+
const gridStyle = vertical => ({
|
|
133
|
+
display: 'grid',
|
|
134
|
+
gridTemplateColumns: `1fr ${vertical ? 65 : 150}px`
|
|
135
|
+
});
|
|
169
136
|
/** The `ArrayFieldItemTemplate` component is the template used to render an items of an array.
|
|
170
137
|
*
|
|
171
138
|
* @param props - The `ArrayFieldTemplateItemType` props for the component
|
|
172
139
|
*/
|
|
173
140
|
function ArrayFieldItemTemplate(props) {
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
141
|
+
const {
|
|
142
|
+
children,
|
|
143
|
+
disabled,
|
|
144
|
+
hasToolbar,
|
|
145
|
+
hasCopy,
|
|
146
|
+
hasMoveDown,
|
|
147
|
+
hasMoveUp,
|
|
148
|
+
hasRemove,
|
|
149
|
+
index,
|
|
150
|
+
onCopyIndexClick,
|
|
151
|
+
onDropIndexClick,
|
|
152
|
+
onReorderClick,
|
|
153
|
+
readonly,
|
|
154
|
+
uiSchema,
|
|
155
|
+
registry
|
|
156
|
+
} = props;
|
|
157
|
+
const {
|
|
158
|
+
CopyButton,
|
|
159
|
+
MoveDownButton,
|
|
160
|
+
MoveUpButton,
|
|
161
|
+
RemoveButton
|
|
162
|
+
} = registry.templates.ButtonTemplates;
|
|
163
|
+
const uiOptions = utils.getUiOptions(uiSchema);
|
|
194
164
|
// Pull the semantic props out of the uiOptions that were put in via the ArrayFieldTemplate
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
wrapItem = _uiOptions$semantic$w === void 0 ? false : _uiOptions$semantic$w;
|
|
165
|
+
const {
|
|
166
|
+
horizontalButtons = true,
|
|
167
|
+
wrapItem = false
|
|
168
|
+
} = uiOptions.semantic;
|
|
200
169
|
return jsxRuntime.jsx("div", {
|
|
201
170
|
className: 'array-item',
|
|
202
171
|
children: jsxRuntime.jsx(MaybeWrap, {
|
|
203
172
|
wrap: wrapItem,
|
|
204
173
|
component: semanticUiReact.Segment,
|
|
205
174
|
children: jsxRuntime.jsxs(semanticUiReact.Grid, {
|
|
206
|
-
style:
|
|
175
|
+
style: {
|
|
176
|
+
...gridStyle(!horizontalButtons),
|
|
207
177
|
alignItems: 'center'
|
|
208
|
-
}
|
|
178
|
+
},
|
|
209
179
|
children: [jsxRuntime.jsx(semanticUiReact.Grid.Column, {
|
|
210
180
|
width: 16,
|
|
211
181
|
verticalAlign: 'middle',
|
|
@@ -246,45 +216,54 @@ function ArrayFieldItemTemplate(props) {
|
|
|
246
216
|
});
|
|
247
217
|
}
|
|
248
218
|
|
|
249
|
-
var _excluded$2 = ["key", "uiSchema"];
|
|
250
219
|
/** The `ArrayFieldTemplate` component is the template used to render all items in an array.
|
|
251
220
|
*
|
|
252
221
|
* @param props - The `ArrayFieldTemplateItemType` props for the component
|
|
253
222
|
*/
|
|
254
223
|
function ArrayFieldTemplate(props) {
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
224
|
+
const {
|
|
225
|
+
uiSchema,
|
|
226
|
+
idSchema,
|
|
227
|
+
canAdd,
|
|
228
|
+
className,
|
|
229
|
+
// classNames, This is not part of the type, so it is likely never passed in
|
|
230
|
+
disabled,
|
|
231
|
+
formContext,
|
|
232
|
+
items,
|
|
233
|
+
onAddClick,
|
|
234
|
+
// options, This is not part of the type, so it is likely never passed in
|
|
235
|
+
readonly,
|
|
236
|
+
required,
|
|
237
|
+
schema,
|
|
238
|
+
title,
|
|
239
|
+
registry
|
|
240
|
+
} = props;
|
|
241
|
+
const semanticProps = getSemanticProps({
|
|
242
|
+
uiSchema,
|
|
243
|
+
formContext,
|
|
271
244
|
defaultSchemaProps: {
|
|
272
245
|
horizontalButtons: true,
|
|
273
246
|
wrapItem: false
|
|
274
247
|
}
|
|
275
248
|
});
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
249
|
+
const {
|
|
250
|
+
horizontalButtons,
|
|
251
|
+
wrapItem
|
|
252
|
+
} = semanticProps;
|
|
253
|
+
const semantic = {
|
|
254
|
+
horizontalButtons,
|
|
255
|
+
wrapItem
|
|
281
256
|
};
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
257
|
+
const uiOptions = utils.getUiOptions(uiSchema);
|
|
258
|
+
const ArrayFieldDescriptionTemplate = utils.getTemplate('ArrayFieldDescriptionTemplate', registry, uiOptions);
|
|
259
|
+
const ArrayFieldItemTemplate = utils.getTemplate('ArrayFieldItemTemplate', registry, uiOptions);
|
|
260
|
+
const ArrayFieldTitleTemplate = utils.getTemplate('ArrayFieldTitleTemplate', registry, uiOptions);
|
|
286
261
|
// Button templates are not overridden in the uiSchema
|
|
287
|
-
|
|
262
|
+
const {
|
|
263
|
+
ButtonTemplates: {
|
|
264
|
+
AddButton
|
|
265
|
+
}
|
|
266
|
+
} = registry.templates;
|
|
288
267
|
return jsxRuntime.jsxs("div", {
|
|
289
268
|
className: cleanClassNames([className, utils.isFixedItems(schema) ? '' : 'sortable-form-fields']),
|
|
290
269
|
children: [jsxRuntime.jsx(ArrayFieldTitleTemplate, {
|
|
@@ -303,19 +282,23 @@ function ArrayFieldTemplate(props) {
|
|
|
303
282
|
}), jsxRuntime.jsxs("div", {
|
|
304
283
|
children: [jsxRuntime.jsx("div", {
|
|
305
284
|
className: 'row array-item-list',
|
|
306
|
-
children: items && items.map(
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
|
|
285
|
+
children: items && items.map(({
|
|
286
|
+
key,
|
|
287
|
+
uiSchema: itemUiSchema = {},
|
|
288
|
+
...props
|
|
289
|
+
}) => {
|
|
312
290
|
// Merge in the semantic props from the ArrayFieldTemplate into each of the items
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
291
|
+
const mergedUiSchema = {
|
|
292
|
+
...itemUiSchema,
|
|
293
|
+
[utils.UI_OPTIONS_KEY]: {
|
|
294
|
+
...itemUiSchema[utils.UI_OPTIONS_KEY],
|
|
295
|
+
semantic
|
|
296
|
+
}
|
|
297
|
+
};
|
|
298
|
+
return jsxRuntime.jsx(ArrayFieldItemTemplate, {
|
|
299
|
+
...props,
|
|
317
300
|
uiSchema: mergedUiSchema
|
|
318
|
-
}
|
|
301
|
+
}, key);
|
|
319
302
|
})
|
|
320
303
|
}), canAdd && jsxRuntime.jsx("div", {
|
|
321
304
|
style: {
|
|
@@ -330,7 +313,7 @@ function ArrayFieldTemplate(props) {
|
|
|
330
313
|
registry: registry
|
|
331
314
|
})
|
|
332
315
|
})]
|
|
333
|
-
},
|
|
316
|
+
}, `array-item-list-${idSchema.$id}`)]
|
|
334
317
|
});
|
|
335
318
|
}
|
|
336
319
|
|
|
@@ -341,63 +324,61 @@ function ArrayFieldTemplate(props) {
|
|
|
341
324
|
* @param props - The `WidgetProps` for this template
|
|
342
325
|
*/
|
|
343
326
|
function BaseInputTemplate(props) {
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
rawErrors =
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
327
|
+
const {
|
|
328
|
+
id,
|
|
329
|
+
placeholder,
|
|
330
|
+
label,
|
|
331
|
+
hideLabel,
|
|
332
|
+
value,
|
|
333
|
+
required,
|
|
334
|
+
readonly,
|
|
335
|
+
disabled,
|
|
336
|
+
onChange,
|
|
337
|
+
onChangeOverride,
|
|
338
|
+
onBlur,
|
|
339
|
+
onFocus,
|
|
340
|
+
autofocus,
|
|
341
|
+
options,
|
|
342
|
+
schema,
|
|
343
|
+
uiSchema,
|
|
344
|
+
formContext,
|
|
345
|
+
type,
|
|
346
|
+
rawErrors = []
|
|
347
|
+
} = props;
|
|
348
|
+
const inputProps = utils.getInputProps(schema, type, options);
|
|
349
|
+
const semanticProps = getSemanticProps({
|
|
350
|
+
uiSchema,
|
|
351
|
+
formContext,
|
|
352
|
+
options
|
|
369
353
|
});
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
var _onFocus = function _onFocus() {
|
|
378
|
-
return onFocus && onFocus(id, value);
|
|
379
|
-
};
|
|
354
|
+
const _onChange = ({
|
|
355
|
+
target: {
|
|
356
|
+
value
|
|
357
|
+
}
|
|
358
|
+
}) => onChange(value === '' ? options.emptyValue : value);
|
|
359
|
+
const _onBlur = () => onBlur && onBlur(id, value);
|
|
360
|
+
const _onFocus = () => onFocus && onFocus(id, value);
|
|
380
361
|
return jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
381
|
-
children: [jsxRuntime.jsx(semanticUiReact.Form.Input,
|
|
362
|
+
children: [jsxRuntime.jsx(semanticUiReact.Form.Input, {
|
|
382
363
|
id: id,
|
|
383
364
|
name: id,
|
|
384
|
-
placeholder: placeholder
|
|
385
|
-
|
|
365
|
+
placeholder: placeholder,
|
|
366
|
+
...inputProps,
|
|
386
367
|
label: utils.labelValue(label || undefined, hideLabel, false),
|
|
387
368
|
required: required,
|
|
388
369
|
autoFocus: autofocus,
|
|
389
370
|
disabled: disabled || readonly,
|
|
390
|
-
list: schema.examples ? utils.examplesId(id) : undefined
|
|
391
|
-
|
|
371
|
+
list: schema.examples ? utils.examplesId(id) : undefined,
|
|
372
|
+
...semanticProps,
|
|
392
373
|
value: value || value === 0 ? value : '',
|
|
393
374
|
error: rawErrors.length > 0,
|
|
394
375
|
onChange: onChangeOverride || _onChange,
|
|
395
376
|
onBlur: _onBlur,
|
|
396
377
|
onFocus: _onFocus,
|
|
397
378
|
"aria-describedby": utils.ariaDescribedByIds(id, !!schema.examples)
|
|
398
|
-
}
|
|
379
|
+
}, id), Array.isArray(schema.examples) && jsxRuntime.jsx("datalist", {
|
|
399
380
|
id: utils.examplesId(id),
|
|
400
|
-
children: schema.examples.concat(schema
|
|
381
|
+
children: schema.examples.concat(schema.default && !schema.examples.includes(schema.default) ? [schema.default] : []).map(example => {
|
|
401
382
|
return jsxRuntime.jsx("option", {
|
|
402
383
|
value: example
|
|
403
384
|
}, example);
|
|
@@ -411,8 +392,10 @@ function BaseInputTemplate(props) {
|
|
|
411
392
|
* @param props - The `DescriptionFieldProps` for this component
|
|
412
393
|
*/
|
|
413
394
|
function DescriptionField(props) {
|
|
414
|
-
|
|
415
|
-
|
|
395
|
+
const {
|
|
396
|
+
id,
|
|
397
|
+
description
|
|
398
|
+
} = props;
|
|
416
399
|
if (!description) {
|
|
417
400
|
return null;
|
|
418
401
|
}
|
|
@@ -427,72 +410,93 @@ function DescriptionField(props) {
|
|
|
427
410
|
*
|
|
428
411
|
* @param props - The `ErrorListProps` for this component
|
|
429
412
|
*/
|
|
430
|
-
function ErrorList(
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
413
|
+
function ErrorList({
|
|
414
|
+
errors,
|
|
415
|
+
registry
|
|
416
|
+
}) {
|
|
417
|
+
const {
|
|
418
|
+
translateString
|
|
419
|
+
} = registry;
|
|
434
420
|
return jsxRuntime.jsxs(semanticUiReact.Message, {
|
|
435
421
|
negative: true,
|
|
436
422
|
children: [jsxRuntime.jsx(semanticUiReact.Message.Header, {
|
|
437
423
|
children: translateString(utils.TranslatableString.ErrorsLabel)
|
|
438
424
|
}), jsxRuntime.jsx(semanticUiReact.Message.List, {
|
|
439
|
-
children: errors.map(
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
}, "error-" + index);
|
|
443
|
-
})
|
|
425
|
+
children: errors.map((error, index) => jsxRuntime.jsx(semanticUiReact.Message.Item, {
|
|
426
|
+
children: error.stack
|
|
427
|
+
}, `error-${index}`))
|
|
444
428
|
})]
|
|
445
429
|
});
|
|
446
430
|
}
|
|
447
431
|
|
|
448
|
-
var _excluded$1 = ["icon", "iconType", "color", "className", "uiSchema", "registry"];
|
|
449
432
|
function IconButton(props) {
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
433
|
+
const {
|
|
434
|
+
icon,
|
|
435
|
+
iconType,
|
|
436
|
+
color,
|
|
437
|
+
className,
|
|
438
|
+
uiSchema,
|
|
439
|
+
registry,
|
|
440
|
+
...otherProps
|
|
441
|
+
} = props;
|
|
442
|
+
return jsxRuntime.jsx(semanticUiReact.Button, {
|
|
456
443
|
icon: icon,
|
|
457
444
|
size: iconType,
|
|
458
445
|
color: color,
|
|
459
|
-
className: className
|
|
460
|
-
|
|
446
|
+
className: className,
|
|
447
|
+
...otherProps
|
|
448
|
+
});
|
|
461
449
|
}
|
|
462
450
|
function CopyButton(props) {
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
451
|
+
const {
|
|
452
|
+
registry: {
|
|
453
|
+
translateString
|
|
454
|
+
}
|
|
455
|
+
} = props;
|
|
456
|
+
return jsxRuntime.jsx(IconButton, {
|
|
457
|
+
title: translateString(utils.TranslatableString.CopyButton),
|
|
458
|
+
...props,
|
|
467
459
|
icon: 'copy'
|
|
468
|
-
})
|
|
460
|
+
});
|
|
469
461
|
}
|
|
470
462
|
function MoveDownButton(props) {
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
463
|
+
const {
|
|
464
|
+
registry: {
|
|
465
|
+
translateString
|
|
466
|
+
}
|
|
467
|
+
} = props;
|
|
468
|
+
return jsxRuntime.jsx(IconButton, {
|
|
469
|
+
title: translateString(utils.TranslatableString.MoveDownButton),
|
|
470
|
+
...props,
|
|
475
471
|
icon: 'angle down'
|
|
476
|
-
})
|
|
472
|
+
});
|
|
477
473
|
}
|
|
478
474
|
function MoveUpButton(props) {
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
475
|
+
const {
|
|
476
|
+
registry: {
|
|
477
|
+
translateString
|
|
478
|
+
}
|
|
479
|
+
} = props;
|
|
480
|
+
return jsxRuntime.jsx(IconButton, {
|
|
481
|
+
title: translateString(utils.TranslatableString.MoveUpButton),
|
|
482
|
+
...props,
|
|
483
483
|
icon: 'angle up'
|
|
484
|
-
})
|
|
484
|
+
});
|
|
485
485
|
}
|
|
486
486
|
function RemoveButton(props) {
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
487
|
+
const {
|
|
488
|
+
registry: {
|
|
489
|
+
translateString
|
|
490
|
+
}
|
|
491
|
+
} = props;
|
|
492
|
+
return jsxRuntime.jsx(IconButton, {
|
|
493
|
+
title: translateString(utils.TranslatableString.RemoveButton),
|
|
494
|
+
...props,
|
|
491
495
|
icon: 'trash'
|
|
492
|
-
})
|
|
496
|
+
});
|
|
493
497
|
}
|
|
494
498
|
|
|
495
|
-
|
|
499
|
+
const DEFAULT_OPTIONS$1 = {
|
|
496
500
|
options: {
|
|
497
501
|
pointing: 'above',
|
|
498
502
|
size: 'small'
|
|
@@ -502,21 +506,26 @@ var DEFAULT_OPTIONS$1 = {
|
|
|
502
506
|
*
|
|
503
507
|
* @param props - The `FieldErrorProps` for the errors being rendered
|
|
504
508
|
*/
|
|
505
|
-
function FieldErrorTemplate(
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
formContext
|
|
513
|
-
|
|
509
|
+
function FieldErrorTemplate({
|
|
510
|
+
errors,
|
|
511
|
+
idSchema,
|
|
512
|
+
uiSchema,
|
|
513
|
+
registry
|
|
514
|
+
}) {
|
|
515
|
+
const {
|
|
516
|
+
formContext
|
|
517
|
+
} = registry;
|
|
518
|
+
const options = getSemanticErrorProps({
|
|
519
|
+
formContext,
|
|
520
|
+
uiSchema,
|
|
514
521
|
defaultProps: DEFAULT_OPTIONS$1
|
|
515
522
|
});
|
|
516
|
-
|
|
517
|
-
|
|
523
|
+
const {
|
|
524
|
+
pointing,
|
|
525
|
+
size
|
|
526
|
+
} = options;
|
|
518
527
|
if (errors && errors.length > 0) {
|
|
519
|
-
|
|
528
|
+
const id = utils.errorId(idSchema);
|
|
520
529
|
return jsxRuntime.jsx(semanticUiReact.Label, {
|
|
521
530
|
id: id,
|
|
522
531
|
color: 'red',
|
|
@@ -525,11 +534,9 @@ function FieldErrorTemplate(_ref) {
|
|
|
525
534
|
basic: true,
|
|
526
535
|
children: jsxRuntime.jsx(semanticUiReact.List, {
|
|
527
536
|
bulleted: true,
|
|
528
|
-
children: errors.map(
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
}, nanoid.nanoid());
|
|
532
|
-
})
|
|
537
|
+
children: errors.map(error => jsxRuntime.jsx(semanticUiReact.List.Item, {
|
|
538
|
+
children: error
|
|
539
|
+
}, nanoid.nanoid()))
|
|
533
540
|
})
|
|
534
541
|
});
|
|
535
542
|
}
|
|
@@ -541,10 +548,12 @@ function FieldErrorTemplate(_ref) {
|
|
|
541
548
|
* @param props - The `FieldHelpProps` to be rendered
|
|
542
549
|
*/
|
|
543
550
|
function FieldHelpTemplate(props) {
|
|
544
|
-
|
|
545
|
-
|
|
551
|
+
const {
|
|
552
|
+
idSchema,
|
|
553
|
+
help
|
|
554
|
+
} = props;
|
|
546
555
|
if (help) {
|
|
547
|
-
|
|
556
|
+
const id = utils.helpId(idSchema);
|
|
548
557
|
return jsxRuntime.jsx(semanticUiReact.Message, {
|
|
549
558
|
size: 'mini',
|
|
550
559
|
info: true,
|
|
@@ -555,33 +564,36 @@ function FieldHelpTemplate(props) {
|
|
|
555
564
|
return null;
|
|
556
565
|
}
|
|
557
566
|
|
|
558
|
-
var _excluded = ["id", "children", "classNames", "style", "displayLabel", "label", "errors", "help", "hidden", "description", "rawDescription", "registry", "schema", "uiSchema"];
|
|
559
567
|
/** The `FieldTemplate` component is the template used by `SchemaField` to render any field. It renders the field
|
|
560
568
|
* content, (label, description, children, errors and help) inside of a `WrapIfAdditional` component.
|
|
561
569
|
*
|
|
562
570
|
* @param props - The `FieldTemplateProps` for this component
|
|
563
571
|
*/
|
|
564
572
|
function FieldTemplate(props) {
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
573
|
+
const {
|
|
574
|
+
id,
|
|
575
|
+
children,
|
|
576
|
+
classNames,
|
|
577
|
+
style,
|
|
578
|
+
displayLabel,
|
|
579
|
+
label,
|
|
580
|
+
errors,
|
|
581
|
+
help,
|
|
582
|
+
hidden,
|
|
583
|
+
description,
|
|
584
|
+
rawDescription,
|
|
585
|
+
registry,
|
|
586
|
+
schema,
|
|
587
|
+
uiSchema,
|
|
588
|
+
...otherProps
|
|
589
|
+
} = props;
|
|
590
|
+
const semanticProps = getSemanticProps(otherProps);
|
|
591
|
+
const {
|
|
592
|
+
wrapLabel,
|
|
593
|
+
wrapContent
|
|
594
|
+
} = semanticProps;
|
|
595
|
+
const uiOptions = utils.getUiOptions(uiSchema);
|
|
596
|
+
const WrapIfAdditionalTemplate = utils.getTemplate('WrapIfAdditionalTemplate', registry, uiOptions);
|
|
585
597
|
if (hidden) {
|
|
586
598
|
return jsxRuntime.jsx("div", {
|
|
587
599
|
style: {
|
|
@@ -590,15 +602,15 @@ function FieldTemplate(props) {
|
|
|
590
602
|
children: children
|
|
591
603
|
});
|
|
592
604
|
}
|
|
593
|
-
return jsxRuntime.jsx(WrapIfAdditionalTemplate,
|
|
605
|
+
return jsxRuntime.jsx(WrapIfAdditionalTemplate, {
|
|
594
606
|
classNames: classNames,
|
|
595
607
|
style: style,
|
|
596
608
|
id: id,
|
|
597
609
|
label: label,
|
|
598
610
|
registry: registry,
|
|
599
611
|
schema: schema,
|
|
600
|
-
uiSchema: uiSchema
|
|
601
|
-
|
|
612
|
+
uiSchema: uiSchema,
|
|
613
|
+
...otherProps,
|
|
602
614
|
children: jsxRuntime.jsx(semanticUiReact.Form.Group, {
|
|
603
615
|
widths: 'equal',
|
|
604
616
|
grouped: true,
|
|
@@ -612,7 +624,7 @@ function FieldTemplate(props) {
|
|
|
612
624
|
}), help, errors]
|
|
613
625
|
})
|
|
614
626
|
}, id)
|
|
615
|
-
})
|
|
627
|
+
});
|
|
616
628
|
}
|
|
617
629
|
|
|
618
630
|
/** The `ObjectFieldTemplate` is the template to use to render all the inner properties of an object along with the
|
|
@@ -622,23 +634,29 @@ function FieldTemplate(props) {
|
|
|
622
634
|
* @param props - The `ObjectFieldTemplateProps` for this component
|
|
623
635
|
*/
|
|
624
636
|
function ObjectFieldTemplate(props) {
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
637
|
+
const {
|
|
638
|
+
description,
|
|
639
|
+
onAddClick,
|
|
640
|
+
title,
|
|
641
|
+
properties,
|
|
642
|
+
disabled,
|
|
643
|
+
readonly,
|
|
644
|
+
required,
|
|
645
|
+
uiSchema,
|
|
646
|
+
schema,
|
|
647
|
+
formData,
|
|
648
|
+
idSchema,
|
|
649
|
+
registry
|
|
650
|
+
} = props;
|
|
651
|
+
const uiOptions = utils.getUiOptions(uiSchema);
|
|
652
|
+
const TitleFieldTemplate = utils.getTemplate('TitleFieldTemplate', registry, uiOptions);
|
|
653
|
+
const DescriptionFieldTemplate = utils.getTemplate('DescriptionFieldTemplate', registry, uiOptions);
|
|
640
654
|
// Button templates are not overridden in the uiSchema
|
|
641
|
-
|
|
655
|
+
const {
|
|
656
|
+
ButtonTemplates: {
|
|
657
|
+
AddButton
|
|
658
|
+
}
|
|
659
|
+
} = registry.templates;
|
|
642
660
|
return jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
643
661
|
children: [title && jsxRuntime.jsx(TitleFieldTemplate, {
|
|
644
662
|
id: utils.titleId(idSchema),
|
|
@@ -653,9 +671,7 @@ function ObjectFieldTemplate(props) {
|
|
|
653
671
|
schema: schema,
|
|
654
672
|
uiSchema: uiSchema,
|
|
655
673
|
registry: registry
|
|
656
|
-
}), properties.map(
|
|
657
|
-
return prop.content;
|
|
658
|
-
}), utils.canExpand(schema, uiSchema, formData) && jsxRuntime.jsx(semanticUiReact.Grid.Column, {
|
|
674
|
+
}), properties.map(prop => prop.content), utils.canExpand(schema, uiSchema, formData) && jsxRuntime.jsx(semanticUiReact.Grid.Column, {
|
|
659
675
|
width: 16,
|
|
660
676
|
verticalAlign: 'middle',
|
|
661
677
|
children: jsxRuntime.jsx(semanticUiReact.Grid.Row, {
|
|
@@ -679,25 +695,26 @@ function ObjectFieldTemplate(props) {
|
|
|
679
695
|
|
|
680
696
|
/** The `SubmitButton` renders a button that represent the `Submit` action on a form
|
|
681
697
|
*/
|
|
682
|
-
function SubmitButton(
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
submitButtonProps =
|
|
698
|
+
function SubmitButton({
|
|
699
|
+
uiSchema
|
|
700
|
+
}) {
|
|
701
|
+
const {
|
|
702
|
+
submitText,
|
|
703
|
+
norender,
|
|
704
|
+
props: submitButtonProps = {}
|
|
705
|
+
} = utils.getSubmitButtonOptions(uiSchema);
|
|
689
706
|
if (norender) {
|
|
690
707
|
return null;
|
|
691
708
|
}
|
|
692
|
-
return jsxRuntime.jsx(semanticUiReact.Button,
|
|
709
|
+
return jsxRuntime.jsx(semanticUiReact.Button, {
|
|
693
710
|
type: 'submit',
|
|
694
|
-
primary: true
|
|
695
|
-
|
|
711
|
+
primary: true,
|
|
712
|
+
...submitButtonProps,
|
|
696
713
|
children: submitText
|
|
697
|
-
})
|
|
714
|
+
});
|
|
698
715
|
}
|
|
699
716
|
|
|
700
|
-
|
|
717
|
+
const DEFAULT_OPTIONS = {
|
|
701
718
|
inverted: false,
|
|
702
719
|
dividing: true
|
|
703
720
|
};
|
|
@@ -705,23 +722,24 @@ var DEFAULT_OPTIONS = {
|
|
|
705
722
|
*
|
|
706
723
|
* @param props - The `TitleFieldProps` for this component
|
|
707
724
|
*/
|
|
708
|
-
function TitleField(
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
725
|
+
function TitleField({
|
|
726
|
+
id,
|
|
727
|
+
title,
|
|
728
|
+
uiSchema
|
|
729
|
+
}) {
|
|
730
|
+
const semanticProps = getSemanticProps({
|
|
731
|
+
uiSchema,
|
|
714
732
|
defaultSchemaProps: DEFAULT_OPTIONS
|
|
715
733
|
});
|
|
716
734
|
if (!title) {
|
|
717
735
|
return null;
|
|
718
736
|
}
|
|
719
|
-
return jsxRuntime.jsx(semanticUiReact.Header,
|
|
720
|
-
id: id
|
|
721
|
-
|
|
737
|
+
return jsxRuntime.jsx(semanticUiReact.Header, {
|
|
738
|
+
id: id,
|
|
739
|
+
...semanticProps,
|
|
722
740
|
as: 'h5',
|
|
723
741
|
children: title
|
|
724
|
-
})
|
|
742
|
+
});
|
|
725
743
|
}
|
|
726
744
|
|
|
727
745
|
/** The `WrapIfAdditional` component is used by the `FieldTemplate` to rename, or remove properties that are
|
|
@@ -730,29 +748,35 @@ function TitleField(_ref) {
|
|
|
730
748
|
* @param props - The `WrapIfAdditionalProps` for this component
|
|
731
749
|
*/
|
|
732
750
|
function WrapIfAdditionalTemplate(props) {
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
751
|
+
const {
|
|
752
|
+
children,
|
|
753
|
+
classNames,
|
|
754
|
+
style,
|
|
755
|
+
disabled,
|
|
756
|
+
id,
|
|
757
|
+
label,
|
|
758
|
+
onDropPropertyClick,
|
|
759
|
+
onKeyChange,
|
|
760
|
+
readonly,
|
|
761
|
+
required,
|
|
762
|
+
schema,
|
|
763
|
+
uiSchema,
|
|
764
|
+
registry
|
|
765
|
+
} = props;
|
|
766
|
+
const {
|
|
767
|
+
templates,
|
|
768
|
+
translateString
|
|
769
|
+
} = registry;
|
|
748
770
|
// Button templates are not overridden in the uiSchema
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
771
|
+
const {
|
|
772
|
+
RemoveButton
|
|
773
|
+
} = templates.ButtonTemplates;
|
|
774
|
+
const keyLabel = translateString(utils.TranslatableString.KeyLabel, [label]);
|
|
775
|
+
const {
|
|
776
|
+
readonlyAsDisabled = true,
|
|
777
|
+
wrapperStyle
|
|
778
|
+
} = registry.formContext;
|
|
779
|
+
const additional = (utils.ADDITIONAL_PROPERTY_FLAG in schema);
|
|
756
780
|
if (!additional) {
|
|
757
781
|
return jsxRuntime.jsx("div", {
|
|
758
782
|
className: classNames,
|
|
@@ -760,10 +784,9 @@ function WrapIfAdditionalTemplate(props) {
|
|
|
760
784
|
children: children
|
|
761
785
|
});
|
|
762
786
|
}
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
};
|
|
787
|
+
const handleBlur = ({
|
|
788
|
+
target
|
|
789
|
+
}) => onKeyChange(target.value);
|
|
767
790
|
return jsxRuntime.jsx("div", {
|
|
768
791
|
className: classNames,
|
|
769
792
|
style: style,
|
|
@@ -779,13 +802,13 @@ function WrapIfAdditionalTemplate(props) {
|
|
|
779
802
|
className: 'form-group',
|
|
780
803
|
hasFeedback: true,
|
|
781
804
|
fluid: true,
|
|
782
|
-
htmlFor:
|
|
805
|
+
htmlFor: `${id}`,
|
|
783
806
|
label: keyLabel,
|
|
784
807
|
required: required,
|
|
785
808
|
defaultValue: label,
|
|
786
809
|
disabled: disabled || readonlyAsDisabled && readonly,
|
|
787
|
-
id:
|
|
788
|
-
name:
|
|
810
|
+
id: `${id}`,
|
|
811
|
+
name: `${id}`,
|
|
789
812
|
onBlur: !readonly ? handleBlur : undefined,
|
|
790
813
|
style: wrapperStyle,
|
|
791
814
|
type: 'text'
|
|
@@ -807,30 +830,30 @@ function WrapIfAdditionalTemplate(props) {
|
|
|
807
830
|
})]
|
|
808
831
|
})
|
|
809
832
|
})
|
|
810
|
-
}, id
|
|
833
|
+
}, `${id}-key`);
|
|
811
834
|
}
|
|
812
835
|
|
|
813
836
|
function generateTemplates() {
|
|
814
837
|
return {
|
|
815
|
-
ArrayFieldItemTemplate
|
|
816
|
-
ArrayFieldTemplate
|
|
817
|
-
BaseInputTemplate
|
|
838
|
+
ArrayFieldItemTemplate,
|
|
839
|
+
ArrayFieldTemplate,
|
|
840
|
+
BaseInputTemplate,
|
|
818
841
|
ButtonTemplates: {
|
|
819
|
-
AddButton
|
|
820
|
-
CopyButton
|
|
821
|
-
MoveDownButton
|
|
822
|
-
MoveUpButton
|
|
823
|
-
RemoveButton
|
|
824
|
-
SubmitButton
|
|
842
|
+
AddButton,
|
|
843
|
+
CopyButton,
|
|
844
|
+
MoveDownButton,
|
|
845
|
+
MoveUpButton,
|
|
846
|
+
RemoveButton,
|
|
847
|
+
SubmitButton
|
|
825
848
|
},
|
|
826
849
|
DescriptionFieldTemplate: DescriptionField,
|
|
827
850
|
ErrorListTemplate: ErrorList,
|
|
828
|
-
FieldErrorTemplate
|
|
829
|
-
FieldHelpTemplate
|
|
830
|
-
FieldTemplate
|
|
831
|
-
ObjectFieldTemplate
|
|
851
|
+
FieldErrorTemplate,
|
|
852
|
+
FieldHelpTemplate,
|
|
853
|
+
FieldTemplate,
|
|
854
|
+
ObjectFieldTemplate,
|
|
832
855
|
TitleFieldTemplate: TitleField,
|
|
833
|
-
WrapIfAdditionalTemplate
|
|
856
|
+
WrapIfAdditionalTemplate
|
|
834
857
|
};
|
|
835
858
|
}
|
|
836
859
|
var Templates = /*#__PURE__*/generateTemplates();
|
|
@@ -841,49 +864,42 @@ var Templates = /*#__PURE__*/generateTemplates();
|
|
|
841
864
|
* @param props - The `WidgetProps` for this component
|
|
842
865
|
*/
|
|
843
866
|
function CheckboxWidget(props) {
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
value
|
|
847
|
-
disabled
|
|
848
|
-
readonly
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
uiSchema: uiSchema,
|
|
867
|
+
const {
|
|
868
|
+
id,
|
|
869
|
+
value,
|
|
870
|
+
disabled,
|
|
871
|
+
readonly,
|
|
872
|
+
label = '',
|
|
873
|
+
hideLabel,
|
|
874
|
+
autofocus,
|
|
875
|
+
onChange,
|
|
876
|
+
onBlur,
|
|
877
|
+
options,
|
|
878
|
+
onFocus,
|
|
879
|
+
formContext,
|
|
880
|
+
schema,
|
|
881
|
+
uiSchema,
|
|
882
|
+
rawErrors = [],
|
|
883
|
+
registry
|
|
884
|
+
} = props;
|
|
885
|
+
const semanticProps = getSemanticProps({
|
|
886
|
+
options,
|
|
887
|
+
formContext,
|
|
888
|
+
uiSchema,
|
|
867
889
|
defaultSchemaProps: {
|
|
868
890
|
inverted: 'false'
|
|
869
891
|
}
|
|
870
892
|
});
|
|
871
|
-
|
|
893
|
+
const DescriptionFieldTemplate = utils.getTemplate('DescriptionFieldTemplate', registry, options);
|
|
872
894
|
// Because an unchecked checkbox will cause html5 validation to fail, only add
|
|
873
895
|
// the "required" attribute if the field value must be "true", due to the
|
|
874
896
|
// "const" or "enum" keywords
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
};
|
|
882
|
-
var _onFocus = function _onFocus() {
|
|
883
|
-
return onFocus && onFocus(id, value);
|
|
884
|
-
};
|
|
885
|
-
var checked = value == 'true' || value == true;
|
|
886
|
-
var description = (_options$description = options.description) != null ? _options$description : schema.description;
|
|
897
|
+
const required = utils.schemaRequiresTrueValue(schema);
|
|
898
|
+
const _onChange = (_, data) => onChange && onChange(data.checked);
|
|
899
|
+
const _onBlur = () => onBlur && onBlur(id, value);
|
|
900
|
+
const _onFocus = () => onFocus && onFocus(id, value);
|
|
901
|
+
const checked = value == 'true' || value == true;
|
|
902
|
+
const description = options.description ?? schema.description;
|
|
887
903
|
return jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
888
904
|
children: [!hideLabel && !!description && jsxRuntime.jsx(DescriptionFieldTemplate, {
|
|
889
905
|
id: utils.descriptionId(id),
|
|
@@ -891,12 +907,12 @@ function CheckboxWidget(props) {
|
|
|
891
907
|
schema: schema,
|
|
892
908
|
uiSchema: uiSchema,
|
|
893
909
|
registry: registry
|
|
894
|
-
}), jsxRuntime.jsx(semanticUiReact.Form.Checkbox,
|
|
910
|
+
}), jsxRuntime.jsx(semanticUiReact.Form.Checkbox, {
|
|
895
911
|
id: id,
|
|
896
912
|
name: id,
|
|
897
913
|
disabled: disabled || readonly,
|
|
898
|
-
autoFocus: autofocus
|
|
899
|
-
|
|
914
|
+
autoFocus: autofocus,
|
|
915
|
+
...semanticProps,
|
|
900
916
|
checked: typeof value === 'undefined' ? false : checked,
|
|
901
917
|
error: rawErrors.length > 0,
|
|
902
918
|
onChange: _onChange,
|
|
@@ -905,7 +921,7 @@ function CheckboxWidget(props) {
|
|
|
905
921
|
required: required,
|
|
906
922
|
label: utils.labelValue(label, hideLabel, false),
|
|
907
923
|
"aria-describedby": utils.ariaDescribedByIds(id)
|
|
908
|
-
})
|
|
924
|
+
})]
|
|
909
925
|
});
|
|
910
926
|
}
|
|
911
927
|
|
|
@@ -915,54 +931,54 @@ function CheckboxWidget(props) {
|
|
|
915
931
|
* @param props - The `WidgetProps` for this component
|
|
916
932
|
*/
|
|
917
933
|
function CheckboxesWidget(props) {
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
rawErrors =
|
|
934
|
-
registry
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
934
|
+
const {
|
|
935
|
+
id,
|
|
936
|
+
disabled,
|
|
937
|
+
options,
|
|
938
|
+
value,
|
|
939
|
+
autofocus,
|
|
940
|
+
readonly,
|
|
941
|
+
label,
|
|
942
|
+
hideLabel,
|
|
943
|
+
onChange,
|
|
944
|
+
onBlur,
|
|
945
|
+
onFocus,
|
|
946
|
+
formContext,
|
|
947
|
+
schema,
|
|
948
|
+
uiSchema,
|
|
949
|
+
rawErrors = [],
|
|
950
|
+
registry
|
|
951
|
+
} = props;
|
|
952
|
+
const TitleFieldTemplate = utils.getTemplate('TitleFieldTemplate', registry, options);
|
|
953
|
+
const {
|
|
954
|
+
enumOptions,
|
|
955
|
+
enumDisabled,
|
|
956
|
+
inline
|
|
957
|
+
} = options;
|
|
958
|
+
const checkboxesValues = Array.isArray(value) ? value : [value];
|
|
959
|
+
const semanticProps = getSemanticProps({
|
|
960
|
+
options,
|
|
961
|
+
formContext,
|
|
962
|
+
uiSchema,
|
|
944
963
|
defaultSchemaProps: {
|
|
945
964
|
inverted: 'false'
|
|
946
965
|
}
|
|
947
966
|
});
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
var _onBlur = function _onBlur() {
|
|
960
|
-
return onBlur(id, value);
|
|
961
|
-
};
|
|
962
|
-
var _onFocus = function _onFocus() {
|
|
963
|
-
return onFocus(id, value);
|
|
967
|
+
const _onChange = index => ({
|
|
968
|
+
target: {
|
|
969
|
+
checked
|
|
970
|
+
}
|
|
971
|
+
}) => {
|
|
972
|
+
// eslint-disable-next-line no-shadow
|
|
973
|
+
if (checked) {
|
|
974
|
+
onChange(utils.enumOptionsSelectValue(index, checkboxesValues, enumOptions));
|
|
975
|
+
} else {
|
|
976
|
+
onChange(utils.enumOptionsDeselectValue(index, checkboxesValues, enumOptions));
|
|
977
|
+
}
|
|
964
978
|
};
|
|
965
|
-
|
|
979
|
+
const _onBlur = () => onBlur(id, value);
|
|
980
|
+
const _onFocus = () => onFocus(id, value);
|
|
981
|
+
const inlineOption = inline ? {
|
|
966
982
|
inline: true
|
|
967
983
|
} : {
|
|
968
984
|
grouped: true
|
|
@@ -974,18 +990,18 @@ function CheckboxesWidget(props) {
|
|
|
974
990
|
schema: schema,
|
|
975
991
|
uiSchema: uiSchema,
|
|
976
992
|
registry: registry
|
|
977
|
-
}), jsxRuntime.jsx(semanticUiReact.Form.Group,
|
|
993
|
+
}), jsxRuntime.jsx(semanticUiReact.Form.Group, {
|
|
978
994
|
id: id,
|
|
979
|
-
name: id
|
|
980
|
-
|
|
981
|
-
children: Array.isArray(enumOptions) && enumOptions.map(
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
return jsxRuntime.jsx(semanticUiReact.Form.Checkbox,
|
|
995
|
+
name: id,
|
|
996
|
+
...inlineOption,
|
|
997
|
+
children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
|
|
998
|
+
const checked = utils.enumOptionsIsSelected(option.value, checkboxesValues);
|
|
999
|
+
const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
|
|
1000
|
+
return jsxRuntime.jsx(semanticUiReact.Form.Checkbox, {
|
|
985
1001
|
id: utils.optionId(id, index),
|
|
986
1002
|
name: id,
|
|
987
|
-
label: option.label
|
|
988
|
-
|
|
1003
|
+
label: option.label,
|
|
1004
|
+
...semanticProps,
|
|
989
1005
|
checked: checked,
|
|
990
1006
|
error: rawErrors.length > 0,
|
|
991
1007
|
disabled: disabled || itemDisabled || readonly,
|
|
@@ -994,9 +1010,9 @@ function CheckboxesWidget(props) {
|
|
|
994
1010
|
onBlur: _onBlur,
|
|
995
1011
|
onFocus: _onFocus,
|
|
996
1012
|
"aria-describedby": utils.ariaDescribedByIds(id)
|
|
997
|
-
}
|
|
1013
|
+
}, index);
|
|
998
1014
|
})
|
|
999
|
-
})
|
|
1015
|
+
})]
|
|
1000
1016
|
});
|
|
1001
1017
|
}
|
|
1002
1018
|
|
|
@@ -1006,52 +1022,53 @@ function CheckboxesWidget(props) {
|
|
|
1006
1022
|
* @param props - The `WidgetProps` for this component
|
|
1007
1023
|
*/
|
|
1008
1024
|
function RadioWidget(props) {
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
rawErrors =
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1025
|
+
const {
|
|
1026
|
+
id,
|
|
1027
|
+
value,
|
|
1028
|
+
required,
|
|
1029
|
+
disabled,
|
|
1030
|
+
readonly,
|
|
1031
|
+
onChange,
|
|
1032
|
+
onBlur,
|
|
1033
|
+
onFocus,
|
|
1034
|
+
options,
|
|
1035
|
+
formContext,
|
|
1036
|
+
uiSchema,
|
|
1037
|
+
rawErrors = []
|
|
1038
|
+
} = props;
|
|
1039
|
+
const {
|
|
1040
|
+
enumOptions,
|
|
1041
|
+
enumDisabled,
|
|
1042
|
+
emptyValue
|
|
1043
|
+
} = options;
|
|
1044
|
+
const semanticProps = getSemanticProps({
|
|
1045
|
+
formContext,
|
|
1046
|
+
options,
|
|
1047
|
+
uiSchema
|
|
1029
1048
|
});
|
|
1030
|
-
|
|
1031
|
-
|
|
1049
|
+
const _onChange = (_, {
|
|
1050
|
+
value: eventValue
|
|
1051
|
+
}) => {
|
|
1032
1052
|
return onChange(utils.enumOptionsValueForIndex(eventValue, enumOptions, emptyValue));
|
|
1033
1053
|
};
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1037
|
-
var _onFocus = function _onFocus() {
|
|
1038
|
-
return onFocus(id, value);
|
|
1039
|
-
};
|
|
1040
|
-
var inlineOption = options.inline ? {
|
|
1054
|
+
const _onBlur = () => onBlur(id, value);
|
|
1055
|
+
const _onFocus = () => onFocus(id, value);
|
|
1056
|
+
const inlineOption = options.inline ? {
|
|
1041
1057
|
inline: true
|
|
1042
1058
|
} : {
|
|
1043
1059
|
grouped: true
|
|
1044
1060
|
};
|
|
1045
|
-
return jsxRuntime.jsx(semanticUiReact.Form.Group,
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1061
|
+
return jsxRuntime.jsx(semanticUiReact.Form.Group, {
|
|
1062
|
+
...inlineOption,
|
|
1063
|
+
children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
|
|
1064
|
+
const checked = utils.enumOptionsIsSelected(option.value, value);
|
|
1065
|
+
const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
|
|
1066
|
+
return /*#__PURE__*/react.createElement(semanticUiReact.Form.Field, {
|
|
1050
1067
|
required: required,
|
|
1051
1068
|
control: semanticUiReact.Radio,
|
|
1052
1069
|
id: utils.optionId(id, index),
|
|
1053
|
-
name: id
|
|
1054
|
-
|
|
1070
|
+
name: id,
|
|
1071
|
+
...semanticProps,
|
|
1055
1072
|
onFocus: _onFocus,
|
|
1056
1073
|
onBlur: _onBlur,
|
|
1057
1074
|
onChange: _onChange,
|
|
@@ -1062,9 +1079,9 @@ function RadioWidget(props) {
|
|
|
1062
1079
|
checked: checked,
|
|
1063
1080
|
disabled: disabled || itemDisabled || readonly,
|
|
1064
1081
|
"aria-describedby": utils.ariaDescribedByIds(id)
|
|
1065
|
-
})
|
|
1082
|
+
});
|
|
1066
1083
|
})
|
|
1067
|
-
})
|
|
1084
|
+
});
|
|
1068
1085
|
}
|
|
1069
1086
|
|
|
1070
1087
|
/** The `RangeWidget` component uses the `BaseInputTemplate` changing the type to `range` and wrapping the result
|
|
@@ -1073,54 +1090,53 @@ function RadioWidget(props) {
|
|
|
1073
1090
|
* @param props - The `WidgetProps` for this component
|
|
1074
1091
|
*/
|
|
1075
1092
|
function RangeWidget(props) {
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
rawErrors =
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
|
|
1093
|
+
const {
|
|
1094
|
+
id,
|
|
1095
|
+
value,
|
|
1096
|
+
required,
|
|
1097
|
+
readonly,
|
|
1098
|
+
disabled,
|
|
1099
|
+
onChange,
|
|
1100
|
+
onBlur,
|
|
1101
|
+
onFocus,
|
|
1102
|
+
options,
|
|
1103
|
+
schema,
|
|
1104
|
+
uiSchema,
|
|
1105
|
+
formContext,
|
|
1106
|
+
rawErrors = []
|
|
1107
|
+
} = props;
|
|
1108
|
+
const semanticProps = getSemanticProps({
|
|
1109
|
+
formContext,
|
|
1110
|
+
options,
|
|
1111
|
+
uiSchema,
|
|
1094
1112
|
defaultSchemaProps: {
|
|
1095
1113
|
fluid: true
|
|
1096
1114
|
}
|
|
1097
1115
|
});
|
|
1098
1116
|
// eslint-disable-next-line no-shadow
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
var _onFocus = function _onFocus() {
|
|
1107
|
-
return onFocus && onFocus(id, value);
|
|
1108
|
-
};
|
|
1117
|
+
const _onChange = ({
|
|
1118
|
+
target: {
|
|
1119
|
+
value
|
|
1120
|
+
}
|
|
1121
|
+
}) => onChange && onChange(value === '' ? options.emptyValue : value);
|
|
1122
|
+
const _onBlur = () => onBlur && onBlur(id, value);
|
|
1123
|
+
const _onFocus = () => onFocus && onFocus(id, value);
|
|
1109
1124
|
return jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
1110
|
-
children: [jsxRuntime.jsx(semanticUiReact.Input,
|
|
1125
|
+
children: [jsxRuntime.jsx(semanticUiReact.Input, {
|
|
1111
1126
|
id: id,
|
|
1112
1127
|
name: id,
|
|
1113
1128
|
type: 'range',
|
|
1114
1129
|
required: required,
|
|
1115
|
-
disabled: disabled || readonly
|
|
1116
|
-
|
|
1130
|
+
disabled: disabled || readonly,
|
|
1131
|
+
...utils.rangeSpec(schema),
|
|
1132
|
+
...semanticProps,
|
|
1117
1133
|
value: value || '',
|
|
1118
1134
|
error: rawErrors.length > 0,
|
|
1119
1135
|
onChange: _onChange,
|
|
1120
1136
|
onBlur: _onBlur,
|
|
1121
1137
|
onFocus: _onFocus,
|
|
1122
1138
|
"aria-describedby": utils.ariaDescribedByIds(id)
|
|
1123
|
-
}
|
|
1139
|
+
}, id), jsxRuntime.jsx("span", {
|
|
1124
1140
|
children: value
|
|
1125
1141
|
})]
|
|
1126
1142
|
});
|
|
@@ -1133,17 +1149,16 @@ function RangeWidget(props) {
|
|
|
1133
1149
|
* @returns {*}
|
|
1134
1150
|
*/
|
|
1135
1151
|
function createDefaultValueOptionsForDropDown(enumOptions, enumDisabled) {
|
|
1136
|
-
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
});
|
|
1152
|
+
const disabledOptions = enumDisabled || [];
|
|
1153
|
+
const options = map__default["default"](enumOptions, ({
|
|
1154
|
+
label,
|
|
1155
|
+
value
|
|
1156
|
+
}, index) => ({
|
|
1157
|
+
disabled: disabledOptions.indexOf(value) !== -1,
|
|
1158
|
+
key: label,
|
|
1159
|
+
text: label,
|
|
1160
|
+
value: String(index)
|
|
1161
|
+
}));
|
|
1147
1162
|
return options;
|
|
1148
1163
|
}
|
|
1149
1164
|
/** The `SelectWidget` is a widget for rendering dropdowns.
|
|
@@ -1152,28 +1167,29 @@ function createDefaultValueOptionsForDropDown(enumOptions, enumDisabled) {
|
|
|
1152
1167
|
* @param props - The `WidgetProps` for this component
|
|
1153
1168
|
*/
|
|
1154
1169
|
function SelectWidget(props) {
|
|
1155
|
-
|
|
1156
|
-
|
|
1157
|
-
|
|
1158
|
-
|
|
1159
|
-
|
|
1160
|
-
|
|
1161
|
-
|
|
1162
|
-
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
|
|
1166
|
-
|
|
1167
|
-
|
|
1168
|
-
|
|
1169
|
-
|
|
1170
|
-
|
|
1171
|
-
|
|
1172
|
-
rawErrors =
|
|
1173
|
-
|
|
1174
|
-
|
|
1175
|
-
|
|
1176
|
-
|
|
1170
|
+
const {
|
|
1171
|
+
uiSchema,
|
|
1172
|
+
formContext,
|
|
1173
|
+
id,
|
|
1174
|
+
options,
|
|
1175
|
+
label,
|
|
1176
|
+
hideLabel,
|
|
1177
|
+
required,
|
|
1178
|
+
disabled,
|
|
1179
|
+
readonly,
|
|
1180
|
+
value,
|
|
1181
|
+
multiple,
|
|
1182
|
+
placeholder,
|
|
1183
|
+
autofocus,
|
|
1184
|
+
onChange,
|
|
1185
|
+
onBlur,
|
|
1186
|
+
onFocus,
|
|
1187
|
+
rawErrors = []
|
|
1188
|
+
} = props;
|
|
1189
|
+
const semanticProps = getSemanticProps({
|
|
1190
|
+
uiSchema,
|
|
1191
|
+
formContext,
|
|
1192
|
+
options,
|
|
1177
1193
|
defaultSchemaProps: {
|
|
1178
1194
|
inverted: 'false',
|
|
1179
1195
|
selection: true,
|
|
@@ -1182,26 +1198,29 @@ function SelectWidget(props) {
|
|
|
1182
1198
|
upward: false
|
|
1183
1199
|
}
|
|
1184
1200
|
});
|
|
1185
|
-
|
|
1186
|
-
|
|
1187
|
-
|
|
1188
|
-
|
|
1189
|
-
|
|
1190
|
-
|
|
1191
|
-
|
|
1192
|
-
|
|
1193
|
-
|
|
1201
|
+
const {
|
|
1202
|
+
enumDisabled,
|
|
1203
|
+
enumOptions,
|
|
1204
|
+
emptyValue: optEmptyVal
|
|
1205
|
+
} = options;
|
|
1206
|
+
const emptyValue = multiple ? [] : '';
|
|
1207
|
+
const dropdownOptions = createDefaultValueOptionsForDropDown(enumOptions, enumDisabled);
|
|
1208
|
+
const _onChange = (_, {
|
|
1209
|
+
value
|
|
1210
|
+
}) => onChange(utils.enumOptionsValueForIndex(value, enumOptions, optEmptyVal));
|
|
1194
1211
|
// eslint-disable-next-line no-shadow
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
|
|
1198
|
-
|
|
1199
|
-
|
|
1200
|
-
|
|
1201
|
-
|
|
1202
|
-
|
|
1203
|
-
|
|
1204
|
-
|
|
1212
|
+
const _onBlur = (_, {
|
|
1213
|
+
target: {
|
|
1214
|
+
value
|
|
1215
|
+
}
|
|
1216
|
+
}) => onBlur(id, utils.enumOptionsValueForIndex(value, enumOptions, optEmptyVal));
|
|
1217
|
+
const _onFocus = (_, {
|
|
1218
|
+
target: {
|
|
1219
|
+
value
|
|
1220
|
+
}
|
|
1221
|
+
}) => onFocus(id, utils.enumOptionsValueForIndex(value, enumOptions, optEmptyVal));
|
|
1222
|
+
const selectedIndexes = utils.enumOptionsIndexForValue(value, enumOptions, multiple);
|
|
1223
|
+
return jsxRuntime.jsx(semanticUiReact.Form.Dropdown, {
|
|
1205
1224
|
id: id,
|
|
1206
1225
|
name: id,
|
|
1207
1226
|
label: utils.labelValue(label || undefined, hideLabel, false),
|
|
@@ -1209,8 +1228,8 @@ function SelectWidget(props) {
|
|
|
1209
1228
|
value: typeof value === 'undefined' ? emptyValue : selectedIndexes,
|
|
1210
1229
|
error: rawErrors.length > 0,
|
|
1211
1230
|
disabled: disabled,
|
|
1212
|
-
placeholder: placeholder
|
|
1213
|
-
|
|
1231
|
+
placeholder: placeholder,
|
|
1232
|
+
...semanticProps,
|
|
1214
1233
|
required: required,
|
|
1215
1234
|
autoFocus: autofocus,
|
|
1216
1235
|
readOnly: readonly,
|
|
@@ -1219,7 +1238,7 @@ function SelectWidget(props) {
|
|
|
1219
1238
|
onBlur: _onBlur,
|
|
1220
1239
|
onFocus: _onFocus,
|
|
1221
1240
|
"aria-describedby": utils.ariaDescribedByIds(id)
|
|
1222
|
-
}
|
|
1241
|
+
}, id);
|
|
1223
1242
|
}
|
|
1224
1243
|
|
|
1225
1244
|
/** The `TextareaWidget` is a widget for rendering input fields as textarea.
|
|
@@ -1227,49 +1246,47 @@ function SelectWidget(props) {
|
|
|
1227
1246
|
* @param props - The `WidgetProps` for this component
|
|
1228
1247
|
*/
|
|
1229
1248
|
function TextareaWidget(props) {
|
|
1230
|
-
|
|
1231
|
-
|
|
1232
|
-
|
|
1233
|
-
|
|
1234
|
-
|
|
1235
|
-
|
|
1236
|
-
|
|
1237
|
-
|
|
1238
|
-
|
|
1239
|
-
|
|
1240
|
-
|
|
1241
|
-
|
|
1242
|
-
|
|
1243
|
-
|
|
1244
|
-
|
|
1245
|
-
rawErrors =
|
|
1246
|
-
|
|
1247
|
-
|
|
1248
|
-
|
|
1249
|
+
const {
|
|
1250
|
+
id,
|
|
1251
|
+
placeholder,
|
|
1252
|
+
value,
|
|
1253
|
+
required,
|
|
1254
|
+
disabled,
|
|
1255
|
+
autofocus,
|
|
1256
|
+
label,
|
|
1257
|
+
hideLabel,
|
|
1258
|
+
readonly,
|
|
1259
|
+
onBlur,
|
|
1260
|
+
onFocus,
|
|
1261
|
+
onChange,
|
|
1262
|
+
options,
|
|
1263
|
+
formContext,
|
|
1264
|
+
rawErrors = []
|
|
1265
|
+
} = props;
|
|
1266
|
+
const semanticProps = getSemanticProps({
|
|
1267
|
+
formContext,
|
|
1268
|
+
options,
|
|
1249
1269
|
defaultSchemaProps: {
|
|
1250
1270
|
inverted: 'false'
|
|
1251
1271
|
}
|
|
1252
1272
|
});
|
|
1253
1273
|
// eslint-disable-next-line no-shadow
|
|
1254
|
-
|
|
1255
|
-
|
|
1256
|
-
|
|
1257
|
-
|
|
1258
|
-
|
|
1259
|
-
|
|
1260
|
-
|
|
1261
|
-
|
|
1262
|
-
return onFocus && onFocus(id, value);
|
|
1263
|
-
};
|
|
1264
|
-
return jsxRuntime.jsx(semanticUiReact.Form.TextArea, _extends({
|
|
1274
|
+
const _onChange = ({
|
|
1275
|
+
target: {
|
|
1276
|
+
value
|
|
1277
|
+
}
|
|
1278
|
+
}) => onChange && onChange(value === '' ? options.emptyValue : value);
|
|
1279
|
+
const _onBlur = () => onBlur && onBlur(id, value);
|
|
1280
|
+
const _onFocus = () => onFocus && onFocus(id, value);
|
|
1281
|
+
return jsxRuntime.jsx(semanticUiReact.Form.TextArea, {
|
|
1265
1282
|
id: id,
|
|
1266
1283
|
name: id,
|
|
1267
1284
|
label: utils.labelValue(label || undefined, hideLabel, false),
|
|
1268
1285
|
placeholder: placeholder,
|
|
1269
1286
|
autoFocus: autofocus,
|
|
1270
1287
|
required: required,
|
|
1271
|
-
disabled: disabled || readonly
|
|
1272
|
-
|
|
1288
|
+
disabled: disabled || readonly,
|
|
1289
|
+
...semanticProps,
|
|
1273
1290
|
value: value || '',
|
|
1274
1291
|
error: rawErrors.length > 0,
|
|
1275
1292
|
rows: options.rows || 5,
|
|
@@ -1277,17 +1294,17 @@ function TextareaWidget(props) {
|
|
|
1277
1294
|
onBlur: _onBlur,
|
|
1278
1295
|
onFocus: _onFocus,
|
|
1279
1296
|
"aria-describedby": utils.ariaDescribedByIds(id)
|
|
1280
|
-
}
|
|
1297
|
+
}, id);
|
|
1281
1298
|
}
|
|
1282
1299
|
|
|
1283
1300
|
function generateWidgets() {
|
|
1284
1301
|
return {
|
|
1285
|
-
CheckboxWidget
|
|
1286
|
-
CheckboxesWidget
|
|
1287
|
-
RadioWidget
|
|
1288
|
-
RangeWidget
|
|
1289
|
-
SelectWidget
|
|
1290
|
-
TextareaWidget
|
|
1302
|
+
CheckboxWidget,
|
|
1303
|
+
CheckboxesWidget,
|
|
1304
|
+
RadioWidget,
|
|
1305
|
+
RangeWidget,
|
|
1306
|
+
SelectWidget,
|
|
1307
|
+
TextareaWidget
|
|
1291
1308
|
};
|
|
1292
1309
|
}
|
|
1293
1310
|
var Widgets = /*#__PURE__*/generateWidgets();
|