Merge most of ListChild and StreamChild into BaseSequenceChild

client/src/entrypoints/admin/telepath/blocks.js

@@ -244,10 +244,7 @@ class StructBlockValidationError {
 window.telepath.register('wagtail.blocks.StructBlockValidationError', StructBlockValidationError);
 
 
-class ListChild {
-  /*
-  wrapper for an item inside a ListBlock
-  */
+class BaseSequenceChild {
   constructor(blockDef, placeholder, prefix, index, id, initialState, opts) {
     this.blockDef = blockDef;
     this.type = blockDef.name;
@@ -335,6 +332,15 @@ class ListChild {
     this.block.setError(error);
   }
 
+  focus() {
+    this.block.focus();
+  }
+}
+
+class ListChild extends BaseSequenceChild {
+  /*
+  wrapper for an item inside a ListBlock
+  */
   getState() {
     return this.block.getState();
   }
@@ -342,10 +348,6 @@ class ListChild {
   getValue() {
     return this.block.getValue();
   }
-
-  focus() {
-    this.block.focus();
-  }
 }
 
 class ListBlock {
@@ -480,97 +482,11 @@ class ListBlockValidationError {
 window.telepath.register('wagtail.blocks.ListBlockValidationError', ListBlockValidationError);
 
 
-class StreamChild {
+class StreamChild extends BaseSequenceChild {
   /*
   wrapper for a block inside a StreamBlock, handling StreamBlock-specific metadata
   such as id
   */
-  constructor(blockDef, placeholder, prefix, index, id, state, opts) {
-    this.blockDef = blockDef;
-    this.type = blockDef.name;
-    this.prefix = prefix;
-    this.index = index;
-    this.id = id;
-
-    const animate = opts && opts.animate;
-    this.onRequestDelete = opts && opts.onRequestDelete;
-
-    const dom = $(`
-      <div aria-hidden="false">
-        <input type="hidden" name="${this.prefix}-deleted" value="">
-        <input type="hidden" name="${this.prefix}-order" value="${index}">
-        <input type="hidden" name="${this.prefix}-type" value="${this.type}">
-        <input type="hidden" name="${this.prefix}-id" value="${this.id || ''}">
-
-        <div>
-          <div class="c-sf-container__block-container">
-            <div class="c-sf-block">
-              <div class="c-sf-block__header">
-                <span class="c-sf-block__header__icon">
-                  <i class="icon icon-${this.blockDef.meta.icon}"></i>
-                </span>
-                <h3 class="c-sf-block__header__title"></h3>
-                <div class="c-sf-block__actions">
-                  <span class="c-sf-block__type">${this.blockDef.meta.label}</span>
-                  <button type="button" class="c-sf-block__actions__single" title="{% trans 'Move up' %}">
-                    <i class="icon icon-arrow-up" aria-hidden="true"></i>
-                  </button>
-                  <button type="button" class="c-sf-block__actions__single" title="{% trans 'Move down' %}">
-                    <i class="icon icon-arrow-down" aria-hidden="true"></i>
-                  </button>
-                  <button type="button" data-delete-button
-                      class="c-sf-block__actions__single" title="{% trans 'Delete' %}">
-                    <i class="icon icon-bin" aria-hidden="true"></i>
-                  </button>
-                </div>
-              </div>
-              <div class="c-sf-block__content" aria-hidden="false">
-                <div class="c-sf-block__content-inner">
-                  <div data-streamfield-block></div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    `);
-    $(placeholder).replaceWith(dom);
-    this.element = dom.get(0);
-    const blockElement = dom.find('[data-streamfield-block]').get(0);
-    this.block = this.blockDef.render(blockElement, this.prefix + '-value', state);
-
-    this.deletedInput = dom.find(`input[name="${this.prefix}-deleted"]`);
-    this.indexInput = dom.find(`input[name="${this.prefix}-order"]`);
-
-    dom.find('button[data-delete-button]').click(() => {
-      if (this.onRequestDelete) this.onRequestDelete(this.index);
-    });
-
-    if (animate) {
-      dom.hide().slideDown();
-    }
-  }
-
-  markDeleted(opts) {
-    this.deletedInput.val('1');
-    if (opts && opts.animate) {
-      $(this.element).slideUp().dequeue()
-        .fadeOut()
-        .attr('aria-hidden', 'true');
-    } else {
-      $(this.element).hide().attr('aria-hidden', 'true');
-    }
-  }
-
-  setIndex(newIndex) {
-    this.index = newIndex;
-    this.indexInput.val(newIndex);
-  }
-
-  setError(errorList) {
-    this.block.setError(errorList);
-  }
-
   getState() {
     return {
       type: this.type,
@@ -586,10 +502,6 @@ class StreamChild {
       id: this.id,
     };
   }
-
-  focus() {
-    this.block.focus();
-  }
 }
 
 class StreamBlockMenu {