Array field optional sortability

README.md

@@ -33,6 +33,7 @@ A [live playground](https://mozilla-services.github.io/react-jsonschema-form/) i
         - [File widgets](#file-widgets)
            - [Multiple files](#multiple-files)
      - [Object fields ordering](#object-fields-ordering)
+     - [Array items ordering](#array-items-ordering)
      - [Custom CSS class names](#custom-css-class-names)
      - [Custom labels for enum fields](#custom-labels-for-enum-fields)
      - [Multiple choices list](#multiple-choices-list)
@@ -399,6 +400,24 @@ render((
         uiSchema={uiSchema} />
 ), document.getElementById("app"));
 ```
+### Array items ordering
+
+Array items are sortable by default. The `uiSchema` object spec allows you to disable ordering:
+
+```jsx
+const schema = {
+  type: "array",
+  properties: {
+    type: "string"
+  }
+};
+
+const uiSchema = {
+  "ui:options":  {
+    sortable: false
+  }
+};
+```
 
 ### Custom CSS class names
 

src/components/fields/ArrayField.js

@@ -337,8 +337,15 @@ class ArrayField extends Component {
     autofocus
   }) {
     const {SchemaField} = this.props.registry.fields;
-    const {disabled, readonly} = this.props;
+    const {disabled, readonly, uiSchema} = this.props;
+
+    const sortable = uiSchema["ui:options"] ? uiSchema["ui:options"].sortable : true;
+    if (!sortable) {
+      canMoveUp = false;
+      canMoveDown = false;
+    }
     const hasToolbar = removable || canMoveUp || canMoveDown;
+
     const btnStyle = {flex: 1, paddingLeft: 6, paddingRight: 6, fontWeight: "bold"};
 
     return (

test/ArrayField_test.js

@@ -157,6 +157,15 @@ describe("ArrayField", () => {
       expect(moveDownBtns[1].disabled).eql(true);
     });
 
+    it("should not be sortable when uiSchema[\"ui:options\"].sortable === false", () => {
+      const {node} = createFormComponent({schema, formData: ["foo", "bar"], uiSchema: {"ui:options": {sortable: false}}});
+      const moveUpBtns = node.querySelector(".array-item-move-up");
+      const moveDownBtns = node.querySelector(".array-item-move-down");
+
+      expect(moveUpBtns).to.be.null;
+      expect(moveDownBtns).to.be.null;
+    });
+
     it("should remove a field from the list", () => {
       const {node} = createFormComponent({schema, formData: ["foo", "bar"]});
       const dropBtns = node.querySelectorAll(".array-item-remove");