-
-
Notifications
You must be signed in to change notification settings - Fork 2.3k
Expand file tree
/
Copy pathForm.tsx
More file actions
1399 lines (1333 loc) · 60.5 KB
/
Form.tsx
File metadata and controls
1399 lines (1333 loc) · 60.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
import { Component, ElementType, FormEvent, ReactNode, Ref, RefObject, createRef } from 'react';
import {
augmentSchemaWithUiRequired,
createSchemaUtils,
CustomValidator,
deepEquals,
ErrorSchema,
ErrorSchemaBuilder,
ErrorTransformer,
expandUiSchemaDefinitions,
FieldPathId,
FieldPathList,
FormContextType,
getChangedFields,
getTemplate,
getUiOptions,
isObject,
mergeObjects,
PathSchema,
StrictRJSFSchema,
Registry,
RegistryFieldsType,
RegistryWidgetsType,
RJSFSchema,
RJSFValidationError,
SchemaUtilsType,
shouldRender,
SUBMIT_BTN_OPTIONS_KEY,
TemplatesType,
toErrorList,
toFieldPathId,
UiSchema,
UI_DEFINITIONS_KEY,
UI_GLOBAL_OPTIONS_KEY,
UI_OPTIONS_KEY,
ValidationData,
validationDataMerge,
ValidatorType,
Experimental_DefaultFormStateBehavior,
Experimental_CustomMergeAllOf,
DEFAULT_ID_SEPARATOR,
DEFAULT_ID_PREFIX,
GlobalFormOptions,
ERRORS_KEY,
ID_KEY,
NameGeneratorFunction,
getUsedFormData,
getFieldNames,
} from '@rjsf/utils';
import _cloneDeep from 'lodash/cloneDeep';
import _get from 'lodash/get';
import _isEmpty from 'lodash/isEmpty';
import _pick from 'lodash/pick';
import _set from 'lodash/set';
import _toPath from 'lodash/toPath';
import _unset from 'lodash/unset';
import getDefaultRegistry from '../getDefaultRegistry';
import { ADDITIONAL_PROPERTY_KEY_REMOVE, IS_RESET } from './constants';
/** Represents a boolean option that is deprecated.
* @deprecated - In a future major release, this type will be removed
*/
type DeprecatedBooleanOption = boolean;
/** The properties that are passed to the `Form` */
export interface FormProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> {
/** The JSON schema object for the form */
schema: S;
/** An implementation of the `ValidatorType` interface that is needed for form validation to work */
validator: ValidatorType<T, S, F>;
/** The optional children for the form, if provided, it will replace the default `SubmitButton` */
children?: ReactNode;
/** The uiSchema for the form */
uiSchema?: UiSchema<T, S, F>;
/** The data for the form, used to load a "controlled" form with its current data. If you want an "uncontrolled" form
* with initial data, then use `initialFormData` instead.
*/
formData?: T;
/** The initial data for the form, used to fill an "uncontrolled" form with existing data on the initial render and
* when `reset()` is called programmatically.
*/
initialFormData?: T;
// Form presentation and behavior modifiers
/** You can provide a `formContext` object to the form, which is passed down to all fields and widgets. Useful for
* implementing context aware fields and widgets.
*
* NOTE: Setting `{readonlyAsDisabled: false}` on the formContext will make the antd theme treat readOnly fields as
* disabled.
*/
formContext?: F;
/** To avoid collisions with existing ids in the DOM, it is possible to change the prefix used for ids;
* Default is `root`
*/
idPrefix?: string;
/** To avoid using a path separator that is present in field names, it is possible to change the separator used for
* ids (Default is `_`)
*/
idSeparator?: string;
/** It's possible to disable the whole form by setting the `disabled` prop. The `disabled` prop is then forwarded down
* to each field of the form. If you just want to disable some fields, see the `ui:disabled` parameter in `uiSchema`
*/
disabled?: boolean;
/** It's possible to make the whole form read-only by setting the `readonly` prop. The `readonly` prop is then
* forwarded down to each field of the form. If you just want to make some fields read-only, see the `ui:readonly`
* parameter in `uiSchema`
*/
readonly?: boolean;
// Form registry
/** The dictionary of registered fields in the form */
fields?: RegistryFieldsType<T, S, F>;
/** The dictionary of registered templates in the form; Partial allows a subset to be provided beyond the defaults */
templates?: Partial<Omit<TemplatesType<T, S, F>, 'ButtonTemplates'>> & {
ButtonTemplates?: Partial<TemplatesType<T, S, F>['ButtonTemplates']>;
};
/** The dictionary of registered widgets in the form */
widgets?: RegistryWidgetsType<T, S, F>;
// Callbacks
/** If you plan on being notified every time the form data are updated, you can pass an `onChange` handler, which will
* receive the same args as `onSubmit` any time a value is updated in the form. Can also return the `id` of the field
* that caused the change
*/
onChange?: (data: IChangeEvent<T, S, F>, id?: string) => void;
/** To react when submitted form data are invalid, pass an `onError` handler. It will be passed the list of
* encountered errors
*/
onError?: (errors: RJSFValidationError[]) => void;
/** You can pass a function as the `onSubmit` prop of your `Form` component to listen to when the form is submitted
* and its data are valid. It will be passed a result object having a `formData` attribute, which is the valid form
* data you're usually after. The original event will also be passed as a second parameter
*/
onSubmit?: (data: IChangeEvent<T, S, F>, event: FormEvent<any>) => void;
/** Sometimes you may want to trigger events or modify external state when a field has been touched, so you can pass
* an `onBlur` handler, which will receive the id of the input that was blurred and the field value
*/
onBlur?: (id: string, data: any) => void;
/** Sometimes you may want to trigger events or modify external state when a field has been focused, so you can pass
* an `onFocus` handler, which will receive the id of the input that is focused and the field value
*/
onFocus?: (id: string, data: any) => void;
/** The value of this prop will be passed to the `accept-charset` HTML attribute on the form */
acceptCharset?: string;
/** The value of this prop will be passed to the `action` HTML attribute on the form
*
* NOTE: this just renders the `action` attribute in the HTML markup. There is no real network request being sent to
* this `action` on submit. Instead, react-jsonschema-form catches the submit event with `event.preventDefault()`
* and then calls the `onSubmit` function, where you could send a request programmatically with `fetch` or similar.
*/
action?: string;
/** The value of this prop will be passed to the `autocomplete` HTML attribute on the form */
autoComplete?: string;
/** The value of this prop will be passed to the `class` HTML attribute on the form */
className?: string;
/** The value of this prop will be passed to the `enctype` HTML attribute on the form */
enctype?: string;
/** The value of this prop will be passed to the `id` HTML attribute on the form */
id?: string;
/** The value of this prop will be passed to the `name` HTML attribute on the form */
name?: string;
/** The value of this prop will be passed to the `method` HTML attribute on the form */
method?: string;
/** It's possible to change the default `form` tag name to a different HTML tag, which can be helpful if you are
* nesting forms. However, native browser form behaviour, such as submitting when the `Enter` key is pressed, may no
* longer work
*/
tagName?: ElementType;
/** The value of this prop will be passed to the `target` HTML attribute on the form */
target?: string;
// Errors and validation
/** Formerly the `validate` prop; Takes a function that specifies custom validation rules for the form */
customValidate?: CustomValidator<T, S, F>;
/** This prop allows passing in custom errors that are augmented with the existing JSON Schema errors on the form; it
* can be used to implement asynchronous validation. By default, these are non-blocking errors, meaning that you can
* still submit the form when these are the only errors displayed to the user.
*/
extraErrors?: ErrorSchema<T>;
/** If set to true, causes the `extraErrors` to become blocking when the form is submitted */
extraErrorsBlockSubmit?: boolean;
/** If set to true, turns off HTML5 validation on the form; Set to `false` by default */
noHtml5Validate?: boolean;
/** If set to true, turns off all validation. Set to `false` by default
*
* @deprecated - In a future release, this switch may be replaced by making `validator` prop optional
*/
noValidate?: boolean;
/** Flag that describes when live validation will be performed. Live validation means that the form will perform
* validation and show any validation errors whenever the form data is updated, rather than just on submit.
*
* If no value (or `false`) is provided, then live validation will not happen. If `true` or `onChange` is provided for
* the flag, then live validation will be performed after processing of all pending changes has completed. If `onBlur`
* is provided, then live validation will be performed when a field that was updated is blurred (as a performance
* optimization).
*
* NOTE: In a future major release, the `boolean` options for this flag will be removed
*/
liveValidate?: 'onChange' | 'onBlur' | DeprecatedBooleanOption;
/** Flag that describes when live omit will be performed. Live omit happens only when `omitExtraData` is also set to
* to `true` and the form's data is updated by the user.
*
* If no value (or `false`) is provided, then live omit will not happen. If `true` or `onChange` is provided for
* the flag, then live omit will be performed after processing of all pending changes has completed. If `onBlur`
* is provided, then live omit will be performed when a field that was updated is blurred (as a performance
* optimization).
*
* NOTE: In a future major release, the `boolean` options for this flag will be removed
*/
liveOmit?: 'onChange' | 'onBlur' | DeprecatedBooleanOption;
/** If set to true, then extra form data values that are not in any form field will be removed whenever `onSubmit` is
* called. Set to `false` by default.
*/
omitExtraData?: boolean;
/** When this prop is set to `top` or 'bottom', a list of errors (or the custom error list defined in the `ErrorList`) will also
* show. When set to false, only inline input validation errors will be shown. Set to `top` by default
*/
showErrorList?: false | 'top' | 'bottom';
/** A function can be passed to this prop in order to make modifications to the default errors resulting from JSON
* Schema validation
*/
transformErrors?: ErrorTransformer<T, S, F>;
/** If set to true, then the first field with an error will receive the focus when the form is submitted with errors
*/
focusOnFirstError?: boolean | ((error: RJSFValidationError) => void);
/** Optional string translation function, if provided, allows users to change the translation of the RJSF internal
* strings. Some strings contain replaceable parameter values as indicated by `%1`, `%2`, etc. The number after the
* `%` indicates the order of the parameter. The ordering of parameters is important because some languages may choose
* to put the second parameter before the first in its translation.
*/
translateString?: Registry['translateString'];
/** Optional function to generate custom HTML `name` attributes for form fields.
*/
nameGenerator?: NameGeneratorFunction;
/** Optional flag that, when set to true, will cause the `FallbackField` to render a type selector for unsupported
* fields instead of the default UnsupportedField error UI.
*/
useFallbackUiForUnsupportedType?: boolean;
/** Optional configuration object with flags, if provided, allows users to override default form state behavior
* Currently only affecting minItems on array fields and handling of setting defaults based on the value of
* `emptyObjectFields`
*/
experimental_defaultFormStateBehavior?: Experimental_DefaultFormStateBehavior;
/**
* Controls the component update strategy used by the Form's `shouldComponentUpdate` lifecycle method.
*
* - `'customDeep'`: Uses RJSF's custom deep equality checks via the `deepEquals` utility function,
* which treats all functions as equivalent and provides optimized performance for form data comparisons.
* - `'shallow'`: Uses shallow comparison of props and state (only compares direct properties). This matches React's PureComponent behavior.
* - `'always'`: Always rerenders when called. This matches React's Component behavior.
*
* @default 'customDeep'
*/
experimental_componentUpdateStrategy?: 'customDeep' | 'shallow' | 'always';
/** Optional function that allows for custom merging of `allOf` schemas
*/
experimental_customMergeAllOf?: Experimental_CustomMergeAllOf<S>;
// Private
/**
* _internalFormWrapper is currently used by the semantic-ui theme to provide a custom wrapper around `<Form />`
* that supports the proper rendering of those themes. To use this prop, one must pass a component that takes two
* props: `children` and `as`. That component, at minimum, should render the `children` inside of a <form /> tag
* unless `as` is provided, in which case, use the `as` prop in place of `<form />`.
* i.e.:
* ```
* export default function InternalForm({ children, as }) {
* const FormTag = as || 'form';
* return <FormTag>{children}</FormTag>;
* }
* ```
*
* Use at your own risk as this prop is private and may change at any time without notice.
*/
_internalFormWrapper?: ElementType;
/** Support receiving a React ref to the Form
*/
ref?: Ref<Form<T, S, F>>;
}
/** The data that is contained within the state for the `Form` */
export interface FormState<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> {
/** The JSON schema object for the form */
schema: S;
/** The uiSchema for the form */
uiSchema: UiSchema<T, S, F>;
/** The `FieldPathId` for the form, computed from the `schema`, the `rootFieldId`, the `idPrefix` and
* `idSeparator` props.
*/
fieldPathId: FieldPathId;
/** The schemaUtils implementation used by the `Form`, created from the `validator` and the `schema` */
schemaUtils: SchemaUtilsType<T, S, F>;
/** The current data for the form, computed from the `formData` prop and the changes made by the user */
formData?: T;
/** Flag indicating whether the form is in edit mode, true when `formData` is passed to the form, otherwise false */
edit: boolean;
/** The current list of errors for the form, includes `extraErrors` */
errors: RJSFValidationError[];
/** The current errors, in `ErrorSchema` format, for the form, includes `extraErrors` */
errorSchema: ErrorSchema<T>;
// Private
/** The current list of errors for the form directly from schema validation, does NOT include `extraErrors` */
schemaValidationErrors: RJSFValidationError[];
/** The current errors, in `ErrorSchema` format, for the form directly from schema validation, does NOT include
* `extraErrors`
*/
schemaValidationErrorSchema: ErrorSchema<T>;
/** A container used to handle custom errors provided via `onChange` */
customErrors?: ErrorSchemaBuilder<T>;
/** @description result of schemaUtils.retrieveSchema(schema, formData). This a memoized value to avoid re calculate at internal functions (getStateFromProps, onChange) */
retrievedSchema: S;
/** Flag indicating whether the initial form defaults have been generated */
initialDefaultsGenerated: boolean;
/** The registry (re)computed only when props changed */
registry: Registry<T, S, F>;
/** Tracks the previous `extraErrors` prop reference so that `getDerivedStateFromProps` can detect changes */
_prevExtraErrors?: ErrorSchema<T>;
}
/** The event data passed when changes have been made to the form, includes everything from the `FormState` except
* the schema validation errors. An additional `status` is added when returned from `onSubmit`
*/
export interface IChangeEvent<
T = any,
S extends StrictRJSFSchema = RJSFSchema,
F extends FormContextType = any,
> extends Pick<
FormState<T, S, F>,
'schema' | 'uiSchema' | 'fieldPathId' | 'schemaUtils' | 'formData' | 'edit' | 'errors' | 'errorSchema'
> {
/** The status of the form when submitted */
status?: 'submitted';
}
/** Converts the full `FormState` into the `IChangeEvent` version by picking out the public values
*
* @param state - The state of the form
* @param status - The status provided by the onSubmit
* @returns - The `IChangeEvent` for the state
*/
function toIChangeEvent<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
state: FormState<T, S, F>,
status?: IChangeEvent['status'],
): IChangeEvent<T, S, F> {
return {
..._pick(state, ['schema', 'uiSchema', 'fieldPathId', 'schemaUtils', 'formData', 'edit', 'errors', 'errorSchema']),
...(status !== undefined && { status }),
};
}
/** The definition of a pending change that will be processed in the `onChange` handler
*/
interface PendingChange<T> {
/** The path into the formData/errorSchema at which the `newValue`/`newErrorSchema` will be set */
path: FieldPathList;
/** The new value to set into the formData */
newValue?: T;
/** The new errors to be set into the errorSchema, if any */
newErrorSchema?: ErrorSchema<T>;
/** The optional id of the field for which the change is being made */
id?: string;
}
/** The `Form` component renders the outer form and all the fields defined in the `schema` */
export default class Form<
T = any,
S extends StrictRJSFSchema = RJSFSchema,
F extends FormContextType = any,
> extends Component<FormProps<T, S, F>, FormState<T, S, F>> {
/** The ref used to hold the `form` element, this needs to be `any` because `tagName` or `_internalFormWrapper` can
* provide any possible type here
*/
formElement: RefObject<any>;
/** The list of pending changes
*/
pendingChanges: PendingChange<T>[] = [];
/** Flag to track when we're processing a user-initiated field change.
* This prevents componentDidUpdate from reverting oneOf/anyOf option switches.
*/
private _isProcessingUserChange = false;
/** When the `extraErrors` prop changes, re-merges `schemaValidationErrors` + `extraErrors` + `customErrors` into
* state before render, ensuring the updated errors are visible immediately in a single render cycle.
*
* @param props - The current props
* @param state - The current state
* @returns Partial state with re-merged errors if `extraErrors` changed, or `null` if no update is needed
*/
static getDerivedStateFromProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
props: FormProps<T, S, F>,
state: FormState<T, S, F>,
): Partial<FormState<T, S, F>> | null {
if (props.extraErrors !== state._prevExtraErrors) {
const baseErrors: ValidationData<T> = {
errors: state.schemaValidationErrors || [],
errorSchema: (state.schemaValidationErrorSchema || {}) as ErrorSchema<T>,
};
let { errors, errorSchema } = baseErrors;
if (props.extraErrors) {
({ errors, errorSchema } = validationDataMerge<T>(baseErrors, props.extraErrors));
}
if (state.customErrors) {
({ errors, errorSchema } = validationDataMerge<T>(
{ errors, errorSchema },
state.customErrors.ErrorSchema,
true,
));
}
return { _prevExtraErrors: props.extraErrors, errors, errorSchema };
}
return null;
}
/** Constructs the `Form` from the `props`. Will setup the initial state from the props. It will also call the
* `onChange` handler if the initially provided `formData` is modified to add missing default values as part of the
* state construction.
*
* @param props - The initial props for the `Form`
*/
constructor(props: FormProps<T, S, F>) {
super(props);
if (!props.validator) {
throw new Error('A validator is required for Form functionality to work');
}
const { formData: propsFormData, initialFormData, onChange } = props;
const formData = propsFormData ?? initialFormData;
this.state = {
...this.getStateFromProps(props, formData, undefined, undefined, undefined, true),
_prevExtraErrors: props.extraErrors,
};
if (onChange && !deepEquals(this.state.formData, formData)) {
onChange(toIChangeEvent(this.state));
}
this.formElement = createRef();
}
/**
* `getSnapshotBeforeUpdate` is a React lifecycle method that is invoked right before the most recently rendered
* output is committed to the DOM. It enables your component to capture current values (e.g., scroll position) before
* they are potentially changed.
*
* In this case, it checks if the props have changed since the last render. If they have, it computes the next state
* of the component using `getStateFromProps` method and returns it along with a `shouldUpdate` flag set to `true` IF
* the `nextState` and `prevState` are different, otherwise `false`. This ensures that we have the most up-to-date
* state ready to be applied in `componentDidUpdate`.
*
* If `formData` hasn't changed, it simply returns an object with `shouldUpdate` set to `false`, indicating that a
* state update is not necessary.
*
* @param prevProps - The previous set of props before the update.
* @param prevState - The previous state before the update.
* @returns Either an object containing the next state and a flag indicating that an update should occur, or an object
* with a flag indicating that an update is not necessary.
*/
getSnapshotBeforeUpdate(
prevProps: FormProps<T, S, F>,
prevState: FormState<T, S, F>,
): { nextState: FormState<T, S, F>; shouldUpdate: true } | { shouldUpdate: false } {
if (!deepEquals(this.props, prevProps)) {
// Compare the previous props formData against the current props formData
const formDataChangedFields = getChangedFields(this.props.formData, prevProps.formData);
// Compare the current props formData against the current state's formData to determine if the new props were the
// result of the onChange from the existing state formData
const stateDataChangedFields = getChangedFields(this.props.formData, this.state.formData);
const isSchemaChanged = !deepEquals(prevProps.schema, this.props.schema);
// When formData is not an object, getChangedFields returns an empty array.
// In this case, deepEquals is most needed to check again.
const isFormDataChanged =
formDataChangedFields.length > 0 || !deepEquals(prevProps.formData, this.props.formData);
const isStateDataChanged =
stateDataChangedFields.length > 0 || !deepEquals(this.state.formData, this.props.formData);
const nextState = this.getStateFromProps(
this.props,
this.props.formData,
// If the `schema` has changed, we need to update the retrieved schema.
// Or if the `formData` changes, for example in the case of a schema with dependencies that need to
// match one of the subSchemas, the retrieved schema must be updated.
isSchemaChanged || isFormDataChanged ? undefined : this.state.retrievedSchema,
isSchemaChanged,
formDataChangedFields,
// Skip live validation for this request if no form data has changed from the last state
!isStateDataChanged,
);
const shouldUpdate = !deepEquals(nextState, prevState);
return { nextState, shouldUpdate };
}
return { shouldUpdate: false };
}
/**
* `componentDidUpdate` is a React lifecycle method that is invoked immediately after updating occurs. This method is
* not called for the initial render.
*
* Here, it checks if an update is necessary based on the `shouldUpdate` flag received from `getSnapshotBeforeUpdate`.
* If an update is required, it applies the next state and, if needed, triggers the `onChange` handler to inform about
* changes.
*
* @param _ - The previous set of props.
* @param prevState - The previous state of the component before the update.
* @param snapshot - The value returned from `getSnapshotBeforeUpdate`.
*/
componentDidUpdate(
_: FormProps<T, S, F>,
prevState: FormState<T, S, F>,
snapshot: { nextState: FormState<T, S, F>; shouldUpdate: true } | { shouldUpdate: false },
) {
if (snapshot.shouldUpdate) {
const { nextState } = snapshot;
// Prevent oneOf/anyOf option switches from reverting when getStateFromProps
// re-evaluates and produces stale formData.
const nextStateDiffersFromProps = !deepEquals(nextState.formData, this.props.formData);
const wasProcessingUserChange = this._isProcessingUserChange;
this._isProcessingUserChange = false;
if (wasProcessingUserChange && nextStateDiffersFromProps) {
// Skip - the user's option switch is already applied via processPendingChange
return;
}
if (nextStateDiffersFromProps && !deepEquals(nextState.formData, prevState.formData) && this.props.onChange) {
this.props.onChange(toIChangeEvent(nextState));
}
this.setState(nextState);
}
}
/** Extracts the updated state from the given `props` and `inputFormData`. As part of this process, the
* `inputFormData` is first processed to add any missing required defaults. After that, the data is run through the
* validation process IF required by the `props`.
*
* @param props - The props passed to the `Form`
* @param inputFormData - The new or current data for the `Form`
* @param retrievedSchema - An expanded schema, if not provided, it will be retrieved from the `schema` and `formData`.
* @param isSchemaChanged - A flag indicating whether the schema has changed.
* @param formDataChangedFields - The changed fields of `formData`
* @param skipLiveValidate - Optional flag, if true, means that we are not running live validation
* @returns - The new state for the `Form`
*/
getStateFromProps(
props: FormProps<T, S, F>,
inputFormData?: T,
retrievedSchema?: S,
isSchemaChanged = false,
formDataChangedFields: string[] = [],
skipLiveValidate = false,
): FormState<T, S, F> {
const state: FormState<T, S, F> = this.state || {};
const schema = 'schema' in props ? props.schema : this.props.schema;
const validator = 'validator' in props ? props.validator : this.props.validator;
const uiSchema: UiSchema<T, S, F> = ('uiSchema' in props ? props.uiSchema! : this.props.uiSchema!) || {};
const isUncontrolled = props.formData === undefined && this.props.formData === undefined;
const edit = typeof inputFormData !== 'undefined';
const liveValidate = 'liveValidate' in props ? props.liveValidate : this.props.liveValidate;
const mustValidate = edit && !props.noValidate && liveValidate;
const experimental_defaultFormStateBehavior =
'experimental_defaultFormStateBehavior' in props
? props.experimental_defaultFormStateBehavior
: this.props.experimental_defaultFormStateBehavior;
const experimental_customMergeAllOf =
'experimental_customMergeAllOf' in props
? props.experimental_customMergeAllOf
: this.props.experimental_customMergeAllOf;
let schemaUtils: SchemaUtilsType<T, S, F> = state.schemaUtils;
if (
!schemaUtils ||
schemaUtils.doesSchemaUtilsDiffer(
validator,
schema,
experimental_defaultFormStateBehavior,
experimental_customMergeAllOf,
)
) {
schemaUtils = createSchemaUtils<T, S, F>(
validator,
schema,
experimental_defaultFormStateBehavior,
experimental_customMergeAllOf,
);
}
const rootSchema = schemaUtils.getRootSchema();
// Compute the formData for getDefaultFormState() function based on the inputFormData, isUncontrolled and state
let defaultsFormData = inputFormData;
if (inputFormData === IS_RESET) {
defaultsFormData = undefined;
} else if (inputFormData === undefined && isUncontrolled) {
defaultsFormData = state.formData;
}
const formData: T = schemaUtils.getDefaultFormState(
rootSchema,
defaultsFormData,
false,
state.initialDefaultsGenerated,
uiSchema,
) as T;
const _retrievedSchema = this.updateRetrievedSchema(
retrievedSchema ?? schemaUtils.retrieveSchema(rootSchema, formData),
);
const getCurrentErrors = (): ValidationData<T> => {
// If the `props.noValidate` option is set or the schema has changed, we reset the error state.
if (props.noValidate || isSchemaChanged) {
return { errors: [], errorSchema: {} };
} else if (!props.liveValidate) {
return {
errors: state.schemaValidationErrors || [],
errorSchema: state.schemaValidationErrorSchema || {},
};
}
return {
errors: state.errors || [],
errorSchema: state.errorSchema || {},
};
};
let errors: RJSFValidationError[];
let errorSchema: ErrorSchema<T> | undefined;
let schemaValidationErrors: RJSFValidationError[] = state.schemaValidationErrors;
let schemaValidationErrorSchema: ErrorSchema<T> = state.schemaValidationErrorSchema;
// If we are skipping live validate, it means that the state has already been updated with live validation errors
if (mustValidate && !skipLiveValidate) {
const liveValidation = this.liveValidate(
rootSchema,
schemaUtils,
state.errorSchema,
formData,
undefined,
state.customErrors,
retrievedSchema,
// If retrievedSchema is undefined which means the schema or formData has changed, we do not merge state.
// Else in the case where it hasn't changed,
retrievedSchema !== undefined,
);
errors = liveValidation.errors;
errorSchema = liveValidation.errorSchema;
schemaValidationErrors = liveValidation.schemaValidationErrors;
schemaValidationErrorSchema = liveValidation.schemaValidationErrorSchema;
} else {
const currentErrors = getCurrentErrors();
errors = currentErrors.errors;
errorSchema = currentErrors.errorSchema;
// We only update the error schema for changed fields if mustValidate is false
if (formDataChangedFields.length > 0 && !mustValidate) {
const newErrorSchema = formDataChangedFields.reduce(
(acc, key) => {
acc[key] = undefined;
return acc;
},
{} as Record<string, undefined>,
);
errorSchema = schemaValidationErrorSchema = mergeObjects(
currentErrors.errorSchema,
newErrorSchema,
'preventDuplicates',
) as ErrorSchema<T>;
}
const mergedErrors = this.mergeErrors({ errorSchema, errors }, props.extraErrors, state.customErrors);
errors = mergedErrors.errors;
errorSchema = mergedErrors.errorSchema;
}
// Only store a new registry when the props cause a different one to be created
const newRegistry = this.getRegistry(props, rootSchema, schemaUtils);
const registry = deepEquals(state.registry, newRegistry) ? state.registry : newRegistry;
// Pre-expand ui:definitions into the uiSchema structure (must happen after registry is created)
const expandedUiSchema: UiSchema<T, S, F> = registry.uiSchemaDefinitions
? expandUiSchemaDefinitions<T, S, F>(rootSchema, uiSchema, registry)
: uiSchema;
// Only compute a new `fieldPathId` when the `idPrefix` is different than the existing fieldPathId's ID_KEY
const fieldPathId =
state.fieldPathId && state.fieldPathId?.[ID_KEY] === registry.globalFormOptions.idPrefix
? state.fieldPathId
: toFieldPathId('', registry.globalFormOptions);
const nextState: FormState<T, S, F> = {
schemaUtils,
schema: rootSchema,
uiSchema: expandedUiSchema,
fieldPathId,
formData,
edit,
errors,
errorSchema,
schemaValidationErrors,
schemaValidationErrorSchema,
retrievedSchema: _retrievedSchema,
initialDefaultsGenerated: true,
registry,
};
return nextState;
}
/** React lifecycle method that is used to determine whether component should be updated.
*
* @param nextProps - The next version of the props
* @param nextState - The next version of the state
* @returns - True if the component should be updated, false otherwise
*/
shouldComponentUpdate(nextProps: FormProps<T, S, F>, nextState: FormState<T, S, F>): boolean {
const { experimental_componentUpdateStrategy = 'customDeep' } = this.props;
return shouldRender(this, nextProps, nextState, experimental_componentUpdateStrategy);
}
/** Validates the `formData` against the `schema` using the `altSchemaUtils` (if provided otherwise it uses the
* `schemaUtils` in the state), returning the results.
*
* @param formData - The new form data to validate
* @param schema - The schema used to validate against
* @param [altSchemaUtils] - The alternate schemaUtils to use for validation
* @param [retrievedSchema] - An optionally retrieved schema for per
*/
validate(
formData: T | undefined,
schema = this.state.schema,
altSchemaUtils?: SchemaUtilsType<T, S, F>,
retrievedSchema?: S,
): ValidationData<T> {
const schemaUtils = altSchemaUtils ? altSchemaUtils : this.state.schemaUtils;
const { customValidate, transformErrors, uiSchema } = this.props;
const resolvedSchema = retrievedSchema ?? schemaUtils.retrieveSchema(schema, formData);
const effectiveSchema = augmentSchemaWithUiRequired<T, S>(resolvedSchema, uiSchema);
return schemaUtils
.getValidator()
.validateFormData(formData, effectiveSchema, customValidate, transformErrors, uiSchema);
}
/** Renders any errors contained in the `state` in using the `ErrorList`, if not disabled by `showErrorList`. */
renderErrors(registry: Registry<T, S, F>) {
const { errors, errorSchema, schema, uiSchema } = this.state;
const options = getUiOptions<T, S, F>(uiSchema);
const ErrorListTemplate = getTemplate<'ErrorListTemplate', T, S, F>('ErrorListTemplate', registry, options);
if (errors && errors.length) {
return (
<ErrorListTemplate
errors={errors}
errorSchema={errorSchema || {}}
schema={schema}
uiSchema={uiSchema}
registry={registry}
/>
);
}
return null;
}
/** Merges any `extraErrors` or `customErrors` into the given `schemaValidation` object, returning the result
*
* @param schemaValidation - The `ValidationData` object into which additional errors are merged
* @param [extraErrors] - The extra errors from the props
* @param [customErrors] - The customErrors from custom components
* @return - The `extraErrors` and `customErrors` merged into the `schemaValidation`
* @private
*/
private mergeErrors(
schemaValidation: ValidationData<T>,
extraErrors?: FormProps['extraErrors'],
customErrors?: ErrorSchemaBuilder,
): ValidationData<T> {
let errorSchema: ErrorSchema<T> = schemaValidation.errorSchema;
let errors: RJSFValidationError[] = schemaValidation.errors;
if (extraErrors) {
const merged = validationDataMerge(schemaValidation, extraErrors);
errorSchema = merged.errorSchema;
errors = merged.errors;
}
if (customErrors) {
const merged = validationDataMerge({ errors, errorSchema }, customErrors.ErrorSchema, true);
errorSchema = merged.errorSchema;
errors = merged.errors;
}
return { errors, errorSchema };
}
/** Performs live validation and then updates and returns the errors and error schemas by potentially merging in
* `extraErrors` and `customErrors`.
*
* @param rootSchema - The `rootSchema` from the state
* @param schemaUtils - The `SchemaUtilsType` from the state
* @param originalErrorSchema - The original `ErrorSchema` from the state
* @param [formData] - The new form data to validate
* @param [extraErrors] - The extra errors from the props
* @param [customErrors] - The customErrors from custom components
* @param [retrievedSchema] - An expanded schema, if not provided, it will be retrieved from the `schema` and `formData`
* @param [mergeIntoOriginalErrorSchema=false] - Optional flag indicating whether we merge into original schema
* @returns - An object containing `errorSchema`, `errors`, `schemaValidationErrors` and `schemaValidationErrorSchema`
* @private
*/
private liveValidate(
rootSchema: S,
schemaUtils: SchemaUtilsType<T, S, F>,
originalErrorSchema: ErrorSchema<S>,
formData?: T,
extraErrors?: FormProps['extraErrors'],
customErrors?: ErrorSchemaBuilder<T>,
retrievedSchema?: S,
mergeIntoOriginalErrorSchema = false,
) {
const schemaValidation = this.validate(formData, rootSchema, schemaUtils, retrievedSchema);
const errors = schemaValidation.errors;
let errorSchema = schemaValidation.errorSchema;
// We merge 'originalErrorSchema' with 'schemaValidation.errorSchema.'; This done to display the raised field error.
if (mergeIntoOriginalErrorSchema) {
errorSchema = mergeObjects(
originalErrorSchema,
schemaValidation.errorSchema,
'preventDuplicates',
) as ErrorSchema<T>;
}
const schemaValidationErrors = errors;
const schemaValidationErrorSchema = errorSchema;
const mergedErrors = this.mergeErrors({ errorSchema, errors }, extraErrors, customErrors);
return { ...mergedErrors, schemaValidationErrors, schemaValidationErrorSchema };
}
/** Returns the `formData` with only the elements specified in the `fields` list
*
* @param formData - The data for the `Form`
* @param fields - The fields to keep while filtering
* @deprecated - To be removed as an exported `Form` function in a future release; there isn't a planned replacement
*/
getUsedFormData = (formData: T | undefined, fields: string[]): T | undefined => {
return getUsedFormData(formData, fields);
};
/** Returns the list of field names from inspecting the `pathSchema` as well as using the `formData`
*
* @param pathSchema - The `PathSchema` object for the form
* @param [formData] - The form data to use while checking for empty objects/arrays
* @deprecated - To be removed as an exported `Form` function in a future release; there isn't a planned replacement
*/
getFieldNames = (pathSchema: PathSchema<T>, formData?: T): string[][] => {
return getFieldNames(pathSchema, formData);
};
/** Returns the `formData` after filtering to remove any extra data not in a form field
*
* @param formData - The data for the `Form`
* @returns The `formData` after omitting extra data
* @deprecated - To be removed as an exported `Form` function in a future release, use `SchemaUtils.omitExtraData`
* instead.
*/
omitExtraData = (formData?: T): T | undefined => {
const { schema, schemaUtils } = this.state;
return schemaUtils.omitExtraData(schema, formData);
};
/** Allows a user to set a value for the provided `fieldPath`, which must be either a dotted path to the field OR a
* `FieldPathList`. To set the root element, used either `''` or `[]` for the path. Passing undefined will clear the
* value in the field.
*
* @param fieldPath - Either a dotted path to the field or the `FieldPathList` to the field
* @param [newValue] - The new value for the field
*/
setFieldValue = (fieldPath: string | FieldPathList, newValue?: T) => {
const { registry } = this.state;
const path = Array.isArray(fieldPath) ? fieldPath : fieldPath.split('.');
const fieldPathId = toFieldPathId('', registry.globalFormOptions, path);
this.onChange(newValue, path, undefined, fieldPathId[ID_KEY]);
};
/** Pushes the given change information into the `pendingChanges` array and then calls `processPendingChanges()` if
* the array only contains a single pending change.
*
* @param newValue - The new form data from a change to a field
* @param path - The path to the change into which to set the formData
* @param [newErrorSchema] - The new `ErrorSchema` based on the field change
* @param [id] - The id of the field that caused the change
*/
onChange = (newValue: T | undefined, path: FieldPathList, newErrorSchema?: ErrorSchema<T>, id?: string) => {
this.pendingChanges.push({ newValue, path, newErrorSchema, id });
if (this.pendingChanges.length === 1) {
this.processPendingChange();
}
};
/** Function to handle changes made to a field in the `Form`. This handler gets the first change from the
* `pendingChanges` list, containing the `newValue` for the `formData` and the `path` at which the `newValue` is to be
* updated, along with a new, optional `ErrorSchema` for that same `path` and potentially the `id` of the field being
* changed. It will first update the `formData` with any missing default fields and then, if `omitExtraData` and
* `liveOmit` are turned on, the `formData` will be filtered to remove any extra data not in a form field. Then, the
* resulting `formData` will be validated if required. The state will be updated with the new updated (potentially
* filtered) `formData`, any errors that resulted from validation. Finally the `onChange` callback will be called, if
* specified, with the updated state and the `processPendingChange()` function is called again.
*/
processPendingChange() {
if (this.pendingChanges.length === 0) {
return;
}
// Mark that we're processing a user-initiated change.
// This prevents componentDidUpdate from reverting oneOf/anyOf option switches.
this._isProcessingUserChange = true;
const { newValue, path, id } = this.pendingChanges[0];
const { newErrorSchema } = this.pendingChanges[0];
const { extraErrors, omitExtraData, liveOmit, noValidate, liveValidate, onChange } = this.props;
const { formData: oldFormData, schemaUtils, schema, fieldPathId, schemaValidationErrorSchema, errors } = this.state;
let { customErrors, errorSchema: originalErrorSchema } = this.state;
const rootPathId = fieldPathId.path[0] || '';
const isRootPath = !path || path.length === 0 || (path.length === 1 && path[0] === rootPathId);
let retrievedSchema = this.state.retrievedSchema;
let formData = isRootPath ? newValue : _cloneDeep(oldFormData);
// When switching from null to an object option in oneOf, MultiSchemaField sends
// an object with property names but undefined values (e.g., {types: undefined, content: undefined}).
// In this case, pass undefined to getStateFromProps to trigger fresh default computation.
// Only do this when the previous formData was null/undefined (switching FROM null).
const hasOnlyUndefinedValues =
isObject(formData) &&
Object.keys(formData as object).length > 0 &&
Object.values(formData as object).every((v) => v === undefined);
const wasPreviouslyNull = oldFormData === null || oldFormData === undefined;
const inputForDefaults = hasOnlyUndefinedValues && wasPreviouslyNull ? undefined : formData;
if (isObject(formData) || Array.isArray(formData)) {
if (newValue === ADDITIONAL_PROPERTY_KEY_REMOVE) {
// For additional properties, we were given the special remove this key value, so unset it
_unset(formData, path);
} else if (!isRootPath) {
// If the newValue is not on the root path, then set it into the form data
_set(formData, path, newValue);
}
// Pass true to skip live validation in `getStateFromProps()` since we will do it a bit later
const newState = this.getStateFromProps(this.props, inputForDefaults, undefined, undefined, undefined, true);
formData = newState.formData;
retrievedSchema = newState.retrievedSchema;
}
const mustValidate = !noValidate && (liveValidate === true || liveValidate === 'onChange');
let state: Partial<FormState<T, S, F>> = { formData, schema };
let newFormData = formData;
if (omitExtraData === true && (liveOmit === true || liveOmit === 'onChange')) {
newFormData = this.omitExtraData(formData);
state = {
formData: newFormData,
};
}
if (newErrorSchema) {
// First check to see if there is an existing validation error on this path...
// @ts-expect-error TS2590, because getting from the error schema is confusing TS
const oldValidationError = !isRootPath ? _get(schemaValidationErrorSchema, path) : schemaValidationErrorSchema;
// If there is an old validation error for this path, assume we are updating it directly
if (!_isEmpty(oldValidationError)) {
// Update the originalErrorSchema "in place" or replace it if it is the root
if (!isRootPath) {
_set(originalErrorSchema, path, newErrorSchema);
} else {
originalErrorSchema = newErrorSchema;
}
} else {
if (!customErrors) {
customErrors = new ErrorSchemaBuilder<T>();
}
if (isRootPath) {
const errors = _get(newErrorSchema, ERRORS_KEY);
if (errors) {
// only set errors when there are some
customErrors.setErrors(errors);
}
} else {
_set(customErrors.ErrorSchema, path, newErrorSchema);
}
}
} else if (customErrors && _get(customErrors.ErrorSchema, [...path, ERRORS_KEY])) {
// If we have custom errors and the path has an error, then we need to clear it
customErrors.clearErrors(path);
}
// If there are pending changes in the queue, skip live validation since it will happen with the last change
if (mustValidate && this.pendingChanges.length === 1) {
const liveValidation = this.liveValidate(
schema,
schemaUtils,
originalErrorSchema,
newFormData,
extraErrors,
customErrors,
retrievedSchema,
);
state = { formData: newFormData, ...liveValidation, customErrors };
} else if (!noValidate && newErrorSchema) {
// Merging 'newErrorSchema' into 'errorSchema' to display the custom raised errors.
const mergedErrors = this.mergeErrors({ errorSchema: originalErrorSchema, errors }, extraErrors, customErrors);
state = {
formData: newFormData,
...mergedErrors,
customErrors,
};
}
this.setState(state as FormState<T, S, F>, () => {
if (onChange) {
onChange(toIChangeEvent({ ...this.state, ...state }), id);
}
// Now remove the change we just completed and call this again
this.pendingChanges.shift();
this.processPendingChange();