Basic support for 'nullable' types (#1213)

* Basic support for 'nullable' types Modifies the implementation of `getSchemaType` so that when a property has a type of `[<any>, 'null']`, then `<any>` will be passed. This allows the library to render and validate the field correctly. For the sake of simplicity, this change does not attempt any further assumptions, coercions or transformations. References #465 * Add some test cases to `getSchemaType` spec * Add FAQ entry detailing nullable type behaviour * Add Playground example for nullable field * Tweak FAQ entry wording and fix typo Co-Authored-By: warrenseymour <warren@fountainhead.tech> * Correct example in FAQ entry Co-Authored-By: warrenseymour <warren@fountainhead.tech>
rjsf-team · Mar 12, 2019 · d9bcf1a · d9bcf1a
1 parent d22c1c7
commit d9bcf1a
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 1 deletion.
diff --git a/docs/index.md b/docs/index.md
@@ -281,6 +281,8 @@ $ git push --tags origin master
 A: The `anyOf`  and `oneOf` keywords are supported,  however, properties declared inside the `anyOf/oneOf` should not overlap with properties "outside" of the `anyOf/oneOf`.
 There is also special cased where you can use `oneOf` in [schema dependencies](dependencies.md#schema-dependencies), If you'd like to help improve support for these keywords, see the following issues for inspiration [#329](https://github.com/mozilla-services/react-jsonschema-form/pull/329) or [#417](https://github.com/mozilla-services/react-jsonschema-form/pull/417). See also: [#52](https://github.com/mozilla-services/react-jsonschema-form/issues/52), [#151](https://github.com/mozilla-services/react-jsonschema-form/issues/151), [#171](https://github.com/mozilla-services/react-jsonschema-form/issues/171), [#200](https://github.com/mozilla-services/react-jsonschema-form/issues/200), [#282](https://github.com/mozilla-services/react-jsonschema-form/issues/282), [#302](https://github.com/mozilla-services/react-jsonschema-form/pull/302), [#330](https://github.com/mozilla-services/react-jsonschema-form/issues/330), [#430](https://github.com/mozilla-services/react-jsonschema-form/issues/430), [#522](https://github.com/mozilla-services/react-jsonschema-form/issues/522), [#538](https://github.com/mozilla-services/react-jsonschema-form/issues/538), [#551](https://github.com/mozilla-services/react-jsonschema-form/issues/551), [#552](https://github.com/mozilla-services/react-jsonschema-form/issues/552), or [#648](https://github.com/mozilla-services/react-jsonschema-form/issues/648).
 
+In addition, "nullable" types are supported in a narrow sense: If a property declares a type of `["<some-type>", "null"]`, then `"some-type"` will be passed through as the type used to determine which widget to use for rendering the field. However, the actual rendering and handling of the field is unchanged; you are free to handle this using an approach (`'ui:emptyValue': null`, for example) best-suited to your use case.
+
 ### Q: Will react-jsonschema-form support Material, Ant-Design, Foundation, or [some other specific widget library or frontend style]?
 
 A: Probably not. We use Bootstrap v3 and it works fine for our needs. We would like for react-jsonschema-form to support other frameworks, we just don't want to support them ourselves. Ideally, these frontend styles could be added to react-jsonschema-form with a third-party library. If there is a technical limitation preventing this, please consider opening a PR. See also: [#91](https://github.com/mozilla-services/react-jsonschema-form/issues/91), [#99](https://github.com/mozilla-services/react-jsonschema-form/issues/99), [#125](https://github.com/mozilla-services/react-jsonschema-form/issues/125), [#237](https://github.com/mozilla-services/react-jsonschema-form/issues/237), [#287](https://github.com/mozilla-services/react-jsonschema-form/issues/287), [#299](https://github.com/mozilla-services/react-jsonschema-form/issues/299), [#440](https://github.com/mozilla-services/react-jsonschema-form/issues/440), [#461](https://github.com/mozilla-services/react-jsonschema-form/issues/461), [#546](https://github.com/mozilla-services/react-jsonschema-form/issues/546), [#555](https://github.com/mozilla-services/react-jsonschema-form/issues/555), [#626](https://github.com/mozilla-services/react-jsonschema-form/issues/626), and [#623](https://github.com/mozilla-services/react-jsonschema-form/pull/623).

diff --git a/playground/samples/index.js b/playground/samples/index.js
@@ -20,6 +20,7 @@ import alternatives from "./alternatives";
 import propertyDependencies from "./propertyDependencies";
 import schemaDependencies from "./schemaDependencies";
 import additionalProperties from "./additionalProperties";
+import nullable from "./nullable";
 
 export const samples = {
   Simple: simple,
@@ -44,4 +45,5 @@ export const samples = {
   "Additional Properties": additionalProperties,
   "Any Of": anyOf,
   "One Of": oneOf,
+  Nullable: nullable,
 };
diff --git a/playground/samples/nullable.js b/playground/samples/nullable.js
@@ -0,0 +1,72 @@
+module.exports = {
+  schema: {
+    title: "A registration form (nullable)",
+    description: "A simple form example using nullable types",
+    type: "object",
+    required: ["firstName", "lastName"],
+    properties: {
+      firstName: {
+        type: "string",
+        title: "First name",
+        default: "Chuck",
+      },
+      lastName: {
+        type: "string",
+        title: "Last name",
+      },
+      age: {
+        type: "integer",
+        title: "Age",
+      },
+      bio: {
+        type: ["string", "null"],
+        title: "Bio",
+      },
+      password: {
+        type: "string",
+        title: "Password",
+        minLength: 3,
+      },
+      telephone: {
+        type: "string",
+        title: "Telephone",
+        minLength: 10,
+      },
+    },
+  },
+  uiSchema: {
+    firstName: {
+      "ui:autofocus": true,
+      "ui:emptyValue": "",
+    },
+    age: {
+      "ui:widget": "updown",
+      "ui:title": "Age of person",
+      "ui:description": "(earthian year)",
+    },
+    bio: {
+      "ui:widget": "textarea",
+      "ui:placeholder":
+        "Leaving this field empty will cause formData property to be `null`",
+      "ui:emptyValue": null,
+    },
+    password: {
+      "ui:widget": "password",
+      "ui:help": "Hint: Make it strong!",
+    },
+    date: {
+      "ui:widget": "alt-datetime",
+    },
+    telephone: {
+      "ui:options": {
+        inputType: "tel",
+      },
+    },
+  },
+  formData: {
+    lastName: "Norris",
+    age: 75,
+    bio: null,
+    password: "noneed",
+  },
+};
diff --git a/src/utils.js b/src/utils.js
@@ -73,8 +73,13 @@ export function getSchemaType(schema) {
   }
 
   if (!type && schema.enum) {
-    type = "string";
+    return "string";
+  }
+
+  if (type instanceof Array && type.length === 2 && type.includes("null")) {
+    return type.find(type => type !== "null");
   }
+
   return type;
 }
 

diff --git a/test/utils_test.js b/test/utils_test.js
@@ -1485,6 +1485,18 @@ describe("utils", () => {
         schema: { const: 1 },
         expected: "number",
       },
+      {
+        schema: { type: ["string", "null"] },
+        expected: "string",
+      },
+      {
+        schema: { type: ["null", "number"] },
+        expected: "number",
+      },
+      {
+        schema: { type: ["integer", "null"] },
+        expected: "integer",
+      },
     ];
 
     it("should correctly guess the type of a schema", () => {