diff --git a/types/react-jsonschema-form/index.d.ts b/types/react-jsonschema-form/index.d.ts index 5cce3d38c2..ef1b359e5d 100644 --- a/types/react-jsonschema-form/index.d.ts +++ b/types/react-jsonschema-form/index.d.ts @@ -4,6 +4,7 @@ // Jon Surrell // Ivan Jiang // Kurt Preston +// Philippe Bourdages // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.6 @@ -21,6 +22,7 @@ declare module "react-jsonschema-form" { noValidate?: boolean; noHtml5Validate?: boolean; showErrorList?: boolean; + ErrorList?: React.StatelessComponent; validate?: (formData: T, errors: FormValidation) => FormValidation; onChange?: (e: IChangeEvent) => any; onError?: (e: any) => any; @@ -28,7 +30,9 @@ declare module "react-jsonschema-form" { liveValidate?: boolean; FieldTemplate?: React.StatelessComponent; ArrayFieldTemplate?: React.StatelessComponent; - ObjectFieldTemplate?: React.StatelessComponent; + ObjectFieldTemplate?: React.StatelessComponent< + ObjectFieldTemplateProps + >; safeRenderCompletion?: boolean; transformErrors?: (errors: AjvError[]) => AjvError[]; @@ -44,23 +48,23 @@ declare module "react-jsonschema-form" { acceptcharset?: string; } - export default class Form extends React.Component> { } + export default class Form extends React.Component> {} export type UiSchema = { - 'ui:field'?: Field | string; - 'ui:widget'?: Widget | string; - 'ui:options'?: object; - 'ui:order'?: string[]; + "ui:field"?: Field | string; + "ui:widget"?: Widget | string; + "ui:options"?: object; + "ui:order"?: string[]; [name: string]: any; }; export type FieldId = { $id: string; - } + }; export type IdSchema = FieldId & { [key: string]: FieldId; - } + }; export interface WidgetProps extends React.HTMLAttributes { id: string; @@ -75,7 +79,9 @@ declare module "react-jsonschema-form" { formContext: any; } - export type Widget = React.StatelessComponent | React.ComponentClass; + export type Widget = + | React.StatelessComponent + | React.ComponentClass; export interface FieldProps extends React.HTMLAttributes { schema: JSONSchema6; @@ -99,7 +105,9 @@ declare module "react-jsonschema-form" { [prop: string]: any; } - export type Field = React.StatelessComponent | React.ComponentClass; + export type Field = + | React.StatelessComponent + | React.ComponentClass; export type FieldTemplateProps = { id: string; @@ -121,7 +129,7 @@ declare module "react-jsonschema-form" { schema: JSONSchema6; uiSchema: UiSchema; formContext: any; - } + }; export type ArrayFieldTemplateProps = { DescriptionField: object; @@ -131,7 +139,7 @@ declare module "react-jsonschema-form" { disabled: boolean; idSchema: IdSchema; items: { - children: React.ReactElement, + children: React.ReactElement; className: string; disabled: boolean; hasMoveDown: boolean; @@ -140,7 +148,10 @@ declare module "react-jsonschema-form" { hasToolbar: boolean; index: number; onDropIndexClick: (index: number) => (event: any) => void; - onReorderClick: (index: number, newIndex: number) => (event: any) => void; + onReorderClick: ( + index: number, + newIndex: number + ) => (event: any) => void; readonly: boolean; }[]; onAddClick: (event: any) => (event: any) => void; @@ -151,7 +162,7 @@ declare module "react-jsonschema-form" { title: string; formContext: any; formData: any; - } + }; export type ObjectFieldTemplateProps = { DescriptionField: object; @@ -159,23 +170,39 @@ declare module "react-jsonschema-form" { title: string; description: string; properties: { - content: React.ReactElement, + content: React.ReactElement; name: string; disabled: boolean; readonly: boolean; - }[], + }[]; required: boolean; schema: JSONSchema6; uiSchema: UiSchema; idSchema: IdSchema; formData: any; formContext: any; - } + }; + + export type AjvError = { + message: string; + name: string; + params: any; + property: string; + stack: string; + }; + + export type ErrorListProps = { + errorSchema: FormValidation; + errors: AjvError[]; + formContext: any; + schema: JSONSchema6; + uiSchema: UiSchema; + }; export interface IChangeEvent { edit: boolean; formData: T; - errors: { stack: string }[]; + errors: AjvError[]; errorSchema: FormValidation; idSchema: IdSchema; schema: JSONSchema6; @@ -185,26 +212,18 @@ declare module "react-jsonschema-form" { export type ISubmitEvent = IChangeEvent; - export type AjvError = { - message: string; - name: string; - params: any; - property: string; - stack: string; - } - - export type FieldError = string + export type FieldError = string; type FieldValidation = { __errors: FieldError[]; addError: (message: string) => void; - } + }; type FormValidation = FieldValidation & { [fieldName: string]: FieldValidation; - } + }; type FormSubmit = { formData: T; - } + }; } diff --git a/types/react-jsonschema-form/react-jsonschema-form-tests.tsx b/types/react-jsonschema-form/react-jsonschema-form-tests.tsx index 519a642ebb..0bb6715372 100644 --- a/types/react-jsonschema-form/react-jsonschema-form-tests.tsx +++ b/types/react-jsonschema-form/react-jsonschema-form-tests.tsx @@ -1,38 +1,35 @@ import * as React from "react"; -import Form, { UiSchema } from "react-jsonschema-form"; +import Form, { UiSchema, ErrorListProps } from "react-jsonschema-form"; import { JSONSchema6 } from "json-schema"; // example taken from the react-jsonschema-form playground: // https://github.com/mozilla-services/react-jsonschema-form/blob/fedd830294417969d88e38fb9f6b3a85e6ad105e/playground/samples/simple.js -const schema: JSONSchema6 = { - "title": "A registration form", - "type": "object", - "required": [ - "firstName", - "lastName" - ], - "properties": { - "firstName": { - "type": "string", - "title": "First name" +const schema: JSONSchema6 = { + title: "A registration form", + type: "object", + required: ["firstName", "lastName"], + properties: { + firstName: { + type: "string", + title: "First name" }, - "lastName": { - "type": "string", - "title": "Last name" + lastName: { + type: "string", + title: "Last name" }, - "age": { - "type": "integer", - "title": "Age" + age: { + type: "integer", + title: "Age" }, - "bio": { - "type": "string", - "title": "Bio" + bio: { + type: "string", + title: "Bio" }, - "password": { - "type": "string", - "title": "Password", - "minLength": 3 + password: { + type: "string", + title: "Password", + minLength: 3 } } }; @@ -57,6 +54,26 @@ interface IExampleState { formData: any; } +export default function ErrorListExample(props: ErrorListProps) { + const { errors } = props; + return ( +
+
+

Errors

+
+
    + {errors.map((error, i) => { + return ( +
  • + {error.stack} +
  • + ); + })} +
+
+ ); +} + export class Example extends React.Component { public state: IExampleState = { formData: { @@ -66,23 +83,28 @@ export class Example extends React.Component { bio: "Roundhouse kicking asses since 1940", password: "noneed" } - } + }; constructor(props: any) { super(props); } public render() { - return ( -
- {
+ { + this.setState({formData})} /> } -
- ); + ErrorList={ErrorListExample} + onChange={formData => this.setState({ formData })} + /> + } + + ); } }