Add delete button for additionalProperties key-value pair

src/components/fields/ObjectField.js

@@ -7,6 +7,7 @@ import {
   retrieveSchema,
   getDefaultRegistry,
   getUiOptions,
+  ADDITIONAL_PROPERTY_FLAG,
 } from "../../utils";
 
 function DefaultObjectFieldTemplate(props) {
@@ -79,9 +80,24 @@ class ObjectField extends Component {
     );
   }
 
-  onPropertyChange = name => {
+  onPropertyChange = (name, addedByAdditionalProperties = false) => {
     return (value, errorSchema) => {
-      const newFormData = { ...this.props.formData, [name]: value };
+      let newFormData;
+      //section below sets zero value of input field to empty string
+      //instead of undefined, so that value input in additionalProperties
+      //doesn't disappear when emptied
+      if (!value && addedByAdditionalProperties) {
+        newFormData = {
+          ...this.props.formData,
+          [name]: "",
+        };
+      } else {
+        newFormData = {
+          ...this.props.formData,
+          [name]: value,
+        };
+      }
+
       this.props.onChange(
         newFormData,
         errorSchema &&
@@ -93,6 +109,16 @@ class ObjectField extends Component {
     };
   };
 
+  onDropIndexClick = key => {
+    return event => {
+      event.preventDefault();
+      const { onChange, formData } = this.props;
+      const copiedFormData = { ...formData };
+      delete copiedFormData[key];
+      onChange(copiedFormData);
+    };
+  };
+
   getAvailableKey = (preferredKey, formData) => {
     var index = 0;
     var newKey = preferredKey;
@@ -176,7 +202,6 @@ class ObjectField extends Component {
     const title = schema.title === undefined ? name : schema.title;
     const description = uiSchema["ui:description"] || schema.description;
     let orderedProperties;
-
     try {
       const properties = Object.keys(schema.properties);
       orderedProperties = orderProperties(properties, uiSchema["ui:order"]);
@@ -200,6 +225,9 @@ class ObjectField extends Component {
       TitleField,
       DescriptionField,
       properties: orderedProperties.map(name => {
+        const addedByAdditionalProperties = schema.properties[
+          name
+        ].hasOwnProperty(ADDITIONAL_PROPERTY_FLAG);
         return {
           content: (
             <SchemaField
@@ -213,12 +241,16 @@ class ObjectField extends Component {
               idPrefix={idPrefix}
               formData={formData[name]}
               onKeyChange={this.onKeyChange(name)}
-              onChange={this.onPropertyChange(name)}
+              onChange={this.onPropertyChange(
+                name,
+                addedByAdditionalProperties
+              )}
               onBlur={onBlur}
               onFocus={onFocus}
               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";
 
@@ -107,7 +108,6 @@ function ErrorList(props) {
     </div>
   );
 }
-
 function DefaultTemplate(props) {
   const {
     id,
@@ -121,35 +121,57 @@ function DefaultTemplate(props) {
     required,
     displayLabel,
     onKeyChange,
+    onDropIndexClick,
   } = props;
   if (hidden) {
     return children;
   }
+
   const additional = props.schema.hasOwnProperty(ADDITIONAL_PROPERTY_FLAG);
   const keyLabel = `${label} Key`;
 
   return (
     <div className={classNames}>
-      {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={additional ? "row" : ""}>
+        {additional && (
+          <div className="col-xs-5 form-additional">
+            <div className="form-group">
+              <Label label={keyLabel} required={required} id={`${id}-key`} />
+              <LabelInput
+                label={label}
+                required={required}
+                id={`${id}-key`}
+                onChange={onKeyChange}
+              />
+            </div>
+          </div>
+        )}
+
+        <div
+          className={additional ? "form-additional form-group col-xs-5" : ""}>
+          {displayLabel && <Label label={label} required={required} id={id} />}
+          {displayLabel && description ? description : null}
+          {children}
+          {errors}
+          {help}
+        </div>
+        <div className="col-xs-2">
+          {additional && (
+            <IconButton
+              type="danger"
+              icon="remove"
+              className="array-item-remove btn-block"
+              tabIndex="-1"
+              style={{ border: "0" }}
+              disabled={props.disabled || props.readonly}
+              onClick={onDropIndexClick(props.label)}
+            />
+          )}
         </div>
-      )}
-      {displayLabel && <Label label={label} required={required} id={id} />}
-      {displayLabel && description ? description : null}
-      {children}
-      {errors}
-      {help}
+      </div>
     </div>
   );
 }
-
 if (process.env.NODE_ENV !== "production") {
   DefaultTemplate.propTypes = {
     id: PropTypes.string,
@@ -186,6 +208,7 @@ function SchemaFieldRender(props) {
     idPrefix,
     name,
     onKeyChange,
+    onDropIndexClick,
     required,
     registry = getDefaultRegistry(),
   } = props;
@@ -285,6 +308,7 @@ function SchemaFieldRender(props) {
     label,
     hidden,
     onKeyChange,
+    onDropIndexClick,
     required,
     disabled,
     readonly,

src/components/fields/StringField.js

@@ -34,7 +34,6 @@ function StringField(props) {
     uiSchema
   );
   const Widget = getWidget(schema, widget, widgets);
-
   return (
     <Widget
       options={{ ...options, enumOptions }}

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(6);
       });
     });
 

test/ArrayField_test.js

@@ -24,7 +24,8 @@ describe("ArrayField", () => {
       const { node } = createFormComponent({ schema: { type: "array" } });
 
       expect(
-        node.querySelector(".field-array > .unsupported-field").textContent
+        node.querySelector(".field-array > div > div > .unsupported-field")
+          .textContent
       ).to.contain("Missing items definition");
     });
   });

test/ObjectField_test.js

@@ -197,7 +197,7 @@ describe("ObjectField", () => {
         },
       });
       const labels = [].map.call(
-        node.querySelectorAll(".field > label"),
+        node.querySelectorAll(".field > div > div > label"),
         l => l.textContent
       );
 
@@ -212,7 +212,7 @@ describe("ObjectField", () => {
         },
       });
       const labels = [].map.call(
-        node.querySelectorAll(".field > label"),
+        node.querySelectorAll(".field > div > div> label"),
         l => l.textContent
       );
 
@@ -277,7 +277,7 @@ describe("ObjectField", () => {
         },
       });
       const labels = [].map.call(
-        node.querySelectorAll(".field > label"),
+        node.querySelectorAll(".field > div > div > label"),
         l => l.textContent
       );
 
@@ -310,7 +310,7 @@ describe("ObjectField", () => {
         },
       });
       const labels = [].map.call(
-        node.querySelectorAll(".field > label"),
+        node.querySelectorAll(".field > div > div > label"),
         l => l.textContent
       );
 
@@ -678,5 +678,62 @@ describe("ObjectField", () => {
 
       expect(node.querySelector(".object-property-expand button")).to.be.null;
     });
+
+    it("should not have delete button if expand button has not been clicked", () => {
+      const { node } = createFormComponent({ schema });
+
+      expect(node.querySelector(".form-group > .btn-danger")).eql(null);
+    });
+
+    it("should have delete button if expand button has been clicked", () => {
+      const { node } = createFormComponent({
+        schema,
+      });
+
+      expect(
+        node.querySelector(".form-group > .row > .col-xs-2 .btn-danger")
+      ).eql(null);
+
+      Simulate.click(node.querySelector(".object-property-expand button"));
+
+      expect(node.querySelector(".form-group > .row > .col-xs-2 > .btn-danger"))
+        .to.not.be.null;
+    });
+
+    it("delete button should delete key-value pair", () => {
+      const { node } = createFormComponent({
+        schema,
+        formData: { first: 1 },
+      });
+      expect(node.querySelector("#root_first-key").value).to.eql("first");
+      Simulate.click(
+        node.querySelector(".form-group > .row > .col-xs-2 > .btn-danger")
+      );
+      expect(node.querySelector("#root_first-key")).to.not.exist;
+    });
+
+    it("delete button should delete correct pair", () => {
+      const { node } = createFormComponent({
+        schema,
+        formData: { first: 1, second: 2, third: 3 },
+      });
+      const selector = ".form-group > .row > .col-xs-2 > .btn-danger";
+      expect(node.querySelectorAll(selector).length).to.eql(3);
+      Simulate.click(node.querySelectorAll(selector)[1]);
+      expect(node.querySelector("#root_second-key")).to.not.exist;
+      expect(node.querySelectorAll(selector).length).to.eql(2);
+    });
+
+    it("deleting content of value input should not delete pair", () => {
+      const { comp, node } = createFormComponent({
+        schema,
+        formData: { first: 1 },
+      });
+
+      Simulate.change(node.querySelector("#root_first"), {
+        target: { value: "" },
+      });
+      expect(comp.state.formData["first"]).eql("");
+    });
   });
 });

test/SchemaField_test.js

@@ -313,7 +313,7 @@ describe("SchemaField", () => {
       submit(node);
 
       const matches = node.querySelectorAll(
-        "form > .form-group > div > .error-detail .text-danger"
+        "form > .form-group > div > div > div > .error-detail .text-danger"
       );
       expect(matches).to.have.length.of(1);
       expect(matches[0].textContent).to.eql("container");