+ {additional && (
+
+
+
+
+ )}
{displayLabel &&
}
{displayLabel && description ? description : null}
{children}
@@ -157,6 +185,7 @@ function SchemaFieldRender(props) {
errorSchema,
idPrefix,
name,
+ onKeyChange,
required,
registry = getDefaultRegistry(),
} = props;
@@ -255,6 +284,7 @@ function SchemaFieldRender(props) {
id,
label,
hidden,
+ onKeyChange,
required,
disabled,
readonly,
diff --git a/src/utils.js b/src/utils.js
index 8d00e3fc86..a9b9651ffa 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -2,6 +2,8 @@ import React from "react";
import validateFormData from "./validate";
import fill from "core-js/library/fn/array/fill";
+export const ADDITIONAL_PROPERTY_FLAG = "__additional_property";
+
const widgetMap = {
boolean: {
checkbox: "CheckboxWidget",
@@ -402,7 +404,56 @@ function findSchemaDefinition($ref, definitions = {}) {
throw new Error(`Could not find a definition for ${$ref}.`);
}
-export function retrieveSchema(schema, definitions = {}, formData = {}) {
+// In the case where we have to implicitly create a schema, it is useful to know what type to use
+// based on the data we are defining
+const guessType = function guessType(value) {
+ if (Array.isArray(value)) {
+ return "array";
+ } else if (typeof value === "string") {
+ return "string";
+ } else if (value == null) {
+ return "null";
+ } else if (typeof value === "boolean") {
+ return "boolean";
+ } else if (!isNaN(value)) {
+ return "number";
+ } else if (typeof value === "object") {
+ return "object";
+ }
+ // Default to string if we can't figure it out
+ return "string";
+};
+
+// This function will create new "properties" items for each key in our formData
+export function stubExistingAdditionalProperties(
+ schema,
+ definitions = {},
+ formData = {}
+) {
+ // Clone the schema so we don't ruin the consumer's original
+ schema = {
+ ...schema,
+ properties: { ...schema.properties },
+ };
+ Object.keys(formData).forEach(key => {
+ if (schema.properties.hasOwnProperty(key)) {
+ // No need to stub, our schema already has the property
+ return;
+ }
+ const additionalProperties = schema.additionalProperties.hasOwnProperty(
+ "type"
+ )
+ ? { ...schema.additionalProperties }
+ : { type: guessType(formData[key]) };
+ // The type of our new key should match the additionalProperties value;
+ schema.properties[key] = additionalProperties;
+ // Set our additional property flag so we know it was dynamically added
+ schema.properties[key][ADDITIONAL_PROPERTY_FLAG] = true;
+ });
+ return schema;
+}
+
+export function resolveSchema(schema, definitions = {}, formData = {}) {
if (schema.hasOwnProperty("$ref")) {
// Retrieve the referenced schema definition.
const $refSchema = findSchemaDefinition(schema.$ref, definitions);
@@ -423,6 +474,21 @@ export function retrieveSchema(schema, definitions = {}, formData = {}) {
}
}
+export function retrieveSchema(schema, definitions = {}, formData = {}) {
+ const resolvedSchema = resolveSchema(schema, definitions, formData);
+ const hasAdditionalProperties =
+ resolvedSchema.hasOwnProperty("additionalProperties") &&
+ resolvedSchema.additionalProperties !== false;
+ if (hasAdditionalProperties) {
+ return stubExistingAdditionalProperties(
+ resolvedSchema,
+ definitions,
+ formData
+ );
+ }
+ return resolvedSchema;
+}
+
function resolveDependencies(schema, definitions, formData) {
// Drop the dependencies from the source schema.
let { dependencies = {}, ...resolvedSchema } = schema;
diff --git a/test/ObjectField_test.js b/test/ObjectField_test.js
index 1099f35811..04dab222c4 100644
--- a/test/ObjectField_test.js
+++ b/test/ObjectField_test.js
@@ -3,6 +3,7 @@ import { expect } from "chai";
import { Simulate } from "react-addons-test-utils";
import { createFormComponent, createSandbox } from "./test_utils";
+import validateFormData from "../src/validate";
describe("ObjectField", () => {
let sandbox;
@@ -381,4 +382,268 @@ describe("ObjectField", () => {
expect(node.querySelector("#title-")).to.be.null;
});
});
+
+ describe("additionalProperties", () => {
+ const schema = {
+ type: "object",
+ additionalProperties: {
+ type: "string",
+ },
+ };
+
+ it("should automatically add a property field if in formData", () => {
+ const { node } = createFormComponent({
+ schema,
+ formData: { first: 1 },
+ });
+
+ expect(node.querySelectorAll(".field-string")).to.have.length.of(1);
+ });
+
+ it("should pass through non-schema properties and not throw validation errors if additionalProperties is undefined", () => {
+ const undefinedAPSchema = {
+ ...schema,
+ properties: { second: { type: "string" } },
+ };
+ delete undefinedAPSchema.additionalProperties;
+ const { comp } = createFormComponent({
+ schema: undefinedAPSchema,
+ formData: { nonschema: 1 },
+ });
+
+ expect(comp.state.formData.nonschema).eql(1);
+
+ const result = validateFormData(comp.state.formData, comp.state.schema);
+ expect(result.errors).eql([]);
+ });
+
+ it("should pass through non-schema properties but throw a validation error if additionalProperties is false", () => {
+ const { comp } = createFormComponent({
+ schema: {
+ ...schema,
+ additionalProperties: false,
+ properties: { second: { type: "string" } },
+ },
+ formData: { nonschema: 1 },
+ });
+
+ expect(comp.state.formData.nonschema).eql(1);
+
+ const result = validateFormData(comp.state.formData, comp.state.schema);
+ expect(result.errors[0].name).eql("additionalProperties");
+ });
+
+ it("should still obey properties if additionalProperties is defined", () => {
+ const { node } = createFormComponent({
+ schema: {
+ ...schema,
+ properties: {
+ definedProperty: {
+ type: "string",
+ },
+ },
+ },
+ });
+
+ expect(node.querySelectorAll(".field-string")).to.have.length.of(1);
+ });
+
+ it("should render a label for the additional property key", () => {
+ const { node } = createFormComponent({
+ schema,
+ formData: { first: 1 },
+ });
+
+ expect(node.querySelector("[for='root_first-key']").textContent).eql(
+ "first Key"
+ );
+ });
+
+ it("should render a label for the additional property key if additionalProperties is true", () => {
+ const { node } = createFormComponent({
+ schema: { ...schema, additionalProperties: true },
+ formData: { first: 1 },
+ });
+
+ expect(node.querySelector("[for='root_first-key']").textContent).eql(
+ "first Key"
+ );
+ });
+
+ it("should not render a label for the additional property key if additionalProperties is false", () => {
+ const { node } = createFormComponent({
+ schema: { ...schema, additionalProperties: false },
+ formData: { first: 1 },
+ });
+
+ expect(node.querySelector("[for='root_first-key']")).eql(null);
+ });
+
+ it("should render a text input for the additional property key", () => {
+ const { node } = createFormComponent({
+ schema,
+ formData: { first: 1 },
+ });
+
+ expect(node.querySelector("#root_first-key").value).eql("first");
+ });
+
+ it("should render a label for the additional property value", () => {
+ const { node } = createFormComponent({
+ schema,
+ formData: { first: 1 },
+ });
+
+ expect(node.querySelector("[for='root_first']").textContent).eql("first");
+ });
+
+ it("should render a text input for the additional property value", () => {
+ const { node } = createFormComponent({
+ schema,
+ formData: { first: 1 },
+ });
+
+ expect(node.querySelector("#root_first").value).eql("1");
+ });
+
+ it("should rename formData key if key input is renamed", () => {
+ const { comp, node } = createFormComponent({
+ schema,
+ formData: { first: 1 },
+ });
+
+ const textNode = node.querySelector("#root_first-key");
+ Simulate.blur(textNode, {
+ target: { value: "newFirst" },
+ });
+
+ expect(comp.state.formData.newFirst).eql(1);
+ });
+
+ it("should attach suffix to formData key if new key already exists when key input is renamed", () => {
+ const formData = {
+ first: 1,
+ second: 2,
+ };
+ const { comp, node } = createFormComponent({
+ schema,
+ formData,
+ });
+
+ const textNode = node.querySelector("#root_first-key");
+ Simulate.blur(textNode, {
+ target: { value: "second" },
+ });
+
+ expect(comp.state.formData["second-1"]).eql(1);
+ });
+
+ it("should continue incrementing suffix to formData key until that key name is unique after a key input collision", () => {
+ const formData = {
+ first: 1,
+ second: 2,
+ "second-1": 2,
+ "second-2": 2,
+ "second-3": 2,
+ "second-4": 2,
+ "second-5": 2,
+ "second-6": 2,
+ };
+ const { comp, node } = createFormComponent({
+ schema,
+ formData,
+ });
+
+ const textNode = node.querySelector("#root_first-key");
+ Simulate.blur(textNode, {
+ target: { value: "second" },
+ });
+
+ expect(comp.state.formData["second-7"]).eql(1);
+ });
+
+ it("should have an expand button", () => {
+ const { node } = createFormComponent({ schema });
+
+ expect(node.querySelector(".object-property-expand button")).not.eql(
+ null
+ );
+ });
+
+ it("should not have an expand button if expandable is false", () => {
+ const { node } = createFormComponent({
+ schema,
+ uiSchema: { "ui:options": { expandable: false } },
+ });
+
+ expect(node.querySelector(".object-property-expand button")).to.be.null;
+ });
+
+ it("should add a new property when clicking the expand button", () => {
+ const { comp, node } = createFormComponent({ schema });
+
+ Simulate.click(node.querySelector(".object-property-expand button"));
+
+ expect(comp.state.formData.newKey).eql("New Value");
+ });
+
+ it("should add a new property with suffix when clicking the expand button and 'newKey' already exists", () => {
+ const { comp, node } = createFormComponent({
+ schema,
+ formData: { newKey: 1 },
+ });
+
+ Simulate.click(node.querySelector(".object-property-expand button"));
+
+ expect(comp.state.formData["newKey-1"]).eql("New Value");
+ });
+
+ it("should not provide an expand button if length equals maxProperties", () => {
+ const { node } = createFormComponent({
+ schema: { maxProperties: 1, ...schema },
+ formData: { first: 1 },
+ });
+
+ expect(node.querySelector(".object-property-expand button")).to.be.null;
+ });
+
+ it("should provide an expand button if length is less than maxProperties", () => {
+ const { node } = createFormComponent({
+ schema: { maxProperties: 2, ...schema },
+ formData: { first: 1 },
+ });
+
+ expect(node.querySelector(".object-property-expand button")).not.eql(
+ null
+ );
+ });
+
+ it("should not provide an expand button if expandable is expliclty false regardless of maxProperties value", () => {
+ const { node } = createFormComponent({
+ schema: { maxProperties: 2, ...schema },
+ formData: { first: 1 },
+ uiSchema: {
+ "ui:options": {
+ expandable: false,
+ },
+ },
+ });
+
+ expect(node.querySelector(".object-property-expand button")).to.be.null;
+ });
+
+ it("should ignore expandable value if maxProperties constraint is not satisfied", () => {
+ const { node } = createFormComponent({
+ schema: { maxProperties: 1, ...schema },
+ formData: { first: 1 },
+ uiSchema: {
+ "ui:options": {
+ expandable: true,
+ },
+ },
+ });
+
+ expect(node.querySelector(".object-property-expand button")).to.be.null;
+ });
+ });
});