Pass more props to ErrorList (rjsf-team#658)

The following props are now passed to `ErrorList` - `errors`: An array of the errors. - `errorSchema`: The errorSchema constructed by `Form`. - `schema`: The schema that was passed to `Form`. - `uiSchema`: The uiSchema that was passed to `Form`. - `formContext`: The `formContext` object that you passed to Form.

Author: olzraiti

README.md

@@ -896,6 +896,13 @@ render((
 
 > Note: Your custom `ErrorList` template will only render when `showErrorList` is `true`.
 
+The following props are passed to `ErrorList`
+
+- `errors`: An array of the errors.
+- `errorSchema`: The errorSchema constructed by `Form`.
+- `schema`: The schema that was passed to `Form`.
+- `uiSchema`: The uiSchema that was passed to `Form`.
+- `formContext`: The `formContext` object that you passed to Form.
 
 ### Custom widgets and fields
 

src/components/Form.js

@@ -77,11 +77,19 @@ export default class Form extends Component {
  }
 
  renderErrors() {
- const { status, errors } = this.state;
- const { ErrorList, showErrorList } = this.props;
+ const { status, errors, errorSchema, schema, uiSchema } = this.state;
+ const { ErrorList, showErrorList, formContext } = this.props;
 
  if (status !== "editing" && errors.length && showErrorList != false) {
- return <ErrorList errors={errors} />;
+ return (
+ <ErrorList
+ errors={errors}
+ errorSchema={errorSchema}
+ schema={schema}
+ uiSchema={uiSchema}
+ formContext={formContext}
+ />
+ );
  }
  return null;
  }

test/validate_test.js

@@ -513,24 +513,57 @@ describe("Validation", () => {
  minLength: 1,
  };
 
+ const uiSchema = {
+ foo: "bar",
+ };
+
  const formData = 0;
 
- const CustomErrorList = ({ errors }) =>
- <div className="CustomErrorList">
- {errors.length} custom
+ const CustomErrorList = ({
+ errors,
+ errorSchema,
+ schema,
+ uiSchema,
+ formContext: { className },
+ }) =>
+ <div>
+ <div className="CustomErrorList">
+ {errors.length} custom
+ </div>
+ <div className={"ErrorSchema"}>
+ {errorSchema.__errors[0]}
+ </div>
+ <div className={"Schema"}>
+ {schema.type}
+ </div>
+ <div className={"UiSchema"}>
+ {uiSchema.foo}
+ </div>
+ <div className={className} />
  </div>;
 
  it("should use CustomErrorList", () => {
  const { node } = createFormComponent({
  schema,
+ uiSchema,
  liveValidate: true,
  formData,
  ErrorList: CustomErrorList,
+ formContext: { className: "foo" },
  });
  expect(node.querySelectorAll(".CustomErrorList")).to.have.length.of(1);
  expect(node.querySelector(".CustomErrorList").textContent).eql(
  "1 custom"
  );
+ expect(node.querySelectorAll(".ErrorSchema")).to.have.length.of(1);
+ expect(node.querySelector(".ErrorSchema").textContent).eql(
+ "is required"
+ );
+ expect(node.querySelectorAll(".Schema")).to.have.length.of(1);
+ expect(node.querySelector(".Schema").textContent).eql("string");
+ expect(node.querySelectorAll(".UiSchema")).to.have.length.of(1);
+ expect(node.querySelector(".UiSchema").textContent).eql("bar");
+ expect(node.querySelectorAll(".foo")).to.have.length.of(1);
  });
  });
  });