[react-jsonschema-form] Update types to support 1.7 (#41956)

https://github.com/rjsf-team/react-jsonschema-form/releases/tag/v1.7.0

types/react-jsonschema-form/index.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for react-jsonschema-form 1.6.1
+// Type definitions for react-jsonschema-form 1.7.0
 // Project: https://github.com/mozilla-services/react-jsonschema-form
 // Definitions by: Dan Fox <https://github.com/iamdanfox>
 //                 Ivan Jiang <https://github.com/iplus26>
@@ -12,6 +12,7 @@
 //                 Chancellor Clark <https://github.com/chanceaclark>
 //                 Benoît Sepe <https://github.com/ogdentrod>
 //                 Andre Nguyen <https://github.com/andrenguyener>
+//                 Qingqi Shi <https://github.com/qingqishi>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 3.5
 
@@ -59,6 +60,9 @@ declare module 'react-jsonschema-form' {
         autocomplete?: string;
         enctype?: string;
         acceptcharset?: string;
+        omitExtraData?: boolean;
+        liveOmit?: boolean;
+        tagName?: keyof JSX.IntrinsicElements | React.ComponentType;
     }
 
     export default class Form<T> extends React.Component<FormProps<T>> {
@@ -78,6 +82,9 @@ declare module 'react-jsonschema-form' {
         'ui:widget'?: Widget | string;
         'ui:options'?: { [key: string]: boolean | number | string | object | any[] | null };
         'ui:order'?: string[];
+        'ui:FieldTemplate'?: React.StatelessComponent<FieldTemplateProps>;
+        'ui:ArrayFieldTemplate'?: React.StatelessComponent<ArrayFieldTemplateProps>;
+        'ui:ObjectFieldTemplate'?: React.StatelessComponent<ObjectFieldTemplateProps>;
         [name: string]: any;
     };
 
@@ -178,6 +185,7 @@ declare module 'react-jsonschema-form' {
             onDropIndexClick: (index: number) => (event: any) => void;
             onReorderClick: (index: number, newIndex: number) => (event: any) => void;
             readonly: boolean;
+            key: string;
         }[];
         onAddClick: (event: any) => (event: any) => void;
         readonly: boolean;
@@ -272,7 +280,7 @@ declare module 'react-jsonschema-form/lib/components/fields/SchemaField' {
 
     export type SchemaFieldProps<T = any> = Pick<
         FieldProps<T>,
-        'schema' | 'uiSchema' | 'idSchema' | 'formData' | 'errorSchema' | 'registry'
+        'schema' | 'uiSchema' | 'idSchema' | 'formData' | 'errorSchema' | 'registry' | 'formContext'
     >;
 
     export default class SchemaField extends React.Component<SchemaFieldProps> {}

types/react-jsonschema-form/react-jsonschema-form-tests.tsx

@@ -1,5 +1,15 @@
 import * as React from 'react';
-import Form, { UiSchema, ErrorListProps, FieldProps, WidgetProps, ErrorSchema, withTheme } from 'react-jsonschema-form';
+import Form, {
+    UiSchema,
+    ErrorListProps,
+    FieldProps,
+    WidgetProps,
+    ErrorSchema,
+    withTheme,
+    FieldTemplateProps,
+    ArrayFieldTemplateProps,
+    ObjectFieldTemplateProps,
+} from 'react-jsonschema-form';
 import SchemaField, { SchemaFieldProps } from 'react-jsonschema-form/lib/components/fields/SchemaField';
 import { JSONSchema6 } from 'json-schema';
 
@@ -44,6 +54,18 @@ const schema: JSONSchema6 = {
     },
 };
 
+const ExampleFieldTemplate = (_props: FieldTemplateProps) => null;
+
+const ExampleArrayFieldTemplate = ({ items }: ArrayFieldTemplateProps) => (
+    <div>
+        {items.map(element => (
+            <div key={element.key}>{element.children}</div>
+        ))}
+    </div>
+);
+
+const ExampleObjectFieldTemplate = (_props: ObjectFieldTemplateProps) => null;
+
 const uiSchema: UiSchema = {
     age: {
         'ui:widget': 'updown',
@@ -58,6 +80,9 @@ const uiSchema: UiSchema = {
     date: {
         'ui:widget': 'alt-datetime',
     },
+    'ui:FieldTemplate': ExampleFieldTemplate,
+    'ui:ArrayFieldTemplate': ExampleArrayFieldTemplate,
+    'ui:ObjectFieldTemplate': ExampleObjectFieldTemplate,
 };
 
 interface IExampleState {
@@ -232,3 +257,16 @@ export const customFieldExample = (props: FieldProps) => {
     };
     return <SchemaField {...props} {...customProps} />;
 };
+
+export const omitExtraDataExample = (schema: JSONSchema6) => {
+    return <Form schema={schema} omitExtraData liveOmit />;
+};
+
+export const customTagName = (schema: JSONSchema6) => {
+    return <Form schema={schema} tagName="div" />;
+};
+
+const TestForm = (props: React.ComponentProps<'form'>) => <form {...props} />;
+export const customTagNameUsingComponent = (schema: JSONSchema6) => {
+    return <Form schema={schema} tagName={TestForm} />;
+};