diff --git a/README.md b/README.md index 84c41a9949..d68c0fedc6 100644 --- a/README.md +++ b/README.md @@ -776,6 +776,7 @@ The following props are passed to each `ArrayFieldTemplate`: - `required`: A boolean value stating if the array is required. - `schema`: The schema object for this array. - `title`: A string value containing the title for the array. +- `formContext`: The `formContext` object that you passed to Form. The following props are part of each element in `items`: diff --git a/src/components/fields/ArrayField.js b/src/components/fields/ArrayField.js index d610ef0816..b9d4e54b14 100644 --- a/src/components/fields/ArrayField.js +++ b/src/components/fields/ArrayField.js @@ -283,6 +283,7 @@ class ArrayField extends Component { readonly, autofocus, registry, + formContext, onBlur } = this.props; const title = (schema.title === undefined) ? name : schema.title; @@ -320,7 +321,8 @@ class ArrayField extends Component { required, schema, title, - TitleField + TitleField, + formContext }; // Check if a custom render function was passed in @@ -331,7 +333,7 @@ class ArrayField extends Component { renderMultiSelect() { const {schema, idSchema, uiSchema, disabled, readonly, autofocus, onBlur} = this.props; const {items} = this.state; - const {widgets, definitions} = this.props.registry; + const {widgets, definitions, formContext} = this.props.registry; const itemsSchema = retrieveSchema(schema.items, definitions); const enumOptions = optionsList(itemsSchema); const {widget="select", ...options} = {...getUiOptions(uiSchema), enumOptions}; @@ -347,6 +349,7 @@ class ArrayField extends Component { value={items} disabled={disabled} readonly={readonly} + formContext={formContext} autofocus={autofocus}/> ); } @@ -355,7 +358,7 @@ class ArrayField extends Component { const {schema, uiSchema, idSchema, name, disabled, readonly, autofocus, onBlur} = this.props; const title = schema.title || name; const {items} = this.state; - const {widgets} = this.props.registry; + const {widgets, formContext} = this.props.registry; const {widget="files", ...options} = getUiOptions(uiSchema); const Widget = getWidget(schema, widget, widgets); return ( @@ -370,6 +373,7 @@ class ArrayField extends Component { value={items} disabled={disabled} readonly={readonly} + formContext={formContext} autofocus={autofocus}/> ); } diff --git a/test/FormContext_test.js b/test/FormContext_test.js index 10608ada3c..c285ea78db 100644 --- a/test/FormContext_test.js +++ b/test/FormContext_test.js @@ -66,7 +66,6 @@ describe("FormContext", () => { const {node} = createFormComponent({ schema: { type: "object", - title: "A title", properties: { prop: { type: "string" @@ -81,6 +80,26 @@ describe("FormContext", () => { .to.exist; }); + it("should be passed to ArrayTemplateField", () => { + function CustomArrayTemplateField({formContext}) { + return
; + } + + const {node} = createFormComponent({ + schema: { + type: "array", + items: { + type: "string" + } + }, + ArrayFieldTemplate: CustomArrayTemplateField, + formContext + }); + + expect(node.querySelector("#" + formContext.foo)) + .to.exist; + }); + it("should be passed to custom TitleField", () => { const fields = {TitleField: CustomComponent}; @@ -114,4 +133,43 @@ describe("FormContext", () => { expect(node.querySelector("#" + formContext.foo)) .to.exist; }); + + + it("should be passed to multiselect", () => { + const widgets = {SelectWidget: CustomComponent}; + const {node} = createFormComponent({ + schema: { + type: "array", + items: { + type: "string", + enum: ["foo"], + enumNames: ["bar"] + }, + uniqueItems: true + }, + widgets, + formContext + }); + + expect(node.querySelector("#" + formContext.foo)) + .to.exist; + }); + + it("should be passed to files array", () => { + const widgets = {FileWidget: CustomComponent}; + const {node} = createFormComponent({ + schema: { + type: "array", + items: { + type: "string", + format: "data-url" + } + }, + widgets, + formContext + }); + + expect(node.querySelector("#" + formContext.foo)) + .to.exist; + }); });