Add delete button for additionalProperties key-value pair

.gitignore

@@ -4,3 +4,4 @@ build
 dist
 lib
 yarn.lock
+.vscode

src/components/fields/ObjectField.js

@@ -7,6 +7,7 @@ import {
   retrieveSchema,
   getDefaultRegistry,
   getUiOptions,
+  ADDITIONAL_PROPERTY_FLAG,
 } from "../../utils";
 
 function DefaultObjectFieldTemplate(props) {
@@ -79,9 +80,21 @@ class ObjectField extends Component {
     );
   }
 
-  onPropertyChange = name => {
+  onPropertyChange = (name, additionalProperties = false) => {
     return (value, errorSchema) => {
-      const newFormData = { ...this.props.formData, [name]: value };
+      let newFormData;
+      if (!value && additionalProperties) {
+        newFormData = {
+          ...this.props.formData,
+          [name]: "",
+        };
+      } else {
+        newFormData = {
+          ...this.props.formData,
+          [name]: value,
+        };
+      }
+
       this.props.onChange(
         newFormData,
         errorSchema &&
@@ -93,6 +106,18 @@ class ObjectField extends Component {
     };
   };
 
+  onDropIndexClick = index => {
+    return event => {
+      if (event) {
+        event.preventDefault();
+      }
+      const { onChange, formData } = this.props;
+      const copiedFormData = { ...formData };
+      delete copiedFormData[index];
+      onChange(copiedFormData);
+    };
+  };
+
   getAvailableKey = (preferredKey, formData) => {
     var index = 0;
     var newKey = preferredKey;
@@ -176,7 +201,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 +224,9 @@ class ObjectField extends Component {
       TitleField,
       DescriptionField,
       properties: orderedProperties.map(name => {
+        const additionalPropertyFlag = schema.properties[name].hasOwnProperty(
+          ADDITIONAL_PROPERTY_FLAG
+        );
         return {
           content: (
             <SchemaField
@@ -213,12 +240,13 @@ class ObjectField extends Component {
               idPrefix={idPrefix}
               formData={formData[name]}
               onKeyChange={this.onKeyChange(name)}
-              onChange={this.onPropertyChange(name)}
+              onChange={this.onPropertyChange(name, additionalPropertyFlag)}
               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,70 @@ 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 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 form-additional">
+            <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 form-additional" : ""}>
+        {displayLabel && <Label label={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>
   );
 }
-
 if (process.env.NODE_ENV !== "production") {
   DefaultTemplate.propTypes = {
     id: PropTypes.string,
@@ -186,6 +221,7 @@ function SchemaFieldRender(props) {
     idPrefix,
     name,
     onKeyChange,
+    onDropIndexClick,
     required,
     registry = getDefaultRegistry(),
   } = props;
@@ -285,6 +321,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(4);
       });
     });
 

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 > .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 > label"),
         l => l.textContent
       );
 
@@ -212,7 +212,7 @@ describe("ObjectField", () => {
         },
       });
       const labels = [].map.call(
-        node.querySelectorAll(".field > label"),
+        node.querySelectorAll(".field > div > label"),
         l => l.textContent
       );
 
@@ -277,7 +277,7 @@ describe("ObjectField", () => {
         },
       });
       const labels = [].map.call(
-        node.querySelectorAll(".field > label"),
+        node.querySelectorAll(".field > div > label"),
         l => l.textContent
       );
 
@@ -310,7 +310,7 @@ describe("ObjectField", () => {
         },
       });
       const labels = [].map.call(
-        node.querySelectorAll(".field > label"),
+        node.querySelectorAll(".field > div > label"),
         l => l.textContent
       );
 
@@ -678,5 +678,60 @@ 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 > .btn-danger")).eql(null);
+
+      Simulate.click(node.querySelector(".object-property-expand button"));
+
+      expect(node.querySelector(".form-group > .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 > .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 },
+      });
+      expect(node.querySelectorAll(".form-group > .btn-danger").length).to.eql(
+        3
+      );
+      Simulate.click(node.querySelectorAll(".form-group > .btn-danger")[1]);
+      expect(node.querySelector("#root_second-key")).to.not.exist;
+      expect(node.querySelectorAll(".form-group > .btn-danger").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 > .error-detail .text-danger"
       );
       expect(matches).to.have.length.of(1);
       expect(matches[0].textContent).to.eql("container");