@rjsf/core 6.4.2 → 6.5.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/dist/core.umd.js +98 -36
- package/dist/index.cjs +98 -36
- package/dist/index.cjs.map +3 -3
- package/dist/index.esm.js +110 -42
- package/dist/index.esm.js.map +3 -3
- package/lib/components/Form.d.ts +6 -0
- package/lib/components/Form.d.ts.map +1 -1
- package/lib/components/Form.js +29 -13
- package/lib/components/fields/ObjectField.d.ts.map +1 -1
- package/lib/components/fields/ObjectField.js +29 -5
- package/lib/components/templates/WrapIfAdditionalTemplate.d.ts.map +1 -1
- package/lib/components/templates/WrapIfAdditionalTemplate.js +1 -1
- package/lib/components/widgets/CheckboxesWidget.d.ts +1 -1
- package/lib/components/widgets/CheckboxesWidget.d.ts.map +1 -1
- package/lib/components/widgets/CheckboxesWidget.js +7 -5
- package/lib/components/widgets/RadioWidget.d.ts.map +1 -1
- package/lib/components/widgets/RadioWidget.js +5 -4
- package/lib/components/widgets/SelectWidget.d.ts.map +1 -1
- package/lib/components/widgets/SelectWidget.js +11 -10
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/package.json +7 -7
- package/src/components/Form.tsx +58 -14
- package/src/components/fields/ObjectField.tsx +30 -5
- package/src/components/templates/WrapIfAdditionalTemplate.tsx +1 -0
- package/src/components/widgets/CheckboxesWidget.tsx +12 -7
- package/src/components/widgets/RadioWidget.tsx +9 -6
- package/src/components/widgets/SelectWidget.tsx +14 -11
package/lib/components/Form.d.ts
CHANGED
|
@@ -146,6 +146,12 @@ export interface FormProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
|
|
|
146
146
|
* called. Set to `false` by default.
|
|
147
147
|
*/
|
|
148
148
|
omitExtraData?: boolean;
|
|
149
|
+
/** If set to true, optional object properties whose fields are all empty (undefined, null, or empty string)
|
|
150
|
+
* will be automatically removed from formData. This prevents the scenario where interacting with fields inside
|
|
151
|
+
* an optional object "activates" it permanently, making the form unsubmittable when the optional object has
|
|
152
|
+
* required inner fields. This works independently of `omitExtraData`. Set to `false` by default.
|
|
153
|
+
*/
|
|
154
|
+
removeEmptyOptionalObjects?: boolean;
|
|
149
155
|
/** When this prop is set to `top` or 'bottom', a list of errors (or the custom error list defined in the `ErrorList`) will also
|
|
150
156
|
* show. When set to false, only inline input validation errors will be shown. Set to `top` by default
|
|
151
157
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../src/components/Form.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAChG,OAAO,EAEL,eAAe,EAEf,WAAW,EACX,kBAAkB,EAClB,gBAAgB,
|
|
1
|
+
{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../src/components/Form.tsx"],"names":[],"mappings":"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"}
|
package/lib/components/Form.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Component, createRef } from 'react';
|
|
3
|
-
import { createSchemaUtils, deepEquals, ErrorSchemaBuilder,
|
|
3
|
+
import { createSchemaUtils, deepEquals, ErrorSchemaBuilder, getChangedFields, getTemplate, getUiOptions, isObject, mergeObjects, removeOptionalEmptyObjects, shouldRender, SUBMIT_BTN_OPTIONS_KEY, toErrorList, toFieldPathId, UI_DEFINITIONS_KEY, UI_GLOBAL_OPTIONS_KEY, UI_OPTIONS_KEY, validationDataMerge, DEFAULT_ID_SEPARATOR, DEFAULT_ID_PREFIX, ERRORS_KEY, ID_KEY, getUsedFormData, getFieldNames, } from '@rjsf/utils';
|
|
4
4
|
import _cloneDeep from 'lodash-es/cloneDeep.js';
|
|
5
5
|
import _get from 'lodash-es/get.js';
|
|
6
6
|
import _isEmpty from 'lodash-es/isEmpty.js';
|
|
@@ -246,10 +246,6 @@ export default class Form extends Component {
|
|
|
246
246
|
// Only store a new registry when the props cause a different one to be created
|
|
247
247
|
const newRegistry = this.getRegistry(props, rootSchema, schemaUtils);
|
|
248
248
|
const registry = deepEquals(state.registry, newRegistry) ? state.registry : newRegistry;
|
|
249
|
-
// Pre-expand ui:definitions into the uiSchema structure (must happen after registry is created)
|
|
250
|
-
const expandedUiSchema = registry.uiSchemaDefinitions
|
|
251
|
-
? expandUiSchemaDefinitions(rootSchema, uiSchema, registry)
|
|
252
|
-
: uiSchema;
|
|
253
249
|
// Only compute a new `fieldPathId` when the `idPrefix` is different than the existing fieldPathId's ID_KEY
|
|
254
250
|
const fieldPathId = state.fieldPathId && state.fieldPathId?.[ID_KEY] === registry.globalFormOptions.idPrefix
|
|
255
251
|
? state.fieldPathId
|
|
@@ -257,7 +253,7 @@ export default class Form extends Component {
|
|
|
257
253
|
const nextState = {
|
|
258
254
|
schemaUtils,
|
|
259
255
|
schema: rootSchema,
|
|
260
|
-
uiSchema
|
|
256
|
+
uiSchema,
|
|
261
257
|
fieldPathId,
|
|
262
258
|
formData,
|
|
263
259
|
edit,
|
|
@@ -431,7 +427,7 @@ export default class Form extends Component {
|
|
|
431
427
|
this._isProcessingUserChange = true;
|
|
432
428
|
const { newValue, path, id } = this.pendingChanges[0];
|
|
433
429
|
const { newErrorSchema } = this.pendingChanges[0];
|
|
434
|
-
const { extraErrors, omitExtraData, liveOmit, noValidate, liveValidate, onChange } = this.props;
|
|
430
|
+
const { extraErrors, omitExtraData, liveOmit, noValidate, liveValidate, onChange, removeEmptyOptionalObjects } = this.props;
|
|
435
431
|
const { formData: oldFormData, schemaUtils, schema, fieldPathId, schemaValidationErrorSchema, errors } = this.state;
|
|
436
432
|
let { customErrors, errorSchema: originalErrorSchema } = this.state;
|
|
437
433
|
const rootPathId = fieldPathId.path[0] || '';
|
|
@@ -470,6 +466,13 @@ export default class Form extends Component {
|
|
|
470
466
|
formData: newFormData,
|
|
471
467
|
};
|
|
472
468
|
}
|
|
469
|
+
if (removeEmptyOptionalObjects) {
|
|
470
|
+
newFormData = removeOptionalEmptyObjects(schemaUtils.getValidator(), schema, schemaUtils.getRootSchema(), newFormData);
|
|
471
|
+
state = {
|
|
472
|
+
...state,
|
|
473
|
+
formData: newFormData,
|
|
474
|
+
};
|
|
475
|
+
}
|
|
473
476
|
if (newErrorSchema) {
|
|
474
477
|
// First check to see if there is an existing validation error on this path...
|
|
475
478
|
// @ts-expect-error TS2590, because getting from the error schema is confusing TS
|
|
@@ -570,19 +573,23 @@ export default class Form extends Component {
|
|
|
570
573
|
* @param data - The data associated with the field that was blurred
|
|
571
574
|
*/
|
|
572
575
|
onBlur = (id, data) => {
|
|
573
|
-
const { onBlur, omitExtraData, liveOmit, liveValidate } = this.props;
|
|
576
|
+
const { onBlur, omitExtraData, liveOmit, liveValidate, removeEmptyOptionalObjects } = this.props;
|
|
574
577
|
if (onBlur) {
|
|
575
578
|
onBlur(id, data);
|
|
576
579
|
}
|
|
577
580
|
if ((omitExtraData === true && liveOmit === 'onBlur') || liveValidate === 'onBlur') {
|
|
578
581
|
const { onChange, extraErrors } = this.props;
|
|
579
|
-
const { formData } = this.state;
|
|
582
|
+
const { formData, schemaUtils, schema } = this.state;
|
|
580
583
|
let newFormData = formData;
|
|
581
584
|
let state = { formData: newFormData };
|
|
582
585
|
if (omitExtraData === true && liveOmit === 'onBlur') {
|
|
583
586
|
newFormData = this.omitExtraData(formData);
|
|
584
587
|
state = { formData: newFormData };
|
|
585
588
|
}
|
|
589
|
+
if (removeEmptyOptionalObjects) {
|
|
590
|
+
newFormData = removeOptionalEmptyObjects(schemaUtils.getValidator(), schema, schemaUtils.getRootSchema(), newFormData);
|
|
591
|
+
state = { ...state, formData: newFormData };
|
|
592
|
+
}
|
|
586
593
|
if (liveValidate === 'onBlur') {
|
|
587
594
|
const { schema, schemaUtils, errorSchema, customErrors, retrievedSchema } = this.state;
|
|
588
595
|
const liveValidation = this.liveValidate(schema, schemaUtils, errorSchema, newFormData, extraErrors, customErrors, retrievedSchema);
|
|
@@ -629,11 +636,15 @@ export default class Form extends Component {
|
|
|
629
636
|
return;
|
|
630
637
|
}
|
|
631
638
|
event.persist();
|
|
632
|
-
const { omitExtraData, extraErrors, noValidate, onSubmit } = this.props;
|
|
639
|
+
const { omitExtraData, extraErrors, noValidate, onSubmit, removeEmptyOptionalObjects } = this.props;
|
|
633
640
|
let { formData: newFormData } = this.state;
|
|
634
641
|
if (omitExtraData === true) {
|
|
635
642
|
newFormData = this.omitExtraData(newFormData);
|
|
636
643
|
}
|
|
644
|
+
if (removeEmptyOptionalObjects) {
|
|
645
|
+
const { schemaUtils, schema } = this.state;
|
|
646
|
+
newFormData = removeOptionalEmptyObjects(schemaUtils.getValidator(), schema, schemaUtils.getRootSchema(), newFormData);
|
|
647
|
+
}
|
|
637
648
|
if (noValidate || this.validateFormWithFormData(newFormData)) {
|
|
638
649
|
// There are no errors generated through schema validation.
|
|
639
650
|
// Check for user provided errors and update state accordingly.
|
|
@@ -726,8 +737,9 @@ export default class Form extends Component {
|
|
|
726
737
|
const elementId = path.join(idSeparator);
|
|
727
738
|
let field = this.formElement.current.elements[elementId];
|
|
728
739
|
if (!field) {
|
|
729
|
-
// if not an exact match, try finding
|
|
730
|
-
|
|
740
|
+
// if not an exact match, try finding a focusable element starting with the element id (like radio buttons or checkboxes)
|
|
741
|
+
// some themes (e.g. shadcn) use button elements instead of native inputs for radio groups
|
|
742
|
+
field = this.formElement.current.querySelector(`input[id^="${elementId}"], button[id^="${elementId}"]`);
|
|
731
743
|
}
|
|
732
744
|
if (field && field.length) {
|
|
733
745
|
// If we got a list with length > 0
|
|
@@ -801,11 +813,15 @@ export default class Form extends Component {
|
|
|
801
813
|
* @returns - True if the form is valid, false otherwise.
|
|
802
814
|
*/
|
|
803
815
|
validateForm() {
|
|
804
|
-
const { omitExtraData } = this.props;
|
|
816
|
+
const { omitExtraData, removeEmptyOptionalObjects } = this.props;
|
|
805
817
|
let { formData: newFormData } = this.state;
|
|
806
818
|
if (omitExtraData === true) {
|
|
807
819
|
newFormData = this.omitExtraData(newFormData);
|
|
808
820
|
}
|
|
821
|
+
if (removeEmptyOptionalObjects) {
|
|
822
|
+
const { schemaUtils, schema } = this.state;
|
|
823
|
+
newFormData = removeOptionalEmptyObjects(schemaUtils.getValidator(), schema, schemaUtils.getRootSchema(), newFormData);
|
|
824
|
+
}
|
|
809
825
|
return this.validateFormWithFormData(newFormData);
|
|
810
826
|
}
|
|
811
827
|
/** Renders the `Form` fields inside the <form> | `tagName` or `_internalFormWrapper`, rendering any errors if
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ObjectField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/ObjectField.tsx"],"names":[],"mappings":"AACA,OAAO,EAaL,UAAU,EACV,eAAe,EAMf,UAAU,EACV,gBAAgB,EAEjB,MAAM,aAAa,CAAC;AA2KrB;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EACnH,KAAK,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"ObjectField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/ObjectField.tsx"],"names":[],"mappings":"AACA,OAAO,EAaL,UAAU,EACV,eAAe,EAMf,UAAU,EACV,gBAAgB,EAEjB,MAAM,aAAa,CAAC;AA2KrB;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EACnH,KAAK,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,2CAyO3B"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useCallback, useState } from 'react';
|
|
2
|
+
import { useCallback, useRef, useState } from 'react';
|
|
3
3
|
import { ADDITIONAL_PROPERTY_FLAG, ANY_OF_KEY, getTemplate, getUiOptions, isFormDataAvailable, orderProperties, shouldRenderOptionalField, toFieldPathId, useDeepCompareMemo, ONE_OF_KEY, PROPERTIES_KEY, REF_KEY, TranslatableString, } from '@rjsf/utils';
|
|
4
4
|
import Markdown from 'markdown-to-jsx';
|
|
5
5
|
import get from 'lodash-es/get.js';
|
|
@@ -97,11 +97,14 @@ export default function ObjectField(props) {
|
|
|
97
97
|
const { schema: rawSchema, uiSchema = {}, formData, errorSchema, fieldPathId, name, required = false, disabled, readonly, hideError, onBlur, onFocus, onChange, registry, title, } = props;
|
|
98
98
|
const { fields, schemaUtils, translateString, globalUiOptions } = registry;
|
|
99
99
|
const { OptionalDataControlsField } = fields;
|
|
100
|
+
const formDataRef = useRef(formData);
|
|
101
|
+
formDataRef.current = formData;
|
|
100
102
|
const schema = schemaUtils.retrieveSchema(rawSchema, formData, true);
|
|
101
103
|
const uiOptions = getUiOptions(uiSchema, globalUiOptions);
|
|
102
104
|
const { properties: schemaProperties = {} } = schema;
|
|
103
105
|
// All the children will use childFieldPathId if present in the props, falling back to the fieldPathId
|
|
104
106
|
const childFieldPathId = props.childFieldPathId ?? fieldPathId;
|
|
107
|
+
const lastRenamedProperty = useRef({ previousKey: '', currentKey: undefined });
|
|
105
108
|
const templateTitle = uiOptions.title ?? schema.title ?? title ?? name;
|
|
106
109
|
const description = uiOptions.description ?? schema.description;
|
|
107
110
|
const renderOptionalField = shouldRenderOptionalField(registry, schema, required, uiSchema);
|
|
@@ -161,6 +164,10 @@ export default function ObjectField(props) {
|
|
|
161
164
|
// Cast this to make the `set` work properly
|
|
162
165
|
set(newFormData, newKey, newValue);
|
|
163
166
|
}
|
|
167
|
+
if (lastRenamedProperty.current.previousKey === newKey) {
|
|
168
|
+
lastRenamedProperty.current.currentKey = newKey;
|
|
169
|
+
lastRenamedProperty.current.previousKey = getAvailableKey(newKey, newFormData);
|
|
170
|
+
}
|
|
164
171
|
onChange(newFormData, childFieldPathId.path);
|
|
165
172
|
}, [formData, onChange, registry, childFieldPathId, getAvailableKey, schema]);
|
|
166
173
|
/** Returns a callback function that deals with the rename of a key for an additional property for a schema. That
|
|
@@ -172,9 +179,10 @@ export default function ObjectField(props) {
|
|
|
172
179
|
*/
|
|
173
180
|
const handleKeyRename = useCallback((oldKey, newKey) => {
|
|
174
181
|
if (oldKey !== newKey) {
|
|
175
|
-
const
|
|
182
|
+
const currentFormData = formDataRef.current;
|
|
183
|
+
const actualNewKey = getAvailableKey(newKey, currentFormData);
|
|
176
184
|
const newFormData = {
|
|
177
|
-
...
|
|
185
|
+
...currentFormData,
|
|
178
186
|
};
|
|
179
187
|
const newKeys = { [oldKey]: actualNewKey };
|
|
180
188
|
const keyValues = Object.keys(newFormData).map((key) => {
|
|
@@ -182,15 +190,31 @@ export default function ObjectField(props) {
|
|
|
182
190
|
return { [newKey]: newFormData[key] };
|
|
183
191
|
});
|
|
184
192
|
const renamedObj = Object.assign({}, ...keyValues);
|
|
193
|
+
formDataRef.current = renamedObj;
|
|
194
|
+
if (oldKey !== lastRenamedProperty.current.currentKey) {
|
|
195
|
+
lastRenamedProperty.current.previousKey = oldKey;
|
|
196
|
+
}
|
|
197
|
+
lastRenamedProperty.current.currentKey = actualNewKey;
|
|
185
198
|
onChange(renamedObj, childFieldPathId.path);
|
|
186
199
|
}
|
|
187
|
-
}, [
|
|
200
|
+
}, [onChange, childFieldPathId, getAvailableKey]);
|
|
188
201
|
/** Handles the remove click which calls the `onChange` callback with the special ADDITIONAL_PROPERTY_FIELD_REMOVE
|
|
189
202
|
* value for the path plus the key to be removed
|
|
190
203
|
*/
|
|
191
204
|
const handleRemoveProperty = useCallback((key) => {
|
|
192
205
|
onChange(ADDITIONAL_PROPERTY_KEY_REMOVE, [...childFieldPathId.path, key]);
|
|
193
206
|
}, [onChange, childFieldPathId]);
|
|
207
|
+
/** Returns the stable React key for a property. For the most recently renamed
|
|
208
|
+
* additional property, returns the previous key so that React reuses the
|
|
209
|
+
* existing component instance instead of unmounting/remounting it. This
|
|
210
|
+
* preserves DOM focus naturally without manual focus management.
|
|
211
|
+
*/
|
|
212
|
+
const getStableKey = useCallback((property) => {
|
|
213
|
+
if (lastRenamedProperty.current.currentKey === property) {
|
|
214
|
+
return lastRenamedProperty.current.previousKey;
|
|
215
|
+
}
|
|
216
|
+
return property;
|
|
217
|
+
}, []);
|
|
194
218
|
if (!renderOptionalField || hasFormData) {
|
|
195
219
|
try {
|
|
196
220
|
const properties = Object.keys(schemaProperties);
|
|
@@ -210,7 +234,7 @@ export default function ObjectField(props) {
|
|
|
210
234
|
const addedByAdditionalProperties = has(schema, [PROPERTIES_KEY, name, ADDITIONAL_PROPERTY_FLAG]);
|
|
211
235
|
const fieldUiSchema = addedByAdditionalProperties ? uiSchema.additionalProperties : uiSchema[name];
|
|
212
236
|
const hidden = getUiOptions(fieldUiSchema).widget === 'hidden';
|
|
213
|
-
const content = (_jsx(ObjectFieldProperty, { propertyName: name, required: isRequired(schema, name), schema: get(schema, [PROPERTIES_KEY, name], {}), uiSchema: fieldUiSchema, errorSchema: get(errorSchema, [name]), fieldPathId: childFieldPathId, formData: get(formData, [name]), handleKeyRename: handleKeyRename, handleRemoveProperty: handleRemoveProperty, addedByAdditionalProperties: addedByAdditionalProperties, onChange: onChange, onBlur: onBlur, onFocus: onFocus, registry: registry, disabled: disabled, readonly: readonly, hideError: hideError }, name));
|
|
237
|
+
const content = (_jsx(ObjectFieldProperty, { propertyName: name, required: isRequired(schema, name), schema: get(schema, [PROPERTIES_KEY, name], {}), uiSchema: fieldUiSchema, errorSchema: get(errorSchema, [name]), fieldPathId: childFieldPathId, formData: get(formData, [name]), handleKeyRename: handleKeyRename, handleRemoveProperty: handleRemoveProperty, addedByAdditionalProperties: addedByAdditionalProperties, onChange: onChange, onBlur: onBlur, onFocus: onFocus, registry: registry, disabled: disabled, readonly: readonly, hideError: hideError }, getStableKey(name)));
|
|
214
238
|
return {
|
|
215
239
|
content,
|
|
216
240
|
name,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WrapIfAdditionalTemplate.d.ts","sourceRoot":"","sources":["../../../src/components/templates/WrapIfAdditionalTemplate.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,eAAe,EACf,UAAU,EACV,gBAAgB,EAEhB,6BAA6B,EAC9B,MAAM,aAAa,CAAC;AAIrB;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAC9C,CAAC,GAAG,GAAG,EACP,CAAC,SAAS,gBAAgB,GAAG,UAAU,EACvC,CAAC,SAAS,eAAe,GAAG,GAAG,EAC/B,KAAK,EAAE,6BAA6B,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"WrapIfAdditionalTemplate.d.ts","sourceRoot":"","sources":["../../../src/components/templates/WrapIfAdditionalTemplate.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,eAAe,EACf,UAAU,EACV,gBAAgB,EAEhB,6BAA6B,EAC9B,MAAM,aAAa,CAAC;AAIrB;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAC9C,CAAC,GAAG,GAAG,EACP,CAAC,SAAS,gBAAgB,GAAG,UAAU,EACvC,CAAC,SAAS,eAAe,GAAG,GAAG,EAC/B,KAAK,EAAE,6BAA6B,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,2CAyE9C"}
|
|
@@ -23,5 +23,5 @@ export default function WrapIfAdditionalTemplate(props) {
|
|
|
23
23
|
return (_jsx("div", { className: uiClassNames, style: style, children: children }));
|
|
24
24
|
}
|
|
25
25
|
const margin = hasDescription ? 46 : 26;
|
|
26
|
-
return (_jsx("div", { className: uiClassNames, style: style, children: _jsxs("div", { className: 'row', children: [_jsx("div", { className: 'col-xs-5 form-additional', children: _jsxs("div", { className: 'form-group', children: [displayLabel && _jsx(Label, { label: keyLabel, required: required, id: `${id}-key` }), displayLabel && rawDescription && _jsx("div", { children: "\u00A0" }), _jsx("input", { className: 'form-control', type: 'text', id: `${id}-key`, onBlur: onKeyRenameBlur, defaultValue: label })] }) }), _jsx("div", { className: 'form-additional form-group col-xs-5', children: children }), _jsx("div", { className: 'col-xs-2', style: { marginTop: displayLabel ? `${margin}px` : undefined }, children: _jsx(RemoveButton, { id: buttonId(id, 'remove'), className: 'rjsf-object-property-remove btn-block', style: { border: '0' }, disabled: disabled || readonly, onClick: onRemoveProperty, uiSchema: uiSchema, registry: registry }) })] }) }));
|
|
26
|
+
return (_jsx("div", { className: uiClassNames, style: style, children: _jsxs("div", { className: 'row', children: [_jsx("div", { className: 'col-xs-5 form-additional', children: _jsxs("div", { className: 'form-group', children: [displayLabel && _jsx(Label, { label: keyLabel, required: required, id: `${id}-key` }), displayLabel && rawDescription && _jsx("div", { children: "\u00A0" }), _jsx("input", { className: 'form-control', type: 'text', id: `${id}-key`, onBlur: onKeyRenameBlur, defaultValue: label }, label)] }) }), _jsx("div", { className: 'form-additional form-group col-xs-5', children: children }), _jsx("div", { className: 'col-xs-2', style: { marginTop: displayLabel ? `${margin}px` : undefined }, children: _jsx(RemoveButton, { id: buttonId(id, 'remove'), className: 'rjsf-object-property-remove btn-block', style: { border: '0' }, disabled: disabled || readonly, onClick: onRemoveProperty, uiSchema: uiSchema, registry: registry }) })] }) }));
|
|
27
27
|
}
|
|
@@ -4,6 +4,6 @@ import { FormContextType, WidgetProps, RJSFSchema, StrictRJSFSchema } from '@rjs
|
|
|
4
4
|
*
|
|
5
5
|
* @param props - The `WidgetProps` for this component
|
|
6
6
|
*/
|
|
7
|
-
declare function CheckboxesWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({ id, disabled, options
|
|
7
|
+
declare function CheckboxesWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({ id, disabled, options, value, autofocus, readonly, onChange, onBlur, onFocus, htmlName, }: WidgetProps<T, S, F>): import("react/jsx-runtime").JSX.Element;
|
|
8
8
|
export default CheckboxesWidget;
|
|
9
9
|
//# sourceMappingURL=CheckboxesWidget.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxesWidget.d.ts","sourceRoot":"","sources":["../../../src/components/widgets/CheckboxesWidget.tsx"],"names":[],"mappings":"AACA,OAAO,
|
|
1
|
+
{"version":3,"file":"CheckboxesWidget.d.ts","sourceRoot":"","sources":["../../../src/components/widgets/CheckboxesWidget.tsx"],"names":[],"mappings":"AACA,OAAO,EASL,eAAe,EACf,WAAW,EACX,UAAU,EACV,gBAAgB,EACjB,MAAM,aAAa,CAAC;AAErB;;;;GAIG;AACH,iBAAS,gBAAgB,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EAAE,EAC3G,EAAE,EACF,QAAQ,EACR,OAAO,EACP,KAAK,EACL,SAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,OAAO,EACP,QAAQ,GACT,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,2CA+DtB;AAED,eAAe,gBAAgB,CAAC"}
|
|
@@ -1,15 +1,17 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useCallback } from 'react';
|
|
3
|
-
import { ariaDescribedByIds, enumOptionsDeselectValue, enumOptionsIsSelected, enumOptionsSelectValue,
|
|
3
|
+
import { ariaDescribedByIds, enumOptionValueDecoder, enumOptionValueEncoder, enumOptionsDeselectValue, enumOptionsIsSelected, enumOptionsSelectValue, getOptionValueFormat, optionId, } from '@rjsf/utils';
|
|
4
4
|
/** The `CheckboxesWidget` is a widget for rendering checkbox groups.
|
|
5
5
|
* It is typically used to represent an array of enums.
|
|
6
6
|
*
|
|
7
7
|
* @param props - The `WidgetProps` for this component
|
|
8
8
|
*/
|
|
9
|
-
function CheckboxesWidget({ id, disabled, options
|
|
9
|
+
function CheckboxesWidget({ id, disabled, options, value, autofocus = false, readonly, onChange, onBlur, onFocus, htmlName, }) {
|
|
10
|
+
const { inline = false, enumOptions, enumDisabled, emptyValue } = options;
|
|
11
|
+
const optionValueFormat = getOptionValueFormat(options);
|
|
10
12
|
const checkboxesValues = Array.isArray(value) ? value : [value];
|
|
11
|
-
const handleBlur = useCallback(({ target }) => onBlur(id,
|
|
12
|
-
const handleFocus = useCallback(({ target }) => onFocus(id,
|
|
13
|
+
const handleBlur = useCallback(({ target }) => onBlur(id, enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue)), [onBlur, id, enumOptions, emptyValue, optionValueFormat]);
|
|
14
|
+
const handleFocus = useCallback(({ target }) => onFocus(id, enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue)), [onFocus, id, enumOptions, emptyValue, optionValueFormat]);
|
|
13
15
|
return (_jsx("div", { className: 'checkboxes', id: id, children: Array.isArray(enumOptions) &&
|
|
14
16
|
enumOptions.map((option, index) => {
|
|
15
17
|
const checked = enumOptionsIsSelected(option.value, checkboxesValues);
|
|
@@ -23,7 +25,7 @@ function CheckboxesWidget({ id, disabled, options: { inline = false, enumOptions
|
|
|
23
25
|
onChange(enumOptionsDeselectValue(index, checkboxesValues, enumOptions));
|
|
24
26
|
}
|
|
25
27
|
};
|
|
26
|
-
const checkbox = (_jsxs("span", { children: [_jsx("input", { type: 'checkbox', id: optionId(id, index), name: htmlName || id, checked: checked, value:
|
|
28
|
+
const checkbox = (_jsxs("span", { children: [_jsx("input", { type: 'checkbox', id: optionId(id, index), name: htmlName || id, checked: checked, value: enumOptionValueEncoder(option.value, index, optionValueFormat), disabled: disabled || itemDisabled || readonly, autoFocus: autofocus && index === 0, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, "aria-describedby": ariaDescribedByIds(id) }), _jsx("span", { children: option.label })] }));
|
|
27
29
|
return inline ? (_jsx("label", { className: `checkbox-inline ${disabledCls}`, children: checkbox }, index)) : (_jsx("div", { className: `checkbox ${disabledCls}`, children: _jsx("label", { children: checkbox }) }, index));
|
|
28
30
|
}) }));
|
|
29
31
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioWidget.d.ts","sourceRoot":"","sources":["../../../src/components/widgets/RadioWidget.tsx"],"names":[],"mappings":"AACA,OAAO,
|
|
1
|
+
{"version":3,"file":"RadioWidget.d.ts","sourceRoot":"","sources":["../../../src/components/widgets/RadioWidget.tsx"],"names":[],"mappings":"AACA,OAAO,EAOL,eAAe,EACf,UAAU,EACV,gBAAgB,EAChB,WAAW,EACZ,MAAM,aAAa,CAAC;AAErB;;;;GAIG;AACH,iBAAS,WAAW,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EAAE,EACtG,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,SAAiB,EACjB,MAAM,EACN,OAAO,EACP,QAAQ,EACR,EAAE,EACF,QAAQ,GACT,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,2CA0DtB;AAED,eAAe,WAAW,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useCallback } from 'react';
|
|
3
|
-
import { ariaDescribedByIds, enumOptionsIsSelected,
|
|
3
|
+
import { ariaDescribedByIds, enumOptionValueDecoder, enumOptionValueEncoder, enumOptionsIsSelected, getOptionValueFormat, optionId, } from '@rjsf/utils';
|
|
4
4
|
/** The `RadioWidget` is a widget for rendering a radio group.
|
|
5
5
|
* It is typically used with a string property constrained with enum options.
|
|
6
6
|
*
|
|
@@ -8,15 +8,16 @@ import { ariaDescribedByIds, enumOptionsIsSelected, enumOptionsValueForIndex, op
|
|
|
8
8
|
*/
|
|
9
9
|
function RadioWidget({ options, value, required, disabled, readonly, autofocus = false, onBlur, onFocus, onChange, id, htmlName, }) {
|
|
10
10
|
const { enumOptions, enumDisabled, inline, emptyValue } = options;
|
|
11
|
-
const
|
|
12
|
-
const
|
|
11
|
+
const optionValueFormat = getOptionValueFormat(options);
|
|
12
|
+
const handleBlur = useCallback(({ target }) => onBlur(id, enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue)), [onBlur, enumOptions, emptyValue, id, optionValueFormat]);
|
|
13
|
+
const handleFocus = useCallback(({ target }) => onFocus(id, enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue)), [onFocus, enumOptions, emptyValue, id, optionValueFormat]);
|
|
13
14
|
return (_jsx("div", { className: 'field-radio-group', id: id, role: 'radiogroup', children: Array.isArray(enumOptions) &&
|
|
14
15
|
enumOptions.map((option, i) => {
|
|
15
16
|
const checked = enumOptionsIsSelected(option.value, value);
|
|
16
17
|
const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
|
|
17
18
|
const disabledCls = disabled || itemDisabled || readonly ? 'disabled' : '';
|
|
18
19
|
const handleChange = () => onChange(option.value);
|
|
19
|
-
const radio = (_jsxs("span", { children: [_jsx("input", { type: 'radio', id: optionId(id, i), checked: checked, name: htmlName || id, required: required, value:
|
|
20
|
+
const radio = (_jsxs("span", { children: [_jsx("input", { type: 'radio', id: optionId(id, i), checked: checked, name: htmlName || id, required: required, value: enumOptionValueEncoder(option.value, i, optionValueFormat), disabled: disabled || itemDisabled || readonly, autoFocus: autofocus && i === 0, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, "aria-describedby": ariaDescribedByIds(id) }), _jsx("span", { children: option.label })] }));
|
|
20
21
|
return inline ? (_jsx("label", { className: `radio-inline ${disabledCls}`, children: radio }, i)) : (_jsx("div", { className: `radio ${disabledCls}`, children: _jsx("label", { children: radio }) }, i));
|
|
21
22
|
}) }));
|
|
22
23
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectWidget.d.ts","sourceRoot":"","sources":["../../../src/components/widgets/SelectWidget.tsx"],"names":[],"mappings":"AACA,OAAO,
|
|
1
|
+
{"version":3,"file":"SelectWidget.d.ts","sourceRoot":"","sources":["../../../src/components/widgets/SelectWidget.tsx"],"names":[],"mappings":"AACA,OAAO,EAML,eAAe,EACf,UAAU,EACV,gBAAgB,EAChB,WAAW,EACZ,MAAM,aAAa,CAAC;AAYrB;;;;GAIG;AACH,iBAAS,YAAY,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EAAE,EACvG,MAAM,EACN,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAgB,EAChB,SAAiB,EACjB,QAAQ,EACR,MAAM,EACN,OAAO,EACP,WAAW,EACX,QAAQ,GACT,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,2CA4DtB;AAED,eAAe,YAAY,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useCallback } from 'react';
|
|
3
|
-
import { ariaDescribedByIds,
|
|
3
|
+
import { ariaDescribedByIds, enumOptionSelectedValue, enumOptionValueDecoder, enumOptionValueEncoder, getOptionValueFormat, } from '@rjsf/utils';
|
|
4
4
|
function getValue(event, multiple) {
|
|
5
5
|
if (multiple) {
|
|
6
6
|
return Array.from(event.target.options)
|
|
@@ -18,24 +18,25 @@ function getValue(event, multiple) {
|
|
|
18
18
|
function SelectWidget({ schema, id, options, value, required, disabled, readonly, multiple = false, autofocus = false, onChange, onBlur, onFocus, placeholder, htmlName, }) {
|
|
19
19
|
const { enumOptions, enumDisabled, emptyValue: optEmptyVal } = options;
|
|
20
20
|
const emptyValue = multiple ? [] : '';
|
|
21
|
+
const optionValueFormat = getOptionValueFormat(options);
|
|
21
22
|
const handleFocus = useCallback((event) => {
|
|
22
23
|
const newValue = getValue(event, multiple);
|
|
23
|
-
return onFocus(id,
|
|
24
|
-
}, [onFocus, id, multiple, enumOptions, optEmptyVal]);
|
|
24
|
+
return onFocus(id, enumOptionValueDecoder(newValue, enumOptions, optionValueFormat, optEmptyVal));
|
|
25
|
+
}, [onFocus, id, multiple, enumOptions, optEmptyVal, optionValueFormat]);
|
|
25
26
|
const handleBlur = useCallback((event) => {
|
|
26
27
|
const newValue = getValue(event, multiple);
|
|
27
|
-
return onBlur(id,
|
|
28
|
-
}, [onBlur, id, multiple, enumOptions, optEmptyVal]);
|
|
28
|
+
return onBlur(id, enumOptionValueDecoder(newValue, enumOptions, optionValueFormat, optEmptyVal));
|
|
29
|
+
}, [onBlur, id, multiple, enumOptions, optEmptyVal, optionValueFormat]);
|
|
29
30
|
const handleChange = useCallback((event) => {
|
|
30
31
|
const newValue = getValue(event, multiple);
|
|
31
|
-
return onChange(
|
|
32
|
-
}, [onChange, multiple, enumOptions, optEmptyVal]);
|
|
33
|
-
const
|
|
32
|
+
return onChange(enumOptionValueDecoder(newValue, enumOptions, optionValueFormat, optEmptyVal));
|
|
33
|
+
}, [onChange, multiple, enumOptions, optEmptyVal, optionValueFormat]);
|
|
34
|
+
const selectValue = enumOptionSelectedValue(value, enumOptions, multiple, optionValueFormat, emptyValue);
|
|
34
35
|
const showPlaceholderOption = !multiple && schema.default === undefined;
|
|
35
|
-
return (_jsxs("select", { id: id, name: htmlName || id, multiple: multiple, role: 'combobox', className: 'form-control', value:
|
|
36
|
+
return (_jsxs("select", { id: id, name: htmlName || id, multiple: multiple, role: 'combobox', className: 'form-control', value: selectValue, required: required, disabled: disabled || readonly, autoFocus: autofocus, onBlur: handleBlur, onFocus: handleFocus, onChange: handleChange, "aria-describedby": ariaDescribedByIds(id), children: [showPlaceholderOption && _jsx("option", { value: '', children: placeholder }), Array.isArray(enumOptions) &&
|
|
36
37
|
enumOptions.map(({ value, label }, i) => {
|
|
37
38
|
const disabled = enumDisabled && enumDisabled.indexOf(value) !== -1;
|
|
38
|
-
return (_jsx("option", { value:
|
|
39
|
+
return (_jsx("option", { value: enumOptionValueEncoder(value, i, optionValueFormat), disabled: disabled, children: label }, i));
|
|
39
40
|
})] }));
|
|
40
41
|
}
|
|
41
42
|
export default SelectWidget;
|