@rjsf/core 5.0.0-beta.2 → 5.0.0-beta.6

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.
Files changed (63) hide show
  1. package/README.md +2 -0
  2. package/dist/core.cjs.development.js +5 -0
  3. package/dist/core.cjs.development.js.map +1 -1
  4. package/dist/core.cjs.production.min.js +1 -1
  5. package/dist/core.cjs.production.min.js.map +1 -1
  6. package/dist/core.esm.js +5 -0
  7. package/dist/core.esm.js.map +1 -1
  8. package/dist/core.umd.development.js +5 -0
  9. package/dist/core.umd.development.js.map +1 -1
  10. package/dist/core.umd.production.min.js +1 -1
  11. package/dist/core.umd.production.min.js.map +1 -1
  12. package/dist/index.d.ts +296 -6
  13. package/package.json +8 -7
  14. package/dist/components/Form.d.ts +0 -277
  15. package/dist/components/fields/ArrayField.d.ts +0 -6
  16. package/dist/components/fields/BooleanField.d.ts +0 -8
  17. package/dist/components/fields/MultiSchemaField.d.ts +0 -44
  18. package/dist/components/fields/NullField.d.ts +0 -8
  19. package/dist/components/fields/NumberField.d.ts +0 -20
  20. package/dist/components/fields/ObjectField.d.ts +0 -73
  21. package/dist/components/fields/SchemaField.d.ts +0 -10
  22. package/dist/components/fields/StringField.d.ts +0 -7
  23. package/dist/components/fields/index.d.ts +0 -3
  24. package/dist/components/templates/ArrayFieldDescriptionTemplate.d.ts +0 -7
  25. package/dist/components/templates/ArrayFieldItemTemplate.d.ts +0 -6
  26. package/dist/components/templates/ArrayFieldTemplate.d.ts +0 -6
  27. package/dist/components/templates/ArrayFieldTitleTemplate.d.ts +0 -7
  28. package/dist/components/templates/BaseInputTemplate.d.ts +0 -8
  29. package/dist/components/templates/ButtonTemplates/AddButton.d.ts +0 -4
  30. package/dist/components/templates/ButtonTemplates/IconButton.d.ts +0 -5
  31. package/dist/components/templates/ButtonTemplates/SubmitButton.d.ts +0 -4
  32. package/dist/components/templates/ButtonTemplates/index.d.ts +0 -3
  33. package/dist/components/templates/DescriptionField.d.ts +0 -6
  34. package/dist/components/templates/ErrorList.d.ts +0 -6
  35. package/dist/components/templates/FieldTemplate/FieldTemplate.d.ts +0 -7
  36. package/dist/components/templates/FieldTemplate/Label.d.ts +0 -13
  37. package/dist/components/templates/FieldTemplate/WrapIfAdditional.d.ts +0 -12
  38. package/dist/components/templates/FieldTemplate/index.d.ts +0 -2
  39. package/dist/components/templates/ObjectFieldTemplate.d.ts +0 -8
  40. package/dist/components/templates/TitleField.d.ts +0 -6
  41. package/dist/components/templates/UnsupportedField.d.ts +0 -8
  42. package/dist/components/templates/index.d.ts +0 -3
  43. package/dist/components/widgets/AltDateTimeWidget.d.ts +0 -8
  44. package/dist/components/widgets/AltDateWidget.d.ts +0 -6
  45. package/dist/components/widgets/CheckboxWidget.d.ts +0 -8
  46. package/dist/components/widgets/CheckboxesWidget.d.ts +0 -8
  47. package/dist/components/widgets/ColorWidget.d.ts +0 -7
  48. package/dist/components/widgets/DateTimeWidget.d.ts +0 -7
  49. package/dist/components/widgets/DateWidget.d.ts +0 -7
  50. package/dist/components/widgets/EmailWidget.d.ts +0 -6
  51. package/dist/components/widgets/FileWidget.d.ts +0 -7
  52. package/dist/components/widgets/HiddenWidget.d.ts +0 -8
  53. package/dist/components/widgets/PasswordWidget.d.ts +0 -6
  54. package/dist/components/widgets/RadioWidget.d.ts +0 -8
  55. package/dist/components/widgets/RangeWidget.d.ts +0 -7
  56. package/dist/components/widgets/SelectWidget.d.ts +0 -8
  57. package/dist/components/widgets/TextWidget.d.ts +0 -6
  58. package/dist/components/widgets/TextareaWidget.d.ts +0 -13
  59. package/dist/components/widgets/URLWidget.d.ts +0 -6
  60. package/dist/components/widgets/UpDownWidget.d.ts +0 -6
  61. package/dist/components/widgets/index.d.ts +0 -3
  62. package/dist/getDefaultRegistry.d.ts +0 -6
  63. package/dist/withTheme.d.ts +0 -8
package/dist/index.d.ts CHANGED
@@ -1,6 +1,296 @@
1
- import Form, { FormProps, FormState, IChangeEvent } from "./components/Form";
2
- import withTheme, { WithThemeProps } from "./withTheme";
3
- import getDefaultRegistry from "./getDefaultRegistry";
4
- export type { FormProps, FormState, IChangeEvent, WithThemeProps };
5
- export { withTheme, getDefaultRegistry };
6
- export default Form;
1
+ import * as json_schema from 'json-schema';
2
+ import React, { Component } from 'react';
3
+ import { RJSFSchema, ValidatorType, UiSchema, RegistryFieldsType, TemplatesType, RegistryWidgetsType, RJSFValidationError, CustomValidator, ErrorSchema, ErrorTransformer, IdSchema, SchemaUtilsType, ValidationData, Registry, PathSchema } from '@rjsf/utils';
4
+
5
+ /** The properties that are passed to the `Form` */
6
+ interface FormProps<T = any, F = any> {
7
+ /** The JSON schema object for the form */
8
+ schema: RJSFSchema;
9
+ /** An implementation of the `ValidatorType` interface that is needed for form validation to work */
10
+ validator: ValidatorType<T>;
11
+ /** The optional children for the form, if provided, it will replace the default `SubmitButton` */
12
+ children?: React.ReactNode;
13
+ /** The uiSchema for the form */
14
+ uiSchema?: UiSchema<T, F>;
15
+ /** The data for the form, used to prefill a form with existing data */
16
+ formData?: T;
17
+ /** You can provide a `formContext` object to the form, which is passed down to all fields and widgets. Useful for
18
+ * implementing context aware fields and widgets.
19
+ *
20
+ * NOTE: Setting `{readonlyAsDisabled: false}` on the formContext will make the antd theme treat readOnly fields as
21
+ * disabled.
22
+ */
23
+ formContext?: F;
24
+ /** To avoid collisions with existing ids in the DOM, it is possible to change the prefix used for ids;
25
+ * Default is `root`
26
+ */
27
+ idPrefix?: string;
28
+ /** To avoid using a path separator that is present in field names, it is possible to change the separator used for
29
+ * ids (Default is `_`)
30
+ */
31
+ idSeparator?: string;
32
+ /** It's possible to disable the whole form by setting the `disabled` prop. The `disabled` prop is then forwarded down
33
+ * to each field of the form. If you just want to disable some fields, see the `ui:disabled` parameter in `uiSchema`
34
+ */
35
+ disabled?: boolean;
36
+ /** It's possible to make the whole form read-only by setting the `readonly` prop. The `readonly` prop is then
37
+ * forwarded down to each field of the form. If you just want to make some fields read-only, see the `ui:readonly`
38
+ * parameter in `uiSchema`
39
+ */
40
+ readonly?: boolean;
41
+ /** The dictionary of registered fields in the form */
42
+ fields?: RegistryFieldsType<T, F>;
43
+ /** The dictionary of registered templates in the form; Partial allows a subset to be provided beyond the defaults */
44
+ templates?: Partial<Omit<TemplatesType<T, F>, "ButtonTemplates">> & {
45
+ ButtonTemplates?: Partial<TemplatesType<T, F>["ButtonTemplates"]>;
46
+ };
47
+ /** The dictionary of registered widgets in the form */
48
+ widgets?: RegistryWidgetsType<T, F>;
49
+ /** If you plan on being notified every time the form data are updated, you can pass an `onChange` handler, which will
50
+ * receive the same args as `onSubmit` any time a value is updated in the form
51
+ */
52
+ onChange?: (data: IChangeEvent<T, F>) => void;
53
+ /** To react when submitted form data are invalid, pass an `onError` handler. It will be passed the list of
54
+ * encountered errors
55
+ */
56
+ onError?: (errors: RJSFValidationError[]) => void;
57
+ /** You can pass a function as the `onSubmit` prop of your `Form` component to listen to when the form is submitted
58
+ * and its data are valid. It will be passed a result object having a `formData` attribute, which is the valid form
59
+ * data you're usually after. The original event will also be passed as a second parameter
60
+ */
61
+ onSubmit?: (data: IChangeEvent<T, F>, event: React.FormEvent<any>) => void;
62
+ /** Sometimes you may want to trigger events or modify external state when a field has been touched, so you can pass
63
+ * an `onBlur` handler, which will receive the id of the input that was blurred and the field value
64
+ */
65
+ onBlur?: (id: string, data: any) => void;
66
+ /** Sometimes you may want to trigger events or modify external state when a field has been focused, so you can pass
67
+ * an `onFocus` handler, which will receive the id of the input that is focused and the field value
68
+ */
69
+ onFocus?: (id: string, data: any) => void;
70
+ /** The value of this prop will be passed to the `accept-charset` HTML attribute on the form */
71
+ acceptcharset?: string;
72
+ /** The value of this prop will be passed to the `action` HTML attribute on the form
73
+ *
74
+ * NOTE: this just renders the `action` attribute in the HTML markup. There is no real network request being sent to
75
+ * this `action` on submit. Instead, react-jsonschema-form catches the submit event with `event.preventDefault()`
76
+ * and then calls the `onSubmit` function, where you could send a request programmatically with `fetch` or similar.
77
+ */
78
+ action?: string;
79
+ /** The value of this prop will be passed to the `autocomplete` HTML attribute on the form */
80
+ autoComplete?: string;
81
+ /** The value of this prop will be passed to the `class` HTML attribute on the form */
82
+ className?: string;
83
+ /** The value of this prop will be passed to the `enctype` HTML attribute on the form */
84
+ enctype?: string;
85
+ /** The value of this prop will be passed to the `id` HTML attribute on the form */
86
+ id?: string;
87
+ /** The value of this prop will be passed to the `name` HTML attribute on the form */
88
+ name?: string;
89
+ /** The value of this prop will be passed to the `method` HTML attribute on the form */
90
+ method?: string;
91
+ /** It's possible to change the default `form` tag name to a different HTML tag, which can be helpful if you are
92
+ * nesting forms. However, native browser form behaviour, such as submitting when the `Enter` key is pressed, may no
93
+ * longer work
94
+ */
95
+ tagName?: React.ElementType;
96
+ /** The value of this prop will be passed to the `target` HTML attribute on the form */
97
+ target?: string;
98
+ /** Formerly the `validate` prop; Takes a function that specifies custom validation rules for the form */
99
+ customValidate?: CustomValidator<T>;
100
+ /** This prop allows passing in custom errors that are augmented with the existing JSON Schema errors on the form; it
101
+ * can be used to implement asynchronous validation
102
+ */
103
+ extraErrors?: ErrorSchema<T>;
104
+ /** If set to true, turns off HTML5 validation on the form; Set to `false` by default */
105
+ noHtml5Validate?: boolean;
106
+ /** If set to true, turns off all validation. Set to `false` by default
107
+ *
108
+ * @deprecated - In a future release, this switch may be replaced by making `validator` prop optional
109
+ */
110
+ noValidate?: boolean;
111
+ /** If set to true, the form will perform validation and show any validation errors whenever the form data is changed,
112
+ * rather than just on submit
113
+ */
114
+ liveValidate?: boolean;
115
+ /** If `omitExtraData` and `liveOmit` are both set to true, then extra form data values that are not in any form field
116
+ * will be removed whenever `onChange` is called. Set to `false` by default
117
+ */
118
+ liveOmit?: boolean;
119
+ /** If set to true, then extra form data values that are not in any form field will be removed whenever `onSubmit` is
120
+ * called. Set to `false` by default.
121
+ */
122
+ omitExtraData?: boolean;
123
+ /** When this prop is set to true, a list of errors (or the custom error list defined in the `ErrorList`) will also
124
+ * show. When set to false, only inline input validation errors will be shown. Set to `true` by default
125
+ */
126
+ showErrorList?: boolean;
127
+ /** A function can be passed to this prop in order to make modifications to the default errors resulting from JSON
128
+ * Schema validation
129
+ */
130
+ transformErrors?: ErrorTransformer;
131
+ /**
132
+ * _internalFormWrapper is currently used by the semantic-ui theme to provide a custom wrapper around `<Form />`
133
+ * that supports the proper rendering of those themes. To use this prop, one must pass a component that takes two
134
+ * props: `children` and `as`. That component, at minimum, should render the `children` inside of a <form /> tag
135
+ * unless `as` is provided, in which case, use the `as` prop in place of `<form />`.
136
+ * i.e.:
137
+ * ```
138
+ * export default function InternalForm({ children, as }) {
139
+ * const FormTag = as || 'form';
140
+ * return <FormTag>{children}</FormTag>;
141
+ * }
142
+ * ```
143
+ *
144
+ * Use at your own risk as this prop is private and may change at any time without notice.
145
+ */
146
+ _internalFormWrapper?: React.ElementType;
147
+ }
148
+ /** The data that is contained within the state for the `Form` */
149
+ interface FormState<T = any, F = any> {
150
+ /** The JSON schema object for the form */
151
+ schema: RJSFSchema;
152
+ /** The uiSchema for the form */
153
+ uiSchema: UiSchema<T, F>;
154
+ /** The `IdSchema` for the form, computed from the `schema`, the `rootFieldId`, the `formData` and the `idPrefix` and
155
+ * `idSeparator` props.
156
+ */
157
+ idSchema: IdSchema<T>;
158
+ /** The schemaUtils implementation used by the `Form`, created from the `validator` and the `schema` */
159
+ schemaUtils: SchemaUtilsType<T>;
160
+ /** The current data for the form, computed from the `formData` prop and the changes made by the user */
161
+ formData: T;
162
+ /** Flag indicating whether the form is in edit mode, true when `formData` is passed to the form, otherwise false */
163
+ edit: boolean;
164
+ /** The current list of errors for the form, includes `extraErrors` */
165
+ errors: RJSFValidationError[];
166
+ /** The current errors, in `ErrorSchema` format, for the form, includes `extraErrors` */
167
+ errorSchema: ErrorSchema<T>;
168
+ /** The current list of errors for the form directly from schema validation, does NOT include `extraErrors` */
169
+ schemaValidationErrors: RJSFValidationError[];
170
+ /** The current errors, in `ErrorSchema` format, for the form directly from schema validation, does NOT include
171
+ * `extraErrors`
172
+ */
173
+ schemaValidationErrorSchema: ErrorSchema<T>;
174
+ }
175
+ /** The event data passed when changes have been made to the form, includes everything from the `FormState` except
176
+ * the schema validation errors. An additional `status` is added when returned from `onSubmit`
177
+ */
178
+ interface IChangeEvent<T = any, F = any> extends Omit<FormState<T, F>, "schemaValidationErrors" | "schemaValidationErrorSchema"> {
179
+ /** The status of the form when submitted */
180
+ status?: "submitted";
181
+ }
182
+ /** The `Form` component renders the outer form and all the fields defined in the `schema` */
183
+ declare class Form<T = any, F = any> extends Component<FormProps<T, F>, FormState<T, F>> {
184
+ /** The ref used to hold the `form` element, this needs to be `any` because `tagName` or `_internalFormWrapper` can
185
+ * provide any possible type here
186
+ */
187
+ formElement: React.RefObject<any>;
188
+ /** Constructs the `Form` from the `props`. Will setup the initial state from the props. It will also call the
189
+ * `onChange` handler if the initially provided `formData` is modified to add missing default values as part of the
190
+ * state construction.
191
+ *
192
+ * @param props - The initial props for the `Form`
193
+ */
194
+ constructor(props: FormProps<T, F>);
195
+ /** React lifecycle method that gets called before new props are provided, updates the state based on new props. It
196
+ * will also call the`onChange` handler if the `formData` is modified to add missing default values as part of the
197
+ * state construction.
198
+ *
199
+ * @param nextProps - The new set of props about to be applied to the `Form`
200
+ */
201
+ UNSAFE_componentWillReceiveProps(nextProps: FormProps<T, F>): void;
202
+ /** Extracts the updated state from the given `props` and `inputFormData`. As part of this process, the
203
+ * `inputFormData` is first processed to add any missing required defaults. After that, the data is run through the
204
+ * validation process IF required by the `props`.
205
+ *
206
+ * @param props - The props passed to the `Form`
207
+ * @param inputFormData - The new or current data for the `Form`
208
+ * @returns - The new state for the `Form`
209
+ */
210
+ getStateFromProps(props: FormProps<T, F>, inputFormData?: T): FormState<T, F>;
211
+ /** React lifecycle method that is used to determine whether component should be updated.
212
+ *
213
+ * @param nextProps - The next version of the props
214
+ * @param nextState - The next version of the state
215
+ * @returns - True if the component should be updated, false otherwise
216
+ */
217
+ shouldComponentUpdate(nextProps: FormProps<T, F>, nextState: FormState<T, F>): boolean;
218
+ /** Validates the `formData` against the `schema` using the `schemaUtils`, returning the results.
219
+ *
220
+ * @param schemaUtils - The schemaUtils to use for validation
221
+ * @param formData - The new form data to validate
222
+ * @param schema - The schema used to validate against
223
+ */
224
+ validate(schemaUtils: SchemaUtilsType<T>, formData: T, schema?: json_schema.JSONSchema7): ValidationData<T>;
225
+ /** Renders any errors contained in the `state` in using the `ErrorList`, if not disabled by `showErrorList`. */
226
+ renderErrors(registry: Registry<T, F>): JSX.Element | null;
227
+ /** Returns the `formData` with only the elements specified in the `fields` list
228
+ *
229
+ * @param formData - The data for the `Form`
230
+ * @param fields - The fields to keep while filtering
231
+ */
232
+ getUsedFormData: (formData: T, fields: string[]) => T;
233
+ /** Returns the list of field names from inspecting the `pathSchema` as well as using the `formData`
234
+ *
235
+ * @param pathSchema - The `PathSchema` object for the form
236
+ * @param formData - The form data to use while checking for empty objects/arrays
237
+ */
238
+ getFieldNames: (pathSchema: PathSchema<T>, formData: T) => string[];
239
+ /** Function to handle changes made to a field in the `Form`. This handler receives an entirely new copy of the
240
+ * `formData` along with a new `ErrorSchema`. It will first update the `formData` with any missing default fields and
241
+ * then, if `omitExtraData` and `liveOmit` are turned on, the `formData` will be filterer to remove any extra data not
242
+ * in a form field. Then, the resulting formData will be validated if required. The state will be updated with the new
243
+ * updated (potentially filtered) `formData`, any errors that resulted from validation. Finally the `onChange`
244
+ * callback will be called if specified with the updated state.
245
+ *
246
+ * @param formData - The new form data from a change to a field
247
+ * @param newErrorSchema - The new `ErrorSchema` based on the field change
248
+ */
249
+ onChange: (formData: T, newErrorSchema?: ErrorSchema<T>) => void;
250
+ /** Callback function to handle when a field on the form is blurred. Calls the `onBlur` callback for the `Form` if it
251
+ * was provided.
252
+ *
253
+ * @param id - The unique `id` of the field that was blurred
254
+ * @param data - The data associated with the field that was blurred
255
+ */
256
+ onBlur: (id: string, data: any) => void;
257
+ /** Callback function to handle when a field on the form is focused. Calls the `onFocus` callback for the `Form` if it
258
+ * was provided.
259
+ *
260
+ * @param id - The unique `id` of the field that was focused
261
+ * @param data - The data associated with the field that was focused
262
+ */
263
+ onFocus: (id: string, data: any) => void;
264
+ /** Callback function to handle when the form is submitted. First, it prevents the default event behavior. Nothing
265
+ * happens if the target and currentTarget of the event are not the same. It will omit any extra data in the
266
+ * `formData` in the state if `omitExtraData` is true. It will validate the resulting `formData`, reporting errors
267
+ * via the `onError()` callback unless validation is disabled. Finally it will add in any `extraErrors` and then call
268
+ * back the `onSubmit` callback if it was provided.
269
+ *
270
+ * @param event - The submit HTML form event
271
+ */
272
+ onSubmit: (event: React.FormEvent<any>) => void;
273
+ /** Returns the registry for the form */
274
+ getRegistry(): Registry<T, F>;
275
+ /** Provides a function that can be used to programmatically submit the `Form` */
276
+ submit(): void;
277
+ /** Renders the `Form` fields inside the <form> | `tagName` or `_internalFormWrapper`, rendering any errors if
278
+ * needed along with the submit button or any children of the form.
279
+ */
280
+ render(): JSX.Element;
281
+ }
282
+
283
+ /** The properties for the `withTheme` function, essentially a subset of properties from the `FormProps` that can be
284
+ * overridden while creating a theme
285
+ */
286
+ declare type WithThemeProps<T = any, F = any> = Pick<FormProps<T, F>, "fields" | "templates" | "widgets" | "_internalFormWrapper">;
287
+ /** A Higher-Order component that creates a wrapper around a `Form` with the overrides from the `WithThemeProps` */
288
+ declare function withTheme<T = any, F = any>(themeProps: WithThemeProps<T, F>): React.ForwardRefExoticComponent<FormProps<T, F> & React.RefAttributes<Form<T, F>>>;
289
+
290
+ /** The default registry consists of all the fields, templates and widgets provided in the core implementation,
291
+ * plus an empty `rootSchema` and `formContext. We omit schemaUtils here because it cannot be defaulted without a
292
+ * rootSchema and validator. It will be added into the computed registry later in the Form.
293
+ */
294
+ declare function getDefaultRegistry<T = any, F = any>(): Omit<Registry<T, F>, "schemaUtils">;
295
+
296
+ export { FormProps, FormState, IChangeEvent, WithThemeProps, Form as default, getDefaultRegistry, withTheme };
package/package.json CHANGED
@@ -1,9 +1,9 @@
1
1
  {
2
2
  "name": "@rjsf/core",
3
- "version": "5.0.0-beta.2",
3
+ "version": "5.0.0-beta.6",
4
4
  "description": "A simple React component capable of building HTML forms out of a JSON schema.",
5
5
  "scripts": {
6
- "build": "rimraf dist && dts build --format cjs,esm,umd",
6
+ "build": "rimraf dist && dts build --rollupTypes --format cjs,esm,umd",
7
7
  "cs-check": "prettier -l \"{src,test}/**/*.[jt]s?(x)\"",
8
8
  "cs-format": "prettier \"{src,test}/**/*.[jt]s?(x)\" --write",
9
9
  "lint": "eslint src test",
@@ -51,8 +51,9 @@
51
51
  "@babel/preset-env": "^7.18.10",
52
52
  "@babel/preset-react": "^7.18.6",
53
53
  "@babel/register": "^7.18.9",
54
- "@rjsf/utils": "^5.0.0-beta.2",
55
- "@rjsf/validator-ajv6": "^5.0.0-beta.2",
54
+ "@rjsf/utils": "^5.0.0-beta.6",
55
+ "@rjsf/validator-ajv6": "^5.0.0-beta.6",
56
+ "@rjsf/validator-ajv8": "^5.0.0-beta.6",
56
57
  "@types/lodash": "^4.14.184",
57
58
  "@types/react": "^17.0.39",
58
59
  "@types/react-dom": "^17.0.11",
@@ -62,8 +63,8 @@
62
63
  "dts-cli": "^1.6.0",
63
64
  "eslint": "^8.23.0",
64
65
  "html": "^1.0.0",
65
- "jsdom": "^16.5.3",
66
- "mocha": "^5.2.0",
66
+ "jsdom": "^20.0.0",
67
+ "mocha": "^10.0.0",
67
68
  "react": "^17.0.2",
68
69
  "react-dom": "^17.0.2",
69
70
  "react-portal": "^4.2.2",
@@ -91,5 +92,5 @@
91
92
  "publishConfig": {
92
93
  "access": "public"
93
94
  },
94
- "gitHead": "97bda160aeca8684770da6f3fed5b01b3828a1fa"
95
+ "gitHead": "dfc8bbca60113fc5a78302b2ed79e3ea9b16241b"
95
96
  }
@@ -1,277 +0,0 @@
1
- import React, { Component } from "react";
2
- import { CustomValidator, ErrorSchema, ErrorTransformer, IdSchema, PathSchema, RJSFSchema, RJSFValidationError, Registry, RegistryWidgetsType, RegistryFieldsType, SchemaUtilsType, TemplatesType, UiSchema, ValidationData, ValidatorType } from "@rjsf/utils";
3
- /** The properties that are passed to the `Form` */
4
- export interface FormProps<T = any, F = any> {
5
- /** The JSON schema object for the form */
6
- schema: RJSFSchema;
7
- /** An implementation of the `ValidatorType` interface that is needed for form validation to work */
8
- validator: ValidatorType<T>;
9
- /** The uiSchema for the form */
10
- uiSchema?: UiSchema<T, F>;
11
- /** The data for the form, used to prefill a form with existing data */
12
- formData?: T;
13
- /** You can provide a `formContext` object to the form, which is passed down to all fields and widgets. Useful for
14
- * implementing context aware fields and widgets.
15
- *
16
- * NOTE: Setting `{readonlyAsDisabled: false}` on the formContext will make the antd theme treat readOnly fields as
17
- * disabled.
18
- */
19
- formContext?: F;
20
- /** To avoid collisions with existing ids in the DOM, it is possible to change the prefix used for ids;
21
- * Default is `root`
22
- */
23
- idPrefix?: string;
24
- /** To avoid using a path separator that is present in field names, it is possible to change the separator used for
25
- * ids (Default is `_`)
26
- */
27
- idSeparator?: string;
28
- /** It's possible to disable the whole form by setting the `disabled` prop. The `disabled` prop is then forwarded down
29
- * to each field of the form. If you just want to disable some fields, see the `ui:disabled` parameter in `uiSchema`
30
- */
31
- disabled?: boolean;
32
- /** It's possible to make the whole form read-only by setting the `readonly` prop. The `readonly` prop is then
33
- * forwarded down to each field of the form. If you just want to make some fields read-only, see the `ui:readonly`
34
- * parameter in `uiSchema`
35
- */
36
- readonly?: boolean;
37
- /** The dictionary of registered fields in the form */
38
- fields?: RegistryFieldsType<T, F>;
39
- /** The dictionary of registered templates in the form; Partial allows a subset to be provided beyond the defaults */
40
- templates?: Partial<Omit<TemplatesType<T, F>, "ButtonTemplates">> & {
41
- ButtonTemplates?: Partial<TemplatesType<T, F>["ButtonTemplates"]>;
42
- };
43
- /** The dictionary of registered widgets in the form */
44
- widgets?: RegistryWidgetsType<T, F>;
45
- /** If you plan on being notified every time the form data are updated, you can pass an `onChange` handler, which will
46
- * receive the same args as `onSubmit` any time a value is updated in the form
47
- */
48
- onChange?: (data: IChangeEvent<T, F>) => void;
49
- /** To react when submitted form data are invalid, pass an `onError` handler. It will be passed the list of
50
- * encountered errors
51
- */
52
- onError?: (errors: RJSFValidationError[]) => void;
53
- /** You can pass a function as the `onSubmit` prop of your `Form` component to listen to when the form is submitted
54
- * and its data are valid. It will be passed a result object having a `formData` attribute, which is the valid form
55
- * data you're usually after. The original event will also be passed as a second parameter
56
- */
57
- onSubmit?: (data: IChangeEvent<T, F>, event: React.FormEvent<any>) => void;
58
- /** Sometimes you may want to trigger events or modify external state when a field has been touched, so you can pass
59
- * an `onBlur` handler, which will receive the id of the input that was blurred and the field value
60
- */
61
- onBlur?: (id: string, data: any) => void;
62
- /** Sometimes you may want to trigger events or modify external state when a field has been focused, so you can pass
63
- * an `onFocus` handler, which will receive the id of the input that is focused and the field value
64
- */
65
- onFocus?: (id: string, data: any) => void;
66
- /** The value of this prop will be passed to the `accept-charset` HTML attribute on the form */
67
- acceptcharset?: string;
68
- /** The value of this prop will be passed to the `action` HTML attribute on the form
69
- *
70
- * NOTE: this just renders the `action` attribute in the HTML markup. There is no real network request being sent to
71
- * this `action` on submit. Instead, react-jsonschema-form catches the submit event with `event.preventDefault()`
72
- * and then calls the `onSubmit` function, where you could send a request programmatically with `fetch` or similar.
73
- */
74
- action?: string;
75
- /** The value of this prop will be passed to the `autocomplete` HTML attribute on the form */
76
- autoComplete?: string;
77
- /** The value of this prop will be passed to the `class` HTML attribute on the form */
78
- className?: string;
79
- /** The value of this prop will be passed to the `enctype` HTML attribute on the form */
80
- enctype?: string;
81
- /** The value of this prop will be passed to the `id` HTML attribute on the form */
82
- id?: string;
83
- /** The value of this prop will be passed to the `name` HTML attribute on the form */
84
- name?: string;
85
- /** The value of this prop will be passed to the `method` HTML attribute on the form */
86
- method?: string;
87
- /** It's possible to change the default `form` tag name to a different HTML tag, which can be helpful if you are
88
- * nesting forms. However, native browser form behaviour, such as submitting when the `Enter` key is pressed, may no
89
- * longer work
90
- */
91
- tagName?: React.ElementType;
92
- /** The value of this prop will be passed to the `target` HTML attribute on the form */
93
- target?: string;
94
- /** Formerly the `validate` prop; Takes a function that specifies custom validation rules for the form */
95
- customValidate?: CustomValidator<T>;
96
- /** This prop allows passing in custom errors that are augmented with the existing JSON Schema errors on the form; it
97
- * can be used to implement asynchronous validation
98
- */
99
- extraErrors?: ErrorSchema<T>;
100
- /** If set to true, turns off HTML5 validation on the form; Set to `false` by default */
101
- noHtml5Validate?: boolean;
102
- /** If set to true, turns off all validation. Set to `false` by default
103
- *
104
- * @deprecated - In a future release, this switch may be replaced by making `validator` prop optional
105
- */
106
- noValidate?: boolean;
107
- /** If set to true, the form will perform validation and show any validation errors whenever the form data is changed,
108
- * rather than just on submit
109
- */
110
- liveValidate?: boolean;
111
- /** If `omitExtraData` and `liveOmit` are both set to true, then extra form data values that are not in any form field
112
- * will be removed whenever `onChange` is called. Set to `false` by default
113
- */
114
- liveOmit?: boolean;
115
- /** If set to true, then extra form data values that are not in any form field will be removed whenever `onSubmit` is
116
- * called. Set to `false` by default.
117
- */
118
- omitExtraData?: boolean;
119
- /** When this prop is set to true, a list of errors (or the custom error list defined in the `ErrorList`) will also
120
- * show. When set to false, only inline input validation errors will be shown. Set to `true` by default
121
- */
122
- showErrorList?: boolean;
123
- /** A function can be passed to this prop in order to make modifications to the default errors resulting from JSON
124
- * Schema validation
125
- */
126
- transformErrors?: ErrorTransformer;
127
- /**
128
- * _internalFormWrapper is currently used by the semantic-ui theme to provide a custom wrapper around `<Form />`
129
- * that supports the proper rendering of those themes. To use this prop, one must pass a component that takes two
130
- * props: `children` and `as`. That component, at minimum, should render the `children` inside of a <form /> tag
131
- * unless `as` is provided, in which case, use the `as` prop in place of `<form />`.
132
- * i.e.:
133
- * ```
134
- * export default function InternalForm({ children, as }) {
135
- * const FormTag = as || 'form';
136
- * return <FormTag>{children}</FormTag>;
137
- * }
138
- * ```
139
- *
140
- * Use at your own risk as this prop is private and may change at any time without notice.
141
- */
142
- _internalFormWrapper?: React.ElementType;
143
- }
144
- /** The data that is contained within the state for the `Form` */
145
- export interface FormState<T = any, F = any> {
146
- /** The JSON schema object for the form */
147
- schema: RJSFSchema;
148
- /** The uiSchema for the form */
149
- uiSchema: UiSchema<T, F>;
150
- /** The `IdSchema` for the form, computed from the `schema`, the `rootFieldId`, the `formData` and the `idPrefix` and
151
- * `idSeparator` props.
152
- */
153
- idSchema: IdSchema<T>;
154
- /** The schemaUtils implementation used by the `Form`, created from the `validator` and the `schema` */
155
- schemaUtils: SchemaUtilsType<T>;
156
- /** The current data for the form, computed from the `formData` prop and the changes made by the user */
157
- formData: T;
158
- /** Flag indicating whether the form is in edit mode, true when `formData` is passed to the form, otherwise false */
159
- edit: boolean;
160
- /** The current list of errors for the form, includes `extraErrors` */
161
- errors: RJSFValidationError[];
162
- /** The current errors, in `ErrorSchema` format, for the form, includes `extraErrors` */
163
- errorSchema: ErrorSchema<T>;
164
- /** The current list of errors for the form directly from schema validation, does NOT include `extraErrors` */
165
- schemaValidationErrors: RJSFValidationError[];
166
- /** The current errors, in `ErrorSchema` format, for the form directly from schema validation, does NOT include
167
- * `extraErrors`
168
- */
169
- schemaValidationErrorSchema: ErrorSchema<T>;
170
- }
171
- /** The event data passed when changes have been made to the form, includes everything from the `FormState` except
172
- * the schema validation errors. An additional `status` is added when returned from `onSubmit`
173
- */
174
- export interface IChangeEvent<T = any, F = any> extends Omit<FormState<T, F>, "schemaValidationErrors" | "schemaValidationErrorSchema"> {
175
- /** The status of the form when submitted */
176
- status?: "submitted";
177
- }
178
- /** The `Form` component renders the outer form and all the fields defined in the `schema` */
179
- export default class Form<T = any, F = any> extends Component<FormProps<T, F>, FormState<T, F>> {
180
- /** The ref used to hold the `form` element, this needs to be `any` because `tagName` or `_internalFormWrapper` can
181
- * provide any possible type here
182
- */
183
- formElement: React.RefObject<any>;
184
- /** Constructs the `Form` from the `props`. Will setup the initial state from the props. It will also call the
185
- * `onChange` handler if the initially provided `formData` is modified to add missing default values as part of the
186
- * state construction.
187
- *
188
- * @param props - The initial props for the `Form`
189
- */
190
- constructor(props: FormProps<T, F>);
191
- /** React lifecycle method that gets called before new props are provided, updates the state based on new props. It
192
- * will also call the`onChange` handler if the `formData` is modified to add missing default values as part of the
193
- * state construction.
194
- *
195
- * @param nextProps - The new set of props about to be applied to the `Form`
196
- */
197
- UNSAFE_componentWillReceiveProps(nextProps: FormProps<T, F>): void;
198
- /** Extracts the updated state from the given `props` and `inputFormData`. As part of this process, the
199
- * `inputFormData` is first processed to add any missing required defaults. After that, the data is run through the
200
- * validation process IF required by the `props`.
201
- *
202
- * @param props - The props passed to the `Form`
203
- * @param inputFormData - The new or current data for the `Form`
204
- * @returns - The new state for the `Form`
205
- */
206
- getStateFromProps(props: FormProps<T, F>, inputFormData?: T): FormState<T, F>;
207
- /** React lifecycle method that is used to determine whether component should be updated.
208
- *
209
- * @param nextProps - The next version of the props
210
- * @param nextState - The next version of the state
211
- * @returns - True if the component should be updated, false otherwise
212
- */
213
- shouldComponentUpdate(nextProps: FormProps<T, F>, nextState: FormState<T, F>): boolean;
214
- /** Validates the `formData` against the `schema` using the `schemaUtils`, returning the results.
215
- *
216
- * @param schemaUtils - The schemaUtils to use for validation
217
- * @param formData - The new form data to validate
218
- * @param schema - The schema used to validate against
219
- */
220
- validate(schemaUtils: SchemaUtilsType<T>, formData: T, schema?: import("json-schema").JSONSchema7): ValidationData<T>;
221
- /** Renders any errors contained in the `state` in using the `ErrorList`, if not disabled by `showErrorList`. */
222
- renderErrors(registry: Registry<T, F>): JSX.Element | null;
223
- /** Returns the `formData` with only the elements specified in the `fields` list
224
- *
225
- * @param formData - The data for the `Form`
226
- * @param fields - The fields to keep while filtering
227
- */
228
- getUsedFormData: (formData: T, fields: string[]) => T;
229
- /** Returns the list of field names from inspecting the `pathSchema` as well as using the `formData`
230
- *
231
- * @param pathSchema - The `PathSchema` object for the form
232
- * @param formData - The form data to use while checking for empty objects/arrays
233
- */
234
- getFieldNames: (pathSchema: PathSchema<T>, formData: T) => string[];
235
- /** Function to handle changes made to a field in the `Form`. This handler receives an entirely new copy of the
236
- * `formData` along with a new `ErrorSchema`. It will first update the `formData` with any missing default fields and
237
- * then, if `omitExtraData` and `liveOmit` are turned on, the `formData` will be filterer to remove any extra data not
238
- * in a form field. Then, the resulting formData will be validated if required. The state will be updated with the new
239
- * updated (potentially filtered) `formData`, any errors that resulted from validation. Finally the `onChange`
240
- * callback will be called if specified with the updated state.
241
- *
242
- * @param formData - The new form data from a change to a field
243
- * @param newErrorSchema - The new `ErrorSchema` based on the field change
244
- */
245
- onChange: (formData: T, newErrorSchema?: ErrorSchema<T>) => void;
246
- /** Callback function to handle when a field on the form is blurred. Calls the `onBlur` callback for the `Form` if it
247
- * was provided.
248
- *
249
- * @param id - The unique `id` of the field that was blurred
250
- * @param data - The data associated with the field that was blurred
251
- */
252
- onBlur: (id: string, data: any) => void;
253
- /** Callback function to handle when a field on the form is focused. Calls the `onFocus` callback for the `Form` if it
254
- * was provided.
255
- *
256
- * @param id - The unique `id` of the field that was focused
257
- * @param data - The data associated with the field that was focused
258
- */
259
- onFocus: (id: string, data: any) => void;
260
- /** Callback function to handle when the form is submitted. First, it prevents the default event behavior. Nothing
261
- * happens if the target and currentTarget of the event are not the same. It will omit any extra data in the
262
- * `formData` in the state if `omitExtraData` is true. It will validate the resulting `formData`, reporting errors
263
- * via the `onError()` callback unless validation is disabled. Finally it will add in any `extraErrors` and then call
264
- * back the `onSubmit` callback if it was provided.
265
- *
266
- * @param event - The submit HTML form event
267
- */
268
- onSubmit: (event: React.FormEvent<any>) => void;
269
- /** Returns the registry for the form */
270
- getRegistry(): Registry<T, F>;
271
- /** Provides a function that can be used to programmatically submit the `Form` */
272
- submit(): void;
273
- /** Renders the `Form` fields inside the <form> | `tagName` or `_internalFormWrapper`, rendering any errors if
274
- * needed along with the submit button or any children of the form.
275
- */
276
- render(): JSX.Element;
277
- }
@@ -1,6 +0,0 @@
1
- import { Field } from "@rjsf/utils";
2
- /** `ArrayField` is `React.ComponentType<FieldProps<T[], F>>` (necessarily) but the `registry` requires things to be a
3
- * `Field` which is defined as `React.ComponentType<FieldProps<T, F>>`, so cast it to make `registry` happy.
4
- */
5
- declare const _default: Field<any, any>;
6
- export default _default;
@@ -1,8 +0,0 @@
1
- import { FieldProps } from "@rjsf/utils";
2
- /** The `BooleanField` component is used to render a field in the schema is boolean. It constructs `enumOptions` for the
3
- * two boolean values based on the various alternatives in the schema.
4
- *
5
- * @param props - The `FieldProps` for this template
6
- */
7
- declare function BooleanField<T = any, F = any>(props: FieldProps<T, F>): JSX.Element;
8
- export default BooleanField;