Implement ordering controls on StreamBlock

client/src/components/StreamField/blocks/BaseSequenceBlock.js

@@ -10,6 +10,8 @@ export class BaseSequenceChild {
 
     const animate = opts && opts.animate;
     this.onRequestDelete = opts && opts.onRequestDelete;
+    this.onRequestMoveUp = opts && opts.onRequestMoveUp;
+    this.onRequestMoveDown = opts && opts.onRequestMoveDown;
 
     const dom = $(`
       <div aria-hidden="false">
@@ -65,7 +67,13 @@ export class BaseSequenceChild {
     this.indexInput = dom.find(`input[name="${this.prefix}-order"]`);
 
     this.moveUpButton = dom.find('button[data-move-up-button]');
+    this.moveUpButton.click(() => {
+      if (this.onRequestMoveUp) this.onRequestMoveUp(this.index);
+    });
     this.moveDownButton = dom.find('button[data-move-down-button]');
+    this.moveDownButton.click(() => {
+      if (this.onRequestMoveDown) this.onRequestMoveDown(this.index);
+    });
 
     this.block = this.blockDef.render(blockElement, this.prefix + '-value', initialState);
 

client/src/components/StreamField/blocks/StreamBlock.js

@@ -235,7 +235,9 @@ export class StreamBlock {
 
     const child = new StreamChild(blockDef, blockPlaceholder, prefix, index, id, value, {
       animate,
-      onRequestDelete: (i) => { this.deleteBlock(i); }
+      onRequestDelete: (i) => { this.deleteBlock(i); },
+      onRequestMoveUp: (i) => { this.moveBlock(i, i - 1); },
+      onRequestMoveDown: (i) => { this.moveBlock(i, i + 1); },
     });
     this.children.splice(index, 0, child);
 
@@ -308,6 +310,58 @@ export class StreamBlock {
     }
   }
 
+  moveBlock(oldIndex, newIndex) {
+    if (oldIndex === newIndex) return;
+    const menuToMove = this.menus[oldIndex];
+    const childToMove = this.children[oldIndex];
+
+    /* move HTML elements */
+    if (newIndex > oldIndex) {
+      $(menuToMove.element).insertAfter(this.children[newIndex].element);
+    } else {
+      $(menuToMove.element).insertBefore(this.menus[newIndex].element);
+    }
+    $(childToMove.element).insertAfter(menuToMove.element);
+
+    /* reorder items in the `menus` and `children` arrays */
+    this.menus.splice(oldIndex, 1);
+    this.menus.splice(newIndex, 0, menuToMove);
+    this.children.splice(oldIndex, 1);
+    this.children.splice(newIndex, 0, childToMove);
+
+    /* update index properties of moved items */
+    if (newIndex > oldIndex) {
+      for (let i = oldIndex; i <= newIndex; i++) {
+        this.menus[i].setIndex(i);
+        this.children[i].setIndex(i);
+      }
+    } else {
+      for (let i = newIndex; i <= oldIndex; i++) {
+        this.menus[i].setIndex(i);
+        this.children[i].setIndex(i);
+      }
+    }
+
+    /* enable/disable up/down arrows as required */
+    const maxIndex = this.children.length - 1;
+    if (oldIndex === 0) {
+      childToMove.enableMoveUp();
+      this.children[0].disableMoveUp();
+    }
+    if (oldIndex === maxIndex) {
+      childToMove.enableMoveDown();
+      this.children[maxIndex].disableMoveDown();
+    }
+    if (newIndex === 0) {
+      childToMove.disableMoveUp();
+      this.children[1].enableMoveUp();
+    }
+    if (newIndex === maxIndex) {
+      childToMove.disableMoveDown();
+      this.children[maxIndex - 1].enableMoveDown();
+    }
+  }
+
   setState(values) {
     this.clear();
     values.forEach((val, i) => {