Merge pull request #572 from Shopify/test-changesets

[Test Changesets] 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;
  }