@rjsf/chakra-ui 5.2.0 → 5.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE.md +183 -183
- package/README.md +4 -4
- package/dist/chakra-ui.cjs.development.js +499 -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 +494 -388
- package/dist/chakra-ui.esm.js.map +1 -1
- package/dist/chakra-ui.umd.development.js +500 -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 +12 -11
|
@@ -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,61 +41,79 @@
|
|
|
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) {
|
|
70
52
|
var children = props.children,
|
|
71
53
|
disabled = props.disabled,
|
|
72
54
|
hasToolbar = props.hasToolbar,
|
|
55
|
+
hasCopy = props.hasCopy,
|
|
73
56
|
hasMoveDown = props.hasMoveDown,
|
|
74
57
|
hasMoveUp = props.hasMoveUp,
|
|
75
58
|
hasRemove = props.hasRemove,
|
|
76
59
|
index = props.index,
|
|
60
|
+
onCopyIndexClick = props.onCopyIndexClick,
|
|
77
61
|
onDropIndexClick = props.onDropIndexClick,
|
|
78
62
|
onReorderClick = props.onReorderClick,
|
|
79
63
|
readonly = props.readonly,
|
|
80
64
|
uiSchema = props.uiSchema,
|
|
81
65
|
registry = props.registry;
|
|
82
66
|
var _registry$templates$B = registry.templates.ButtonTemplates,
|
|
67
|
+
CopyButton = _registry$templates$B.CopyButton,
|
|
83
68
|
MoveDownButton = _registry$templates$B.MoveDownButton,
|
|
84
69
|
MoveUpButton = _registry$templates$B.MoveUpButton,
|
|
85
70
|
RemoveButton = _registry$templates$B.RemoveButton;
|
|
86
|
-
var
|
|
71
|
+
var onCopyClick = react$1.useMemo(function () {
|
|
72
|
+
return onCopyIndexClick(index);
|
|
73
|
+
}, [index, onCopyIndexClick]);
|
|
74
|
+
var onRemoveClick = react$1.useMemo(function () {
|
|
87
75
|
return onDropIndexClick(index);
|
|
88
76
|
}, [index, onDropIndexClick]);
|
|
89
|
-
var onArrowUpClick =
|
|
77
|
+
var onArrowUpClick = react$1.useMemo(function () {
|
|
90
78
|
return onReorderClick(index, index - 1);
|
|
91
79
|
}, [index, onReorderClick]);
|
|
92
|
-
var onArrowDownClick =
|
|
80
|
+
var onArrowDownClick = react$1.useMemo(function () {
|
|
93
81
|
return onReorderClick(index, index + 1);
|
|
94
82
|
}, [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
|
-
|
|
83
|
+
return jsxRuntime.jsxs(react.HStack, {
|
|
84
|
+
alignItems: 'flex-end',
|
|
85
|
+
py: 1,
|
|
86
|
+
children: [jsxRuntime.jsx(react.Box, {
|
|
87
|
+
w: '100%',
|
|
88
|
+
children: children
|
|
89
|
+
}), hasToolbar && jsxRuntime.jsx(react.Box, {
|
|
90
|
+
children: jsxRuntime.jsxs(react.ButtonGroup, {
|
|
91
|
+
isAttached: true,
|
|
92
|
+
mb: 1,
|
|
93
|
+
children: [(hasMoveUp || hasMoveDown) && jsxRuntime.jsx(MoveUpButton, {
|
|
94
|
+
disabled: disabled || readonly || !hasMoveUp,
|
|
95
|
+
onClick: onArrowUpClick,
|
|
96
|
+
uiSchema: uiSchema,
|
|
97
|
+
registry: registry
|
|
98
|
+
}), (hasMoveUp || hasMoveDown) && jsxRuntime.jsx(MoveDownButton, {
|
|
99
|
+
disabled: disabled || readonly || !hasMoveDown,
|
|
100
|
+
onClick: onArrowDownClick,
|
|
101
|
+
uiSchema: uiSchema,
|
|
102
|
+
registry: registry
|
|
103
|
+
}), hasCopy && jsxRuntime.jsx(CopyButton, {
|
|
104
|
+
disabled: disabled || readonly,
|
|
105
|
+
onClick: onCopyClick,
|
|
106
|
+
uiSchema: uiSchema,
|
|
107
|
+
registry: registry
|
|
108
|
+
}), hasRemove && jsxRuntime.jsx(RemoveButton, {
|
|
109
|
+
disabled: disabled || readonly,
|
|
110
|
+
onClick: onRemoveClick,
|
|
111
|
+
uiSchema: uiSchema,
|
|
112
|
+
registry: registry
|
|
113
|
+
})]
|
|
114
|
+
})
|
|
115
|
+
})]
|
|
116
|
+
});
|
|
119
117
|
}
|
|
120
118
|
|
|
121
119
|
var _excluded$1 = ["key"];
|
|
@@ -132,49 +130,53 @@
|
|
|
132
130
|
schema = props.schema,
|
|
133
131
|
title = props.title;
|
|
134
132
|
var uiOptions = utils.getUiOptions(uiSchema);
|
|
135
|
-
var ArrayFieldDescriptionTemplate = utils.getTemplate(
|
|
136
|
-
var ArrayFieldItemTemplate = utils.getTemplate(
|
|
137
|
-
var ArrayFieldTitleTemplate = utils.getTemplate(
|
|
133
|
+
var ArrayFieldDescriptionTemplate = utils.getTemplate('ArrayFieldDescriptionTemplate', registry, uiOptions);
|
|
134
|
+
var ArrayFieldItemTemplate = utils.getTemplate('ArrayFieldItemTemplate', registry, uiOptions);
|
|
135
|
+
var ArrayFieldTitleTemplate = utils.getTemplate('ArrayFieldTitleTemplate', registry, uiOptions);
|
|
138
136
|
// Button templates are not overridden in the uiSchema
|
|
139
137
|
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
|
-
|
|
138
|
+
return jsxRuntime.jsxs(react.Box, {
|
|
139
|
+
children: [jsxRuntime.jsx(ArrayFieldTitleTemplate, {
|
|
140
|
+
idSchema: idSchema,
|
|
141
|
+
title: uiOptions.title || title,
|
|
142
|
+
schema: schema,
|
|
143
|
+
uiSchema: uiSchema,
|
|
144
|
+
required: required,
|
|
145
|
+
registry: registry
|
|
146
|
+
}), jsxRuntime.jsx(ArrayFieldDescriptionTemplate, {
|
|
147
|
+
idSchema: idSchema,
|
|
148
|
+
description: uiOptions.description || schema.description,
|
|
149
|
+
schema: schema,
|
|
150
|
+
uiSchema: uiSchema,
|
|
151
|
+
registry: registry
|
|
152
|
+
}), jsxRuntime.jsxs(react.Grid, {
|
|
153
|
+
children: [jsxRuntime.jsx(react.GridItem, {
|
|
154
|
+
children: items.length > 0 && items.map(function (_ref) {
|
|
155
|
+
var key = _ref.key,
|
|
156
|
+
itemProps = _objectWithoutPropertiesLoose(_ref, _excluded$1);
|
|
157
|
+
return jsxRuntime.jsx(ArrayFieldItemTemplate, _extends({}, itemProps), key);
|
|
158
|
+
})
|
|
159
|
+
}), canAdd && jsxRuntime.jsx(react.GridItem, {
|
|
160
|
+
justifySelf: 'flex-end',
|
|
161
|
+
children: jsxRuntime.jsx(react.Box, {
|
|
162
|
+
mt: 2,
|
|
163
|
+
children: jsxRuntime.jsx(AddButton, {
|
|
164
|
+
className: 'array-item-add',
|
|
165
|
+
onClick: onAddClick,
|
|
166
|
+
disabled: disabled || readonly,
|
|
167
|
+
uiSchema: uiSchema,
|
|
168
|
+
registry: registry
|
|
169
|
+
})
|
|
170
|
+
})
|
|
171
|
+
})]
|
|
172
|
+
}, "array-item-list-" + idSchema.$id)]
|
|
173
|
+
});
|
|
172
174
|
}
|
|
173
175
|
|
|
174
176
|
function getChakra(_ref) {
|
|
175
177
|
var _ref$uiSchema = _ref.uiSchema,
|
|
176
178
|
uiSchema = _ref$uiSchema === void 0 ? {} : _ref$uiSchema;
|
|
177
|
-
var chakraProps = uiSchema[
|
|
179
|
+
var chakraProps = uiSchema['ui:options'] && uiSchema['ui:options'].chakra || {};
|
|
178
180
|
Object.keys(chakraProps).forEach(function (key) {
|
|
179
181
|
/**
|
|
180
182
|
* Leveraging `shouldForwardProp` to remove props
|
|
@@ -198,6 +200,7 @@
|
|
|
198
200
|
schema = props.schema,
|
|
199
201
|
uiSchema = props.uiSchema,
|
|
200
202
|
onChange = props.onChange,
|
|
203
|
+
onChangeOverride = props.onChangeOverride,
|
|
201
204
|
onBlur = props.onBlur,
|
|
202
205
|
onFocus = props.onFocus,
|
|
203
206
|
options = props.options,
|
|
@@ -215,7 +218,7 @@
|
|
|
215
218
|
var schemaUtils = registry.schemaUtils;
|
|
216
219
|
var _onChange = function _onChange(_ref) {
|
|
217
220
|
var value = _ref.target.value;
|
|
218
|
-
return onChange(value ===
|
|
221
|
+
return onChange(value === '' ? options.emptyValue : value);
|
|
219
222
|
};
|
|
220
223
|
var _onBlur = function _onBlur(_ref2) {
|
|
221
224
|
var value = _ref2.target.value;
|
|
@@ -226,36 +229,38 @@
|
|
|
226
229
|
return onFocus(id, value);
|
|
227
230
|
};
|
|
228
231
|
var displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema) && (!!label || !!schema.title);
|
|
229
|
-
return
|
|
232
|
+
return jsxRuntime.jsxs(react.FormControl, _extends({
|
|
230
233
|
mb: 1
|
|
231
234
|
}, chakraProps, {
|
|
232
235
|
isDisabled: disabled || readonly,
|
|
233
236
|
isRequired: required,
|
|
234
237
|
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
|
-
|
|
238
|
+
isInvalid: rawErrors && rawErrors.length > 0,
|
|
239
|
+
children: [displayLabel ? jsxRuntime.jsx(react.FormLabel, {
|
|
240
|
+
htmlFor: id,
|
|
241
|
+
id: id + "-label",
|
|
242
|
+
children: label || schema.title
|
|
243
|
+
}) : null, jsxRuntime.jsx(react.Input, _extends({
|
|
244
|
+
id: id,
|
|
245
|
+
name: id,
|
|
246
|
+
value: value || value === 0 ? value : '',
|
|
247
|
+
onChange: onChangeOverride || _onChange,
|
|
248
|
+
onBlur: _onBlur,
|
|
249
|
+
onFocus: _onFocus,
|
|
250
|
+
autoFocus: autofocus,
|
|
251
|
+
placeholder: placeholder
|
|
252
|
+
}, inputProps, {
|
|
253
|
+
list: schema.examples ? utils.examplesId(id) : undefined,
|
|
254
|
+
"aria-describedby": utils.ariaDescribedByIds(id, !!schema.examples)
|
|
255
|
+
})), Array.isArray(schema.examples) ? jsxRuntime.jsx("datalist", {
|
|
256
|
+
id: utils.examplesId(id),
|
|
257
|
+
children: schema.examples.concat(schema["default"] && !schema.examples.includes(schema["default"]) ? [schema["default"]] : []).map(function (example) {
|
|
258
|
+
return jsxRuntime.jsx("option", {
|
|
259
|
+
value: example
|
|
260
|
+
}, example);
|
|
261
|
+
})
|
|
262
|
+
}) : null]
|
|
263
|
+
}));
|
|
259
264
|
}
|
|
260
265
|
|
|
261
266
|
function DescriptionField(_ref) {
|
|
@@ -264,70 +269,86 @@
|
|
|
264
269
|
if (!description) {
|
|
265
270
|
return null;
|
|
266
271
|
}
|
|
267
|
-
if (typeof description ===
|
|
268
|
-
return
|
|
272
|
+
if (typeof description === 'string') {
|
|
273
|
+
return jsxRuntime.jsx(react.Text, {
|
|
269
274
|
id: id,
|
|
270
275
|
mt: 2,
|
|
271
|
-
mb: 4
|
|
272
|
-
|
|
276
|
+
mb: 4,
|
|
277
|
+
children: description
|
|
278
|
+
});
|
|
273
279
|
}
|
|
274
|
-
return
|
|
280
|
+
return jsxRuntime.jsx(jsxRuntime.Fragment, {
|
|
281
|
+
children: description
|
|
282
|
+
});
|
|
275
283
|
}
|
|
276
284
|
|
|
277
285
|
function ErrorList(_ref) {
|
|
278
286
|
var errors = _ref.errors,
|
|
279
287
|
registry = _ref.registry;
|
|
280
288
|
var translateString = registry.translateString;
|
|
281
|
-
return
|
|
282
|
-
flexDirection:
|
|
283
|
-
alignItems:
|
|
289
|
+
return jsxRuntime.jsxs(react.Alert, {
|
|
290
|
+
flexDirection: 'column',
|
|
291
|
+
alignItems: 'flex-start',
|
|
284
292
|
gap: 3,
|
|
285
|
-
status:
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
293
|
+
status: 'error',
|
|
294
|
+
children: [jsxRuntime.jsx(react.AlertTitle, {
|
|
295
|
+
children: translateString(utils.TranslatableString.ErrorsLabel)
|
|
296
|
+
}), jsxRuntime.jsx(react.List, {
|
|
297
|
+
children: errors.map(function (error, i) {
|
|
298
|
+
return jsxRuntime.jsxs(react.ListItem, {
|
|
299
|
+
children: [jsxRuntime.jsx(react.ListIcon, {
|
|
300
|
+
as: icons.WarningIcon,
|
|
301
|
+
color: 'red.500'
|
|
302
|
+
}), error.stack]
|
|
303
|
+
}, i);
|
|
304
|
+
})
|
|
305
|
+
})]
|
|
306
|
+
});
|
|
294
307
|
}
|
|
295
308
|
|
|
296
309
|
var _excluded = ["icon", "iconType", "uiSchema", "registry"];
|
|
297
310
|
function ChakraIconButton(props) {
|
|
298
311
|
var icon = props.icon,
|
|
299
312
|
otherProps = _objectWithoutPropertiesLoose(props, _excluded);
|
|
300
|
-
return
|
|
313
|
+
return jsxRuntime.jsx(react.IconButton, _extends({
|
|
301
314
|
"aria-label": props.title
|
|
302
315
|
}, otherProps, {
|
|
303
316
|
icon: icon
|
|
304
317
|
}));
|
|
305
318
|
}
|
|
306
|
-
ChakraIconButton.displayName =
|
|
307
|
-
var ChakraIconButton$1 = /*#__PURE__*/
|
|
319
|
+
ChakraIconButton.displayName = 'ChakraIconButton';
|
|
320
|
+
var ChakraIconButton$1 = /*#__PURE__*/react$1.memo(ChakraIconButton);
|
|
308
321
|
|
|
322
|
+
function CopyButton(props) {
|
|
323
|
+
var translateString = props.registry.translateString;
|
|
324
|
+
return jsxRuntime.jsx(ChakraIconButton$1, _extends({
|
|
325
|
+
title: translateString(utils.TranslatableString.CopyButton)
|
|
326
|
+
}, props, {
|
|
327
|
+
icon: jsxRuntime.jsx(icons.CopyIcon, {})
|
|
328
|
+
}));
|
|
329
|
+
}
|
|
309
330
|
function MoveDownButton(props) {
|
|
310
331
|
var translateString = props.registry.translateString;
|
|
311
|
-
return
|
|
332
|
+
return jsxRuntime.jsx(ChakraIconButton$1, _extends({
|
|
312
333
|
title: translateString(utils.TranslatableString.MoveDownButton)
|
|
313
334
|
}, props, {
|
|
314
|
-
icon:
|
|
335
|
+
icon: jsxRuntime.jsx(icons.ArrowDownIcon, {})
|
|
315
336
|
}));
|
|
316
337
|
}
|
|
317
338
|
function MoveUpButton(props) {
|
|
318
339
|
var translateString = props.registry.translateString;
|
|
319
|
-
return
|
|
340
|
+
return jsxRuntime.jsx(ChakraIconButton$1, _extends({
|
|
320
341
|
title: translateString(utils.TranslatableString.MoveUpButton)
|
|
321
342
|
}, props, {
|
|
322
|
-
icon:
|
|
343
|
+
icon: jsxRuntime.jsx(icons.ArrowUpIcon, {})
|
|
323
344
|
}));
|
|
324
345
|
}
|
|
325
346
|
function RemoveButton(props) {
|
|
326
347
|
var translateString = props.registry.translateString;
|
|
327
|
-
return
|
|
348
|
+
return jsxRuntime.jsx(ChakraIconButton$1, _extends({
|
|
328
349
|
title: translateString(utils.TranslatableString.RemoveButton)
|
|
329
350
|
}, props, {
|
|
330
|
-
icon:
|
|
351
|
+
icon: jsxRuntime.jsx(icons.DeleteIcon, {})
|
|
331
352
|
}));
|
|
332
353
|
}
|
|
333
354
|
|
|
@@ -343,13 +364,16 @@
|
|
|
343
364
|
return null;
|
|
344
365
|
}
|
|
345
366
|
var id = utils.errorId(idSchema);
|
|
346
|
-
return
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
367
|
+
return jsxRuntime.jsx(react.List, {
|
|
368
|
+
children: errors.map(function (error, i) {
|
|
369
|
+
return jsxRuntime.jsx(react.ListItem, {
|
|
370
|
+
children: jsxRuntime.jsx(react.FormErrorMessage, {
|
|
371
|
+
id: id,
|
|
372
|
+
children: error
|
|
373
|
+
})
|
|
374
|
+
}, i);
|
|
375
|
+
})
|
|
376
|
+
});
|
|
353
377
|
}
|
|
354
378
|
|
|
355
379
|
/** The `FieldHelpTemplate` component renders any help desired for a field
|
|
@@ -363,9 +387,10 @@
|
|
|
363
387
|
return null;
|
|
364
388
|
}
|
|
365
389
|
var id = utils.helpId(idSchema);
|
|
366
|
-
return
|
|
367
|
-
id: id
|
|
368
|
-
|
|
390
|
+
return jsxRuntime.jsx(react.FormHelperText, {
|
|
391
|
+
id: id,
|
|
392
|
+
children: help
|
|
393
|
+
});
|
|
369
394
|
}
|
|
370
395
|
|
|
371
396
|
function FieldTemplate(props) {
|
|
@@ -390,15 +415,16 @@
|
|
|
390
415
|
schema = props.schema,
|
|
391
416
|
uiSchema = props.uiSchema;
|
|
392
417
|
var uiOptions = utils.getUiOptions(uiSchema);
|
|
393
|
-
var WrapIfAdditionalTemplate = utils.getTemplate(
|
|
418
|
+
var WrapIfAdditionalTemplate = utils.getTemplate('WrapIfAdditionalTemplate', registry, uiOptions);
|
|
394
419
|
if (hidden) {
|
|
395
|
-
return
|
|
420
|
+
return jsxRuntime.jsx("div", {
|
|
396
421
|
style: {
|
|
397
|
-
display:
|
|
398
|
-
}
|
|
399
|
-
|
|
422
|
+
display: 'none'
|
|
423
|
+
},
|
|
424
|
+
children: children
|
|
425
|
+
});
|
|
400
426
|
}
|
|
401
|
-
return
|
|
427
|
+
return jsxRuntime.jsx(WrapIfAdditionalTemplate, {
|
|
402
428
|
classNames: classNames,
|
|
403
429
|
style: style,
|
|
404
430
|
disabled: disabled,
|
|
@@ -410,13 +436,16 @@
|
|
|
410
436
|
required: required,
|
|
411
437
|
schema: schema,
|
|
412
438
|
uiSchema: uiSchema,
|
|
413
|
-
registry: registry
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
439
|
+
registry: registry,
|
|
440
|
+
children: jsxRuntime.jsxs(react.FormControl, {
|
|
441
|
+
isRequired: required,
|
|
442
|
+
isInvalid: rawErrors && rawErrors.length > 0,
|
|
443
|
+
children: [children, displayLabel && rawDescription ? jsxRuntime.jsx(react.Text, {
|
|
444
|
+
mt: 2,
|
|
445
|
+
children: rawDescription
|
|
446
|
+
}) : null, errors, help]
|
|
447
|
+
})
|
|
448
|
+
});
|
|
420
449
|
}
|
|
421
450
|
|
|
422
451
|
function ObjectFieldTemplate(props) {
|
|
@@ -433,39 +462,43 @@
|
|
|
433
462
|
onAddClick = props.onAddClick,
|
|
434
463
|
registry = props.registry;
|
|
435
464
|
var uiOptions = utils.getUiOptions(uiSchema);
|
|
436
|
-
var TitleFieldTemplate = utils.getTemplate(
|
|
437
|
-
var DescriptionFieldTemplate = utils.getTemplate(
|
|
465
|
+
var TitleFieldTemplate = utils.getTemplate('TitleFieldTemplate', registry, uiOptions);
|
|
466
|
+
var DescriptionFieldTemplate = utils.getTemplate('DescriptionFieldTemplate', registry, uiOptions);
|
|
438
467
|
// Button templates are not overridden in the uiSchema
|
|
439
468
|
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
|
-
|
|
469
|
+
return jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
470
|
+
children: [(uiOptions.title || title) && jsxRuntime.jsx(TitleFieldTemplate, {
|
|
471
|
+
id: utils.titleId(idSchema),
|
|
472
|
+
title: uiOptions.title || title,
|
|
473
|
+
required: required,
|
|
474
|
+
schema: schema,
|
|
475
|
+
uiSchema: uiSchema,
|
|
476
|
+
registry: registry
|
|
477
|
+
}), (uiOptions.description || description) && jsxRuntime.jsx(DescriptionFieldTemplate, {
|
|
478
|
+
id: utils.descriptionId(idSchema),
|
|
479
|
+
description: uiOptions.description || description,
|
|
480
|
+
schema: schema,
|
|
481
|
+
uiSchema: uiSchema,
|
|
482
|
+
registry: registry
|
|
483
|
+
}), jsxRuntime.jsxs(react.Grid, {
|
|
484
|
+
gap: description ? 2 : 6,
|
|
485
|
+
mb: 4,
|
|
486
|
+
children: [properties.map(function (element, index) {
|
|
487
|
+
return element.hidden ? element.content : jsxRuntime.jsx(react.GridItem, {
|
|
488
|
+
children: element.content
|
|
489
|
+
}, idSchema.$id + "-" + element.name + "-" + index);
|
|
490
|
+
}), utils.canExpand(schema, uiSchema, formData) && jsxRuntime.jsx(react.GridItem, {
|
|
491
|
+
justifySelf: 'flex-end',
|
|
492
|
+
children: jsxRuntime.jsx(AddButton, {
|
|
493
|
+
className: 'object-property-expand',
|
|
494
|
+
onClick: onAddClick(schema),
|
|
495
|
+
disabled: disabled || readonly,
|
|
496
|
+
uiSchema: uiSchema,
|
|
497
|
+
registry: registry
|
|
498
|
+
})
|
|
499
|
+
})]
|
|
500
|
+
})]
|
|
501
|
+
});
|
|
469
502
|
}
|
|
470
503
|
|
|
471
504
|
function SubmitButton(_ref) {
|
|
@@ -477,24 +510,29 @@
|
|
|
477
510
|
if (norender) {
|
|
478
511
|
return null;
|
|
479
512
|
}
|
|
480
|
-
return
|
|
481
|
-
marginTop: 3
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
513
|
+
return jsxRuntime.jsx(react.Box, {
|
|
514
|
+
marginTop: 3,
|
|
515
|
+
children: jsxRuntime.jsx(react.Button, _extends({
|
|
516
|
+
type: 'submit',
|
|
517
|
+
variant: 'solid'
|
|
518
|
+
}, submitButtonProps, {
|
|
519
|
+
children: submitText
|
|
520
|
+
}))
|
|
521
|
+
});
|
|
486
522
|
}
|
|
487
523
|
|
|
488
524
|
function TitleField(_ref) {
|
|
489
525
|
var id = _ref.id,
|
|
490
526
|
title = _ref.title;
|
|
491
|
-
return
|
|
527
|
+
return jsxRuntime.jsxs(react.Box, {
|
|
492
528
|
id: id,
|
|
493
529
|
mt: 1,
|
|
494
|
-
mb: 4
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
530
|
+
mb: 4,
|
|
531
|
+
children: [jsxRuntime.jsx(react.Heading, {
|
|
532
|
+
as: 'h5',
|
|
533
|
+
children: title
|
|
534
|
+
}), jsxRuntime.jsx(react.Divider, {})]
|
|
535
|
+
});
|
|
498
536
|
}
|
|
499
537
|
|
|
500
538
|
function WrapIfAdditionalTemplate(props) {
|
|
@@ -518,40 +556,49 @@
|
|
|
518
556
|
var keyLabel = translateString(utils.TranslatableString.KeyLabel, [label]);
|
|
519
557
|
var additional = (utils.ADDITIONAL_PROPERTY_FLAG in schema);
|
|
520
558
|
if (!additional) {
|
|
521
|
-
return
|
|
559
|
+
return jsxRuntime.jsx("div", {
|
|
522
560
|
className: classNames,
|
|
523
|
-
style: style
|
|
524
|
-
|
|
561
|
+
style: style,
|
|
562
|
+
children: children
|
|
563
|
+
});
|
|
525
564
|
}
|
|
526
565
|
var handleBlur = function handleBlur(_ref) {
|
|
527
566
|
var target = _ref.target;
|
|
528
567
|
return onKeyChange(target.value);
|
|
529
568
|
};
|
|
530
|
-
return
|
|
531
|
-
key: id + "-key",
|
|
569
|
+
return jsxRuntime.jsxs(react.Grid, {
|
|
532
570
|
className: classNames,
|
|
533
571
|
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
|
-
|
|
572
|
+
alignItems: 'center',
|
|
573
|
+
gap: 2,
|
|
574
|
+
children: [jsxRuntime.jsx(react.GridItem, {
|
|
575
|
+
children: jsxRuntime.jsxs(react.FormControl, {
|
|
576
|
+
isRequired: required,
|
|
577
|
+
children: [jsxRuntime.jsx(react.FormLabel, {
|
|
578
|
+
htmlFor: id + "-key",
|
|
579
|
+
id: id + "-key-label",
|
|
580
|
+
children: keyLabel
|
|
581
|
+
}), jsxRuntime.jsx(react.Input, {
|
|
582
|
+
defaultValue: label,
|
|
583
|
+
disabled: disabled || readonly,
|
|
584
|
+
id: id + "-key",
|
|
585
|
+
name: id + "-key",
|
|
586
|
+
onBlur: !readonly ? handleBlur : undefined,
|
|
587
|
+
type: 'text',
|
|
588
|
+
mb: 1
|
|
589
|
+
})]
|
|
590
|
+
})
|
|
591
|
+
}), jsxRuntime.jsx(react.GridItem, {
|
|
592
|
+
children: children
|
|
593
|
+
}), jsxRuntime.jsx(react.GridItem, {
|
|
594
|
+
children: jsxRuntime.jsx(RemoveButton, {
|
|
595
|
+
disabled: disabled || readonly,
|
|
596
|
+
onClick: onDropPropertyClick(label),
|
|
597
|
+
uiSchema: uiSchema,
|
|
598
|
+
registry: registry
|
|
599
|
+
})
|
|
600
|
+
})]
|
|
601
|
+
}, id + "-key");
|
|
555
602
|
}
|
|
556
603
|
|
|
557
604
|
function generateTemplates() {
|
|
@@ -560,6 +607,7 @@
|
|
|
560
607
|
ArrayFieldTemplate: ArrayFieldTemplate,
|
|
561
608
|
BaseInputTemplate: BaseInputTemplate,
|
|
562
609
|
ButtonTemplates: {
|
|
610
|
+
CopyButton: CopyButton,
|
|
563
611
|
AddButton: AddButton,
|
|
564
612
|
MoveDownButton: MoveDownButton,
|
|
565
613
|
MoveUpButton: MoveUpButton,
|
|
@@ -591,9 +639,9 @@
|
|
|
591
639
|
function DateElement(props) {
|
|
592
640
|
var SelectWidget = props.registry.widgets.SelectWidget;
|
|
593
641
|
var value = props.value ? props.value : undefined;
|
|
594
|
-
return
|
|
595
|
-
label:
|
|
596
|
-
className:
|
|
642
|
+
return jsxRuntime.jsx(SelectWidget, _extends({}, props, {
|
|
643
|
+
label: '',
|
|
644
|
+
className: 'form-control',
|
|
597
645
|
onChange: function onChange(elemValue) {
|
|
598
646
|
return props.select(props.type, elemValue);
|
|
599
647
|
},
|
|
@@ -602,7 +650,7 @@
|
|
|
602
650
|
},
|
|
603
651
|
placeholder: props.type,
|
|
604
652
|
schema: {
|
|
605
|
-
type:
|
|
653
|
+
type: 'integer'
|
|
606
654
|
},
|
|
607
655
|
value: value,
|
|
608
656
|
"aria-describedby": utils.ariaDescribedByIds(props.name)
|
|
@@ -610,7 +658,7 @@
|
|
|
610
658
|
}
|
|
611
659
|
var readyForChange = function readyForChange(state) {
|
|
612
660
|
return Object.keys(state).every(function (key) {
|
|
613
|
-
return typeof state[key] !==
|
|
661
|
+
return typeof state[key] !== 'undefined' && state[key] !== -1;
|
|
614
662
|
});
|
|
615
663
|
};
|
|
616
664
|
function AltDateWidget(props) {
|
|
@@ -626,15 +674,15 @@
|
|
|
626
674
|
showTime = props.showTime,
|
|
627
675
|
value = props.value;
|
|
628
676
|
var translateString = registry.translateString;
|
|
629
|
-
var _useState =
|
|
677
|
+
var _useState = react$1.useState(utils.parseDateString(value, showTime)),
|
|
630
678
|
state = _useState[0],
|
|
631
679
|
setState = _useState[1];
|
|
632
|
-
|
|
680
|
+
react$1.useEffect(function () {
|
|
633
681
|
setState(utils.parseDateString(value, showTime));
|
|
634
682
|
}, [showTime, value]);
|
|
635
683
|
var handleChange = function handleChange(property, nextValue) {
|
|
636
684
|
var _extends2;
|
|
637
|
-
var nextState = _extends({}, state, (_extends2 = {}, _extends2[property] = typeof nextValue ===
|
|
685
|
+
var nextState = _extends({}, state, (_extends2 = {}, _extends2[property] = typeof nextValue === 'undefined' ? -1 : nextValue, _extends2));
|
|
638
686
|
if (readyForChange(nextState)) {
|
|
639
687
|
onChange(utils.toDateString(nextState, showTime));
|
|
640
688
|
} else {
|
|
@@ -664,70 +712,76 @@
|
|
|
664
712
|
minute = state.minute,
|
|
665
713
|
second = state.second;
|
|
666
714
|
var data = [{
|
|
667
|
-
type:
|
|
715
|
+
type: 'year',
|
|
668
716
|
range: options.yearsRange,
|
|
669
717
|
value: year
|
|
670
718
|
}, {
|
|
671
|
-
type:
|
|
719
|
+
type: 'month',
|
|
672
720
|
range: [1, 12],
|
|
673
721
|
value: month
|
|
674
722
|
}, {
|
|
675
|
-
type:
|
|
723
|
+
type: 'day',
|
|
676
724
|
range: [1, 31],
|
|
677
725
|
value: day
|
|
678
726
|
}];
|
|
679
727
|
if (showTime) {
|
|
680
728
|
data.push({
|
|
681
|
-
type:
|
|
729
|
+
type: 'hour',
|
|
682
730
|
range: [0, 23],
|
|
683
731
|
value: hour
|
|
684
732
|
}, {
|
|
685
|
-
type:
|
|
733
|
+
type: 'minute',
|
|
686
734
|
range: [0, 59],
|
|
687
735
|
value: minute
|
|
688
736
|
}, {
|
|
689
|
-
type:
|
|
737
|
+
type: 'second',
|
|
690
738
|
range: [0, 59],
|
|
691
739
|
value: second
|
|
692
740
|
});
|
|
693
741
|
}
|
|
694
742
|
return data;
|
|
695
743
|
};
|
|
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
|
-
|
|
744
|
+
return jsxRuntime.jsxs(react.Box, {
|
|
745
|
+
children: [jsxRuntime.jsx(react.Box, {
|
|
746
|
+
display: 'flex',
|
|
747
|
+
flexWrap: 'wrap',
|
|
748
|
+
alignItems: 'center',
|
|
749
|
+
justify: 'center',
|
|
750
|
+
children: dateElementProps().map(function (elemProps, i) {
|
|
751
|
+
var elemId = id + '_' + elemProps.type;
|
|
752
|
+
return jsxRuntime.jsx(react.Box, {
|
|
753
|
+
mr: '2',
|
|
754
|
+
mb: '2',
|
|
755
|
+
children: jsxRuntime.jsx(DateElement, _extends({}, props, elemProps, {
|
|
756
|
+
autofocus: autofocus && i === 0,
|
|
757
|
+
disabled: disabled,
|
|
758
|
+
id: elemId,
|
|
759
|
+
name: id,
|
|
760
|
+
onBlur: onBlur,
|
|
761
|
+
onFocus: onFocus,
|
|
762
|
+
readonly: readonly,
|
|
763
|
+
registry: registry,
|
|
764
|
+
select: handleChange,
|
|
765
|
+
value: elemProps.value < 0 ? '' : elemProps.value
|
|
766
|
+
}))
|
|
767
|
+
}, elemId);
|
|
768
|
+
})
|
|
769
|
+
}), jsxRuntime.jsxs(react.Box, {
|
|
770
|
+
display: 'flex',
|
|
771
|
+
children: [!options.hideNowButton && jsxRuntime.jsx(react.Button, {
|
|
772
|
+
onClick: function onClick(e) {
|
|
773
|
+
return handleNow(e);
|
|
774
|
+
},
|
|
775
|
+
mr: '2',
|
|
776
|
+
children: translateString(utils.TranslatableString.NowLabel)
|
|
777
|
+
}), !options.hideClearButton && jsxRuntime.jsx(react.Button, {
|
|
778
|
+
onClick: function onClick(e) {
|
|
779
|
+
return handleClear(e);
|
|
780
|
+
},
|
|
781
|
+
children: translateString(utils.TranslatableString.ClearLabel)
|
|
782
|
+
})]
|
|
783
|
+
})]
|
|
784
|
+
});
|
|
731
785
|
}
|
|
732
786
|
AltDateWidget.defaultProps = {
|
|
733
787
|
autofocus: false,
|
|
@@ -741,7 +795,7 @@
|
|
|
741
795
|
|
|
742
796
|
function AltDateTimeWidget(props) {
|
|
743
797
|
var AltDateWidget = props.registry.widgets.AltDateWidget;
|
|
744
|
-
return
|
|
798
|
+
return jsxRuntime.jsx(AltDateWidget, _extends({}, props, {
|
|
745
799
|
showTime: true
|
|
746
800
|
}));
|
|
747
801
|
}
|
|
@@ -779,20 +833,24 @@
|
|
|
779
833
|
var value = _ref3.target.value;
|
|
780
834
|
return onFocus(id, value);
|
|
781
835
|
};
|
|
782
|
-
return
|
|
836
|
+
return jsxRuntime.jsx(react.FormControl, _extends({
|
|
783
837
|
mb: 1
|
|
784
838
|
}, chakraProps, {
|
|
785
|
-
isRequired: required
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
839
|
+
isRequired: required,
|
|
840
|
+
children: jsxRuntime.jsx(react.Checkbox, {
|
|
841
|
+
id: id,
|
|
842
|
+
name: id,
|
|
843
|
+
isChecked: typeof value === 'undefined' ? false : value,
|
|
844
|
+
isDisabled: disabled || readonly,
|
|
845
|
+
onChange: _onChange,
|
|
846
|
+
onBlur: _onBlur,
|
|
847
|
+
onFocus: _onFocus,
|
|
848
|
+
"aria-describedby": utils.ariaDescribedByIds(id),
|
|
849
|
+
children: label && jsxRuntime.jsx(react.Text, {
|
|
850
|
+
children: label
|
|
851
|
+
})
|
|
852
|
+
})
|
|
853
|
+
}));
|
|
796
854
|
}
|
|
797
855
|
|
|
798
856
|
function CheckboxesWidget(props) {
|
|
@@ -827,38 +885,44 @@
|
|
|
827
885
|
};
|
|
828
886
|
var row = options ? options.inline : false;
|
|
829
887
|
var selectedIndexes = utils.enumOptionsIndexForValue(value, enumOptions, true);
|
|
830
|
-
return
|
|
888
|
+
return jsxRuntime.jsxs(react.FormControl, _extends({
|
|
831
889
|
mb: 1
|
|
832
890
|
}, chakraProps, {
|
|
833
891
|
isDisabled: disabled || readonly,
|
|
834
892
|
isRequired: required,
|
|
835
893
|
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
|
-
|
|
894
|
+
isInvalid: rawErrors && rawErrors.length > 0,
|
|
895
|
+
children: [jsxRuntime.jsx(react.FormLabel, {
|
|
896
|
+
htmlFor: id,
|
|
897
|
+
id: id + "-label",
|
|
898
|
+
children: label || schema.title
|
|
899
|
+
}), jsxRuntime.jsx(react.CheckboxGroup, {
|
|
900
|
+
onChange: function onChange(option) {
|
|
901
|
+
return _onChange(utils.enumOptionsValueForIndex(option, enumOptions, emptyValue));
|
|
902
|
+
},
|
|
903
|
+
defaultValue: selectedIndexes,
|
|
904
|
+
"aria-describedby": utils.ariaDescribedByIds(id),
|
|
905
|
+
children: jsxRuntime.jsx(react.Stack, {
|
|
906
|
+
direction: row ? 'row' : 'column',
|
|
907
|
+
children: Array.isArray(enumOptions) && enumOptions.map(function (option, index) {
|
|
908
|
+
var checked = utils.enumOptionsIsSelected(option.value, checkboxesValues);
|
|
909
|
+
var itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
|
|
910
|
+
return jsxRuntime.jsx(react.Checkbox, {
|
|
911
|
+
id: utils.optionId(id, index),
|
|
912
|
+
name: id,
|
|
913
|
+
value: String(index),
|
|
914
|
+
isChecked: checked,
|
|
915
|
+
isDisabled: disabled || itemDisabled || readonly,
|
|
916
|
+
onBlur: _onBlur,
|
|
917
|
+
onFocus: _onFocus,
|
|
918
|
+
children: option.label && jsxRuntime.jsx(react.Text, {
|
|
919
|
+
children: option.label
|
|
920
|
+
})
|
|
921
|
+
}, index);
|
|
922
|
+
})
|
|
923
|
+
})
|
|
924
|
+
})]
|
|
925
|
+
}));
|
|
862
926
|
}
|
|
863
927
|
|
|
864
928
|
function RadioWidget(_ref) {
|
|
@@ -893,33 +957,37 @@
|
|
|
893
957
|
};
|
|
894
958
|
var row = options ? options.inline : false;
|
|
895
959
|
var selectedIndex = utils.enumOptionsIndexForValue(value, enumOptions);
|
|
896
|
-
return
|
|
960
|
+
return jsxRuntime.jsxs(react.FormControl, _extends({
|
|
897
961
|
mb: 1
|
|
898
962
|
}, chakraProps, {
|
|
899
963
|
isDisabled: disabled || readonly,
|
|
900
964
|
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
|
-
|
|
965
|
+
isReadOnly: readonly,
|
|
966
|
+
children: [jsxRuntime.jsx(react.FormLabel, {
|
|
967
|
+
htmlFor: id,
|
|
968
|
+
id: id + "-label",
|
|
969
|
+
children: label || schema.title
|
|
970
|
+
}), jsxRuntime.jsx(react.RadioGroup, {
|
|
971
|
+
onChange: _onChange,
|
|
972
|
+
onBlur: _onBlur,
|
|
973
|
+
onFocus: _onFocus,
|
|
974
|
+
value: selectedIndex,
|
|
975
|
+
name: id,
|
|
976
|
+
"aria-describedby": utils.ariaDescribedByIds(id),
|
|
977
|
+
children: jsxRuntime.jsx(react.Stack, {
|
|
978
|
+
direction: row ? 'row' : 'column',
|
|
979
|
+
children: Array.isArray(enumOptions) && enumOptions.map(function (option, index) {
|
|
980
|
+
var itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
|
|
981
|
+
return jsxRuntime.jsx(react.Radio, {
|
|
982
|
+
value: String(index),
|
|
983
|
+
id: utils.optionId(id, index),
|
|
984
|
+
disabled: disabled || itemDisabled || readonly,
|
|
985
|
+
children: option.label
|
|
986
|
+
}, index);
|
|
987
|
+
})
|
|
988
|
+
})
|
|
989
|
+
})]
|
|
990
|
+
}));
|
|
923
991
|
}
|
|
924
992
|
|
|
925
993
|
function RangeWidget(_ref) {
|
|
@@ -956,19 +1024,25 @@
|
|
|
956
1024
|
var value = _ref3.target.value;
|
|
957
1025
|
return onFocus(id, value);
|
|
958
1026
|
};
|
|
959
|
-
return
|
|
1027
|
+
return jsxRuntime.jsxs(react.FormControl, _extends({
|
|
960
1028
|
mb: 1
|
|
961
|
-
}, chakraProps
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
1029
|
+
}, chakraProps, {
|
|
1030
|
+
children: [displayLabel ? jsxRuntime.jsx(react.FormLabel, {
|
|
1031
|
+
htmlFor: id,
|
|
1032
|
+
children: label || schema.title
|
|
1033
|
+
}) : null, jsxRuntime.jsxs(react.Slider, _extends({}, sliderWidgetProps, {
|
|
1034
|
+
id: id,
|
|
1035
|
+
name: id,
|
|
1036
|
+
isDisabled: disabled || readonly,
|
|
1037
|
+
onChange: _onChange,
|
|
1038
|
+
onBlur: _onBlur,
|
|
1039
|
+
onFocus: _onFocus,
|
|
1040
|
+
"aria-describedby": utils.ariaDescribedByIds(id),
|
|
1041
|
+
children: [jsxRuntime.jsx(react.SliderTrack, {
|
|
1042
|
+
children: jsxRuntime.jsx(react.SliderFilledTrack, {})
|
|
1043
|
+
}), jsxRuntime.jsx(react.SliderThumb, {})]
|
|
1044
|
+
}))]
|
|
1045
|
+
}));
|
|
972
1046
|
}
|
|
973
1047
|
|
|
974
1048
|
function SelectWidget(props) {
|
|
@@ -1022,7 +1096,7 @@
|
|
|
1022
1096
|
isDisabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(value) !== -1
|
|
1023
1097
|
};
|
|
1024
1098
|
}) : [];
|
|
1025
|
-
var isMultiple = typeof multiple !==
|
|
1099
|
+
var isMultiple = typeof multiple !== 'undefined' && Boolean(enumOptions);
|
|
1026
1100
|
var selectedIndex = utils.enumOptionsIndexForValue(value, enumOptions, isMultiple);
|
|
1027
1101
|
var formValue = isMultiple ? (selectedIndex || []).map(function (i) {
|
|
1028
1102
|
return {
|
|
@@ -1030,31 +1104,33 @@
|
|
|
1030
1104
|
value: i
|
|
1031
1105
|
};
|
|
1032
1106
|
}) : {
|
|
1033
|
-
label: _valueLabelMap[selectedIndex] ||
|
|
1107
|
+
label: _valueLabelMap[selectedIndex] || '',
|
|
1034
1108
|
selectedIndex: selectedIndex
|
|
1035
1109
|
};
|
|
1036
|
-
return
|
|
1110
|
+
return jsxRuntime.jsxs(react.FormControl, _extends({
|
|
1037
1111
|
mb: 1
|
|
1038
1112
|
}, chakraProps, {
|
|
1039
1113
|
isDisabled: disabled || readonly,
|
|
1040
1114
|
isRequired: required,
|
|
1041
1115
|
isReadOnly: readonly,
|
|
1042
|
-
isInvalid: rawErrors && rawErrors.length > 0
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1116
|
+
isInvalid: rawErrors && rawErrors.length > 0,
|
|
1117
|
+
children: [(label || schema.title) && jsxRuntime.jsx(react.FormLabel, {
|
|
1118
|
+
htmlFor: isMultiple ? undefined : id,
|
|
1119
|
+
children: label || schema.title
|
|
1120
|
+
}), jsxRuntime.jsx(chakraReactSelect.Select, {
|
|
1121
|
+
inputId: id,
|
|
1122
|
+
name: id,
|
|
1123
|
+
isMulti: isMultiple,
|
|
1124
|
+
options: displayEnumOptions,
|
|
1125
|
+
placeholder: placeholder,
|
|
1126
|
+
closeMenuOnSelect: !isMultiple,
|
|
1127
|
+
onBlur: _onBlur,
|
|
1128
|
+
onChange: isMultiple ? _onMultiChange : _onChange,
|
|
1129
|
+
onFocus: _onFocus,
|
|
1130
|
+
autoFocus: autofocus,
|
|
1131
|
+
value: formValue,
|
|
1132
|
+
"aria-describedby": utils.ariaDescribedByIds(id)
|
|
1133
|
+
})]
|
|
1058
1134
|
}));
|
|
1059
1135
|
}
|
|
1060
1136
|
|
|
@@ -1082,7 +1158,7 @@
|
|
|
1082
1158
|
var displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema) && (!!label || !!schema.title);
|
|
1083
1159
|
var _onChange = function _onChange(_ref2) {
|
|
1084
1160
|
var value = _ref2.target.value;
|
|
1085
|
-
return onChange(value ===
|
|
1161
|
+
return onChange(value === '' ? options.emptyValue : value);
|
|
1086
1162
|
};
|
|
1087
1163
|
var _onBlur = function _onBlur(_ref3) {
|
|
1088
1164
|
var value = _ref3.target.value;
|
|
@@ -1092,25 +1168,27 @@
|
|
|
1092
1168
|
var value = _ref4.target.value;
|
|
1093
1169
|
return onFocus(id, value);
|
|
1094
1170
|
};
|
|
1095
|
-
return
|
|
1171
|
+
return jsxRuntime.jsxs(react.FormControl, _extends({
|
|
1096
1172
|
mb: 1
|
|
1097
1173
|
}, chakraProps, {
|
|
1098
1174
|
isDisabled: disabled || readonly,
|
|
1099
1175
|
isRequired: required,
|
|
1100
1176
|
isReadOnly: readonly,
|
|
1101
|
-
isInvalid: rawErrors && rawErrors.length > 0
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1177
|
+
isInvalid: rawErrors && rawErrors.length > 0,
|
|
1178
|
+
children: [displayLabel ? jsxRuntime.jsx(react.FormLabel, {
|
|
1179
|
+
htmlFor: id,
|
|
1180
|
+
children: label || schema.title
|
|
1181
|
+
}) : null, jsxRuntime.jsx(react.Textarea, {
|
|
1182
|
+
id: id,
|
|
1183
|
+
name: id,
|
|
1184
|
+
value: value != null ? value : '',
|
|
1185
|
+
placeholder: placeholder,
|
|
1186
|
+
autoFocus: autofocus,
|
|
1187
|
+
onChange: _onChange,
|
|
1188
|
+
onBlur: _onBlur,
|
|
1189
|
+
onFocus: _onFocus,
|
|
1190
|
+
"aria-describedby": utils.ariaDescribedByIds(id)
|
|
1191
|
+
})]
|
|
1114
1192
|
}));
|
|
1115
1193
|
}
|
|
1116
1194
|
|
|
@@ -1144,25 +1222,30 @@
|
|
|
1144
1222
|
var value = _ref2.target.value;
|
|
1145
1223
|
return onFocus(id, value);
|
|
1146
1224
|
};
|
|
1147
|
-
return
|
|
1225
|
+
return jsxRuntime.jsxs(react.FormControl, _extends({
|
|
1148
1226
|
mb: 1
|
|
1149
1227
|
}, chakraProps, {
|
|
1150
1228
|
isDisabled: disabled || readonly,
|
|
1151
1229
|
isRequired: required,
|
|
1152
1230
|
isReadOnly: readonly,
|
|
1153
|
-
isInvalid: rawErrors && rawErrors.length > 0
|
|
1154
|
-
|
|
1155
|
-
|
|
1156
|
-
|
|
1157
|
-
|
|
1158
|
-
|
|
1159
|
-
|
|
1160
|
-
|
|
1161
|
-
|
|
1162
|
-
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
|
|
1231
|
+
isInvalid: rawErrors && rawErrors.length > 0,
|
|
1232
|
+
children: [displayLabel ? jsxRuntime.jsx(react.FormLabel, {
|
|
1233
|
+
htmlFor: id,
|
|
1234
|
+
children: label || schema.title
|
|
1235
|
+
}) : null, jsxRuntime.jsxs(react.NumberInput, {
|
|
1236
|
+
value: value != null ? value : '',
|
|
1237
|
+
onChange: _onChange,
|
|
1238
|
+
onBlur: _onBlur,
|
|
1239
|
+
onFocus: _onFocus,
|
|
1240
|
+
"aria-describedby": utils.ariaDescribedByIds(id),
|
|
1241
|
+
children: [jsxRuntime.jsx(react.NumberInputField, {
|
|
1242
|
+
id: id,
|
|
1243
|
+
name: id
|
|
1244
|
+
}), jsxRuntime.jsxs(react.NumberInputStepper, {
|
|
1245
|
+
children: [jsxRuntime.jsx(react.NumberIncrementStepper, {}), jsxRuntime.jsx(react.NumberDecrementStepper, {})]
|
|
1246
|
+
})]
|
|
1247
|
+
})]
|
|
1248
|
+
}));
|
|
1166
1249
|
}
|
|
1167
1250
|
|
|
1168
1251
|
function generateWidgets() {
|
|
@@ -1215,7 +1298,7 @@
|
|
|
1215
1298
|
It is located at the bottom of the styles string.
|
|
1216
1299
|
*/
|
|
1217
1300
|
var CSSReset = function CSSReset() {
|
|
1218
|
-
return
|
|
1301
|
+
return jsxRuntime.jsx(react$2.Global, {
|
|
1219
1302
|
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
1303
|
});
|
|
1221
1304
|
};
|
|
@@ -1237,22 +1320,25 @@
|
|
|
1237
1320
|
var memoizedCreateCacheWithContainer = /*#__PURE__*/weakMemoize__default["default"](function (container) {
|
|
1238
1321
|
var newCache = createCache__default["default"]({
|
|
1239
1322
|
container: container,
|
|
1240
|
-
key:
|
|
1323
|
+
key: 'rjsf'
|
|
1241
1324
|
});
|
|
1242
1325
|
return newCache;
|
|
1243
1326
|
});
|
|
1244
1327
|
var __createChakraFrameProvider = function __createChakraFrameProvider(props) {
|
|
1245
1328
|
return function (_ref) {
|
|
1246
1329
|
var document = _ref.document;
|
|
1247
|
-
return
|
|
1330
|
+
return jsxRuntime.jsx("div", {
|
|
1248
1331
|
style: {
|
|
1249
1332
|
margin: 2
|
|
1250
|
-
}
|
|
1251
|
-
|
|
1252
|
-
|
|
1253
|
-
|
|
1254
|
-
|
|
1255
|
-
|
|
1333
|
+
},
|
|
1334
|
+
children: jsxRuntime.jsx(react$2.CacheProvider, {
|
|
1335
|
+
value: memoizedCreateCacheWithContainer(document.head),
|
|
1336
|
+
children: jsxRuntime.jsxs(react.ChakraProvider, {
|
|
1337
|
+
resetCSS: false,
|
|
1338
|
+
children: [jsxRuntime.jsx(CSSReset, {}), props.children]
|
|
1339
|
+
})
|
|
1340
|
+
})
|
|
1341
|
+
});
|
|
1256
1342
|
};
|
|
1257
1343
|
};
|
|
1258
1344
|
|