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 ?