Array field optional sortability (rjsf-team#345)

Author: olzraiti

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

@@ -338,8 +338,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 (
@@ -362,18 +369,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 ?
@@ -407,7 +414,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");