Added object properties ordering to uiSchema.

Author: n1k0

README.md

@@ -75,7 +75,7 @@ That should give something like this (if you use the default stylesheet):
 
 ### Alternative widgets
 
-JSONSchema is limited for describing how a given data type should be rendered as an input component, that's why this lib introduces the concept of *UI schema*. A UI schema is basically an object literal describing which UI widget should be used to render a certain field
+JSONSchema is limited for describing how a given data type should be rendered as an input component, that's why this lib introduces the concept of *UI schema*. A UI schema is basically an object literal describing which UI widget should be used to render a certain field.
 
 Example:
 
@@ -115,6 +115,29 @@ Here's a list of supported alternative widgets for different JSONSchema data typ
 
 > Note: for numbers, `min`, `max` and `step` input attributes values will be handled according to JSONSchema's `minimum`, `maximium` and `multipleOf` values when they're defined.
 
+## Object fields ordering
+
+The `uiSchema` object spec also allows you to define in which order a given object field properties should be rendered using the `order` property:
+
+```jsx
+const schema = {
+  type: "object",
+  properties: {
+    foo: {type: "string"},
+    bar: {type: "string"}
+  }
+};
+
+const uiSchema = {
+  order: ["bar", "foo"]
+};
+
+render((
+  <Form schema={schema}
+        uiSchema={uiSchema} />
+), document.getElementById("app"));
+```
+
 ## Custom styles
 
 The UISchema object accepts a `classNames` property for each field of the schema:

playground/samples/index.js

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

playground/samples/ordering.js

@@ -0,0 +1,48 @@
+module.exports = {
+  schema: {
+    title: "A registration form",
+    type: "object",
+    required: ["firstName", "lastName"],
+    properties: {
+      password: {
+        type: "string",
+        title: "Password"
+      },
+      lastName: {
+        type: "string",
+        title: "Last name",
+      },
+      bio: {
+        type: "string",
+        title: "Bio",
+      },
+      firstName: {
+        type: "string",
+        title: "First name",
+      },
+      age: {
+        type: "integer",
+        title: "Age"
+      },
+    }
+  },
+  uiSchema: {
+    order: ["firstName", "lastName", "age", "bio", "password"],
+    age: {
+      widget: "updown"
+    },
+    bio: {
+      widget: "textarea"
+    },
+    password: {
+      widget: "password"
+    }
+  },
+  formData: {
+    firstName: "Chuck",
+    lastName: "Norris",
+    age: 75,
+    bio: "Roundhouse kicking asses since 1940",
+    password: "noneed",
+  }
+};

src/components/fields/ObjectField.js

@@ -1,6 +1,6 @@
 import React, { Component, PropTypes } from "react";
 
-import { getDefaultFormState } from "../../utils";
+import { getDefaultFormState, orderProperties } from "../../utils";
 
 
 class ObjectField extends Component {
@@ -40,13 +40,15 @@ class ObjectField extends Component {
     const {schema, uiSchema, name} = this.props;
     const title = name || schema.title;
     const SchemaField = this.props.SchemaField;
+    const orderedProperties = orderProperties(
+      Object.keys(schema.properties), uiSchema.order);
     return (
       <fieldset>
         {title ? <legend>{title}</legend> : null}
         {schema.description ?
           <div className="field-description">{schema.description}</div> : null}
         {
-        Object.keys(schema.properties).map((name, index) => {
+        orderedProperties.map((name, index) => {
           return (
             <SchemaField key={index}
               name={name}

src/utils.js

@@ -80,3 +80,19 @@ export function asNumber(value) {
   const valid = typeof n === "number" && !Number.isNaN(n);
   return valid ? n : value;
 }
+
+export function orderProperties(properties, order) {
+  if (!Array.isArray(order)) {
+    return properties;
+  }
+  if (order.length !== properties.length) {
+    throw new Error(
+      "uiSchema order list length should match object properties length");
+  }
+  if ([].slice.call(order).sort().toString() !==
+      [].slice.call(properties).sort().toString()) {
+    throw new Error(
+      "uiSchema order list does not match object properties list");
+  }
+  return order;
+}

test/index_test.js

@@ -61,6 +61,42 @@ describe("Form", () => {
     });
   });
 
+  describe("Object fields ordering", () => {
+    const schema = {
+      type: "object",
+      properties: {
+        foo: {type: "string"},
+        bar: {type: "string"}
+      }
+    };
+
+    it("should use provided order", () => {
+      const {node} = createComponent({schema, uiSchema: {
+        order: ["bar", "foo"]
+      }});
+      const labels = [].map.call(
+        node.querySelectorAll(".field > label"), l => l.textContent);
+
+      expect(labels).eql(["bar", "foo"]);
+    });
+
+    it("should throw when order list length mismatches", () => {
+      expect(() => {
+        createComponent({schema, uiSchema: {
+          order: ["bar", "foo", "baz?"]
+        }});
+      }).to.Throw(Error, /should match object properties length/);
+    });
+
+    it("should throw when order and properties lists differs", () => {
+      expect(() => {
+        createComponent({schema, uiSchema: {
+          order: ["bar", "wut?"]
+        }});
+      }).to.Throw(Error, /does not match object properties list/);
+    });
+  });
+
   describe("StringField", () => {
     describe("TextWidget", () => {
       it("should render a string field", () => {