Add NullField (#1238)

* Add NullField

* Always set the formData to null for a null field

* Don't overwrite existing data

* Use central fields propTypes

playground/samples/index.js

@@ -21,6 +21,7 @@ import propertyDependencies from "./propertyDependencies";
 import schemaDependencies from "./schemaDependencies";
 import additionalProperties from "./additionalProperties";
 import nullable from "./nullable";
+import nullField from "./null";
 
 export const samples = {
   Simple: simple,
@@ -45,5 +46,6 @@ export const samples = {
   "Additional Properties": additionalProperties,
   "Any Of": anyOf,
   "One Of": oneOf,
+  "Null fields": nullField,
   Nullable: nullable,
 };

playground/samples/null.js

@@ -0,0 +1,28 @@
+module.exports = {
+  schema: {
+    title: "Null field example",
+    description: "A short form with a null field",
+    type: "object",
+    required: ["firstName"],
+    properties: {
+      helpText: {
+        title: "A null field",
+        description:
+          "Null fields like this are great for adding extra information",
+        type: "null",
+      },
+      firstName: {
+        type: "string",
+        title: "A regular string field",
+        default: "Chuck",
+      },
+    },
+  },
+  uiSchema: {
+    firstName: {
+      "ui:autofocus": true,
+      "ui:emptyValue": "",
+    },
+  },
+  formData: {},
+};

src/components/fields/NullField.js

@@ -0,0 +1,20 @@
+import { Component } from "react";
+import * as types from "../../types";
+
+class NullField extends Component {
+  componentDidMount() {
+    if (this.props.formData === undefined) {
+      this.props.onChange(null);
+    }
+  }
+
+  render() {
+    return null;
+  }
+}
+
+if (process.env.NODE_ENV !== "production") {
+  NullField.propTypes = types.fieldProps;
+}
+
+export default NullField;

src/components/fields/SchemaField.js

@@ -26,6 +26,7 @@ const COMPONENT_TYPES = {
   number: "NumberField",
   object: "ObjectField",
   string: "StringField",
+  null: "NullField",
 };
 
 function getFieldComponent(schema, uiSchema, idSchema, fields) {

src/components/fields/index.js

@@ -7,6 +7,7 @@ import ObjectField from "./ObjectField";
 import SchemaField from "./SchemaField";
 import StringField from "./StringField";
 import TitleField from "./TitleField";
+import NullField from "./NullField";
 import UnsupportedField from "./UnsupportedField";
 
 export default {
@@ -20,5 +21,6 @@ export default {
   SchemaField,
   StringField,
   TitleField,
+  NullField,
   UnsupportedField,
 };

test/NullField_test.js

@@ -0,0 +1,60 @@
+import { expect } from "chai";
+
+import { createFormComponent, createSandbox } from "./test_utils";
+
+describe("NullField", () => {
+  let sandbox;
+
+  beforeEach(() => {
+    sandbox = createSandbox();
+  });
+
+  afterEach(() => {
+    sandbox.restore();
+  });
+
+  describe("No widget", () => {
+    it("should render a null field", () => {
+      const { node } = createFormComponent({
+        schema: {
+          type: "null",
+        },
+      });
+
+      expect(node.querySelectorAll(".field")).to.have.length.of(1);
+    });
+
+    it("should render a null field with a label", () => {
+      const { node } = createFormComponent({
+        schema: {
+          type: "null",
+          title: "foo",
+        },
+      });
+
+      expect(node.querySelector(".field label").textContent).eql("foo");
+    });
+
+    it("should assign a default value", () => {
+      const { comp } = createFormComponent({
+        schema: {
+          type: "null",
+          default: null,
+        },
+      });
+
+      expect(comp.state.formData).eql(null);
+    });
+
+    it("should not overwrite existing data", () => {
+      const { comp } = createFormComponent({
+        schema: {
+          type: "null",
+        },
+        formData: 3,
+      });
+
+      expect(comp.state.formData).eql(3);
+    });
+  });
+});