diff --git a/docs/form-customization.md b/docs/form-customization.md index a6740a0..07f77d9 100644 --- a/docs/form-customization.md +++ b/docs/form-customization.md @@ -248,12 +248,24 @@ const uiSchema = { }; ``` -### Object item options +### Object additional properties + +You can define `additionalProperties` by setting its value to a schema object, such as the following: + +```js +const schema = { + "type": "object", + "properties": {"type": "string"}, + "additionalProperties": {"type": "number"} +} +``` + +In this way, an add button for new properties is shown by default. The UX for editing properties whose names are user-defined is still experimental. + +You can also define `uiSchema` options for `additionalProperties` by setting the `additionalProperties` attribute in the `uiSchema`. #### `expandable` option -If `additionalProperties` contains a schema object, an add button for new properties is shown by default. The UX for editing properties whose names are user-defined is still experimental. - You can turn support for `additionalProperties` off with the `expandable` option in `uiSchema`: ```jsx diff --git a/src/components/fields/ObjectField.js b/src/components/fields/ObjectField.js index 9eb1732..b6514d8 100644 --- a/src/components/fields/ObjectField.js +++ b/src/components/fields/ObjectField.js @@ -213,7 +213,6 @@ class ObjectField extends Component { } const Template = registry.ObjectFieldTemplate || DefaultObjectFieldTemplate; - const templateProps = { title: uiSchema["ui:title"] || title, description, @@ -230,7 +229,11 @@ class ObjectField extends Component { name={name} required={this.isRequired(name)} schema={schema.properties[name]} - uiSchema={uiSchema[name]} + uiSchema={ + addedByAdditionalProperties + ? uiSchema.additionalProperties + : uiSchema[name] + } errorSchema={errorSchema[name]} idSchema={idSchema[name]} idPrefix={idPrefix} diff --git a/test/ArrayField_test.js b/test/ArrayField_test.js index d111af6..da17bf6 100644 --- a/test/ArrayField_test.js +++ b/test/ArrayField_test.js @@ -1162,6 +1162,22 @@ describe("ArrayField", () => { expect(addInput.value).eql("bar"); }); + it("should apply uiSchema to additionalItems", () => { + const { node } = createFormComponent({ + schema: schemaAdditional, + uiSchema: { + additionalItems: { + "ui:title": "Custom title", + }, + }, + formData: [1, 2, "bar"], + }); + const label = node.querySelector( + "fieldset .field-string label.control-label" + ); + expect(label.textContent).eql("Custom title*"); + }); + it("should have an add button if additionalItems is an object", () => { const { node } = createFormComponent({ schema: schemaAdditional }); expect(node.querySelector(".array-item-add button")).not.to.be.null; diff --git a/test/ObjectField_test.js b/test/ObjectField_test.js index c9e8361..afd1fb0 100644 --- a/test/ObjectField_test.js +++ b/test/ObjectField_test.js @@ -412,6 +412,23 @@ describe("ObjectField", () => { expect(node.querySelectorAll(".field-string")).to.have.length.of(1); }); + it("should apply uiSchema to additionalProperties", () => { + const { node } = createFormComponent({ + schema, + uiSchema: { + additionalProperties: { + "ui:title": "CustomName", + }, + }, + formData: { + property1: "test", + }, + }); + const labels = node.querySelectorAll("label.control-label"); + expect(labels[0].textContent).eql("CustomName Key"); + expect(labels[1].textContent).eql("CustomName"); + }); + it("should pass through non-schema properties and not throw validation errors if additionalProperties is undefined", () => { const undefinedAPSchema = { ...schema,