Converts ResizeMirror to typescript

.changeset/long-walls-trade.md

@@ -0,0 +1,5 @@
+---
+'@shopify/draggable': patch
+---
+
+Converts ResizeMirror to typescript

src/Draggable/DragEvent/DragEvent.ts

@@ -158,6 +158,12 @@ export class DragOverEvent extends DragEvent<DragOverEventData> {
   }
 }
 
+export function isDragOverEvent(
+  event: AbstractEvent<unknown>,
+): event is DragOverEvent {
+  return event.type === DragOverEvent.type;
+}
+
 /**
  * DragOutEventData
  * @interface DragOutEventData
@@ -203,7 +209,6 @@ export class DragOutEvent extends DragEvent<DragOutEventData> {
  */
 interface DragOverContainerEventData extends DragEventData {
   overContainer: HTMLElement;
-  over: HTMLElement;
 }
 
 /**

src/Plugins/ResizeMirror/ResizeMirror.js → src/Plugins/ResizeMirror/ResizeMirror.ts

@@ -1,10 +1,11 @@
 import AbstractPlugin from 'shared/AbstractPlugin';
 import {requestNextAnimationFrame} from 'shared/utils';
 
-const onMirrorCreated = Symbol('onMirrorCreated');
-const onMirrorDestroy = Symbol('onMirrorDestroy');
-const onDragOver = Symbol('onDragOver');
-const resize = Symbol('resize');
+import {
+  DragOverEvent,
+  DragOverContainerEvent,
+  isDragOverEvent,
+} from '../../Draggable/DragEvent';
 
 /**
  * ResizeMirror default options
@@ -20,24 +21,17 @@ export const defaultOptions = {};
  * @extends AbstractPlugin
  */
 export default class ResizeMirror extends AbstractPlugin {
+  private lastWidth: number;
+  private lastHeight: number;
+  private mirror: HTMLElement | null;
   /**
    * ResizeMirror constructor.
    * @constructs ResizeMirror
    * @param {Draggable} draggable - Draggable instance
    */
-  constructor(draggable) {
+  constructor(draggable: any) {
     super(draggable);
 
-    /**
-     * ResizeMirror options
-     * @property {Object} options
-     * @type {Object}
-     */
-    this.options = {
-      ...defaultOptions,
-      ...this.getOptions(),
-    };
-
     /**
      * ResizeMirror remembers the last width when resizing the mirror
      * to avoid additional writes to the DOM
@@ -58,30 +52,30 @@ export default class ResizeMirror extends AbstractPlugin {
      */
     this.mirror = null;
 
-    this[onMirrorCreated] = this[onMirrorCreated].bind(this);
-    this[onMirrorDestroy] = this[onMirrorDestroy].bind(this);
-    this[onDragOver] = this[onDragOver].bind(this);
+    this.onMirrorCreated = this.onMirrorCreated.bind(this);
+    this.onMirrorDestroy = this.onMirrorDestroy.bind(this);
+    this.onDragOver = this.onDragOver.bind(this);
   }
 
   /**
    * Attaches plugins event listeners
    */
   attach() {
     this.draggable
-      .on('mirror:created', this[onMirrorCreated])
-      .on('drag:over', this[onDragOver])
-      .on('drag:over:container', this[onDragOver]);
+      .on('mirror:created', this.onMirrorCreated)
+      .on('drag:over', this.onDragOver)
+      .on('drag:over:container', this.onDragOver);
   }
 
   /**
    * Detaches plugins event listeners
    */
   detach() {
     this.draggable
-      .off('mirror:created', this[onMirrorCreated])
-      .off('mirror:destroy', this[onMirrorDestroy])
-      .off('drag:over', this[onDragOver])
-      .off('drag:over:container', this[onDragOver]);
+      .off('mirror:created', this.onMirrorCreated)
+      .off('mirror:destroy', this.onMirrorDestroy)
+      .off('drag:over', this.onDragOver)
+      .off('drag:over:container', this.onDragOver);
   }
 
   /**
@@ -97,7 +91,7 @@ export default class ResizeMirror extends AbstractPlugin {
    * @param {MirrorCreatedEvent} mirrorEvent
    * @private
    */
-  [onMirrorCreated]({mirror}) {
+  private onMirrorCreated({mirror}: any) {
     this.mirror = mirror;
   }
 
@@ -106,7 +100,7 @@ export default class ResizeMirror extends AbstractPlugin {
    * @param {MirrorDestroyEvent} mirrorEvent
    * @private
    */
-  [onMirrorDestroy]() {
+  private onMirrorDestroy() {
     this.mirror = null;
   }
 
@@ -115,25 +109,32 @@ export default class ResizeMirror extends AbstractPlugin {
    * @param {DragOverEvent | DragOverContainer} dragEvent
    * @private
    */
-  [onDragOver](dragEvent) {
-    this[resize](dragEvent);
+  private onDragOver(dragEvent: DragOverEvent | DragOverContainerEvent) {
+    this.resize(dragEvent);
   }
 
   /**
    * Resize function for
    * @param {DragOverEvent | DragOverContainer} dragEvent
    * @private
    */
-  [resize]({overContainer, over}) {
+  private resize(dragEvent: DragOverEvent | DragOverContainerEvent) {
     requestAnimationFrame(() => {
-      if (!this.mirror.parentNode) {
+      let over: HTMLElement | null = null;
+      const {overContainer} = dragEvent;
+
+      if (this.mirror == null || this.mirror.parentNode == null) {
         return;
       }
 
       if (this.mirror.parentNode !== overContainer) {
         overContainer.appendChild(this.mirror);
       }
 
+      if (isDragOverEvent(dragEvent)) {
+        over = dragEvent.over;
+      }
+
       const overElement =
         over ||
         this.draggable.getDraggableElementsForContainer(overContainer)[0];
@@ -146,8 +147,9 @@ export default class ResizeMirror extends AbstractPlugin {
         const overRect = overElement.getBoundingClientRect();
 
         if (
-          this.lastHeight === overRect.height &&
-          this.lastWidth === overRect.width
+          this.mirror == null ||
+          (this.lastHeight === overRect.height &&
+            this.lastWidth === overRect.width)
         ) {
           return;
         }