@rjsf/chakra-ui 5.2.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 +479 -412
- 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 +473 -387
- package/dist/chakra-ui.esm.js.map +1 -1
- package/dist/chakra-ui.umd.development.js +480 -414
- 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('@rjsf/utils'), require('@chakra-ui/react'), require('@chakra-ui/icons'), 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', '@rjsf/utils', '@chakra-ui/react', '@chakra-ui/icons', '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.
|
|
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
|
|
|
@@ -61,9 +41,11 @@
|
|
|
61
41
|
var registry = _ref.registry,
|
|
62
42
|
props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
|
|
63
43
|
var translateString = registry.translateString;
|
|
64
|
-
return
|
|
65
|
-
leftIcon:
|
|
66
|
-
}, props
|
|
44
|
+
return jsxRuntime.jsx(react.Button, _extends({
|
|
45
|
+
leftIcon: jsxRuntime.jsx(icons.AddIcon, {})
|
|
46
|
+
}, props, {
|
|
47
|
+
children: translateString(utils.TranslatableString.AddItemButton)
|
|
48
|
+
}));
|
|
67
49
|
}
|
|
68
50
|
|
|
69
51
|
function ArrayFieldItemTemplate(props) {
|
|
@@ -83,39 +65,44 @@
|
|
|
83
65
|
MoveDownButton = _registry$templates$B.MoveDownButton,
|
|
84
66
|
MoveUpButton = _registry$templates$B.MoveUpButton,
|
|
85
67
|
RemoveButton = _registry$templates$B.RemoveButton;
|
|
86
|
-
var onRemoveClick =
|
|
68
|
+
var onRemoveClick = react$1.useMemo(function () {
|
|
87
69
|
return onDropIndexClick(index);
|
|
88
70
|
}, [index, onDropIndexClick]);
|
|
89
|
-
var onArrowUpClick =
|
|
71
|
+
var onArrowUpClick = react$1.useMemo(function () {
|
|
90
72
|
return onReorderClick(index, index - 1);
|
|
91
73
|
}, [index, onReorderClick]);
|
|
92
|
-
var onArrowDownClick =
|
|
74
|
+
var onArrowDownClick = react$1.useMemo(function () {
|
|
93
75
|
return onReorderClick(index, index + 1);
|
|
94
76
|
}, [index, onReorderClick]);
|
|
95
|
-
return
|
|
96
|
-
alignItems:
|
|
97
|
-
py: 1
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
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
|
+
});
|
|
119
106
|
}
|
|
120
107
|
|
|
121
108
|
var _excluded$1 = ["key"];
|
|
@@ -132,49 +119,53 @@
|
|
|
132
119
|
schema = props.schema,
|
|
133
120
|
title = props.title;
|
|
134
121
|
var uiOptions = utils.getUiOptions(uiSchema);
|
|
135
|
-
var ArrayFieldDescriptionTemplate = utils.getTemplate(
|
|
136
|
-
var ArrayFieldItemTemplate = utils.getTemplate(
|
|
137
|
-
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);
|
|
138
125
|
// Button templates are not overridden in the uiSchema
|
|
139
126
|
var AddButton = registry.templates.ButtonTemplates.AddButton;
|
|
140
|
-
return
|
|
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
|
-
|
|
170
|
-
|
|
171
|
-
|
|
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
|
+
});
|
|
172
163
|
}
|
|
173
164
|
|
|
174
165
|
function getChakra(_ref) {
|
|
175
166
|
var _ref$uiSchema = _ref.uiSchema,
|
|
176
167
|
uiSchema = _ref$uiSchema === void 0 ? {} : _ref$uiSchema;
|
|
177
|
-
var chakraProps = uiSchema[
|
|
168
|
+
var chakraProps = uiSchema['ui:options'] && uiSchema['ui:options'].chakra || {};
|
|
178
169
|
Object.keys(chakraProps).forEach(function (key) {
|
|
179
170
|
/**
|
|
180
171
|
* Leveraging `shouldForwardProp` to remove props
|
|
@@ -198,6 +189,7 @@
|
|
|
198
189
|
schema = props.schema,
|
|
199
190
|
uiSchema = props.uiSchema,
|
|
200
191
|
onChange = props.onChange,
|
|
192
|
+
onChangeOverride = props.onChangeOverride,
|
|
201
193
|
onBlur = props.onBlur,
|
|
202
194
|
onFocus = props.onFocus,
|
|
203
195
|
options = props.options,
|
|
@@ -215,7 +207,7 @@
|
|
|
215
207
|
var schemaUtils = registry.schemaUtils;
|
|
216
208
|
var _onChange = function _onChange(_ref) {
|
|
217
209
|
var value = _ref.target.value;
|
|
218
|
-
return onChange(value ===
|
|
210
|
+
return onChange(value === '' ? options.emptyValue : value);
|
|
219
211
|
};
|
|
220
212
|
var _onBlur = function _onBlur(_ref2) {
|
|
221
213
|
var value = _ref2.target.value;
|
|
@@ -226,36 +218,38 @@
|
|
|
226
218
|
return onFocus(id, value);
|
|
227
219
|
};
|
|
228
220
|
var displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema) && (!!label || !!schema.title);
|
|
229
|
-
return
|
|
221
|
+
return jsxRuntime.jsxs(react.FormControl, _extends({
|
|
230
222
|
mb: 1
|
|
231
223
|
}, chakraProps, {
|
|
232
224
|
isDisabled: disabled || readonly,
|
|
233
225
|
isRequired: required,
|
|
234
226
|
isReadOnly: readonly,
|
|
235
|
-
isInvalid: rawErrors && rawErrors.length > 0
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
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
|
+
}));
|
|
259
253
|
}
|
|
260
254
|
|
|
261
255
|
function DescriptionField(_ref) {
|
|
@@ -264,70 +258,78 @@
|
|
|
264
258
|
if (!description) {
|
|
265
259
|
return null;
|
|
266
260
|
}
|
|
267
|
-
if (typeof description ===
|
|
268
|
-
return
|
|
261
|
+
if (typeof description === 'string') {
|
|
262
|
+
return jsxRuntime.jsx(react.Text, {
|
|
269
263
|
id: id,
|
|
270
264
|
mt: 2,
|
|
271
|
-
mb: 4
|
|
272
|
-
|
|
265
|
+
mb: 4,
|
|
266
|
+
children: description
|
|
267
|
+
});
|
|
273
268
|
}
|
|
274
|
-
return
|
|
269
|
+
return jsxRuntime.jsx(jsxRuntime.Fragment, {
|
|
270
|
+
children: description
|
|
271
|
+
});
|
|
275
272
|
}
|
|
276
273
|
|
|
277
274
|
function ErrorList(_ref) {
|
|
278
275
|
var errors = _ref.errors,
|
|
279
276
|
registry = _ref.registry;
|
|
280
277
|
var translateString = registry.translateString;
|
|
281
|
-
return
|
|
282
|
-
flexDirection:
|
|
283
|
-
alignItems:
|
|
278
|
+
return jsxRuntime.jsxs(react.Alert, {
|
|
279
|
+
flexDirection: 'column',
|
|
280
|
+
alignItems: 'flex-start',
|
|
284
281
|
gap: 3,
|
|
285
|
-
status:
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
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
|
+
});
|
|
294
296
|
}
|
|
295
297
|
|
|
296
298
|
var _excluded = ["icon", "iconType", "uiSchema", "registry"];
|
|
297
299
|
function ChakraIconButton(props) {
|
|
298
300
|
var icon = props.icon,
|
|
299
301
|
otherProps = _objectWithoutPropertiesLoose(props, _excluded);
|
|
300
|
-
return
|
|
302
|
+
return jsxRuntime.jsx(react.IconButton, _extends({
|
|
301
303
|
"aria-label": props.title
|
|
302
304
|
}, otherProps, {
|
|
303
305
|
icon: icon
|
|
304
306
|
}));
|
|
305
307
|
}
|
|
306
|
-
ChakraIconButton.displayName =
|
|
307
|
-
var ChakraIconButton$1 = /*#__PURE__*/
|
|
308
|
+
ChakraIconButton.displayName = 'ChakraIconButton';
|
|
309
|
+
var ChakraIconButton$1 = /*#__PURE__*/react$1.memo(ChakraIconButton);
|
|
308
310
|
|
|
309
311
|
function MoveDownButton(props) {
|
|
310
312
|
var translateString = props.registry.translateString;
|
|
311
|
-
return
|
|
313
|
+
return jsxRuntime.jsx(ChakraIconButton$1, _extends({
|
|
312
314
|
title: translateString(utils.TranslatableString.MoveDownButton)
|
|
313
315
|
}, props, {
|
|
314
|
-
icon:
|
|
316
|
+
icon: jsxRuntime.jsx(icons.ArrowDownIcon, {})
|
|
315
317
|
}));
|
|
316
318
|
}
|
|
317
319
|
function MoveUpButton(props) {
|
|
318
320
|
var translateString = props.registry.translateString;
|
|
319
|
-
return
|
|
321
|
+
return jsxRuntime.jsx(ChakraIconButton$1, _extends({
|
|
320
322
|
title: translateString(utils.TranslatableString.MoveUpButton)
|
|
321
323
|
}, props, {
|
|
322
|
-
icon:
|
|
324
|
+
icon: jsxRuntime.jsx(icons.ArrowUpIcon, {})
|
|
323
325
|
}));
|
|
324
326
|
}
|
|
325
327
|
function RemoveButton(props) {
|
|
326
328
|
var translateString = props.registry.translateString;
|
|
327
|
-
return
|
|
329
|
+
return jsxRuntime.jsx(ChakraIconButton$1, _extends({
|
|
328
330
|
title: translateString(utils.TranslatableString.RemoveButton)
|
|
329
331
|
}, props, {
|
|
330
|
-
icon:
|
|
332
|
+
icon: jsxRuntime.jsx(icons.DeleteIcon, {})
|
|
331
333
|
}));
|
|
332
334
|
}
|
|
333
335
|
|
|
@@ -343,13 +345,16 @@
|
|
|
343
345
|
return null;
|
|
344
346
|
}
|
|
345
347
|
var id = utils.errorId(idSchema);
|
|
346
|
-
return
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
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
|
+
});
|
|
353
358
|
}
|
|
354
359
|
|
|
355
360
|
/** The `FieldHelpTemplate` component renders any help desired for a field
|
|
@@ -363,9 +368,10 @@
|
|
|
363
368
|
return null;
|
|
364
369
|
}
|
|
365
370
|
var id = utils.helpId(idSchema);
|
|
366
|
-
return
|
|
367
|
-
id: id
|
|
368
|
-
|
|
371
|
+
return jsxRuntime.jsx(react.FormHelperText, {
|
|
372
|
+
id: id,
|
|
373
|
+
children: help
|
|
374
|
+
});
|
|
369
375
|
}
|
|
370
376
|
|
|
371
377
|
function FieldTemplate(props) {
|
|
@@ -390,15 +396,16 @@
|
|
|
390
396
|
schema = props.schema,
|
|
391
397
|
uiSchema = props.uiSchema;
|
|
392
398
|
var uiOptions = utils.getUiOptions(uiSchema);
|
|
393
|
-
var WrapIfAdditionalTemplate = utils.getTemplate(
|
|
399
|
+
var WrapIfAdditionalTemplate = utils.getTemplate('WrapIfAdditionalTemplate', registry, uiOptions);
|
|
394
400
|
if (hidden) {
|
|
395
|
-
return
|
|
401
|
+
return jsxRuntime.jsx("div", {
|
|
396
402
|
style: {
|
|
397
|
-
display:
|
|
398
|
-
}
|
|
399
|
-
|
|
403
|
+
display: 'none'
|
|
404
|
+
},
|
|
405
|
+
children: children
|
|
406
|
+
});
|
|
400
407
|
}
|
|
401
|
-
return
|
|
408
|
+
return jsxRuntime.jsx(WrapIfAdditionalTemplate, {
|
|
402
409
|
classNames: classNames,
|
|
403
410
|
style: style,
|
|
404
411
|
disabled: disabled,
|
|
@@ -410,13 +417,16 @@
|
|
|
410
417
|
required: required,
|
|
411
418
|
schema: schema,
|
|
412
419
|
uiSchema: uiSchema,
|
|
413
|
-
registry: registry
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
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
|
+
});
|
|
420
430
|
}
|
|
421
431
|
|
|
422
432
|
function ObjectFieldTemplate(props) {
|
|
@@ -433,39 +443,43 @@
|
|
|
433
443
|
onAddClick = props.onAddClick,
|
|
434
444
|
registry = props.registry;
|
|
435
445
|
var uiOptions = utils.getUiOptions(uiSchema);
|
|
436
|
-
var TitleFieldTemplate = utils.getTemplate(
|
|
437
|
-
var DescriptionFieldTemplate = utils.getTemplate(
|
|
446
|
+
var TitleFieldTemplate = utils.getTemplate('TitleFieldTemplate', registry, uiOptions);
|
|
447
|
+
var DescriptionFieldTemplate = utils.getTemplate('DescriptionFieldTemplate', registry, uiOptions);
|
|
438
448
|
// Button templates are not overridden in the uiSchema
|
|
439
449
|
var AddButton = registry.templates.ButtonTemplates.AddButton;
|
|
440
|
-
return
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
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
|
+
});
|
|
469
483
|
}
|
|
470
484
|
|
|
471
485
|
function SubmitButton(_ref) {
|
|
@@ -477,24 +491,29 @@
|
|
|
477
491
|
if (norender) {
|
|
478
492
|
return null;
|
|
479
493
|
}
|
|
480
|
-
return
|
|
481
|
-
marginTop: 3
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
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
|
+
});
|
|
486
503
|
}
|
|
487
504
|
|
|
488
505
|
function TitleField(_ref) {
|
|
489
506
|
var id = _ref.id,
|
|
490
507
|
title = _ref.title;
|
|
491
|
-
return
|
|
508
|
+
return jsxRuntime.jsxs(react.Box, {
|
|
492
509
|
id: id,
|
|
493
510
|
mt: 1,
|
|
494
|
-
mb: 4
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
511
|
+
mb: 4,
|
|
512
|
+
children: [jsxRuntime.jsx(react.Heading, {
|
|
513
|
+
as: 'h5',
|
|
514
|
+
children: title
|
|
515
|
+
}), jsxRuntime.jsx(react.Divider, {})]
|
|
516
|
+
});
|
|
498
517
|
}
|
|
499
518
|
|
|
500
519
|
function WrapIfAdditionalTemplate(props) {
|
|
@@ -518,40 +537,49 @@
|
|
|
518
537
|
var keyLabel = translateString(utils.TranslatableString.KeyLabel, [label]);
|
|
519
538
|
var additional = (utils.ADDITIONAL_PROPERTY_FLAG in schema);
|
|
520
539
|
if (!additional) {
|
|
521
|
-
return
|
|
540
|
+
return jsxRuntime.jsx("div", {
|
|
522
541
|
className: classNames,
|
|
523
|
-
style: style
|
|
524
|
-
|
|
542
|
+
style: style,
|
|
543
|
+
children: children
|
|
544
|
+
});
|
|
525
545
|
}
|
|
526
546
|
var handleBlur = function handleBlur(_ref) {
|
|
527
547
|
var target = _ref.target;
|
|
528
548
|
return onKeyChange(target.value);
|
|
529
549
|
};
|
|
530
|
-
return
|
|
531
|
-
key: id + "-key",
|
|
550
|
+
return jsxRuntime.jsxs(react.Grid, {
|
|
532
551
|
className: classNames,
|
|
533
552
|
style: style,
|
|
534
|
-
alignItems:
|
|
535
|
-
gap: 2
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
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");
|
|
555
583
|
}
|
|
556
584
|
|
|
557
585
|
function generateTemplates() {
|
|
@@ -591,9 +619,9 @@
|
|
|
591
619
|
function DateElement(props) {
|
|
592
620
|
var SelectWidget = props.registry.widgets.SelectWidget;
|
|
593
621
|
var value = props.value ? props.value : undefined;
|
|
594
|
-
return
|
|
595
|
-
label:
|
|
596
|
-
className:
|
|
622
|
+
return jsxRuntime.jsx(SelectWidget, _extends({}, props, {
|
|
623
|
+
label: '',
|
|
624
|
+
className: 'form-control',
|
|
597
625
|
onChange: function onChange(elemValue) {
|
|
598
626
|
return props.select(props.type, elemValue);
|
|
599
627
|
},
|
|
@@ -602,7 +630,7 @@
|
|
|
602
630
|
},
|
|
603
631
|
placeholder: props.type,
|
|
604
632
|
schema: {
|
|
605
|
-
type:
|
|
633
|
+
type: 'integer'
|
|
606
634
|
},
|
|
607
635
|
value: value,
|
|
608
636
|
"aria-describedby": utils.ariaDescribedByIds(props.name)
|
|
@@ -610,7 +638,7 @@
|
|
|
610
638
|
}
|
|
611
639
|
var readyForChange = function readyForChange(state) {
|
|
612
640
|
return Object.keys(state).every(function (key) {
|
|
613
|
-
return typeof state[key] !==
|
|
641
|
+
return typeof state[key] !== 'undefined' && state[key] !== -1;
|
|
614
642
|
});
|
|
615
643
|
};
|
|
616
644
|
function AltDateWidget(props) {
|
|
@@ -626,15 +654,15 @@
|
|
|
626
654
|
showTime = props.showTime,
|
|
627
655
|
value = props.value;
|
|
628
656
|
var translateString = registry.translateString;
|
|
629
|
-
var _useState =
|
|
657
|
+
var _useState = react$1.useState(utils.parseDateString(value, showTime)),
|
|
630
658
|
state = _useState[0],
|
|
631
659
|
setState = _useState[1];
|
|
632
|
-
|
|
660
|
+
react$1.useEffect(function () {
|
|
633
661
|
setState(utils.parseDateString(value, showTime));
|
|
634
662
|
}, [showTime, value]);
|
|
635
663
|
var handleChange = function handleChange(property, nextValue) {
|
|
636
664
|
var _extends2;
|
|
637
|
-
var nextState = _extends({}, state, (_extends2 = {}, _extends2[property] = typeof nextValue ===
|
|
665
|
+
var nextState = _extends({}, state, (_extends2 = {}, _extends2[property] = typeof nextValue === 'undefined' ? -1 : nextValue, _extends2));
|
|
638
666
|
if (readyForChange(nextState)) {
|
|
639
667
|
onChange(utils.toDateString(nextState, showTime));
|
|
640
668
|
} else {
|
|
@@ -664,70 +692,76 @@
|
|
|
664
692
|
minute = state.minute,
|
|
665
693
|
second = state.second;
|
|
666
694
|
var data = [{
|
|
667
|
-
type:
|
|
695
|
+
type: 'year',
|
|
668
696
|
range: options.yearsRange,
|
|
669
697
|
value: year
|
|
670
698
|
}, {
|
|
671
|
-
type:
|
|
699
|
+
type: 'month',
|
|
672
700
|
range: [1, 12],
|
|
673
701
|
value: month
|
|
674
702
|
}, {
|
|
675
|
-
type:
|
|
703
|
+
type: 'day',
|
|
676
704
|
range: [1, 31],
|
|
677
705
|
value: day
|
|
678
706
|
}];
|
|
679
707
|
if (showTime) {
|
|
680
708
|
data.push({
|
|
681
|
-
type:
|
|
709
|
+
type: 'hour',
|
|
682
710
|
range: [0, 23],
|
|
683
711
|
value: hour
|
|
684
712
|
}, {
|
|
685
|
-
type:
|
|
713
|
+
type: 'minute',
|
|
686
714
|
range: [0, 59],
|
|
687
715
|
value: minute
|
|
688
716
|
}, {
|
|
689
|
-
type:
|
|
717
|
+
type: 'second',
|
|
690
718
|
range: [0, 59],
|
|
691
719
|
value: second
|
|
692
720
|
});
|
|
693
721
|
}
|
|
694
722
|
return data;
|
|
695
723
|
};
|
|
696
|
-
return
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
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
|
+
});
|
|
731
765
|
}
|
|
732
766
|
AltDateWidget.defaultProps = {
|
|
733
767
|
autofocus: false,
|
|
@@ -741,7 +775,7 @@
|
|
|
741
775
|
|
|
742
776
|
function AltDateTimeWidget(props) {
|
|
743
777
|
var AltDateWidget = props.registry.widgets.AltDateWidget;
|
|
744
|
-
return
|
|
778
|
+
return jsxRuntime.jsx(AltDateWidget, _extends({}, props, {
|
|
745
779
|
showTime: true
|
|
746
780
|
}));
|
|
747
781
|
}
|
|
@@ -779,20 +813,24 @@
|
|
|
779
813
|
var value = _ref3.target.value;
|
|
780
814
|
return onFocus(id, value);
|
|
781
815
|
};
|
|
782
|
-
return
|
|
816
|
+
return jsxRuntime.jsx(react.FormControl, _extends({
|
|
783
817
|
mb: 1
|
|
784
818
|
}, chakraProps, {
|
|
785
|
-
isRequired: required
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
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
|
+
}));
|
|
796
834
|
}
|
|
797
835
|
|
|
798
836
|
function CheckboxesWidget(props) {
|
|
@@ -827,38 +865,44 @@
|
|
|
827
865
|
};
|
|
828
866
|
var row = options ? options.inline : false;
|
|
829
867
|
var selectedIndexes = utils.enumOptionsIndexForValue(value, enumOptions, true);
|
|
830
|
-
return
|
|
868
|
+
return jsxRuntime.jsxs(react.FormControl, _extends({
|
|
831
869
|
mb: 1
|
|
832
870
|
}, chakraProps, {
|
|
833
871
|
isDisabled: disabled || readonly,
|
|
834
872
|
isRequired: required,
|
|
835
873
|
isReadOnly: readonly,
|
|
836
|
-
isInvalid: rawErrors && rawErrors.length > 0
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
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
|
+
}));
|
|
862
906
|
}
|
|
863
907
|
|
|
864
908
|
function RadioWidget(_ref) {
|
|
@@ -893,33 +937,37 @@
|
|
|
893
937
|
};
|
|
894
938
|
var row = options ? options.inline : false;
|
|
895
939
|
var selectedIndex = utils.enumOptionsIndexForValue(value, enumOptions);
|
|
896
|
-
return
|
|
940
|
+
return jsxRuntime.jsxs(react.FormControl, _extends({
|
|
897
941
|
mb: 1
|
|
898
942
|
}, chakraProps, {
|
|
899
943
|
isDisabled: disabled || readonly,
|
|
900
944
|
isRequired: required,
|
|
901
|
-
isReadOnly: readonly
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
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
|
+
}));
|
|
923
971
|
}
|
|
924
972
|
|
|
925
973
|
function RangeWidget(_ref) {
|
|
@@ -956,19 +1004,25 @@
|
|
|
956
1004
|
var value = _ref3.target.value;
|
|
957
1005
|
return onFocus(id, value);
|
|
958
1006
|
};
|
|
959
|
-
return
|
|
1007
|
+
return jsxRuntime.jsxs(react.FormControl, _extends({
|
|
960
1008
|
mb: 1
|
|
961
|
-
}, chakraProps
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
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
|
+
}));
|
|
972
1026
|
}
|
|
973
1027
|
|
|
974
1028
|
function SelectWidget(props) {
|
|
@@ -1022,7 +1076,7 @@
|
|
|
1022
1076
|
isDisabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(value) !== -1
|
|
1023
1077
|
};
|
|
1024
1078
|
}) : [];
|
|
1025
|
-
var isMultiple = typeof multiple !==
|
|
1079
|
+
var isMultiple = typeof multiple !== 'undefined' && Boolean(enumOptions);
|
|
1026
1080
|
var selectedIndex = utils.enumOptionsIndexForValue(value, enumOptions, isMultiple);
|
|
1027
1081
|
var formValue = isMultiple ? (selectedIndex || []).map(function (i) {
|
|
1028
1082
|
return {
|
|
@@ -1030,31 +1084,33 @@
|
|
|
1030
1084
|
value: i
|
|
1031
1085
|
};
|
|
1032
1086
|
}) : {
|
|
1033
|
-
label: _valueLabelMap[selectedIndex] ||
|
|
1087
|
+
label: _valueLabelMap[selectedIndex] || '',
|
|
1034
1088
|
selectedIndex: selectedIndex
|
|
1035
1089
|
};
|
|
1036
|
-
return
|
|
1090
|
+
return jsxRuntime.jsxs(react.FormControl, _extends({
|
|
1037
1091
|
mb: 1
|
|
1038
1092
|
}, chakraProps, {
|
|
1039
1093
|
isDisabled: disabled || readonly,
|
|
1040
1094
|
isRequired: required,
|
|
1041
1095
|
isReadOnly: readonly,
|
|
1042
|
-
isInvalid: rawErrors && rawErrors.length > 0
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
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
|
+
})]
|
|
1058
1114
|
}));
|
|
1059
1115
|
}
|
|
1060
1116
|
|
|
@@ -1082,7 +1138,7 @@
|
|
|
1082
1138
|
var displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema) && (!!label || !!schema.title);
|
|
1083
1139
|
var _onChange = function _onChange(_ref2) {
|
|
1084
1140
|
var value = _ref2.target.value;
|
|
1085
|
-
return onChange(value ===
|
|
1141
|
+
return onChange(value === '' ? options.emptyValue : value);
|
|
1086
1142
|
};
|
|
1087
1143
|
var _onBlur = function _onBlur(_ref3) {
|
|
1088
1144
|
var value = _ref3.target.value;
|
|
@@ -1092,25 +1148,27 @@
|
|
|
1092
1148
|
var value = _ref4.target.value;
|
|
1093
1149
|
return onFocus(id, value);
|
|
1094
1150
|
};
|
|
1095
|
-
return
|
|
1151
|
+
return jsxRuntime.jsxs(react.FormControl, _extends({
|
|
1096
1152
|
mb: 1
|
|
1097
1153
|
}, chakraProps, {
|
|
1098
1154
|
isDisabled: disabled || readonly,
|
|
1099
1155
|
isRequired: required,
|
|
1100
1156
|
isReadOnly: readonly,
|
|
1101
|
-
isInvalid: rawErrors && rawErrors.length > 0
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
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
|
+
})]
|
|
1114
1172
|
}));
|
|
1115
1173
|
}
|
|
1116
1174
|
|
|
@@ -1144,25 +1202,30 @@
|
|
|
1144
1202
|
var value = _ref2.target.value;
|
|
1145
1203
|
return onFocus(id, value);
|
|
1146
1204
|
};
|
|
1147
|
-
return
|
|
1205
|
+
return jsxRuntime.jsxs(react.FormControl, _extends({
|
|
1148
1206
|
mb: 1
|
|
1149
1207
|
}, chakraProps, {
|
|
1150
1208
|
isDisabled: disabled || readonly,
|
|
1151
1209
|
isRequired: required,
|
|
1152
1210
|
isReadOnly: readonly,
|
|
1153
|
-
isInvalid: rawErrors && rawErrors.length > 0
|
|
1154
|
-
|
|
1155
|
-
|
|
1156
|
-
|
|
1157
|
-
|
|
1158
|
-
|
|
1159
|
-
|
|
1160
|
-
|
|
1161
|
-
|
|
1162
|
-
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
|
|
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
|
+
}));
|
|
1166
1229
|
}
|
|
1167
1230
|
|
|
1168
1231
|
function generateWidgets() {
|
|
@@ -1215,7 +1278,7 @@
|
|
|
1215
1278
|
It is located at the bottom of the styles string.
|
|
1216
1279
|
*/
|
|
1217
1280
|
var CSSReset = function CSSReset() {
|
|
1218
|
-
return
|
|
1281
|
+
return jsxRuntime.jsx(react$2.Global, {
|
|
1219
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 "
|
|
1220
1283
|
});
|
|
1221
1284
|
};
|
|
@@ -1237,22 +1300,25 @@
|
|
|
1237
1300
|
var memoizedCreateCacheWithContainer = /*#__PURE__*/weakMemoize__default["default"](function (container) {
|
|
1238
1301
|
var newCache = createCache__default["default"]({
|
|
1239
1302
|
container: container,
|
|
1240
|
-
key:
|
|
1303
|
+
key: 'rjsf'
|
|
1241
1304
|
});
|
|
1242
1305
|
return newCache;
|
|
1243
1306
|
});
|
|
1244
1307
|
var __createChakraFrameProvider = function __createChakraFrameProvider(props) {
|
|
1245
1308
|
return function (_ref) {
|
|
1246
1309
|
var document = _ref.document;
|
|
1247
|
-
return
|
|
1310
|
+
return jsxRuntime.jsx("div", {
|
|
1248
1311
|
style: {
|
|
1249
1312
|
margin: 2
|
|
1250
|
-
}
|
|
1251
|
-
|
|
1252
|
-
|
|
1253
|
-
|
|
1254
|
-
|
|
1255
|
-
|
|
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
|
+
});
|
|
1256
1322
|
};
|
|
1257
1323
|
};
|
|
1258
1324
|
|