@rjsf/chakra-ui 5.1.0 → 5.2.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/LICENSE.md +183 -183
- package/README.md +4 -4
- package/dist/chakra-ui.cjs.development.js +497 -420
- package/dist/chakra-ui.cjs.development.js.map +1 -1
- package/dist/chakra-ui.cjs.production.min.js +1 -1
- package/dist/chakra-ui.cjs.production.min.js.map +1 -1
- package/dist/chakra-ui.esm.js +491 -395
- package/dist/chakra-ui.esm.js.map +1 -1
- package/dist/chakra-ui.umd.development.js +497 -421
- package/dist/chakra-ui.umd.development.js.map +1 -1
- package/dist/chakra-ui.umd.production.min.js +1 -1
- package/dist/chakra-ui.umd.production.min.js.map +1 -1
- package/dist/index.d.ts +3 -3
- package/package.json +6 -5
|
@@ -1,31 +1,11 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
|
-
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@rjsf/core'), require('react'), require('@chakra-ui/react'), require('@chakra-ui/icons'), require('
|
|
3
|
-
typeof define === 'function' && define.amd ? define(['exports', '@rjsf/core', 'react', '@chakra-ui/react', '@chakra-ui/icons', '
|
|
4
|
-
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@rjsf/chakra-ui"] = {}, global.core, global.
|
|
5
|
-
})(this, (function (exports, core,
|
|
2
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@rjsf/core'), require('react/jsx-runtime'), require('@rjsf/utils'), require('@chakra-ui/react'), require('@chakra-ui/icons'), require('react'), require('chakra-react-select'), require('@emotion/react'), require('@emotion/cache'), require('@emotion/weak-memoize')) :
|
|
3
|
+
typeof define === 'function' && define.amd ? define(['exports', '@rjsf/core', 'react/jsx-runtime', '@rjsf/utils', '@chakra-ui/react', '@chakra-ui/icons', 'react', 'chakra-react-select', '@emotion/react', '@emotion/cache', '@emotion/weak-memoize'], factory) :
|
|
4
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@rjsf/chakra-ui"] = {}, global.core, global.jsxRuntime, global.utils, global.react, global.icons, global.React, global.chakraReactSelect, global.react$2, global.createCache, global.weakMemoize));
|
|
5
|
+
})(this, (function (exports, core, jsxRuntime, utils, react, icons, react$1, chakraReactSelect, react$2, createCache, weakMemoize) { 'use strict';
|
|
6
6
|
|
|
7
7
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
8
8
|
|
|
9
|
-
function _interopNamespace(e) {
|
|
10
|
-
if (e && e.__esModule) return e;
|
|
11
|
-
var n = Object.create(null);
|
|
12
|
-
if (e) {
|
|
13
|
-
Object.keys(e).forEach(function (k) {
|
|
14
|
-
if (k !== 'default') {
|
|
15
|
-
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
16
|
-
Object.defineProperty(n, k, d.get ? d : {
|
|
17
|
-
enumerable: true,
|
|
18
|
-
get: function () { return e[k]; }
|
|
19
|
-
});
|
|
20
|
-
}
|
|
21
|
-
});
|
|
22
|
-
}
|
|
23
|
-
n["default"] = e;
|
|
24
|
-
return n;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
28
|
-
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
29
9
|
var createCache__default = /*#__PURE__*/_interopDefaultLegacy(createCache);
|
|
30
10
|
var weakMemoize__default = /*#__PURE__*/_interopDefaultLegacy(weakMemoize);
|
|
31
11
|
|
|
@@ -58,10 +38,14 @@
|
|
|
58
38
|
|
|
59
39
|
var _excluded$2 = ["uiSchema", "registry"];
|
|
60
40
|
function AddButton(_ref) {
|
|
61
|
-
var
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
41
|
+
var registry = _ref.registry,
|
|
42
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
|
|
43
|
+
var translateString = registry.translateString;
|
|
44
|
+
return jsxRuntime.jsx(react.Button, _extends({
|
|
45
|
+
leftIcon: jsxRuntime.jsx(icons.AddIcon, {})
|
|
46
|
+
}, props, {
|
|
47
|
+
children: translateString(utils.TranslatableString.AddItemButton)
|
|
48
|
+
}));
|
|
65
49
|
}
|
|
66
50
|
|
|
67
51
|
function ArrayFieldItemTemplate(props) {
|
|
@@ -81,39 +65,44 @@
|
|
|
81
65
|
MoveDownButton = _registry$templates$B.MoveDownButton,
|
|
82
66
|
MoveUpButton = _registry$templates$B.MoveUpButton,
|
|
83
67
|
RemoveButton = _registry$templates$B.RemoveButton;
|
|
84
|
-
var onRemoveClick =
|
|
68
|
+
var onRemoveClick = react$1.useMemo(function () {
|
|
85
69
|
return onDropIndexClick(index);
|
|
86
70
|
}, [index, onDropIndexClick]);
|
|
87
|
-
var onArrowUpClick =
|
|
71
|
+
var onArrowUpClick = react$1.useMemo(function () {
|
|
88
72
|
return onReorderClick(index, index - 1);
|
|
89
73
|
}, [index, onReorderClick]);
|
|
90
|
-
var onArrowDownClick =
|
|
74
|
+
var onArrowDownClick = react$1.useMemo(function () {
|
|
91
75
|
return onReorderClick(index, index + 1);
|
|
92
76
|
}, [index, onReorderClick]);
|
|
93
|
-
return
|
|
94
|
-
alignItems:
|
|
95
|
-
py: 1
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
77
|
+
return jsxRuntime.jsxs(react.HStack, {
|
|
78
|
+
alignItems: 'flex-end',
|
|
79
|
+
py: 1,
|
|
80
|
+
children: [jsxRuntime.jsx(react.Box, {
|
|
81
|
+
w: '100%',
|
|
82
|
+
children: children
|
|
83
|
+
}), hasToolbar && jsxRuntime.jsx(react.Box, {
|
|
84
|
+
children: jsxRuntime.jsxs(react.ButtonGroup, {
|
|
85
|
+
isAttached: true,
|
|
86
|
+
mb: 1,
|
|
87
|
+
children: [(hasMoveUp || hasMoveDown) && jsxRuntime.jsx(MoveUpButton, {
|
|
88
|
+
disabled: disabled || readonly || !hasMoveUp,
|
|
89
|
+
onClick: onArrowUpClick,
|
|
90
|
+
uiSchema: uiSchema,
|
|
91
|
+
registry: registry
|
|
92
|
+
}), (hasMoveUp || hasMoveDown) && jsxRuntime.jsx(MoveDownButton, {
|
|
93
|
+
disabled: disabled || readonly || !hasMoveDown,
|
|
94
|
+
onClick: onArrowDownClick,
|
|
95
|
+
uiSchema: uiSchema,
|
|
96
|
+
registry: registry
|
|
97
|
+
}), hasRemove && jsxRuntime.jsx(RemoveButton, {
|
|
98
|
+
disabled: disabled || readonly,
|
|
99
|
+
onClick: onRemoveClick,
|
|
100
|
+
uiSchema: uiSchema,
|
|
101
|
+
registry: registry
|
|
102
|
+
})]
|
|
103
|
+
})
|
|
104
|
+
})]
|
|
105
|
+
});
|
|
117
106
|
}
|
|
118
107
|
|
|
119
108
|
var _excluded$1 = ["key"];
|
|
@@ -130,49 +119,53 @@
|
|
|
130
119
|
schema = props.schema,
|
|
131
120
|
title = props.title;
|
|
132
121
|
var uiOptions = utils.getUiOptions(uiSchema);
|
|
133
|
-
var ArrayFieldDescriptionTemplate = utils.getTemplate(
|
|
134
|
-
var ArrayFieldItemTemplate = utils.getTemplate(
|
|
135
|
-
var ArrayFieldTitleTemplate = utils.getTemplate(
|
|
122
|
+
var ArrayFieldDescriptionTemplate = utils.getTemplate('ArrayFieldDescriptionTemplate', registry, uiOptions);
|
|
123
|
+
var ArrayFieldItemTemplate = utils.getTemplate('ArrayFieldItemTemplate', registry, uiOptions);
|
|
124
|
+
var ArrayFieldTitleTemplate = utils.getTemplate('ArrayFieldTitleTemplate', registry, uiOptions);
|
|
136
125
|
// Button templates are not overridden in the uiSchema
|
|
137
126
|
var AddButton = registry.templates.ButtonTemplates.AddButton;
|
|
138
|
-
return
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
127
|
+
return jsxRuntime.jsxs(react.Box, {
|
|
128
|
+
children: [jsxRuntime.jsx(ArrayFieldTitleTemplate, {
|
|
129
|
+
idSchema: idSchema,
|
|
130
|
+
title: uiOptions.title || title,
|
|
131
|
+
schema: schema,
|
|
132
|
+
uiSchema: uiSchema,
|
|
133
|
+
required: required,
|
|
134
|
+
registry: registry
|
|
135
|
+
}), jsxRuntime.jsx(ArrayFieldDescriptionTemplate, {
|
|
136
|
+
idSchema: idSchema,
|
|
137
|
+
description: uiOptions.description || schema.description,
|
|
138
|
+
schema: schema,
|
|
139
|
+
uiSchema: uiSchema,
|
|
140
|
+
registry: registry
|
|
141
|
+
}), jsxRuntime.jsxs(react.Grid, {
|
|
142
|
+
children: [jsxRuntime.jsx(react.GridItem, {
|
|
143
|
+
children: items.length > 0 && items.map(function (_ref) {
|
|
144
|
+
var key = _ref.key,
|
|
145
|
+
itemProps = _objectWithoutPropertiesLoose(_ref, _excluded$1);
|
|
146
|
+
return jsxRuntime.jsx(ArrayFieldItemTemplate, _extends({}, itemProps), key);
|
|
147
|
+
})
|
|
148
|
+
}), canAdd && jsxRuntime.jsx(react.GridItem, {
|
|
149
|
+
justifySelf: 'flex-end',
|
|
150
|
+
children: jsxRuntime.jsx(react.Box, {
|
|
151
|
+
mt: 2,
|
|
152
|
+
children: jsxRuntime.jsx(AddButton, {
|
|
153
|
+
className: 'array-item-add',
|
|
154
|
+
onClick: onAddClick,
|
|
155
|
+
disabled: disabled || readonly,
|
|
156
|
+
uiSchema: uiSchema,
|
|
157
|
+
registry: registry
|
|
158
|
+
})
|
|
159
|
+
})
|
|
160
|
+
})]
|
|
161
|
+
}, "array-item-list-" + idSchema.$id)]
|
|
162
|
+
});
|
|
170
163
|
}
|
|
171
164
|
|
|
172
165
|
function getChakra(_ref) {
|
|
173
166
|
var _ref$uiSchema = _ref.uiSchema,
|
|
174
167
|
uiSchema = _ref$uiSchema === void 0 ? {} : _ref$uiSchema;
|
|
175
|
-
var chakraProps = uiSchema[
|
|
168
|
+
var chakraProps = uiSchema['ui:options'] && uiSchema['ui:options'].chakra || {};
|
|
176
169
|
Object.keys(chakraProps).forEach(function (key) {
|
|
177
170
|
/**
|
|
178
171
|
* Leveraging `shouldForwardProp` to remove props
|
|
@@ -196,6 +189,7 @@
|
|
|
196
189
|
schema = props.schema,
|
|
197
190
|
uiSchema = props.uiSchema,
|
|
198
191
|
onChange = props.onChange,
|
|
192
|
+
onChangeOverride = props.onChangeOverride,
|
|
199
193
|
onBlur = props.onBlur,
|
|
200
194
|
onFocus = props.onFocus,
|
|
201
195
|
options = props.options,
|
|
@@ -213,7 +207,7 @@
|
|
|
213
207
|
var schemaUtils = registry.schemaUtils;
|
|
214
208
|
var _onChange = function _onChange(_ref) {
|
|
215
209
|
var value = _ref.target.value;
|
|
216
|
-
return onChange(value ===
|
|
210
|
+
return onChange(value === '' ? options.emptyValue : value);
|
|
217
211
|
};
|
|
218
212
|
var _onBlur = function _onBlur(_ref2) {
|
|
219
213
|
var value = _ref2.target.value;
|
|
@@ -224,36 +218,38 @@
|
|
|
224
218
|
return onFocus(id, value);
|
|
225
219
|
};
|
|
226
220
|
var displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema) && (!!label || !!schema.title);
|
|
227
|
-
return
|
|
221
|
+
return jsxRuntime.jsxs(react.FormControl, _extends({
|
|
228
222
|
mb: 1
|
|
229
223
|
}, chakraProps, {
|
|
230
224
|
isDisabled: disabled || readonly,
|
|
231
225
|
isRequired: required,
|
|
232
226
|
isReadOnly: readonly,
|
|
233
|
-
isInvalid: rawErrors && rawErrors.length > 0
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
227
|
+
isInvalid: rawErrors && rawErrors.length > 0,
|
|
228
|
+
children: [displayLabel ? jsxRuntime.jsx(react.FormLabel, {
|
|
229
|
+
htmlFor: id,
|
|
230
|
+
id: id + "-label",
|
|
231
|
+
children: label || schema.title
|
|
232
|
+
}) : null, jsxRuntime.jsx(react.Input, _extends({
|
|
233
|
+
id: id,
|
|
234
|
+
name: id,
|
|
235
|
+
value: value || value === 0 ? value : '',
|
|
236
|
+
onChange: onChangeOverride || _onChange,
|
|
237
|
+
onBlur: _onBlur,
|
|
238
|
+
onFocus: _onFocus,
|
|
239
|
+
autoFocus: autofocus,
|
|
240
|
+
placeholder: placeholder
|
|
241
|
+
}, inputProps, {
|
|
242
|
+
list: schema.examples ? utils.examplesId(id) : undefined,
|
|
243
|
+
"aria-describedby": utils.ariaDescribedByIds(id, !!schema.examples)
|
|
244
|
+
})), Array.isArray(schema.examples) ? jsxRuntime.jsx("datalist", {
|
|
245
|
+
id: utils.examplesId(id),
|
|
246
|
+
children: schema.examples.concat(schema["default"] && !schema.examples.includes(schema["default"]) ? [schema["default"]] : []).map(function (example) {
|
|
247
|
+
return jsxRuntime.jsx("option", {
|
|
248
|
+
value: example
|
|
249
|
+
}, example);
|
|
250
|
+
})
|
|
251
|
+
}) : null]
|
|
252
|
+
}));
|
|
257
253
|
}
|
|
258
254
|
|
|
259
255
|
function DescriptionField(_ref) {
|
|
@@ -262,65 +258,78 @@
|
|
|
262
258
|
if (!description) {
|
|
263
259
|
return null;
|
|
264
260
|
}
|
|
265
|
-
if (typeof description ===
|
|
266
|
-
return
|
|
261
|
+
if (typeof description === 'string') {
|
|
262
|
+
return jsxRuntime.jsx(react.Text, {
|
|
267
263
|
id: id,
|
|
268
264
|
mt: 2,
|
|
269
|
-
mb: 4
|
|
270
|
-
|
|
265
|
+
mb: 4,
|
|
266
|
+
children: description
|
|
267
|
+
});
|
|
271
268
|
}
|
|
272
|
-
return
|
|
269
|
+
return jsxRuntime.jsx(jsxRuntime.Fragment, {
|
|
270
|
+
children: description
|
|
271
|
+
});
|
|
273
272
|
}
|
|
274
273
|
|
|
275
274
|
function ErrorList(_ref) {
|
|
276
|
-
var errors = _ref.errors
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
275
|
+
var errors = _ref.errors,
|
|
276
|
+
registry = _ref.registry;
|
|
277
|
+
var translateString = registry.translateString;
|
|
278
|
+
return jsxRuntime.jsxs(react.Alert, {
|
|
279
|
+
flexDirection: 'column',
|
|
280
|
+
alignItems: 'flex-start',
|
|
280
281
|
gap: 3,
|
|
281
|
-
status:
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
282
|
+
status: 'error',
|
|
283
|
+
children: [jsxRuntime.jsx(react.AlertTitle, {
|
|
284
|
+
children: translateString(utils.TranslatableString.ErrorsLabel)
|
|
285
|
+
}), jsxRuntime.jsx(react.List, {
|
|
286
|
+
children: errors.map(function (error, i) {
|
|
287
|
+
return jsxRuntime.jsxs(react.ListItem, {
|
|
288
|
+
children: [jsxRuntime.jsx(react.ListIcon, {
|
|
289
|
+
as: icons.WarningIcon,
|
|
290
|
+
color: 'red.500'
|
|
291
|
+
}), error.stack]
|
|
292
|
+
}, i);
|
|
293
|
+
})
|
|
294
|
+
})]
|
|
295
|
+
});
|
|
290
296
|
}
|
|
291
297
|
|
|
292
298
|
var _excluded = ["icon", "iconType", "uiSchema", "registry"];
|
|
293
299
|
function ChakraIconButton(props) {
|
|
294
300
|
var icon = props.icon,
|
|
295
301
|
otherProps = _objectWithoutPropertiesLoose(props, _excluded);
|
|
296
|
-
return
|
|
302
|
+
return jsxRuntime.jsx(react.IconButton, _extends({
|
|
297
303
|
"aria-label": props.title
|
|
298
304
|
}, otherProps, {
|
|
299
305
|
icon: icon
|
|
300
306
|
}));
|
|
301
307
|
}
|
|
302
|
-
ChakraIconButton.displayName =
|
|
303
|
-
var ChakraIconButton$1 = /*#__PURE__*/
|
|
308
|
+
ChakraIconButton.displayName = 'ChakraIconButton';
|
|
309
|
+
var ChakraIconButton$1 = /*#__PURE__*/react$1.memo(ChakraIconButton);
|
|
304
310
|
|
|
305
311
|
function MoveDownButton(props) {
|
|
306
|
-
|
|
307
|
-
|
|
312
|
+
var translateString = props.registry.translateString;
|
|
313
|
+
return jsxRuntime.jsx(ChakraIconButton$1, _extends({
|
|
314
|
+
title: translateString(utils.TranslatableString.MoveDownButton)
|
|
308
315
|
}, props, {
|
|
309
|
-
icon:
|
|
316
|
+
icon: jsxRuntime.jsx(icons.ArrowDownIcon, {})
|
|
310
317
|
}));
|
|
311
318
|
}
|
|
312
319
|
function MoveUpButton(props) {
|
|
313
|
-
|
|
314
|
-
|
|
320
|
+
var translateString = props.registry.translateString;
|
|
321
|
+
return jsxRuntime.jsx(ChakraIconButton$1, _extends({
|
|
322
|
+
title: translateString(utils.TranslatableString.MoveUpButton)
|
|
315
323
|
}, props, {
|
|
316
|
-
icon:
|
|
324
|
+
icon: jsxRuntime.jsx(icons.ArrowUpIcon, {})
|
|
317
325
|
}));
|
|
318
326
|
}
|
|
319
327
|
function RemoveButton(props) {
|
|
320
|
-
|
|
321
|
-
|
|
328
|
+
var translateString = props.registry.translateString;
|
|
329
|
+
return jsxRuntime.jsx(ChakraIconButton$1, _extends({
|
|
330
|
+
title: translateString(utils.TranslatableString.RemoveButton)
|
|
322
331
|
}, props, {
|
|
323
|
-
icon:
|
|
332
|
+
icon: jsxRuntime.jsx(icons.DeleteIcon, {})
|
|
324
333
|
}));
|
|
325
334
|
}
|
|
326
335
|
|
|
@@ -336,13 +345,16 @@
|
|
|
336
345
|
return null;
|
|
337
346
|
}
|
|
338
347
|
var id = utils.errorId(idSchema);
|
|
339
|
-
return
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
348
|
+
return jsxRuntime.jsx(react.List, {
|
|
349
|
+
children: errors.map(function (error, i) {
|
|
350
|
+
return jsxRuntime.jsx(react.ListItem, {
|
|
351
|
+
children: jsxRuntime.jsx(react.FormErrorMessage, {
|
|
352
|
+
id: id,
|
|
353
|
+
children: error
|
|
354
|
+
})
|
|
355
|
+
}, i);
|
|
356
|
+
})
|
|
357
|
+
});
|
|
346
358
|
}
|
|
347
359
|
|
|
348
360
|
/** The `FieldHelpTemplate` component renders any help desired for a field
|
|
@@ -356,9 +368,10 @@
|
|
|
356
368
|
return null;
|
|
357
369
|
}
|
|
358
370
|
var id = utils.helpId(idSchema);
|
|
359
|
-
return
|
|
360
|
-
id: id
|
|
361
|
-
|
|
371
|
+
return jsxRuntime.jsx(react.FormHelperText, {
|
|
372
|
+
id: id,
|
|
373
|
+
children: help
|
|
374
|
+
});
|
|
362
375
|
}
|
|
363
376
|
|
|
364
377
|
function FieldTemplate(props) {
|
|
@@ -383,15 +396,16 @@
|
|
|
383
396
|
schema = props.schema,
|
|
384
397
|
uiSchema = props.uiSchema;
|
|
385
398
|
var uiOptions = utils.getUiOptions(uiSchema);
|
|
386
|
-
var WrapIfAdditionalTemplate = utils.getTemplate(
|
|
399
|
+
var WrapIfAdditionalTemplate = utils.getTemplate('WrapIfAdditionalTemplate', registry, uiOptions);
|
|
387
400
|
if (hidden) {
|
|
388
|
-
return
|
|
401
|
+
return jsxRuntime.jsx("div", {
|
|
389
402
|
style: {
|
|
390
|
-
display:
|
|
391
|
-
}
|
|
392
|
-
|
|
403
|
+
display: 'none'
|
|
404
|
+
},
|
|
405
|
+
children: children
|
|
406
|
+
});
|
|
393
407
|
}
|
|
394
|
-
return
|
|
408
|
+
return jsxRuntime.jsx(WrapIfAdditionalTemplate, {
|
|
395
409
|
classNames: classNames,
|
|
396
410
|
style: style,
|
|
397
411
|
disabled: disabled,
|
|
@@ -403,13 +417,16 @@
|
|
|
403
417
|
required: required,
|
|
404
418
|
schema: schema,
|
|
405
419
|
uiSchema: uiSchema,
|
|
406
|
-
registry: registry
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
420
|
+
registry: registry,
|
|
421
|
+
children: jsxRuntime.jsxs(react.FormControl, {
|
|
422
|
+
isRequired: required,
|
|
423
|
+
isInvalid: rawErrors && rawErrors.length > 0,
|
|
424
|
+
children: [children, displayLabel && rawDescription ? jsxRuntime.jsx(react.Text, {
|
|
425
|
+
mt: 2,
|
|
426
|
+
children: rawDescription
|
|
427
|
+
}) : null, errors, help]
|
|
428
|
+
})
|
|
429
|
+
});
|
|
413
430
|
}
|
|
414
431
|
|
|
415
432
|
function ObjectFieldTemplate(props) {
|
|
@@ -426,39 +443,43 @@
|
|
|
426
443
|
onAddClick = props.onAddClick,
|
|
427
444
|
registry = props.registry;
|
|
428
445
|
var uiOptions = utils.getUiOptions(uiSchema);
|
|
429
|
-
var TitleFieldTemplate = utils.getTemplate(
|
|
430
|
-
var DescriptionFieldTemplate = utils.getTemplate(
|
|
446
|
+
var TitleFieldTemplate = utils.getTemplate('TitleFieldTemplate', registry, uiOptions);
|
|
447
|
+
var DescriptionFieldTemplate = utils.getTemplate('DescriptionFieldTemplate', registry, uiOptions);
|
|
431
448
|
// Button templates are not overridden in the uiSchema
|
|
432
449
|
var AddButton = registry.templates.ButtonTemplates.AddButton;
|
|
433
|
-
return
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
450
|
+
return jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
451
|
+
children: [(uiOptions.title || title) && jsxRuntime.jsx(TitleFieldTemplate, {
|
|
452
|
+
id: utils.titleId(idSchema),
|
|
453
|
+
title: uiOptions.title || title,
|
|
454
|
+
required: required,
|
|
455
|
+
schema: schema,
|
|
456
|
+
uiSchema: uiSchema,
|
|
457
|
+
registry: registry
|
|
458
|
+
}), (uiOptions.description || description) && jsxRuntime.jsx(DescriptionFieldTemplate, {
|
|
459
|
+
id: utils.descriptionId(idSchema),
|
|
460
|
+
description: uiOptions.description || description,
|
|
461
|
+
schema: schema,
|
|
462
|
+
uiSchema: uiSchema,
|
|
463
|
+
registry: registry
|
|
464
|
+
}), jsxRuntime.jsxs(react.Grid, {
|
|
465
|
+
gap: description ? 2 : 6,
|
|
466
|
+
mb: 4,
|
|
467
|
+
children: [properties.map(function (element, index) {
|
|
468
|
+
return element.hidden ? element.content : jsxRuntime.jsx(react.GridItem, {
|
|
469
|
+
children: element.content
|
|
470
|
+
}, idSchema.$id + "-" + element.name + "-" + index);
|
|
471
|
+
}), utils.canExpand(schema, uiSchema, formData) && jsxRuntime.jsx(react.GridItem, {
|
|
472
|
+
justifySelf: 'flex-end',
|
|
473
|
+
children: jsxRuntime.jsx(AddButton, {
|
|
474
|
+
className: 'object-property-expand',
|
|
475
|
+
onClick: onAddClick(schema),
|
|
476
|
+
disabled: disabled || readonly,
|
|
477
|
+
uiSchema: uiSchema,
|
|
478
|
+
registry: registry
|
|
479
|
+
})
|
|
480
|
+
})]
|
|
481
|
+
})]
|
|
482
|
+
});
|
|
462
483
|
}
|
|
463
484
|
|
|
464
485
|
function SubmitButton(_ref) {
|
|
@@ -470,24 +491,29 @@
|
|
|
470
491
|
if (norender) {
|
|
471
492
|
return null;
|
|
472
493
|
}
|
|
473
|
-
return
|
|
474
|
-
marginTop: 3
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
494
|
+
return jsxRuntime.jsx(react.Box, {
|
|
495
|
+
marginTop: 3,
|
|
496
|
+
children: jsxRuntime.jsx(react.Button, _extends({
|
|
497
|
+
type: 'submit',
|
|
498
|
+
variant: 'solid'
|
|
499
|
+
}, submitButtonProps, {
|
|
500
|
+
children: submitText
|
|
501
|
+
}))
|
|
502
|
+
});
|
|
479
503
|
}
|
|
480
504
|
|
|
481
505
|
function TitleField(_ref) {
|
|
482
506
|
var id = _ref.id,
|
|
483
507
|
title = _ref.title;
|
|
484
|
-
return
|
|
508
|
+
return jsxRuntime.jsxs(react.Box, {
|
|
485
509
|
id: id,
|
|
486
510
|
mt: 1,
|
|
487
|
-
mb: 4
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
511
|
+
mb: 4,
|
|
512
|
+
children: [jsxRuntime.jsx(react.Heading, {
|
|
513
|
+
as: 'h5',
|
|
514
|
+
children: title
|
|
515
|
+
}), jsxRuntime.jsx(react.Divider, {})]
|
|
516
|
+
});
|
|
491
517
|
}
|
|
492
518
|
|
|
493
519
|
function WrapIfAdditionalTemplate(props) {
|
|
@@ -504,45 +530,56 @@
|
|
|
504
530
|
required = props.required,
|
|
505
531
|
schema = props.schema,
|
|
506
532
|
uiSchema = props.uiSchema;
|
|
533
|
+
var templates = registry.templates,
|
|
534
|
+
translateString = registry.translateString;
|
|
507
535
|
// Button templates are not overridden in the uiSchema
|
|
508
|
-
var RemoveButton =
|
|
536
|
+
var RemoveButton = templates.ButtonTemplates.RemoveButton;
|
|
537
|
+
var keyLabel = translateString(utils.TranslatableString.KeyLabel, [label]);
|
|
509
538
|
var additional = (utils.ADDITIONAL_PROPERTY_FLAG in schema);
|
|
510
539
|
if (!additional) {
|
|
511
|
-
return
|
|
540
|
+
return jsxRuntime.jsx("div", {
|
|
512
541
|
className: classNames,
|
|
513
|
-
style: style
|
|
514
|
-
|
|
542
|
+
style: style,
|
|
543
|
+
children: children
|
|
544
|
+
});
|
|
515
545
|
}
|
|
516
|
-
var keyLabel = label + " Key";
|
|
517
546
|
var handleBlur = function handleBlur(_ref) {
|
|
518
547
|
var target = _ref.target;
|
|
519
548
|
return onKeyChange(target.value);
|
|
520
549
|
};
|
|
521
|
-
return
|
|
522
|
-
key: id + "-key",
|
|
550
|
+
return jsxRuntime.jsxs(react.Grid, {
|
|
523
551
|
className: classNames,
|
|
524
552
|
style: style,
|
|
525
|
-
alignItems:
|
|
526
|
-
gap: 2
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
553
|
+
alignItems: 'center',
|
|
554
|
+
gap: 2,
|
|
555
|
+
children: [jsxRuntime.jsx(react.GridItem, {
|
|
556
|
+
children: jsxRuntime.jsxs(react.FormControl, {
|
|
557
|
+
isRequired: required,
|
|
558
|
+
children: [jsxRuntime.jsx(react.FormLabel, {
|
|
559
|
+
htmlFor: id + "-key",
|
|
560
|
+
id: id + "-key-label",
|
|
561
|
+
children: keyLabel
|
|
562
|
+
}), jsxRuntime.jsx(react.Input, {
|
|
563
|
+
defaultValue: label,
|
|
564
|
+
disabled: disabled || readonly,
|
|
565
|
+
id: id + "-key",
|
|
566
|
+
name: id + "-key",
|
|
567
|
+
onBlur: !readonly ? handleBlur : undefined,
|
|
568
|
+
type: 'text',
|
|
569
|
+
mb: 1
|
|
570
|
+
})]
|
|
571
|
+
})
|
|
572
|
+
}), jsxRuntime.jsx(react.GridItem, {
|
|
573
|
+
children: children
|
|
574
|
+
}), jsxRuntime.jsx(react.GridItem, {
|
|
575
|
+
children: jsxRuntime.jsx(RemoveButton, {
|
|
576
|
+
disabled: disabled || readonly,
|
|
577
|
+
onClick: onDropPropertyClick(label),
|
|
578
|
+
uiSchema: uiSchema,
|
|
579
|
+
registry: registry
|
|
580
|
+
})
|
|
581
|
+
})]
|
|
582
|
+
}, id + "-key");
|
|
546
583
|
}
|
|
547
584
|
|
|
548
585
|
function generateTemplates() {
|
|
@@ -582,9 +619,9 @@
|
|
|
582
619
|
function DateElement(props) {
|
|
583
620
|
var SelectWidget = props.registry.widgets.SelectWidget;
|
|
584
621
|
var value = props.value ? props.value : undefined;
|
|
585
|
-
return
|
|
586
|
-
label:
|
|
587
|
-
className:
|
|
622
|
+
return jsxRuntime.jsx(SelectWidget, _extends({}, props, {
|
|
623
|
+
label: '',
|
|
624
|
+
className: 'form-control',
|
|
588
625
|
onChange: function onChange(elemValue) {
|
|
589
626
|
return props.select(props.type, elemValue);
|
|
590
627
|
},
|
|
@@ -593,7 +630,7 @@
|
|
|
593
630
|
},
|
|
594
631
|
placeholder: props.type,
|
|
595
632
|
schema: {
|
|
596
|
-
type:
|
|
633
|
+
type: 'integer'
|
|
597
634
|
},
|
|
598
635
|
value: value,
|
|
599
636
|
"aria-describedby": utils.ariaDescribedByIds(props.name)
|
|
@@ -601,7 +638,7 @@
|
|
|
601
638
|
}
|
|
602
639
|
var readyForChange = function readyForChange(state) {
|
|
603
640
|
return Object.keys(state).every(function (key) {
|
|
604
|
-
return typeof state[key] !==
|
|
641
|
+
return typeof state[key] !== 'undefined' && state[key] !== -1;
|
|
605
642
|
});
|
|
606
643
|
};
|
|
607
644
|
function AltDateWidget(props) {
|
|
@@ -616,15 +653,16 @@
|
|
|
616
653
|
registry = props.registry,
|
|
617
654
|
showTime = props.showTime,
|
|
618
655
|
value = props.value;
|
|
619
|
-
var
|
|
656
|
+
var translateString = registry.translateString;
|
|
657
|
+
var _useState = react$1.useState(utils.parseDateString(value, showTime)),
|
|
620
658
|
state = _useState[0],
|
|
621
659
|
setState = _useState[1];
|
|
622
|
-
|
|
660
|
+
react$1.useEffect(function () {
|
|
623
661
|
setState(utils.parseDateString(value, showTime));
|
|
624
662
|
}, [showTime, value]);
|
|
625
663
|
var handleChange = function handleChange(property, nextValue) {
|
|
626
664
|
var _extends2;
|
|
627
|
-
var nextState = _extends({}, state, (_extends2 = {}, _extends2[property] = typeof nextValue ===
|
|
665
|
+
var nextState = _extends({}, state, (_extends2 = {}, _extends2[property] = typeof nextValue === 'undefined' ? -1 : nextValue, _extends2));
|
|
628
666
|
if (readyForChange(nextState)) {
|
|
629
667
|
onChange(utils.toDateString(nextState, showTime));
|
|
630
668
|
} else {
|
|
@@ -654,70 +692,76 @@
|
|
|
654
692
|
minute = state.minute,
|
|
655
693
|
second = state.second;
|
|
656
694
|
var data = [{
|
|
657
|
-
type:
|
|
695
|
+
type: 'year',
|
|
658
696
|
range: options.yearsRange,
|
|
659
697
|
value: year
|
|
660
698
|
}, {
|
|
661
|
-
type:
|
|
699
|
+
type: 'month',
|
|
662
700
|
range: [1, 12],
|
|
663
701
|
value: month
|
|
664
702
|
}, {
|
|
665
|
-
type:
|
|
703
|
+
type: 'day',
|
|
666
704
|
range: [1, 31],
|
|
667
705
|
value: day
|
|
668
706
|
}];
|
|
669
707
|
if (showTime) {
|
|
670
708
|
data.push({
|
|
671
|
-
type:
|
|
709
|
+
type: 'hour',
|
|
672
710
|
range: [0, 23],
|
|
673
711
|
value: hour
|
|
674
712
|
}, {
|
|
675
|
-
type:
|
|
713
|
+
type: 'minute',
|
|
676
714
|
range: [0, 59],
|
|
677
715
|
value: minute
|
|
678
716
|
}, {
|
|
679
|
-
type:
|
|
717
|
+
type: 'second',
|
|
680
718
|
range: [0, 59],
|
|
681
719
|
value: second
|
|
682
720
|
});
|
|
683
721
|
}
|
|
684
722
|
return data;
|
|
685
723
|
};
|
|
686
|
-
return
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
724
|
+
return jsxRuntime.jsxs(react.Box, {
|
|
725
|
+
children: [jsxRuntime.jsx(react.Box, {
|
|
726
|
+
display: 'flex',
|
|
727
|
+
flexWrap: 'wrap',
|
|
728
|
+
alignItems: 'center',
|
|
729
|
+
justify: 'center',
|
|
730
|
+
children: dateElementProps().map(function (elemProps, i) {
|
|
731
|
+
var elemId = id + '_' + elemProps.type;
|
|
732
|
+
return jsxRuntime.jsx(react.Box, {
|
|
733
|
+
mr: '2',
|
|
734
|
+
mb: '2',
|
|
735
|
+
children: jsxRuntime.jsx(DateElement, _extends({}, props, elemProps, {
|
|
736
|
+
autofocus: autofocus && i === 0,
|
|
737
|
+
disabled: disabled,
|
|
738
|
+
id: elemId,
|
|
739
|
+
name: id,
|
|
740
|
+
onBlur: onBlur,
|
|
741
|
+
onFocus: onFocus,
|
|
742
|
+
readonly: readonly,
|
|
743
|
+
registry: registry,
|
|
744
|
+
select: handleChange,
|
|
745
|
+
value: elemProps.value < 0 ? '' : elemProps.value
|
|
746
|
+
}))
|
|
747
|
+
}, elemId);
|
|
748
|
+
})
|
|
749
|
+
}), jsxRuntime.jsxs(react.Box, {
|
|
750
|
+
display: 'flex',
|
|
751
|
+
children: [!options.hideNowButton && jsxRuntime.jsx(react.Button, {
|
|
752
|
+
onClick: function onClick(e) {
|
|
753
|
+
return handleNow(e);
|
|
754
|
+
},
|
|
755
|
+
mr: '2',
|
|
756
|
+
children: translateString(utils.TranslatableString.NowLabel)
|
|
757
|
+
}), !options.hideClearButton && jsxRuntime.jsx(react.Button, {
|
|
758
|
+
onClick: function onClick(e) {
|
|
759
|
+
return handleClear(e);
|
|
760
|
+
},
|
|
761
|
+
children: translateString(utils.TranslatableString.ClearLabel)
|
|
762
|
+
})]
|
|
763
|
+
})]
|
|
764
|
+
});
|
|
721
765
|
}
|
|
722
766
|
AltDateWidget.defaultProps = {
|
|
723
767
|
autofocus: false,
|
|
@@ -731,7 +775,7 @@
|
|
|
731
775
|
|
|
732
776
|
function AltDateTimeWidget(props) {
|
|
733
777
|
var AltDateWidget = props.registry.widgets.AltDateWidget;
|
|
734
|
-
return
|
|
778
|
+
return jsxRuntime.jsx(AltDateWidget, _extends({}, props, {
|
|
735
779
|
showTime: true
|
|
736
780
|
}));
|
|
737
781
|
}
|
|
@@ -769,20 +813,24 @@
|
|
|
769
813
|
var value = _ref3.target.value;
|
|
770
814
|
return onFocus(id, value);
|
|
771
815
|
};
|
|
772
|
-
return
|
|
816
|
+
return jsxRuntime.jsx(react.FormControl, _extends({
|
|
773
817
|
mb: 1
|
|
774
818
|
}, chakraProps, {
|
|
775
|
-
isRequired: required
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
819
|
+
isRequired: required,
|
|
820
|
+
children: jsxRuntime.jsx(react.Checkbox, {
|
|
821
|
+
id: id,
|
|
822
|
+
name: id,
|
|
823
|
+
isChecked: typeof value === 'undefined' ? false : value,
|
|
824
|
+
isDisabled: disabled || readonly,
|
|
825
|
+
onChange: _onChange,
|
|
826
|
+
onBlur: _onBlur,
|
|
827
|
+
onFocus: _onFocus,
|
|
828
|
+
"aria-describedby": utils.ariaDescribedByIds(id),
|
|
829
|
+
children: label && jsxRuntime.jsx(react.Text, {
|
|
830
|
+
children: label
|
|
831
|
+
})
|
|
832
|
+
})
|
|
833
|
+
}));
|
|
786
834
|
}
|
|
787
835
|
|
|
788
836
|
function CheckboxesWidget(props) {
|
|
@@ -817,38 +865,44 @@
|
|
|
817
865
|
};
|
|
818
866
|
var row = options ? options.inline : false;
|
|
819
867
|
var selectedIndexes = utils.enumOptionsIndexForValue(value, enumOptions, true);
|
|
820
|
-
return
|
|
868
|
+
return jsxRuntime.jsxs(react.FormControl, _extends({
|
|
821
869
|
mb: 1
|
|
822
870
|
}, chakraProps, {
|
|
823
871
|
isDisabled: disabled || readonly,
|
|
824
872
|
isRequired: required,
|
|
825
873
|
isReadOnly: readonly,
|
|
826
|
-
isInvalid: rawErrors && rawErrors.length > 0
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
874
|
+
isInvalid: rawErrors && rawErrors.length > 0,
|
|
875
|
+
children: [jsxRuntime.jsx(react.FormLabel, {
|
|
876
|
+
htmlFor: id,
|
|
877
|
+
id: id + "-label",
|
|
878
|
+
children: label || schema.title
|
|
879
|
+
}), jsxRuntime.jsx(react.CheckboxGroup, {
|
|
880
|
+
onChange: function onChange(option) {
|
|
881
|
+
return _onChange(utils.enumOptionsValueForIndex(option, enumOptions, emptyValue));
|
|
882
|
+
},
|
|
883
|
+
defaultValue: selectedIndexes,
|
|
884
|
+
"aria-describedby": utils.ariaDescribedByIds(id),
|
|
885
|
+
children: jsxRuntime.jsx(react.Stack, {
|
|
886
|
+
direction: row ? 'row' : 'column',
|
|
887
|
+
children: Array.isArray(enumOptions) && enumOptions.map(function (option, index) {
|
|
888
|
+
var checked = utils.enumOptionsIsSelected(option.value, checkboxesValues);
|
|
889
|
+
var itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
|
|
890
|
+
return jsxRuntime.jsx(react.Checkbox, {
|
|
891
|
+
id: utils.optionId(id, index),
|
|
892
|
+
name: id,
|
|
893
|
+
value: String(index),
|
|
894
|
+
isChecked: checked,
|
|
895
|
+
isDisabled: disabled || itemDisabled || readonly,
|
|
896
|
+
onBlur: _onBlur,
|
|
897
|
+
onFocus: _onFocus,
|
|
898
|
+
children: option.label && jsxRuntime.jsx(react.Text, {
|
|
899
|
+
children: option.label
|
|
900
|
+
})
|
|
901
|
+
}, index);
|
|
902
|
+
})
|
|
903
|
+
})
|
|
904
|
+
})]
|
|
905
|
+
}));
|
|
852
906
|
}
|
|
853
907
|
|
|
854
908
|
function RadioWidget(_ref) {
|
|
@@ -883,33 +937,37 @@
|
|
|
883
937
|
};
|
|
884
938
|
var row = options ? options.inline : false;
|
|
885
939
|
var selectedIndex = utils.enumOptionsIndexForValue(value, enumOptions);
|
|
886
|
-
return
|
|
940
|
+
return jsxRuntime.jsxs(react.FormControl, _extends({
|
|
887
941
|
mb: 1
|
|
888
942
|
}, chakraProps, {
|
|
889
943
|
isDisabled: disabled || readonly,
|
|
890
944
|
isRequired: required,
|
|
891
|
-
isReadOnly: readonly
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
945
|
+
isReadOnly: readonly,
|
|
946
|
+
children: [jsxRuntime.jsx(react.FormLabel, {
|
|
947
|
+
htmlFor: id,
|
|
948
|
+
id: id + "-label",
|
|
949
|
+
children: label || schema.title
|
|
950
|
+
}), jsxRuntime.jsx(react.RadioGroup, {
|
|
951
|
+
onChange: _onChange,
|
|
952
|
+
onBlur: _onBlur,
|
|
953
|
+
onFocus: _onFocus,
|
|
954
|
+
value: selectedIndex,
|
|
955
|
+
name: id,
|
|
956
|
+
"aria-describedby": utils.ariaDescribedByIds(id),
|
|
957
|
+
children: jsxRuntime.jsx(react.Stack, {
|
|
958
|
+
direction: row ? 'row' : 'column',
|
|
959
|
+
children: Array.isArray(enumOptions) && enumOptions.map(function (option, index) {
|
|
960
|
+
var itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
|
|
961
|
+
return jsxRuntime.jsx(react.Radio, {
|
|
962
|
+
value: String(index),
|
|
963
|
+
id: utils.optionId(id, index),
|
|
964
|
+
disabled: disabled || itemDisabled || readonly,
|
|
965
|
+
children: option.label
|
|
966
|
+
}, index);
|
|
967
|
+
})
|
|
968
|
+
})
|
|
969
|
+
})]
|
|
970
|
+
}));
|
|
913
971
|
}
|
|
914
972
|
|
|
915
973
|
function RangeWidget(_ref) {
|
|
@@ -946,19 +1004,25 @@
|
|
|
946
1004
|
var value = _ref3.target.value;
|
|
947
1005
|
return onFocus(id, value);
|
|
948
1006
|
};
|
|
949
|
-
return
|
|
1007
|
+
return jsxRuntime.jsxs(react.FormControl, _extends({
|
|
950
1008
|
mb: 1
|
|
951
|
-
}, chakraProps
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
1009
|
+
}, chakraProps, {
|
|
1010
|
+
children: [displayLabel ? jsxRuntime.jsx(react.FormLabel, {
|
|
1011
|
+
htmlFor: id,
|
|
1012
|
+
children: label || schema.title
|
|
1013
|
+
}) : null, jsxRuntime.jsxs(react.Slider, _extends({}, sliderWidgetProps, {
|
|
1014
|
+
id: id,
|
|
1015
|
+
name: id,
|
|
1016
|
+
isDisabled: disabled || readonly,
|
|
1017
|
+
onChange: _onChange,
|
|
1018
|
+
onBlur: _onBlur,
|
|
1019
|
+
onFocus: _onFocus,
|
|
1020
|
+
"aria-describedby": utils.ariaDescribedByIds(id),
|
|
1021
|
+
children: [jsxRuntime.jsx(react.SliderTrack, {
|
|
1022
|
+
children: jsxRuntime.jsx(react.SliderFilledTrack, {})
|
|
1023
|
+
}), jsxRuntime.jsx(react.SliderThumb, {})]
|
|
1024
|
+
}))]
|
|
1025
|
+
}));
|
|
962
1026
|
}
|
|
963
1027
|
|
|
964
1028
|
function SelectWidget(props) {
|
|
@@ -1012,7 +1076,7 @@
|
|
|
1012
1076
|
isDisabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(value) !== -1
|
|
1013
1077
|
};
|
|
1014
1078
|
}) : [];
|
|
1015
|
-
var isMultiple = typeof multiple !==
|
|
1079
|
+
var isMultiple = typeof multiple !== 'undefined' && Boolean(enumOptions);
|
|
1016
1080
|
var selectedIndex = utils.enumOptionsIndexForValue(value, enumOptions, isMultiple);
|
|
1017
1081
|
var formValue = isMultiple ? (selectedIndex || []).map(function (i) {
|
|
1018
1082
|
return {
|
|
@@ -1020,31 +1084,33 @@
|
|
|
1020
1084
|
value: i
|
|
1021
1085
|
};
|
|
1022
1086
|
}) : {
|
|
1023
|
-
label: _valueLabelMap[selectedIndex] ||
|
|
1087
|
+
label: _valueLabelMap[selectedIndex] || '',
|
|
1024
1088
|
selectedIndex: selectedIndex
|
|
1025
1089
|
};
|
|
1026
|
-
return
|
|
1090
|
+
return jsxRuntime.jsxs(react.FormControl, _extends({
|
|
1027
1091
|
mb: 1
|
|
1028
1092
|
}, chakraProps, {
|
|
1029
1093
|
isDisabled: disabled || readonly,
|
|
1030
1094
|
isRequired: required,
|
|
1031
1095
|
isReadOnly: readonly,
|
|
1032
|
-
isInvalid: rawErrors && rawErrors.length > 0
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1096
|
+
isInvalid: rawErrors && rawErrors.length > 0,
|
|
1097
|
+
children: [(label || schema.title) && jsxRuntime.jsx(react.FormLabel, {
|
|
1098
|
+
htmlFor: isMultiple ? undefined : id,
|
|
1099
|
+
children: label || schema.title
|
|
1100
|
+
}), jsxRuntime.jsx(chakraReactSelect.Select, {
|
|
1101
|
+
inputId: id,
|
|
1102
|
+
name: id,
|
|
1103
|
+
isMulti: isMultiple,
|
|
1104
|
+
options: displayEnumOptions,
|
|
1105
|
+
placeholder: placeholder,
|
|
1106
|
+
closeMenuOnSelect: !isMultiple,
|
|
1107
|
+
onBlur: _onBlur,
|
|
1108
|
+
onChange: isMultiple ? _onMultiChange : _onChange,
|
|
1109
|
+
onFocus: _onFocus,
|
|
1110
|
+
autoFocus: autofocus,
|
|
1111
|
+
value: formValue,
|
|
1112
|
+
"aria-describedby": utils.ariaDescribedByIds(id)
|
|
1113
|
+
})]
|
|
1048
1114
|
}));
|
|
1049
1115
|
}
|
|
1050
1116
|
|
|
@@ -1072,7 +1138,7 @@
|
|
|
1072
1138
|
var displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema) && (!!label || !!schema.title);
|
|
1073
1139
|
var _onChange = function _onChange(_ref2) {
|
|
1074
1140
|
var value = _ref2.target.value;
|
|
1075
|
-
return onChange(value ===
|
|
1141
|
+
return onChange(value === '' ? options.emptyValue : value);
|
|
1076
1142
|
};
|
|
1077
1143
|
var _onBlur = function _onBlur(_ref3) {
|
|
1078
1144
|
var value = _ref3.target.value;
|
|
@@ -1082,25 +1148,27 @@
|
|
|
1082
1148
|
var value = _ref4.target.value;
|
|
1083
1149
|
return onFocus(id, value);
|
|
1084
1150
|
};
|
|
1085
|
-
return
|
|
1151
|
+
return jsxRuntime.jsxs(react.FormControl, _extends({
|
|
1086
1152
|
mb: 1
|
|
1087
1153
|
}, chakraProps, {
|
|
1088
1154
|
isDisabled: disabled || readonly,
|
|
1089
1155
|
isRequired: required,
|
|
1090
1156
|
isReadOnly: readonly,
|
|
1091
|
-
isInvalid: rawErrors && rawErrors.length > 0
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1157
|
+
isInvalid: rawErrors && rawErrors.length > 0,
|
|
1158
|
+
children: [displayLabel ? jsxRuntime.jsx(react.FormLabel, {
|
|
1159
|
+
htmlFor: id,
|
|
1160
|
+
children: label || schema.title
|
|
1161
|
+
}) : null, jsxRuntime.jsx(react.Textarea, {
|
|
1162
|
+
id: id,
|
|
1163
|
+
name: id,
|
|
1164
|
+
value: value != null ? value : '',
|
|
1165
|
+
placeholder: placeholder,
|
|
1166
|
+
autoFocus: autofocus,
|
|
1167
|
+
onChange: _onChange,
|
|
1168
|
+
onBlur: _onBlur,
|
|
1169
|
+
onFocus: _onFocus,
|
|
1170
|
+
"aria-describedby": utils.ariaDescribedByIds(id)
|
|
1171
|
+
})]
|
|
1104
1172
|
}));
|
|
1105
1173
|
}
|
|
1106
1174
|
|
|
@@ -1134,25 +1202,30 @@
|
|
|
1134
1202
|
var value = _ref2.target.value;
|
|
1135
1203
|
return onFocus(id, value);
|
|
1136
1204
|
};
|
|
1137
|
-
return
|
|
1205
|
+
return jsxRuntime.jsxs(react.FormControl, _extends({
|
|
1138
1206
|
mb: 1
|
|
1139
1207
|
}, chakraProps, {
|
|
1140
1208
|
isDisabled: disabled || readonly,
|
|
1141
1209
|
isRequired: required,
|
|
1142
1210
|
isReadOnly: readonly,
|
|
1143
|
-
isInvalid: rawErrors && rawErrors.length > 0
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
|
|
1147
|
-
|
|
1148
|
-
|
|
1149
|
-
|
|
1150
|
-
|
|
1151
|
-
|
|
1152
|
-
|
|
1153
|
-
|
|
1154
|
-
|
|
1155
|
-
|
|
1211
|
+
isInvalid: rawErrors && rawErrors.length > 0,
|
|
1212
|
+
children: [displayLabel ? jsxRuntime.jsx(react.FormLabel, {
|
|
1213
|
+
htmlFor: id,
|
|
1214
|
+
children: label || schema.title
|
|
1215
|
+
}) : null, jsxRuntime.jsxs(react.NumberInput, {
|
|
1216
|
+
value: value != null ? value : '',
|
|
1217
|
+
onChange: _onChange,
|
|
1218
|
+
onBlur: _onBlur,
|
|
1219
|
+
onFocus: _onFocus,
|
|
1220
|
+
"aria-describedby": utils.ariaDescribedByIds(id),
|
|
1221
|
+
children: [jsxRuntime.jsx(react.NumberInputField, {
|
|
1222
|
+
id: id,
|
|
1223
|
+
name: id
|
|
1224
|
+
}), jsxRuntime.jsxs(react.NumberInputStepper, {
|
|
1225
|
+
children: [jsxRuntime.jsx(react.NumberIncrementStepper, {}), jsxRuntime.jsx(react.NumberDecrementStepper, {})]
|
|
1226
|
+
})]
|
|
1227
|
+
})]
|
|
1228
|
+
}));
|
|
1156
1229
|
}
|
|
1157
1230
|
|
|
1158
1231
|
function generateWidgets() {
|
|
@@ -1205,7 +1278,7 @@
|
|
|
1205
1278
|
It is located at the bottom of the styles string.
|
|
1206
1279
|
*/
|
|
1207
1280
|
var CSSReset = function CSSReset() {
|
|
1208
|
-
return
|
|
1281
|
+
return jsxRuntime.jsx(react$2.Global, {
|
|
1209
1282
|
styles: "\n html {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n font-family: system-ui, sans-serif;\n -webkit-font-smoothing: antialiased;\n text-rendering: optimizeLegibility;\n -moz-osx-font-smoothing: grayscale;\n touch-action: manipulation;\n }\n body {\n position: relative;\n min-height: 100%;\n font-feature-settings: 'kern';\n }\n *,\n *::before,\n *::after {\n border-width: 0;\n border-style: solid;\n box-sizing: border-box;\n }\n main {\n display: block;\n }\n hr {\n border-top-width: 1px;\n box-sizing: content-box;\n height: 0;\n overflow: visible;\n }\n pre,\n code,\n kbd,\n samp {\n font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n font-size: 1em;\n }\n a {\n background-color: transparent;\n color: inherit;\n text-decoration: inherit;\n }\n abbr[title] {\n border-bottom: none;\n text-decoration: underline;\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n b,\n strong {\n font-weight: bold;\n }\n small {\n font-size: 80%;\n }\n sub,\n sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n img {\n border-style: none;\n }\n button,\n input,\n optgroup,\n select,\n textarea {\n font-family: inherit;\n font-size: 100%;\n line-height: 1.15;\n margin: 0;\n }\n button,\n input {\n overflow: visible;\n }\n button,\n select {\n text-transform: none;\n }\n button::-moz-focus-inner,\n [type=\"button\"]::-moz-focus-inner,\n [type=\"reset\"]::-moz-focus-inner,\n [type=\"submit\"]::-moz-focus-inner {\n border-style: none;\n padding: 0;\n }\n fieldset {\n padding: 0.35em 0.75em 0.625em;\n }\n legend {\n box-sizing: border-box;\n color: inherit;\n display: table;\n max-width: 100%;\n padding: 0;\n white-space: normal;\n }\n progress {\n vertical-align: baseline;\n }\n textarea {\n overflow: auto;\n }\n [type=\"checkbox\"],\n [type=\"radio\"] {\n box-sizing: border-box;\n padding: 0;\n }\n [type=\"number\"]::-webkit-inner-spin-button,\n [type=\"number\"]::-webkit-outer-spin-button {\n -webkit-appearance: none !important;\n }\n input[type=\"number\"] {\n -moz-appearance: textfield;\n }\n [type=\"search\"] {\n -webkit-appearance: textfield;\n outline-offset: -2px;\n }\n [type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none !important;\n }\n ::-webkit-file-upload-button {\n -webkit-appearance: button;\n font: inherit;\n }\n details {\n display: block;\n }\n summary {\n display: list-item;\n }\n template {\n display: none;\n }\n [hidden] {\n display: none !important;\n }\n body,\n blockquote,\n dl,\n dd,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n hr,\n figure,\n p,\n pre {\n margin: 0;\n }\n button {\n background: transparent;\n padding: 0;\n }\n fieldset {\n margin: 0;\n padding: 0;\n }\n ol,\n ul {\n margin: 0;\n padding: 0;\n }\n textarea {\n resize: vertical;\n }\n button,\n [role=\"button\"] {\n cursor: pointer;\n }\n button::-moz-focus-inner {\n border: 0 !important;\n }\n table {\n border-collapse: collapse;\n }\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n button,\n input,\n optgroup,\n select,\n textarea {\n padding: 0;\n line-height: inherit;\n color: inherit;\n }\n img,\n svg,\n video,\n canvas,\n audio,\n iframe,\n embed,\n object {\n display: block;\n }\n img,\n video {\n max-width: 100%;\n height: auto;\n }\n [data-js-focus-visible] :focus:not([data-focus-visible-added]) {\n outline: none;\n box-shadow: none;\n }\n select::-ms-expand {\n display: none;\n }\n input {\n border-width: revert;\n border-color: revert;\n border-style: revert;\n }\n .array-item > hr {\n margin-top: 16px;\n margin-bottom: 16px;\n }\n "
|
|
1210
1283
|
});
|
|
1211
1284
|
};
|
|
@@ -1227,22 +1300,25 @@
|
|
|
1227
1300
|
var memoizedCreateCacheWithContainer = /*#__PURE__*/weakMemoize__default["default"](function (container) {
|
|
1228
1301
|
var newCache = createCache__default["default"]({
|
|
1229
1302
|
container: container,
|
|
1230
|
-
key:
|
|
1303
|
+
key: 'rjsf'
|
|
1231
1304
|
});
|
|
1232
1305
|
return newCache;
|
|
1233
1306
|
});
|
|
1234
1307
|
var __createChakraFrameProvider = function __createChakraFrameProvider(props) {
|
|
1235
1308
|
return function (_ref) {
|
|
1236
1309
|
var document = _ref.document;
|
|
1237
|
-
return
|
|
1310
|
+
return jsxRuntime.jsx("div", {
|
|
1238
1311
|
style: {
|
|
1239
1312
|
margin: 2
|
|
1240
|
-
}
|
|
1241
|
-
|
|
1242
|
-
|
|
1243
|
-
|
|
1244
|
-
|
|
1245
|
-
|
|
1313
|
+
},
|
|
1314
|
+
children: jsxRuntime.jsx(react$2.CacheProvider, {
|
|
1315
|
+
value: memoizedCreateCacheWithContainer(document.head),
|
|
1316
|
+
children: jsxRuntime.jsxs(react.ChakraProvider, {
|
|
1317
|
+
resetCSS: false,
|
|
1318
|
+
children: [jsxRuntime.jsx(CSSReset, {}), props.children]
|
|
1319
|
+
})
|
|
1320
|
+
})
|
|
1321
|
+
});
|
|
1246
1322
|
};
|
|
1247
1323
|
};
|
|
1248
1324
|
|