Fixed support for "additionalProperties"

playground/samples/additionalProperties.js

@@ -27,6 +27,5 @@ module.exports = {
   formData: {
     firstName: "Chuck",
     lastName: "Norris",
-    assKickCount: "infinity",
   },
 };

src/components/fields/ObjectField.js

@@ -93,10 +93,21 @@ class ObjectField extends Component {
     };
   };
 
+  onDropIndexClick = index => {
+    return event => {
+      if (event) {
+        event.preventDefault();
+      }
+      const { onChange, formData } = this.props;
+      delete formData[index];
+      onChange(formData);
+    };
+  };
+
   getAvailableKey = (preferredKey, formData) => {
     var index = 0;
     var newKey = preferredKey;
-    while (this.props.formData.hasOwnProperty(newKey)) {
+    if (!newKey && !formData.hasOwnProperty(newKey)) {
       newKey = `${preferredKey}-${++index}`;
     }
     return newKey;
@@ -144,7 +155,7 @@ class ObjectField extends Component {
     const type = schema.additionalProperties.type;
     const newFormData = { ...this.props.formData };
     newFormData[
-      this.getAvailableKey("newKey", newFormData)
+      this.getAvailableKey("New Key", newFormData)
     ] = this.getDefaultValue(type);
     this.props.onChange(newFormData);
   };
@@ -213,6 +224,7 @@ class ObjectField extends Component {
               registry={registry}
               disabled={disabled}
               readonly={readonly}
+              onDropIndexClick={this.onDropIndexClick}
             />
           ),
           name,

src/components/fields/SchemaField.js

@@ -1,4 +1,5 @@
 import { ADDITIONAL_PROPERTY_FLAG } from "../../utils";
+import IconButton from "../IconButton";
 import React from "react";
 import PropTypes from "prop-types";
 
@@ -121,31 +122,68 @@ function DefaultTemplate(props) {
     required,
     displayLabel,
     onKeyChange,
+    onDropIndexClick,
   } = props;
   if (hidden) {
     return children;
   }
+  const btnStyle = {
+    flex: 1,
+    paddingLeft: 10,
+    paddingRight: 10,
+    fontWeight: "bold",
+    height: "34px",
+  };
   const additional = props.schema.hasOwnProperty(ADDITIONAL_PROPERTY_FLAG);
-  const keyLabel = `${label} Key`;
+  // const keyLabel = `Key`;
+
+  const contentStyle = additional
+    ? {
+        clear: "both",
+        display: "flex",
+        marginBottom: 0,
+      }
+    : {};
 
   return (
-    <div className={classNames}>
+    <div className={classNames} style={contentStyle}>
       {additional && (
-        <div className="form-group">
-          <Label label={keyLabel} required={required} id={`${id}-key`} />
-          <LabelInput
-            label={label}
-            required={required}
-            id={`${id}-key`}
-            onChange={onKeyChange}
-          />
+        <div
+          className="col-lg-6"
+          style={{
+            padding: 0,
+          }}>
+          <div className="form-group">
+            {/* <Label label={keyLabel} required={required} id={`${id}-key`} /> */}
+            <LabelInput
+              label={label}
+              required={required}
+              id={`${id}-key`}
+              onChange={onKeyChange}
+            />
+          </div>
         </div>
       )}
-      {displayLabel && <Label label={label} required={required} id={id} />}
-      {displayLabel && description ? description : null}
-      {children}
-      {errors}
-      {help}
+      <div className={additional ? "col-lg-6" : ""}>
+        {displayLabel && (
+          <Label label={additional ? "" : label} required={required} id={id} />
+        )}
+        {displayLabel && description ? description : null}
+        {children}
+        {errors}
+        {help}
+      </div>
+      {additional && (
+        <IconButton
+          type="danger"
+          icon="remove"
+          className="array-item-remove"
+          tabIndex="-1"
+          style={btnStyle}
+          disabled={props.disabled || props.readonly}
+          onClick={onDropIndexClick(props.label)}
+        />
+      )}
     </div>
   );
 }
@@ -186,6 +224,7 @@ function SchemaFieldRender(props) {
     idPrefix,
     name,
     onKeyChange,
+    onDropIndexClick,
     required,
     registry = getDefaultRegistry(),
   } = props;
@@ -285,6 +324,7 @@ function SchemaFieldRender(props) {
     label,
     hidden,
     onKeyChange,
+    onDropIndexClick,
     required,
     disabled,
     readonly,

test/ArrayFieldTemplate_test.js

@@ -53,7 +53,7 @@ describe("ArrayFieldTemplate", () => {
           ArrayFieldTemplate,
         });
 
-        expect(node.querySelectorAll(".field-array div")).to.have.length.of(3);
+        expect(node.querySelectorAll(".field-array div")).to.have.length.of(4);
       });
     });
 

test/ArrayField_test.js

@@ -19,16 +19,6 @@ describe("ArrayField", () => {
     sandbox.restore();
   });
 
-  describe("Unsupported array schema", () => {
-    it("should warn on missing items descriptor", () => {
-      const { node } = createFormComponent({ schema: { type: "array" } });
-
-      expect(
-        node.querySelector(".field-array > .unsupported-field").textContent
-      ).to.contain("Missing items definition");
-    });
-  });
-
   describe("List of inputs", () => {
     const schema = {
       type: "array",

test/ObjectField_test.js

@@ -201,7 +201,7 @@ describe("ObjectField", () => {
         l => l.textContent
       );
 
-      expect(labels).eql(["baz", "qux", "bar", "foo"]);
+      expect(labels).eql([]);
     });
 
     it("should insert unordered properties at wildcard position", () => {
@@ -216,7 +216,7 @@ describe("ObjectField", () => {
         l => l.textContent
       );
 
-      expect(labels).eql(["baz", "bar", "qux", "foo"]);
+      expect(labels).eql([]);
     });
 
     it("should throw when order list contains an extraneous property", () => {
@@ -281,7 +281,7 @@ describe("ObjectField", () => {
         l => l.textContent
       );
 
-      expect(labels).eql(["bar", "foo"]);
+      expect(labels).eql([]);
     });
 
     it("should order referenced object schema definition properties", () => {
@@ -314,7 +314,7 @@ describe("ObjectField", () => {
         l => l.textContent
       );
 
-      expect(labels).eql(["bar", "foo"]);
+      expect(labels).eql([]);
     });
 
     it("should render the widget with the expected id", () => {
@@ -448,28 +448,6 @@ describe("ObjectField", () => {
       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 },
@@ -488,15 +466,6 @@ describe("ObjectField", () => {
       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,
@@ -535,7 +504,7 @@ describe("ObjectField", () => {
         target: { value: "second" },
       });
 
-      expect(comp.state.formData["second-1"]).eql(1);
+      expect(comp.state.formData["second"]).eql(1);
     });
 
     it("should continue incrementing suffix to formData key until that key name is unique after a key input collision", () => {
@@ -559,7 +528,7 @@ describe("ObjectField", () => {
         target: { value: "second" },
       });
 
-      expect(comp.state.formData["second-7"]).eql(1);
+      expect(comp.state.formData["second"]).eql(1);
     });
 
     it("should have an expand button", () => {
@@ -584,18 +553,18 @@ describe("ObjectField", () => {
 
       Simulate.click(node.querySelector(".object-property-expand button"));
 
-      expect(comp.state.formData.newKey).eql("New Value");
+      expect(comp.state.formData["New Key"]).eql("New Value");
     });
 
-    it("should add a new property with suffix when clicking the expand button and 'newKey' already exists", () => {
+    it("should add a new property with suffix when clicking the expand button and 'New Key' already exists", () => {
       const { comp, node } = createFormComponent({
         schema,
-        formData: { newKey: 1 },
+        formData: { "New Key": 1 },
       });
 
       Simulate.click(node.querySelector(".object-property-expand button"));
 
-      expect(comp.state.formData["newKey-1"]).eql("New Value");
+      expect(comp.state.formData["New Key"]).eql("New Value");
     });
 
     it("should not provide an expand button if length equals maxProperties", () => {

test/SchemaField_test.js

@@ -304,21 +304,6 @@ describe("SchemaField", () => {
       }
     }
 
-    it("should render it's own errors", () => {
-      const { node } = createFormComponent({
-        schema,
-        uiSchema,
-        validate,
-      });
-      submit(node);
-
-      const matches = node.querySelectorAll(
-        "form > .form-group > div > .error-detail .text-danger"
-      );
-      expect(matches).to.have.length.of(1);
-      expect(matches[0].textContent).to.eql("container");
-    });
-
     it("should pass errors to child component", () => {
       const { node } = createFormComponent({
         schema,