mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2026-08-12 21:10:23 +00:00
Add ErrorList props support react-jsonschema-form
Complete details about ErrorList here : https://github.com/mozilla-services/react-jsonschema-form#error-list-template
This commit is contained in:
Philippe Bourdages
+49
-30
@@ -4,6 +4,7 @@
|
||||
// Jon Surrell <https://github.com/sirreal>
|
||||
// Ivan Jiang <https://github.com/iplus26>
|
||||
// Kurt Preston <https://github.com/KurtPreston>
|
||||
// Philippe Bourdages <https://github.com/phbou72>
|
||||
// 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<ErrorListProps>;
|
||||
validate?: (formData: T, errors: FormValidation) => FormValidation;
|
||||
onChange?: (e: IChangeEvent<T>) => any;
|
||||
onError?: (e: any) => any;
|
||||
@@ -28,7 +30,9 @@ declare module "react-jsonschema-form" {
|
||||
liveValidate?: boolean;
|
||||
FieldTemplate?: React.StatelessComponent<FieldTemplateProps>;
|
||||
ArrayFieldTemplate?: React.StatelessComponent<ArrayFieldTemplateProps>;
|
||||
ObjectFieldTemplate?: React.StatelessComponent<ObjectFieldTemplateProps>;
|
||||
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<T> extends React.Component<FormProps<T>> { }
|
||||
export default class Form<T> extends React.Component<FormProps<T>> {}
|
||||
|
||||
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<HTMLElement> {
|
||||
id: string;
|
||||
@@ -75,7 +79,9 @@ declare module "react-jsonschema-form" {
|
||||
formContext: any;
|
||||
}
|
||||
|
||||
export type Widget = React.StatelessComponent<WidgetProps> | React.ComponentClass<WidgetProps>;
|
||||
export type Widget =
|
||||
| React.StatelessComponent<WidgetProps>
|
||||
| React.ComponentClass<WidgetProps>;
|
||||
|
||||
export interface FieldProps extends React.HTMLAttributes<HTMLElement> {
|
||||
schema: JSONSchema6;
|
||||
@@ -99,7 +105,9 @@ declare module "react-jsonschema-form" {
|
||||
[prop: string]: any;
|
||||
}
|
||||
|
||||
export type Field = React.StatelessComponent<FieldProps> | React.ComponentClass<FieldProps>;
|
||||
export type Field =
|
||||
| React.StatelessComponent<FieldProps>
|
||||
| React.ComponentClass<FieldProps>;
|
||||
|
||||
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<any>,
|
||||
children: React.ReactElement<any>;
|
||||
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<any>,
|
||||
content: React.ReactElement<any>;
|
||||
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<T = any> {
|
||||
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<T> = IChangeEvent<T>;
|
||||
|
||||
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<T> = {
|
||||
formData: T;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
@@ -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 (
|
||||
<div className="panel panel-danger errors">
|
||||
<div className="panel-heading">
|
||||
<h3 className="panel-title">Errors</h3>
|
||||
</div>
|
||||
<ul className="list-group">
|
||||
{errors.map((error, i) => {
|
||||
return (
|
||||
<li key={i} className="list-group-item text-danger">
|
||||
{error.stack}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export class Example extends React.Component<any, IExampleState> {
|
||||
public state: IExampleState = {
|
||||
formData: {
|
||||
@@ -66,23 +83,28 @@ export class Example extends React.Component<any, IExampleState> {
|
||||
bio: "Roundhouse kicking asses since 1940",
|
||||
password: "noneed"
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<div className="react-jsonschema-form-example">
|
||||
{ <Form schema={schema}
|
||||
return (
|
||||
<div className="react-jsonschema-form-example">
|
||||
{
|
||||
<Form
|
||||
schema={schema}
|
||||
uiSchema={uiSchema}
|
||||
showErrorList={false}
|
||||
noValidate={false}
|
||||
noHtml5Validate={false}
|
||||
formData={this.state}
|
||||
onChange={(formData) => this.setState({formData})} /> }
|
||||
</div>
|
||||
);
|
||||
ErrorList={ErrorListExample}
|
||||
onChange={formData => this.setState({ formData })}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user