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 orderable by default, and react-jsonschema-form renders move up/down buttons alongside them. The `uiSchema` object spec allows you to disable ordering:
+
+```jsx
+const schema = {
+  type: "array",
+  properties: {
+    type: "string"
+  }
+};
+
+const uiSchema = {
+  "ui:options":  {
+    orderable: 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 hasToolbar = removable || canMoveUp || canMoveDown;
+    const {disabled, readonly, uiSchema} = this.props;
+
+    const {orderable} = {orderable: true, ...uiSchema["ui:options"]};
+
+    const _canMoveUp = orderable && canMoveUp;
+    const _canMoveDown = orderable && canMoveDown;
+
+    const hasToolbar = removable || _canMoveUp || _canMoveDown;
+
     const btnStyle = {flex: 1, paddingLeft: 6, paddingRight: 6, fontWeight: "bold"};
 
     return (
@@ -361,18 +368,18 @@ class ArrayField extends Component {
           hasToolbar ?
             <div className="col-xs-2 array-item-toolbox text-right">
               <div className="btn-group" style={{display: "flex"}}>
-                {canMoveUp || canMoveDown ?
+                {_canMoveUp || _canMoveDown ?
                   <button type="button" className="btn btn-default array-item-move-up"
                           style={btnStyle}
                           tabIndex="-1"
-                          disabled={disabled || readonly || !canMoveUp}
+                          disabled={disabled || readonly || !_canMoveUp}
                           onClick={this.onReorderClick(index, index - 1)}>⬆</button>
                   : null}
-                {canMoveUp || canMoveDown ?
+                {_canMoveUp || _canMoveDown ?
                   <button type="button" className="btn btn-default array-item-move-down"
                           style={btnStyle}
                           tabIndex="-1"
-                          disabled={disabled || readonly || !canMoveDown}
+                          disabled={disabled || readonly || !_canMoveDown}
                           onClick={this.onReorderClick(index, index + 1)}>⬇</button>
                   : null}
                 {removable ?
@@ -406,7 +413,11 @@ function AddButton({onClick, disabled}) {
 if (process.env.NODE_ENV !== "production") {
   ArrayField.propTypes = {
     schema: PropTypes.object.isRequired,
-    uiSchema: PropTypes.object,
+    uiSchema: PropTypes.shape({
+      "ui:options": PropTypes.shape({
+        orderable: PropTypes.bool
+      })
+    }),
     idSchema: PropTypes.object,
     errorSchema: PropTypes.object,
     onChange: PropTypes.func.isRequired,

test/ArrayField_test.js

@@ -157,6 +157,15 @@ describe("ArrayField", () => {
       expect(moveDownBtns[1].disabled).eql(true);
     });
 
+    it("should not show move up/down buttons is orderable is false", () => {
+      const {node} = createFormComponent({schema, formData: ["foo", "bar"], uiSchema: {"ui:options": {orderable: 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");