From cc42520a2731191ae6459a22892d9c1da605b80d Mon Sep 17 00:00:00 2001 From: Max Hoffmann Date: Wed, 27 Sep 2023 09:49:53 -0700 Subject: [PATCH 1/9] Converts DraggableEvent to typescript --- .changeset/young-drinks-call.md | 5 +++++ .../{DraggableEvent.js => DraggableEvent.ts} | 11 ++++++++++- src/Draggable/DraggableEvent/{index.js => index.ts} | 0 3 files changed, 15 insertions(+), 1 deletion(-) create mode 100644 .changeset/young-drinks-call.md rename src/Draggable/DraggableEvent/{DraggableEvent.js => DraggableEvent.ts} (78%) rename src/Draggable/DraggableEvent/{index.js => index.ts} (100%) diff --git a/.changeset/young-drinks-call.md b/.changeset/young-drinks-call.md new file mode 100644 index 00000000..ca56250e --- /dev/null +++ b/.changeset/young-drinks-call.md @@ -0,0 +1,5 @@ +--- +'@shopify/draggable': patch +--- + +Converts DraggableEvent to typescript diff --git a/src/Draggable/DraggableEvent/DraggableEvent.js b/src/Draggable/DraggableEvent/DraggableEvent.ts similarity index 78% rename from src/Draggable/DraggableEvent/DraggableEvent.js rename to src/Draggable/DraggableEvent/DraggableEvent.ts index 0e58a046..6c211d5f 100644 --- a/src/Draggable/DraggableEvent/DraggableEvent.js +++ b/src/Draggable/DraggableEvent/DraggableEvent.ts @@ -1,4 +1,13 @@ import AbstractEvent from 'shared/AbstractEvent'; +import {FixMeAny} from 'shared/types'; + +/** + * DraggableEventData + * @interface DraggableEventData + */ +interface DraggableEventData { + draggable: FixMeAny; +} /** * Base draggable event @@ -6,7 +15,7 @@ import AbstractEvent from 'shared/AbstractEvent'; * @module DraggableEvent * @extends AbstractEvent */ -export class DraggableEvent extends AbstractEvent { +export class DraggableEvent extends AbstractEvent { static type = 'draggable'; /** diff --git a/src/Draggable/DraggableEvent/index.js b/src/Draggable/DraggableEvent/index.ts similarity index 100% rename from src/Draggable/DraggableEvent/index.js rename to src/Draggable/DraggableEvent/index.ts From 527dcb67d50978ac81576603a57e42d77fff1eec Mon Sep 17 00:00:00 2001 From: Max Hoffmann Date: Wed, 27 Sep 2023 19:25:36 -0700 Subject: [PATCH 2/9] Converts MirrorEvent to typescript --- .changeset/warm-jars-tickle.md | 5 ++ src/Draggable/DragEvent/DragEvent.ts | 2 +- .../{MirrorEvent.js => MirrorEvent.ts} | 60 ++++++++++++++++--- .../Mirror/MirrorEvent/{index.js => index.ts} | 0 4 files changed, 59 insertions(+), 8 deletions(-) create mode 100644 .changeset/warm-jars-tickle.md rename src/Draggable/Plugins/Mirror/MirrorEvent/{MirrorEvent.js => MirrorEvent.ts} (70%) rename src/Draggable/Plugins/Mirror/MirrorEvent/{index.js => index.ts} (100%) diff --git a/.changeset/warm-jars-tickle.md b/.changeset/warm-jars-tickle.md new file mode 100644 index 00000000..b940860f --- /dev/null +++ b/.changeset/warm-jars-tickle.md @@ -0,0 +1,5 @@ +--- +'@shopify/draggable': patch +--- + +Converts MirrorEvent to typescript diff --git a/src/Draggable/DragEvent/DragEvent.ts b/src/Draggable/DragEvent/DragEvent.ts index e7b5584d..4c7dc5a6 100644 --- a/src/Draggable/DragEvent/DragEvent.ts +++ b/src/Draggable/DragEvent/DragEvent.ts @@ -5,7 +5,7 @@ import {FixMeAny} from 'shared/types'; * DragEventData * @interface DragEventData */ -interface DragEventData { +export interface DragEventData { source: HTMLElement; originalSource: HTMLElement; mirror: HTMLElement; diff --git a/src/Draggable/Plugins/Mirror/MirrorEvent/MirrorEvent.js b/src/Draggable/Plugins/Mirror/MirrorEvent/MirrorEvent.ts similarity index 70% rename from src/Draggable/Plugins/Mirror/MirrorEvent/MirrorEvent.js rename to src/Draggable/Plugins/Mirror/MirrorEvent/MirrorEvent.ts index 41181c1d..e4a5e6ba 100644 --- a/src/Draggable/Plugins/Mirror/MirrorEvent/MirrorEvent.js +++ b/src/Draggable/Plugins/Mirror/MirrorEvent/MirrorEvent.ts @@ -1,4 +1,15 @@ import AbstractEvent from 'shared/AbstractEvent'; +import {FixMeAny} from 'shared/types'; + +import {DragEvent, DragEventData} from '../../../DragEvent'; + +interface MirrorEventData { + source: HTMLElement; + originalSource: HTMLElement; + sourceContainer: HTMLElement; + sensorEvent: FixMeAny; + dragEvent: DragEvent; +} /** * Base mirror event @@ -6,7 +17,18 @@ import AbstractEvent from 'shared/AbstractEvent'; * @module MirrorEvent * @extends AbstractEvent */ -export class MirrorEvent extends AbstractEvent { +export class MirrorEvent< + T extends MirrorEventData, +> extends AbstractEvent { + /** + * MirrorEvent constructor. + * @constructs MirrorEvent + * @param {MirrorEventData} data - Event data + */ + constructor(public data: T) { + super(data); + } + /** * Draggables source element * @property source @@ -78,17 +100,21 @@ export class MirrorEvent extends AbstractEvent { * @module MirrorCreateEvent * @extends MirrorEvent */ -export class MirrorCreateEvent extends MirrorEvent { +export class MirrorCreateEvent extends MirrorEvent { static type = 'mirror:create'; } +interface MirrorCreatedEventData extends MirrorEventData { + mirror: HTMLElement; +} + /** * Mirror created event * @class MirrorCreatedEvent * @module MirrorCreatedEvent * @extends MirrorEvent */ -export class MirrorCreatedEvent extends MirrorEvent { +export class MirrorCreatedEvent extends MirrorEvent { static type = 'mirror:created'; /** @@ -102,13 +128,17 @@ export class MirrorCreatedEvent extends MirrorEvent { } } +interface MirrorAttachedEventData extends MirrorEventData { + mirror: HTMLElement; +} + /** * Mirror attached event * @class MirrorAttachedEvent * @module MirrorAttachedEvent * @extends MirrorEvent */ -export class MirrorAttachedEvent extends MirrorEvent { +export class MirrorAttachedEvent extends MirrorEvent { static type = 'mirror:attached'; /** @@ -122,13 +152,19 @@ export class MirrorAttachedEvent extends MirrorEvent { } } +interface MirrorMoveEventData extends MirrorEventData { + mirror: HTMLElement; + passedThreshX: boolean; + passedThreshY: boolean; +} + /** * Mirror move event * @class MirrorMoveEvent * @module MirrorMoveEvent * @extends MirrorEvent */ -export class MirrorMoveEvent extends MirrorEvent { +export class MirrorMoveEvent extends MirrorEvent { static type = 'mirror:move'; static cancelable = true; @@ -161,13 +197,19 @@ export class MirrorMoveEvent extends MirrorEvent { } } +interface MirrorMovedEventData extends MirrorEventData { + mirror: HTMLElement; + passedThreshX: boolean; + passedThreshY: boolean; +} + /** * Mirror moved event * @class MirrorMovedEvent * @module MirrorMovedEvent * @extends MirrorEvent */ -export class MirrorMovedEvent extends MirrorEvent { +export class MirrorMovedEvent extends MirrorEvent { static type = 'mirror:moved'; /** @@ -199,13 +241,17 @@ export class MirrorMovedEvent extends MirrorEvent { } } +interface MirrorDestroyEventData extends MirrorEventData { + mirror: HTMLElement; +} + /** * Mirror destroy event * @class MirrorDestroyEvent * @module MirrorDestroyEvent * @extends MirrorEvent */ -export class MirrorDestroyEvent extends MirrorEvent { +export class MirrorDestroyEvent extends MirrorEvent { static type = 'mirror:destroy'; static cancelable = true; diff --git a/src/Draggable/Plugins/Mirror/MirrorEvent/index.js b/src/Draggable/Plugins/Mirror/MirrorEvent/index.ts similarity index 100% rename from src/Draggable/Plugins/Mirror/MirrorEvent/index.js rename to src/Draggable/Plugins/Mirror/MirrorEvent/index.ts From 9154a9683a0fecfdc4a4759319221ca59c43421a Mon Sep 17 00:00:00 2001 From: Max Hoffmann Date: Wed, 27 Sep 2023 19:32:30 -0700 Subject: [PATCH 3/9] Converts SensorEvent to typescript --- .changeset/curvy-pots-whisper.md | 5 +++++ src/Draggable/DragEvent/DragEvent.ts | 5 +++-- .../Plugins/Mirror/MirrorEvent/MirrorEvent.ts | 4 ++-- .../SensorEvent/{SensorEvent.js => SensorEvent.ts} | 12 +++++++++++- .../Sensors/SensorEvent/{index.js => index.ts} | 0 src/Plugins/ResizeMirror/ResizeMirror.ts | 3 ++- 6 files changed, 23 insertions(+), 6 deletions(-) create mode 100644 .changeset/curvy-pots-whisper.md rename src/Draggable/Sensors/SensorEvent/{SensorEvent.js => SensorEvent.ts} (89%) rename src/Draggable/Sensors/SensorEvent/{index.js => index.ts} (100%) diff --git a/.changeset/curvy-pots-whisper.md b/.changeset/curvy-pots-whisper.md new file mode 100644 index 00000000..2463b20d --- /dev/null +++ b/.changeset/curvy-pots-whisper.md @@ -0,0 +1,5 @@ +--- +'@shopify/draggable': patch +--- + +Convert SensorEvent to typescript diff --git a/src/Draggable/DragEvent/DragEvent.ts b/src/Draggable/DragEvent/DragEvent.ts index 4c7dc5a6..0953d2b0 100644 --- a/src/Draggable/DragEvent/DragEvent.ts +++ b/src/Draggable/DragEvent/DragEvent.ts @@ -1,5 +1,6 @@ import AbstractEvent from 'shared/AbstractEvent'; -import {FixMeAny} from 'shared/types'; + +import {SensorEvent} from '../Sensors/SensorEvent'; /** * DragEventData @@ -10,7 +11,7 @@ export interface DragEventData { originalSource: HTMLElement; mirror: HTMLElement; sourceContainer: HTMLElement; - sensorEvent: FixMeAny; + sensorEvent: SensorEvent; } /** diff --git a/src/Draggable/Plugins/Mirror/MirrorEvent/MirrorEvent.ts b/src/Draggable/Plugins/Mirror/MirrorEvent/MirrorEvent.ts index e4a5e6ba..e10722ba 100644 --- a/src/Draggable/Plugins/Mirror/MirrorEvent/MirrorEvent.ts +++ b/src/Draggable/Plugins/Mirror/MirrorEvent/MirrorEvent.ts @@ -1,13 +1,13 @@ import AbstractEvent from 'shared/AbstractEvent'; -import {FixMeAny} from 'shared/types'; import {DragEvent, DragEventData} from '../../../DragEvent'; +import {SensorEvent} from '../../../Sensors/SensorEvent'; interface MirrorEventData { source: HTMLElement; originalSource: HTMLElement; sourceContainer: HTMLElement; - sensorEvent: FixMeAny; + sensorEvent: SensorEvent; dragEvent: DragEvent; } diff --git a/src/Draggable/Sensors/SensorEvent/SensorEvent.js b/src/Draggable/Sensors/SensorEvent/SensorEvent.ts similarity index 89% rename from src/Draggable/Sensors/SensorEvent/SensorEvent.js rename to src/Draggable/Sensors/SensorEvent/SensorEvent.ts index e3705f0f..6a7a09c7 100644 --- a/src/Draggable/Sensors/SensorEvent/SensorEvent.js +++ b/src/Draggable/Sensors/SensorEvent/SensorEvent.ts @@ -1,12 +1,22 @@ import AbstractEvent from 'shared/AbstractEvent'; +interface SensorEventData { + originalEvent: Event; + clientX: number; + clientY: number; + target: HTMLElement; + container: HTMLElement; + originalSource: HTMLElement; + pressure?: number; +} + /** * Base sensor event * @class SensorEvent * @module SensorEvent * @extends AbstractEvent */ -export class SensorEvent extends AbstractEvent { +export class SensorEvent extends AbstractEvent { /** * Original browser event that triggered a sensor * @property originalEvent diff --git a/src/Draggable/Sensors/SensorEvent/index.js b/src/Draggable/Sensors/SensorEvent/index.ts similarity index 100% rename from src/Draggable/Sensors/SensorEvent/index.js rename to src/Draggable/Sensors/SensorEvent/index.ts diff --git a/src/Plugins/ResizeMirror/ResizeMirror.ts b/src/Plugins/ResizeMirror/ResizeMirror.ts index 5052878f..44f1b4e6 100644 --- a/src/Plugins/ResizeMirror/ResizeMirror.ts +++ b/src/Plugins/ResizeMirror/ResizeMirror.ts @@ -2,6 +2,7 @@ import AbstractPlugin from 'shared/AbstractPlugin'; import {requestNextAnimationFrame} from 'shared/utils'; import {FixMeAny} from 'shared/types'; +import {MirrorCreatedEvent} from '../../Draggable/Plugins/Mirror/MirrorEvent'; import { DragOverEvent, DragOverContainerEvent, @@ -92,7 +93,7 @@ export default class ResizeMirror extends AbstractPlugin { * @param {MirrorCreatedEvent} mirrorEvent * @private */ - private onMirrorCreated({mirror}: FixMeAny) { + private onMirrorCreated({mirror}: MirrorCreatedEvent) { this.mirror = mirror; } From bb23ff21f693b623e76c935d8ea4fb58ac57d36c Mon Sep 17 00:00:00 2001 From: Max Hoffmann Date: Wed, 27 Sep 2023 19:37:51 -0700 Subject: [PATCH 4/9] Convert CollidableEvent to typescript --- .changeset/calm-kangaroos-jump.md | 5 +++ ...{CollidableEvent.js => CollidableEvent.ts} | 31 +++++++++++++++++-- .../CollidableEvent/{index.js => index.ts} | 0 3 files changed, 33 insertions(+), 3 deletions(-) create mode 100644 .changeset/calm-kangaroos-jump.md rename src/Plugins/Collidable/CollidableEvent/{CollidableEvent.js => CollidableEvent.ts} (57%) rename src/Plugins/Collidable/CollidableEvent/{index.js => index.ts} (100%) diff --git a/.changeset/calm-kangaroos-jump.md b/.changeset/calm-kangaroos-jump.md new file mode 100644 index 00000000..56174fde --- /dev/null +++ b/.changeset/calm-kangaroos-jump.md @@ -0,0 +1,5 @@ +--- +'@shopify/draggable': patch +--- + +Convert CollidableEvent to typescript diff --git a/src/Plugins/Collidable/CollidableEvent/CollidableEvent.js b/src/Plugins/Collidable/CollidableEvent/CollidableEvent.ts similarity index 57% rename from src/Plugins/Collidable/CollidableEvent/CollidableEvent.js rename to src/Plugins/Collidable/CollidableEvent/CollidableEvent.ts index 1f5e68ea..9c3f7228 100644 --- a/src/Plugins/Collidable/CollidableEvent/CollidableEvent.js +++ b/src/Plugins/Collidable/CollidableEvent/CollidableEvent.ts @@ -1,14 +1,31 @@ import AbstractEvent from 'shared/AbstractEvent'; +import {DragEvent, DragEventData} from '../../../Draggable/DragEvent'; + +interface CollidableEventData { + dragEvent: DragEvent; +} + /** * Base collidable event * @class CollidableEvent * @module CollidableEvent * @extends AbstractEvent */ -export class CollidableEvent extends AbstractEvent { +export class CollidableEvent< + T extends CollidableEventData, +> extends AbstractEvent { static type = 'collidable'; + /** + * CollidableEvent constructor. + * @constructs CollidableEvent + * @param {CollidableEventData} data - Event data + */ + constructor(public data: T) { + super(data); + } + /** * Drag event that triggered this colliable event * @property dragEvent @@ -20,13 +37,17 @@ export class CollidableEvent extends AbstractEvent { } } +interface CollidableInEventData extends CollidableEventData { + collidingElement: HTMLElement; +} + /** * Collidable in event * @class CollidableInEvent * @module CollidableInEvent * @extends CollidableEvent */ -export class CollidableInEvent extends CollidableEvent { +export class CollidableInEvent extends CollidableEvent { static type = 'collidable:in'; /** @@ -40,13 +61,17 @@ export class CollidableInEvent extends CollidableEvent { } } +interface CollidableOutEventData extends CollidableEventData { + collidingElement: HTMLElement; +} + /** * Collidable out event * @class CollidableOutEvent * @module CollidableOutEvent * @extends CollidableEvent */ -export class CollidableOutEvent extends CollidableEvent { +export class CollidableOutEvent extends CollidableEvent { static type = 'collidable:out'; /** diff --git a/src/Plugins/Collidable/CollidableEvent/index.js b/src/Plugins/Collidable/CollidableEvent/index.ts similarity index 100% rename from src/Plugins/Collidable/CollidableEvent/index.js rename to src/Plugins/Collidable/CollidableEvent/index.ts From 721978147cef7f3cc5971fa0cbd636c87ddbe2c7 Mon Sep 17 00:00:00 2001 From: Max Hoffmann Date: Wed, 27 Sep 2023 19:40:25 -0700 Subject: [PATCH 5/9] Convert SnappableEvent to typescript --- .changeset/wild-bananas-smoke.md | 5 +++++ .../{SnappableEvent.js => SnappableEvent.ts} | 9 ++++++++- .../Snappable/SnappableEvent/{index.js => index.ts} | 0 3 files changed, 13 insertions(+), 1 deletion(-) create mode 100644 .changeset/wild-bananas-smoke.md rename src/Plugins/Snappable/SnappableEvent/{SnappableEvent.js => SnappableEvent.ts} (79%) rename src/Plugins/Snappable/SnappableEvent/{index.js => index.ts} (100%) diff --git a/.changeset/wild-bananas-smoke.md b/.changeset/wild-bananas-smoke.md new file mode 100644 index 00000000..50e0ae90 --- /dev/null +++ b/.changeset/wild-bananas-smoke.md @@ -0,0 +1,5 @@ +--- +'@shopify/draggable': patch +--- + +Convert SnappableEvent to typescript diff --git a/src/Plugins/Snappable/SnappableEvent/SnappableEvent.js b/src/Plugins/Snappable/SnappableEvent/SnappableEvent.ts similarity index 79% rename from src/Plugins/Snappable/SnappableEvent/SnappableEvent.js rename to src/Plugins/Snappable/SnappableEvent/SnappableEvent.ts index aebf4a75..e1846e11 100644 --- a/src/Plugins/Snappable/SnappableEvent/SnappableEvent.js +++ b/src/Plugins/Snappable/SnappableEvent/SnappableEvent.ts @@ -1,12 +1,19 @@ import AbstractEvent from 'shared/AbstractEvent'; +import {DragEvent, DragEventData} from '../../../Draggable/DragEvent'; + +interface SnapEventData { + dragEvent: DragEvent; + snappable: HTMLElement; +} + /** * Base snap event * @class SnapEvent * @module SnapEvent * @extends AbstractEvent */ -export class SnapEvent extends AbstractEvent { +export class SnapEvent extends AbstractEvent { static type = 'snap'; /** diff --git a/src/Plugins/Snappable/SnappableEvent/index.js b/src/Plugins/Snappable/SnappableEvent/index.ts similarity index 100% rename from src/Plugins/Snappable/SnappableEvent/index.js rename to src/Plugins/Snappable/SnappableEvent/index.ts From 773496192fc9a56f6cd24ec7a45f34c79aec4a6d Mon Sep 17 00:00:00 2001 From: Max Hoffmann Date: Mon, 2 Oct 2023 13:23:07 -0700 Subject: [PATCH 6/9] Convert DragEvent tests to typescript --- .changeset/neat-rockets-lick.md | 5 + .../DragEvent/tests/DragEvent.test.js | 278 ------------- .../DragEvent/tests/DragEvent.test.ts | 371 ++++++++++++++++++ .../Sensors/SensorEvent/SensorEvent.ts | 2 +- src/shared/AbstractEvent/AbstractEvent.ts | 2 +- 5 files changed, 378 insertions(+), 280 deletions(-) create mode 100644 .changeset/neat-rockets-lick.md delete mode 100644 src/Draggable/DragEvent/tests/DragEvent.test.js create mode 100644 src/Draggable/DragEvent/tests/DragEvent.test.ts diff --git a/.changeset/neat-rockets-lick.md b/.changeset/neat-rockets-lick.md new file mode 100644 index 00000000..f49030bf --- /dev/null +++ b/.changeset/neat-rockets-lick.md @@ -0,0 +1,5 @@ +--- +'@shopify/draggable': patch +--- + +Converts DragEvent tests to typescript diff --git a/src/Draggable/DragEvent/tests/DragEvent.test.js b/src/Draggable/DragEvent/tests/DragEvent.test.js deleted file mode 100644 index b04dd75d..00000000 --- a/src/Draggable/DragEvent/tests/DragEvent.test.js +++ /dev/null @@ -1,278 +0,0 @@ -import { - DragEvent, - DragMoveEvent, - DragOutContainerEvent, - DragOutEvent, - DragOverContainerEvent, - DragOverEvent, - DragPressureEvent, - DragStartEvent, - DragStopEvent, - DragStoppedEvent, -} from '../DragEvent'; - -describe('DragEvent', () => { - describe('#constructor', () => { - it('should be instance of DragEvent', () => { - const event = new DragEvent(); - - expect(event).toBeInstanceOf(DragEvent); - }); - - it('should initialize with `type` of `event`', () => { - const event = new DragEvent(); - - expect(event.type).toBe('drag'); - }); - - it('should initialize with source', () => { - const event = new DragEvent({ - source: 'expected source', - }); - - expect(event.source).toBe('expected source'); - }); - - it('should initialize with mirror', () => { - const event = new DragEvent({ - mirror: 'expected mirror', - }); - - expect(event.mirror).toBe('expected mirror'); - }); - - it('should initialize with sourceContainer', () => { - const event = new DragEvent({ - sourceContainer: 'expected sourceContainer', - }); - - expect(event.sourceContainer).toBe('expected sourceContainer'); - }); - - it('should initialize with sensorEvent', () => { - const event = new DragEvent({ - sensorEvent: 'expected sensorEvent', - }); - - expect(event.sensorEvent).toBe('expected sensorEvent'); - }); - - it('should initialize with originalEvent', () => { - const event = new DragEvent({ - sensorEvent: { - originalEvent: 'expected originalEvent', - }, - }); - - expect(event.originalEvent).toBe('expected originalEvent'); - }); - }); - - describe('#originalEvent', () => { - it('should return null when initialized without sensorEvent', () => { - const event = new DragEvent({}); - - expect(event.originalEvent).toBeNull(); - }); - }); -}); - -describe('DragStartEvent', () => { - describe('#constructor', () => { - it('should be instance of DragStartEvent', () => { - const event = new DragStartEvent(); - - expect(event).toBeInstanceOf(DragStartEvent); - }); - - it('should initialize with `type` of `drag:start`', () => { - const event = new DragStartEvent(); - - expect(event.type).toBe('drag:start'); - }); - }); -}); - -describe('DragMoveEvent', () => { - describe('#constructor', () => { - it('should be instance of DragMoveEvent', () => { - const event = new DragMoveEvent(); - - expect(event).toBeInstanceOf(DragMoveEvent); - }); - - it('should initialize with `type` of `drag:move`', () => { - const event = new DragMoveEvent(); - - expect(event.type).toBe('drag:move'); - }); - }); -}); - -describe('DragOutContainerEvent', () => { - describe('#constructor', () => { - it('should be instance of DragOutContainerEvent', () => { - const event = new DragOutContainerEvent(); - - expect(event).toBeInstanceOf(DragOutContainerEvent); - }); - - it('should initialize with `type` of `drag:out:container`', () => { - const event = new DragOutContainerEvent(); - - expect(event.type).toBe('drag:out:container'); - }); - - it('should initialize with overContainer', () => { - const event = new DragOutContainerEvent({ - overContainer: 'expected overContainer', - }); - - expect(event.overContainer).toBe('expected overContainer'); - }); - }); -}); - -describe('DragOutEvent', () => { - describe('#constructor', () => { - it('should be instance of DragOutEvent', () => { - const event = new DragOutEvent(); - - expect(event).toBeInstanceOf(DragOutEvent); - }); - - it('should initialize with `type` of `drag:out`', () => { - const event = new DragOutEvent(); - - expect(event.type).toBe('drag:out'); - }); - - it('should initialize with overContainer', () => { - const event = new DragOutEvent({ - overContainer: 'expected overContainer', - }); - - expect(event.overContainer).toBe('expected overContainer'); - }); - - it('should initialize with over', () => { - const event = new DragOutEvent({ - over: 'expected over', - }); - - expect(event.over).toBe('expected over'); - }); - }); -}); - -describe('DragOverContainerEvent', () => { - describe('#constructor', () => { - it('should be instance of DragOverContainerEvent', () => { - const event = new DragOverContainerEvent(); - - expect(event).toBeInstanceOf(DragOverContainerEvent); - }); - - it('should initialize with `type` of `drag:over:container`', () => { - const event = new DragOverContainerEvent(); - - expect(event.type).toBe('drag:over:container'); - }); - - it('should initialize with overContainer', () => { - const event = new DragOverContainerEvent({ - overContainer: 'expected overContainer', - }); - - expect(event.overContainer).toBe('expected overContainer'); - }); - }); -}); - -describe('DragOverEvent', () => { - describe('#constructor', () => { - it('should be instance of DragOverEvent', () => { - const event = new DragOverEvent(); - - expect(event).toBeInstanceOf(DragOverEvent); - }); - - it('should initialize with `type` of `drag:over`', () => { - const event = new DragOverEvent(); - - expect(event.type).toBe('drag:over'); - }); - - it('should initialize with overContainer', () => { - const event = new DragOverEvent({ - overContainer: 'expected overContainer', - }); - - expect(event.overContainer).toBe('expected overContainer'); - }); - - it('should initialize with over', () => { - const event = new DragOverEvent({ - over: 'expected over', - }); - - expect(event.over).toBe('expected over'); - }); - }); -}); - -describe('DragPressureEvent', () => { - describe('#constructor', () => { - it('should be instance of DragPressureEvent', () => { - const event = new DragPressureEvent(); - - expect(event).toBeInstanceOf(DragPressureEvent); - }); - - it('should initialize with `type` of `drag:pressure`', () => { - const event = new DragPressureEvent(); - - expect(event.type).toBe('drag:pressure'); - }); - - it('should initialize with pressure', () => { - const event = new DragPressureEvent({ - pressure: 'expected pressure', - }); - - expect(event.pressure).toBe('expected pressure'); - }); - }); -}); - -describe('DragStopEvent', () => { - describe('#constructor', () => { - it('should be instance of DragStopEvent', () => { - const event = new DragStopEvent(); - - expect(event).toBeInstanceOf(DragStopEvent); - }); - - it('should initialize with `type` of `drag:stop`', () => { - const event = new DragStopEvent(); - - expect(event.type).toBe('drag:stop'); - }); - }); -}); - -describe('DragStoppedEvent', () => { - describe('#constructor', () => { - it('should be instance of DragStoppedEvent', () => { - const event = new DragStoppedEvent(); - - expect(event).toBeInstanceOf(DragStoppedEvent); - }); - - it('should initialize with `type` of `drag:stopped`', () => { - const event = new DragStoppedEvent(); - - expect(event.type).toBe('drag:stopped'); - }); - }); -}); diff --git a/src/Draggable/DragEvent/tests/DragEvent.test.ts b/src/Draggable/DragEvent/tests/DragEvent.test.ts new file mode 100644 index 00000000..4a45063c --- /dev/null +++ b/src/Draggable/DragEvent/tests/DragEvent.test.ts @@ -0,0 +1,371 @@ +import { + DragEvent, + DragMoveEvent, + DragOutContainerEvent, + DragOutEvent, + DragOverContainerEvent, + DragOverEvent, + DragPressureEvent, + DragStartEvent, + DragStopEvent, + DragStoppedEvent, +} from '../DragEvent'; +import {SensorEvent} from '../../Sensors/SensorEvent'; + +const sensorEvent = new SensorEvent({ + originalEvent: new Event('click'), + clientX: 0, + clientY: 0, + target: document.createElement('div'), + container: document.createElement('div'), + originalSource: document.createElement('div'), + pressure: 0, +}); + +const defaultDragEventOptions = { + source: document.createElement('div'), + originalSource: document.createElement('div'), + mirror: document.createElement('div'), + sourceContainer: document.createElement('div'), + sensorEvent, +}; + +describe('DragEvent', () => { + describe('#constructor', () => { + it('should be instance of DragEvent', () => { + const event = new DragEvent(defaultDragEventOptions); + + expect(event).toBeInstanceOf(DragEvent); + }); + + it('should initialize with `type` of `event`', () => { + const event = new DragEvent(defaultDragEventOptions); + + expect(event.type).toBe('drag'); + }); + + it('should initialize with source', () => { + const source = document.createElement('div'); + + const event = new DragEvent({ + ...defaultDragEventOptions, + source, + }); + + expect(event.source).toBe(source); + }); + + it('should initialize with mirror', () => { + const mirror = document.createElement('div'); + + const event = new DragEvent({ + ...defaultDragEventOptions, + mirror, + }); + + expect(event.mirror).toBe(mirror); + }); + + it('should initialize with sourceContainer', () => { + const sourceContainer = document.createElement('div'); + + const event = new DragEvent({ + ...defaultDragEventOptions, + sourceContainer, + }); + + expect(event.sourceContainer).toBe(sourceContainer); + }); + + it('should initialize with sensorEvent', () => { + const event = new DragEvent(defaultDragEventOptions); + + expect(event.sensorEvent).toBe(defaultDragEventOptions.sensorEvent); + }); + + it('should initialize with originalEvent', () => { + const originalEvent = new Event('click'); + + const event = new DragEvent({ + ...defaultDragEventOptions, + sensorEvent: new SensorEvent({ + ...sensorEvent.data, + originalEvent, + }), + }); + + expect(event.originalEvent).toBe(originalEvent); + }); + }); + + describe('#originalEvent', () => { + it('should return null when initialized without sensorEvent', () => { + const event = new DragEvent({ + ...defaultDragEventOptions, + sensorEvent: new SensorEvent({ + ...sensorEvent.data, + originalEvent: undefined, + }), + }); + + expect(event.originalEvent).toBeUndefined(); + }); + }); +}); + +describe('DragStartEvent', () => { + describe('#constructor', () => { + it('should be instance of DragStartEvent', () => { + const event = new DragStartEvent(defaultDragEventOptions); + + expect(event).toBeInstanceOf(DragStartEvent); + }); + + it('should initialize with `type` of `drag:start`', () => { + const event = new DragStartEvent(defaultDragEventOptions); + + expect(event.type).toBe('drag:start'); + }); + }); +}); + +describe('DragMoveEvent', () => { + describe('#constructor', () => { + it('should be instance of DragMoveEvent', () => { + const event = new DragMoveEvent(defaultDragEventOptions); + + expect(event).toBeInstanceOf(DragMoveEvent); + }); + + it('should initialize with `type` of `drag:move`', () => { + const event = new DragMoveEvent(defaultDragEventOptions); + + expect(event.type).toBe('drag:move'); + }); + }); +}); + +const defaultDragOutContainerEventOptions = { + ...defaultDragEventOptions, + overContainer: document.createElement('div'), +}; + +describe('DragOutContainerEvent', () => { + describe('#constructor', () => { + it('should be instance of DragOutContainerEvent', () => { + const event = new DragOutContainerEvent( + defaultDragOutContainerEventOptions, + ); + + expect(event).toBeInstanceOf(DragOutContainerEvent); + }); + + it('should initialize with `type` of `drag:out:container`', () => { + const event = new DragOutContainerEvent( + defaultDragOutContainerEventOptions, + ); + + expect(event.type).toBe('drag:out:container'); + }); + + it('should initialize with overContainer', () => { + const overContainer = document.createElement('div'); + + const event = new DragOutContainerEvent({ + ...defaultDragOutContainerEventOptions, + overContainer, + }); + + expect(event.overContainer).toBe(overContainer); + }); + }); +}); + +const defaultDragOutEventOptions = { + ...defaultDragEventOptions, + overContainer: document.createElement('div'), + over: document.createElement('div'), +}; + +describe('DragOutEvent', () => { + describe('#constructor', () => { + it('should be instance of DragOutEvent', () => { + const event = new DragOutEvent(defaultDragOutEventOptions); + + expect(event).toBeInstanceOf(DragOutEvent); + }); + + it('should initialize with `type` of `drag:out`', () => { + const event = new DragOutEvent(defaultDragOutEventOptions); + + expect(event.type).toBe('drag:out'); + }); + + it('should initialize with overContainer', () => { + const overContainer = document.createElement('div'); + + const event = new DragOutEvent({ + ...defaultDragOutEventOptions, + overContainer, + }); + + expect(event.overContainer).toBe(overContainer); + }); + + it('should initialize with over', () => { + const over = document.createElement('div'); + + const event = new DragOutEvent({ + ...defaultDragOutEventOptions, + over, + }); + + expect(event.over).toBe(over); + }); + }); +}); + +const defaultDragOverContainerEventOptions = { + ...defaultDragEventOptions, + overContainer: document.createElement('div'), + over: document.createElement('div'), +}; + +describe('DragOverContainerEvent', () => { + describe('#constructor', () => { + it('should be instance of DragOverContainerEvent', () => { + const event = new DragOverContainerEvent( + defaultDragOverContainerEventOptions, + ); + + expect(event).toBeInstanceOf(DragOverContainerEvent); + }); + + it('should initialize with `type` of `drag:over:container`', () => { + const event = new DragOverContainerEvent( + defaultDragOverContainerEventOptions, + ); + + expect(event.type).toBe('drag:over:container'); + }); + + it('should initialize with overContainer', () => { + const overContainer = document.createElement('div'); + + const event = new DragOverContainerEvent({ + ...defaultDragOverContainerEventOptions, + overContainer, + }); + + expect(event.overContainer).toBe(overContainer); + }); + }); +}); + +const defaultDragOverEventOptions = { + ...defaultDragEventOptions, + overContainer: document.createElement('div'), + over: document.createElement('div'), +}; + +describe('DragOverEvent', () => { + describe('#constructor', () => { + it('should be instance of DragOverEvent', () => { + const event = new DragOverEvent(defaultDragOverEventOptions); + + expect(event).toBeInstanceOf(DragOverEvent); + }); + + it('should initialize with `type` of `drag:over`', () => { + const event = new DragOverEvent(defaultDragOverEventOptions); + + expect(event.type).toBe('drag:over'); + }); + + it('should initialize with overContainer', () => { + const overContainer = document.createElement('div'); + + const event = new DragOverEvent({ + ...defaultDragOverEventOptions, + overContainer, + }); + + expect(event.overContainer).toBe(overContainer); + }); + + it('should initialize with over', () => { + const over = document.createElement('div'); + + const event = new DragOverEvent({ + ...defaultDragOverEventOptions, + over, + }); + + expect(event.over).toBe(over); + }); + }); +}); + +const defaultDragPressureEventOptions = { + ...defaultDragEventOptions, + pressure: 0, +}; + +describe('DragPressureEvent', () => { + describe('#constructor', () => { + it('should be instance of DragPressureEvent', () => { + const event = new DragPressureEvent(defaultDragPressureEventOptions); + + expect(event).toBeInstanceOf(DragPressureEvent); + }); + + it('should initialize with `type` of `drag:pressure`', () => { + const event = new DragPressureEvent(defaultDragPressureEventOptions); + + expect(event.type).toBe('drag:pressure'); + }); + + it('should initialize with pressure', () => { + const pressure = 0.5; + + const event = new DragPressureEvent({ + ...defaultDragPressureEventOptions, + pressure, + }); + + expect(event.pressure).toBe(pressure); + }); + }); +}); + +describe('DragStopEvent', () => { + describe('#constructor', () => { + it('should be instance of DragStopEvent', () => { + const event = new DragStopEvent(defaultDragEventOptions); + + expect(event).toBeInstanceOf(DragStopEvent); + }); + + it('should initialize with `type` of `drag:stop`', () => { + const event = new DragStopEvent(defaultDragEventOptions); + + expect(event.type).toBe('drag:stop'); + }); + }); +}); + +describe('DragStoppedEvent', () => { + describe('#constructor', () => { + it('should be instance of DragStoppedEvent', () => { + const event = new DragStoppedEvent(defaultDragEventOptions); + + expect(event).toBeInstanceOf(DragStoppedEvent); + }); + + it('should initialize with `type` of `drag:stopped`', () => { + const event = new DragStoppedEvent(defaultDragEventOptions); + + expect(event.type).toBe('drag:stopped'); + }); + }); +}); diff --git a/src/Draggable/Sensors/SensorEvent/SensorEvent.ts b/src/Draggable/Sensors/SensorEvent/SensorEvent.ts index 6a7a09c7..8411c0aa 100644 --- a/src/Draggable/Sensors/SensorEvent/SensorEvent.ts +++ b/src/Draggable/Sensors/SensorEvent/SensorEvent.ts @@ -1,12 +1,12 @@ import AbstractEvent from 'shared/AbstractEvent'; interface SensorEventData { - originalEvent: Event; clientX: number; clientY: number; target: HTMLElement; container: HTMLElement; originalSource: HTMLElement; + originalEvent?: Event; pressure?: number; } diff --git a/src/shared/AbstractEvent/AbstractEvent.ts b/src/shared/AbstractEvent/AbstractEvent.ts index a0941cac..a9eb5efe 100644 --- a/src/shared/AbstractEvent/AbstractEvent.ts +++ b/src/shared/AbstractEvent/AbstractEvent.ts @@ -79,7 +79,7 @@ export class AbstractEvent { * @param {T} data * @return {AbstractEvent} */ - clone(data: T) { + clone(data: Partial): AbstractEvent { return new (this.constructor as typeof AbstractEvent)({ ...this.data, ...data, From a0c3c90d8e93ac8ac0e19e5d37e271e6d97c4fa6 Mon Sep 17 00:00:00 2001 From: Max Hoffmann Date: Mon, 2 Oct 2023 13:46:33 -0700 Subject: [PATCH 7/9] Convert DroppableEvent to typescript --- .changeset/spicy-clouds-tickle.md | 5 +++ .../{DroppableEvent.js => DroppableEvent.ts} | 43 ++++++++++++++++--- .../DroppableEvent/{index.js => index.ts} | 0 3 files changed, 43 insertions(+), 5 deletions(-) create mode 100644 .changeset/spicy-clouds-tickle.md rename src/Droppable/DroppableEvent/{DroppableEvent.js => DroppableEvent.ts} (62%) rename src/Droppable/DroppableEvent/{index.js => index.ts} (100%) diff --git a/.changeset/spicy-clouds-tickle.md b/.changeset/spicy-clouds-tickle.md new file mode 100644 index 00000000..01c4f86b --- /dev/null +++ b/.changeset/spicy-clouds-tickle.md @@ -0,0 +1,5 @@ +--- +'@shopify/draggable': patch +--- + +Convert DroppableEvent to typescript diff --git a/src/Droppable/DroppableEvent/DroppableEvent.js b/src/Droppable/DroppableEvent/DroppableEvent.ts similarity index 62% rename from src/Droppable/DroppableEvent/DroppableEvent.js rename to src/Droppable/DroppableEvent/DroppableEvent.ts index 72b305a4..eacba6ec 100644 --- a/src/Droppable/DroppableEvent/DroppableEvent.js +++ b/src/Droppable/DroppableEvent/DroppableEvent.ts @@ -1,14 +1,31 @@ import AbstractEvent from 'shared/AbstractEvent'; +import {DragEvent, DragEventData} from '../../Draggable/DragEvent'; + +interface DroppableEventData { + dragEvent: DragEvent; +} + /** * Base droppable event * @class DroppableEvent * @module DroppableEvent * @extends AbstractEvent */ -export class DroppableEvent extends AbstractEvent { +export class DroppableEvent< + T extends DroppableEventData, +> extends AbstractEvent { static type = 'droppable'; + /** + * DroppableEvent constructor. + * @constructs DroppableEvent + * @param {DroppableEventData} data - Event data + */ + constructor(public data: T) { + super(data); + } + /** * Original drag event that triggered this droppable event * @property dragEvent @@ -20,13 +37,17 @@ export class DroppableEvent extends AbstractEvent { } } +interface DroppableStartEventData extends DroppableEventData { + dropzone: HTMLElement; +} + /** * Droppable start event * @class DroppableStartEvent * @module DroppableStartEvent * @extends DroppableEvent */ -export class DroppableStartEvent extends DroppableEvent { +export class DroppableStartEvent extends DroppableEvent { static type = 'droppable:start'; static cancelable = true; @@ -41,13 +62,17 @@ export class DroppableStartEvent extends DroppableEvent { } } +interface DroppableDroppedEventData extends DroppableEventData { + dropzone: HTMLElement; +} + /** * Droppable dropped event * @class DroppableDroppedEvent * @module DroppableDroppedEvent * @extends DroppableEvent */ -export class DroppableDroppedEvent extends DroppableEvent { +export class DroppableDroppedEvent extends DroppableEvent { static type = 'droppable:dropped'; static cancelable = true; @@ -62,13 +87,17 @@ export class DroppableDroppedEvent extends DroppableEvent { } } +interface DroppableReturnedEventData extends DroppableEventData { + dropzone: HTMLElement; +} + /** * Droppable returned event * @class DroppableReturnedEvent * @module DroppableReturnedEvent * @extends DroppableEvent */ -export class DroppableReturnedEvent extends DroppableEvent { +export class DroppableReturnedEvent extends DroppableEvent { static type = 'droppable:returned'; static cancelable = true; @@ -83,13 +112,17 @@ export class DroppableReturnedEvent extends DroppableEvent { } } +interface DroppableStopEventData extends DroppableEventData { + dropzone: HTMLElement; +} + /** * Droppable stop event * @class DroppableStopEvent * @module DroppableStopEvent * @extends DroppableEvent */ -export class DroppableStopEvent extends DroppableEvent { +export class DroppableStopEvent extends DroppableEvent { static type = 'droppable:stop'; static cancelable = true; diff --git a/src/Droppable/DroppableEvent/index.js b/src/Droppable/DroppableEvent/index.ts similarity index 100% rename from src/Droppable/DroppableEvent/index.js rename to src/Droppable/DroppableEvent/index.ts From fb5354ffc7688433ef12bcf8ca1b9f473f78cf06 Mon Sep 17 00:00:00 2001 From: Max Hoffmann Date: Wed, 4 Oct 2023 09:47:16 -0700 Subject: [PATCH 8/9] Convert SortableEvent to typescript --- .changeset/khaki-candles-jog.md | 5 ++ src/Draggable/DragEvent/DragEvent.ts | 2 +- .../{SortableEvent.js => SortableEvent.ts} | 63 +++++++++++++++++-- .../SortableEvent/{index.js => index.ts} | 0 4 files changed, 64 insertions(+), 6 deletions(-) create mode 100644 .changeset/khaki-candles-jog.md rename src/Sortable/SortableEvent/{SortableEvent.js => SortableEvent.ts} (69%) rename src/Sortable/SortableEvent/{index.js => index.ts} (100%) diff --git a/.changeset/khaki-candles-jog.md b/.changeset/khaki-candles-jog.md new file mode 100644 index 00000000..826fbf10 --- /dev/null +++ b/.changeset/khaki-candles-jog.md @@ -0,0 +1,5 @@ +--- +'@shopify/draggable': patch +--- + +Convert SortableEvent to typescript diff --git a/src/Draggable/DragEvent/DragEvent.ts b/src/Draggable/DragEvent/DragEvent.ts index 0953d2b0..233d57b0 100644 --- a/src/Draggable/DragEvent/DragEvent.ts +++ b/src/Draggable/DragEvent/DragEvent.ts @@ -124,7 +124,7 @@ export class DragMoveEvent extends DragEvent { * DragOverEventData * @interface DragOverEventData */ -interface DragOverEventData extends DragEventData { +export interface DragOverEventData extends DragEventData { overContainer: HTMLElement; over: HTMLElement; } diff --git a/src/Sortable/SortableEvent/SortableEvent.js b/src/Sortable/SortableEvent/SortableEvent.ts similarity index 69% rename from src/Sortable/SortableEvent/SortableEvent.js rename to src/Sortable/SortableEvent/SortableEvent.ts index 8c521267..b7638606 100644 --- a/src/Sortable/SortableEvent/SortableEvent.js +++ b/src/Sortable/SortableEvent/SortableEvent.ts @@ -1,14 +1,38 @@ import AbstractEvent from 'shared/AbstractEvent'; +import { + DragEvent, + DragEventData, + DragOverEvent, + DragOutEvent, + DragOverContainerEvent, + DragOutContainerEvent, +} from '../../Draggable/DragEvent'; + +interface SortableEventData { + dragEvent: DragEvent; +} + /** * Base sortable event * @class SortableEvent * @module SortableEvent * @extends AbstractEvent */ -export class SortableEvent extends AbstractEvent { +export class SortableEvent< + T extends SortableEventData, +> extends AbstractEvent { static type = 'sortable'; + /** + * SortableEvent constructor. + * @constructs SortableEvent + * @param {SortableEventData} data - Event data + */ + constructor(public data: T) { + super(data); + } + /** * Original drag event that triggered this sortable event * @property dragEvent @@ -20,13 +44,18 @@ export class SortableEvent extends AbstractEvent { } } +interface SortableStartEventData extends SortableEventData { + startIndex: number; + startContainer: HTMLElement; +} + /** * Sortable start event * @class SortableStartEvent * @module SortableStartEvent * @extends SortableEvent */ -export class SortableStartEvent extends SortableEvent { +export class SortableStartEvent extends SortableEvent { static type = 'sortable:start'; static cancelable = true; @@ -51,13 +80,23 @@ export class SortableStartEvent extends SortableEvent { } } +interface SortableSortEventData extends SortableEventData { + dragEvent: + | DragOverEvent + | DragOutEvent + | DragOverContainerEvent + | DragOutContainerEvent; + currentIndex: number; + over: HTMLElement; +} + /** * Sortable sort event * @class SortableSortEvent * @module SortableSortEvent * @extends SortableEvent */ -export class SortableSortEvent extends SortableEvent { +export class SortableSortEvent extends SortableEvent { static type = 'sortable:sort'; static cancelable = true; @@ -92,13 +131,20 @@ export class SortableSortEvent extends SortableEvent { } } +interface SortableSortedEventData extends SortableEventData { + oldIndex: number; + newIndex: number; + oldContainer: HTMLElement; + newContainer: HTMLElement; +} + /** * Sortable sorted event * @class SortableSortedEvent * @module SortableSortedEvent * @extends SortableEvent */ -export class SortableSortedEvent extends SortableEvent { +export class SortableSortedEvent extends SortableEvent { static type = 'sortable:sorted'; /** @@ -142,13 +188,20 @@ export class SortableSortedEvent extends SortableEvent { } } +interface SortableStopEventData extends SortableEventData { + oldIndex: number; + newIndex: number; + oldContainer: HTMLElement; + newContainer: HTMLElement; +} + /** * Sortable stop event * @class SortableStopEvent * @module SortableStopEvent * @extends SortableEvent */ -export class SortableStopEvent extends SortableEvent { +export class SortableStopEvent extends SortableEvent { static type = 'sortable:stop'; /** diff --git a/src/Sortable/SortableEvent/index.js b/src/Sortable/SortableEvent/index.ts similarity index 100% rename from src/Sortable/SortableEvent/index.js rename to src/Sortable/SortableEvent/index.ts From 74c35e5aa4bd5c3bb7dcaf8cc432c4d5d932ee3f Mon Sep 17 00:00:00 2001 From: Max Hoffmann Date: Wed, 4 Oct 2023 09:54:02 -0700 Subject: [PATCH 9/9] Convert SwappableEvent to typescript --- .changeset/grumpy-zebras-move.md | 5 +++ .../{SwappableEvent.js => SwappableEvent.ts} | 36 ++++++++++++++++--- .../SwappableEvent/{index.js => index.ts} | 0 3 files changed, 36 insertions(+), 5 deletions(-) create mode 100644 .changeset/grumpy-zebras-move.md rename src/Swappable/SwappableEvent/{SwappableEvent.js => SwappableEvent.ts} (62%) rename src/Swappable/SwappableEvent/{index.js => index.ts} (100%) diff --git a/.changeset/grumpy-zebras-move.md b/.changeset/grumpy-zebras-move.md new file mode 100644 index 00000000..b535f02a --- /dev/null +++ b/.changeset/grumpy-zebras-move.md @@ -0,0 +1,5 @@ +--- +'@shopify/draggable': patch +--- + +Convert SwappableEvent to typescript diff --git a/src/Swappable/SwappableEvent/SwappableEvent.js b/src/Swappable/SwappableEvent/SwappableEvent.ts similarity index 62% rename from src/Swappable/SwappableEvent/SwappableEvent.js rename to src/Swappable/SwappableEvent/SwappableEvent.ts index 47c02123..09d6f4c1 100644 --- a/src/Swappable/SwappableEvent/SwappableEvent.js +++ b/src/Swappable/SwappableEvent/SwappableEvent.ts @@ -1,14 +1,31 @@ import AbstractEvent from 'shared/AbstractEvent'; +import {DragEvent, DragEventData} from '../../Draggable/DragEvent'; + +interface SwappableEventData { + dragEvent: DragEvent; +} + /** * Base swappable event * @class SwappableEvent * @module SwappableEvent * @extends AbstractEvent */ -export class SwappableEvent extends AbstractEvent { +export class SwappableEvent< + T extends SwappableEventData, +> extends AbstractEvent { static type = 'swappable'; + /** + * SwappableEvent constructor. + * @constructs SwappableEvent + * @param {SwappableEventData} data - Event data + */ + constructor(public data: T) { + super(data); + } + /** * Original drag event that triggered this swappable event * @property dragEvent @@ -26,18 +43,23 @@ export class SwappableEvent extends AbstractEvent { * @module SwappableStartEvent * @extends SwappableEvent */ -export class SwappableStartEvent extends SwappableEvent { +export class SwappableStartEvent extends SwappableEvent { static type = 'swappable:start'; static cancelable = true; } +interface SwappableSwapEventData extends SwappableEventData { + over: HTMLElement; + overContainer: HTMLElement; +} + /** * Swappable swap event * @class SwappableSwapEvent * @module SwappableSwapEvent * @extends SwappableEvent */ -export class SwappableSwapEvent extends SwappableEvent { +export class SwappableSwapEvent extends SwappableEvent { static type = 'swappable:swap'; static cancelable = true; @@ -62,13 +84,17 @@ export class SwappableSwapEvent extends SwappableEvent { } } +interface SwappableSwappedEventData extends SwappableEventData { + swappedElement: HTMLElement; +} + /** * Swappable swapped event * @class SwappableSwappedEvent * @module SwappableSwappedEvent * @extends SwappableEvent */ -export class SwappableSwappedEvent extends SwappableEvent { +export class SwappableSwappedEvent extends SwappableEvent { static type = 'swappable:swapped'; /** @@ -88,6 +114,6 @@ export class SwappableSwappedEvent extends SwappableEvent { * @module SwappableStopEvent * @extends SwappableEvent */ -export class SwappableStopEvent extends SwappableEvent { +export class SwappableStopEvent extends SwappableEvent { static type = 'swappable:stop'; } diff --git a/src/Swappable/SwappableEvent/index.js b/src/Swappable/SwappableEvent/index.ts similarity index 100% rename from src/Swappable/SwappableEvent/index.js rename to src/Swappable/SwappableEvent/index.ts