From 2a8ae0b219beceb3338764afe25c2d6a9fe4f495 Mon Sep 17 00:00:00 2001 From: Max Hoffmann Date: Fri, 22 Sep 2023 12:56:26 -0700 Subject: [PATCH] Converts ResizeMirror to typescript --- .changeset/long-walls-trade.md | 5 ++ src/Draggable/DragEvent/DragEvent.ts | 7 +- .../DragEvent/{index.js => index.ts} | 0 .../{ResizeMirror.js => ResizeMirror.ts} | 68 ++++++++++--------- .../ResizeMirror/{index.js => index.ts} | 0 5 files changed, 46 insertions(+), 34 deletions(-) create mode 100644 .changeset/long-walls-trade.md rename src/Draggable/DragEvent/{index.js => index.ts} (100%) rename src/Plugins/ResizeMirror/{ResizeMirror.js => ResizeMirror.ts} (66%) rename src/Plugins/ResizeMirror/{index.js => index.ts} (100%) diff --git a/.changeset/long-walls-trade.md b/.changeset/long-walls-trade.md new file mode 100644 index 00000000..67a2f170 --- /dev/null +++ b/.changeset/long-walls-trade.md @@ -0,0 +1,5 @@ +--- +'@shopify/draggable': patch +--- + +Converts ResizeMirror to typescript diff --git a/src/Draggable/DragEvent/DragEvent.ts b/src/Draggable/DragEvent/DragEvent.ts index 22724d4d..40d90292 100644 --- a/src/Draggable/DragEvent/DragEvent.ts +++ b/src/Draggable/DragEvent/DragEvent.ts @@ -158,6 +158,12 @@ export class DragOverEvent extends DragEvent { } } +export function isDragOverEvent( + event: AbstractEvent, +): event is DragOverEvent { + return event.type === DragOverEvent.type; +} + /** * DragOutEventData * @interface DragOutEventData @@ -203,7 +209,6 @@ export class DragOutEvent extends DragEvent { */ interface DragOverContainerEventData extends DragEventData { overContainer: HTMLElement; - over: HTMLElement; } /** diff --git a/src/Draggable/DragEvent/index.js b/src/Draggable/DragEvent/index.ts similarity index 100% rename from src/Draggable/DragEvent/index.js rename to src/Draggable/DragEvent/index.ts diff --git a/src/Plugins/ResizeMirror/ResizeMirror.js b/src/Plugins/ResizeMirror/ResizeMirror.ts similarity index 66% rename from src/Plugins/ResizeMirror/ResizeMirror.js rename to src/Plugins/ResizeMirror/ResizeMirror.ts index 4ff6e813..60afe7bb 100644 --- a/src/Plugins/ResizeMirror/ResizeMirror.js +++ b/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,9 +52,9 @@ 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); } /** @@ -68,9 +62,9 @@ export default class ResizeMirror extends AbstractPlugin { */ 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); } /** @@ -78,10 +72,10 @@ export default class ResizeMirror extends AbstractPlugin { */ 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,8 +109,8 @@ export default class ResizeMirror extends AbstractPlugin { * @param {DragOverEvent | DragOverContainer} dragEvent * @private */ - [onDragOver](dragEvent) { - this[resize](dragEvent); + private onDragOver(dragEvent: DragOverEvent | DragOverContainerEvent) { + this.resize(dragEvent); } /** @@ -124,9 +118,12 @@ export default class ResizeMirror extends AbstractPlugin { * @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; } @@ -134,6 +131,10 @@ export default class ResizeMirror extends AbstractPlugin { 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; } diff --git a/src/Plugins/ResizeMirror/index.js b/src/Plugins/ResizeMirror/index.ts similarity index 100% rename from src/Plugins/ResizeMirror/index.js rename to src/Plugins/ResizeMirror/index.ts