diff --git a/README.md b/README.md index 1f5c0aed2c..9411e6a2c8 100644 --- a/README.md +++ b/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 diff --git a/src/components/fields/ArrayField.js b/src/components/fields/ArrayField.js index d007e64a85..43ca701f33 100644 --- a/src/components/fields/ArrayField.js +++ b/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 ?
- {canMoveUp || canMoveDown ? + {_canMoveUp || _canMoveDown ? : null} - {canMoveUp || canMoveDown ? + {_canMoveUp || _canMoveDown ? : 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, diff --git a/test/ArrayField_test.js b/test/ArrayField_test.js index 27806e2328..8bf140ad32 100644 --- a/test/ArrayField_test.js +++ b/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");