Fixes #10: Added support for integer fields.

Author: n1k0

playground/samples/index.js

@@ -1,11 +1,13 @@
 import arrays from "./arrays";
 import nested from "./nested";
+import numbers from "./numbers";
 import simple from "./simple";
 import widgets from "./widgets";
 
 export const samples = {
   Simple: simple,
   Nested: nested,
   Arrays: arrays,
+  Numbers: numbers,
   Widgets: widgets,
 };

playground/samples/numbers.js

@@ -0,0 +1,26 @@
+module.exports = {
+  schema: {
+    type: "object",
+    properties: {
+      number: {
+        title: "Number",
+        type: "number"
+      },
+      integer: {
+        title: "Integer",
+        type: "integer"
+      },
+      numberEnum: {
+        type: "number",
+        title: "Number enum",
+        enum: [1, 2, 3]
+      }
+    }
+  },
+  uiSchema: {},
+  formData: {
+    number: 3.14,
+    integer: 42,
+    numberEnum: 2
+  }
+};

src/components/fields/NumberField.js

@@ -0,0 +1,26 @@
+import React, { PropTypes } from "react";
+
+import { asNumber } from "../../utils";
+import StringField from "./StringField";
+
+function NumberField(props) {
+  return (
+    <StringField {...props}
+      onChange={(value) => props.onChange(asNumber(value))} />
+  );
+}
+
+if (process.env.NODE_ENV !== "production") {
+  NumberField.propTypes = {
+    schema: PropTypes.object.isRequired,
+    onChange: PropTypes.func.isRequired,
+    formData: PropTypes.number,
+    required: PropTypes.bool,
+  };
+}
+
+NumberField.defaultProps = {
+  uiSchema: {}
+};
+
+export default NumberField;

src/components/fields/SchemaField.js

@@ -1,19 +1,21 @@
 import React, { PropTypes } from "react";
 
-import StringField from "./StringField";
 import ArrayField from "./ArrayField";
 import BooleanField from "./BooleanField";
+import NumberField from "./NumberField";
 import ObjectField from "./ObjectField";
+import StringField from "./StringField";
 import UnsupportedField from "./UnsupportedField";
 
 
 const COMPONENT_TYPES = {
-  "string":    StringField,
   "array":     ArrayField,
   "boolean":   BooleanField,
-  "object":    ObjectField,
   "date-time": StringField,
-  "number":    StringField,
+  "integer":   NumberField,
+  "number":    NumberField,
+  "object":    ObjectField,
+  "string":    StringField,
 };
 
 function SchemaField(props) {

src/components/fields/StringField.js

@@ -35,7 +35,10 @@ if (process.env.NODE_ENV !== "production") {
   StringField.propTypes = {
     schema: PropTypes.object.isRequired,
     onChange: PropTypes.func.isRequired,
-    formData: PropTypes.string,
+    formData: PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.number,
+    ]),
     required: PropTypes.bool,
   };
 }

src/components/widgets/SelectWidget.js

@@ -1,5 +1,6 @@
 import React, { PropTypes } from "react";
 
+import { asNumber } from "../../utils";
 import Wrapper from "./../widgets/Wrapper";
 
 
@@ -11,7 +12,7 @@ function processValue(type, value) {
   if (type === "boolean") {
     return value === "true";
   } else if (type === "number") {
-    return value === Number(value);
+    return asNumber(value);
   }
   return value;
 }

src/components/widgets/TextWidget.js

@@ -29,8 +29,14 @@ if (process.env.NODE_ENV !== "production") {
     type: PropTypes.string.isRequired,
     label: PropTypes.string,
     placeholder: PropTypes.string,
-    value: PropTypes.string,
-    defaultValue: PropTypes.string,
+    value: PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.number,
+    ]),
+    defaultValue: PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.number,
+    ]),
     required: PropTypes.bool,
     onChange: PropTypes.func,
   };

src/utils.js

@@ -43,3 +43,9 @@ export function getDefaultFormState(schema) {
   }
   return defaultTypeValue(schema.type);
 }
+
+export function asNumber(value) {
+  const n = Number(value);
+  const valid = typeof n === "number" && !Number.isNaN(n);
+  return valid ? n : value;
+}

test/index_test.js

@@ -174,6 +174,136 @@ describe("Form", () => {
     });
   });
 
+  describe("NumberField", () => {
+    describe("TextWidget", () => {
+      it("should render a string field", () => {
+        const {node} = createComponent({schema: {
+          type: "number"
+        }});
+
+        expect(node.querySelectorAll(".field input[type=text]"))
+          .to.have.length.of(1);
+      });
+
+      it("should render a string field with a label", () => {
+        const {node} = createComponent({schema: {
+          type: "number",
+          title: "foo"
+        }});
+
+        expect(node.querySelector(".field label > span").textContent)
+          .eql("foo");
+      });
+
+      it("should render a string field with a placeholder", () => {
+        const {node} = createComponent({schema: {
+          type: "number",
+          description: "bar",
+        }});
+
+        expect(node.querySelector(".field input").getAttribute("placeholder"))
+          .eql("bar");
+      });
+
+      it("should assign a default value", () => {
+        const {node} = createComponent({schema: {
+          type: "number",
+          default: 2,
+        }});
+
+        expect(node.querySelector(".field input").getAttribute("value"))
+          .eql("2");
+      });
+
+      it("should handle a change event", () => {
+        const {comp, node} = createComponent({schema: {
+          type: "number",
+        }});
+
+        Simulate.change(node.querySelector("input"), {
+          target: {value: "2"}
+        });
+
+        expect(comp.state.formData).eql(2);
+      });
+
+      it("should fill field with data", () => {
+        const {node} = createComponent({schema: {
+          type: "number",
+        }, formData: 2});
+
+        expect(node.querySelector(".field input").getAttribute("value"))
+          .eql("2");
+      });
+    });
+
+    describe("SelectWidget", () => {
+      it("should render a number field", () => {
+        const {node} = createComponent({schema: {
+          type: "number",
+          enum: [1, 2]
+        }});
+
+        expect(node.querySelectorAll(".field select"))
+          .to.have.length.of(1);
+      });
+
+      it("should render a string field with a label", () => {
+        const {node} = createComponent({schema: {
+          type: "number",
+          enum: [1, 2],
+          title: "foo",
+        }});
+
+        expect(node.querySelector(".field label > span").textContent)
+          .eql("foo");
+      });
+
+      it("should render a select field with a tooltip", () => {
+        const {node} = createComponent({schema: {
+          type: "number",
+          enum: [1, 2],
+          description: "baz",
+        }});
+
+        expect(node.querySelector(".field select").getAttribute("title"))
+          .eql("baz");
+      });
+
+      it("should assign a default value", () => {
+        const {comp} = createComponent({schema: {
+          type: "number",
+          enum: [1, 2],
+          default: 1,
+        }});
+
+        expect(comp.state.formData).eql(1);
+      });
+
+      it("should handle a change event", () => {
+        const {comp, node} = createComponent({schema: {
+          type: "number",
+          enum: [1, 2],
+        }});
+
+        Simulate.change(node.querySelector("select"), {
+          target: {value: "2"}
+        });
+
+        expect(comp.state.formData).eql(2);
+      });
+
+      it("should fill field with data", () => {
+        const {comp} = createComponent({schema: {
+          type: "number",
+          enum: [1, 2],
+        }, formData: 2});
+
+        expect(comp.state.formData).eql(2);
+      });
+    });
+  });
+
   describe("BooleanField", () => {
     it("should render a boolean field", () => {
       const {node} = createComponent({schema: {