From b3bf2cd4405ef45bbc4673fe3f97e90c5980cce3 Mon Sep 17 00:00:00 2001
From: Bryan Lee <bryanmylee@fb.com>
Date: Thu, 26 May 2022 23:51:30 +0800
Subject: [PATCH] refactor: expose `drag` action instead of event handler

---
 src/lib/plugins/addResizedColumns.ts | 13 +++++++++++--
 src/routes/index.svelte              |  7 +------
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/lib/plugins/addResizedColumns.ts b/src/lib/plugins/addResizedColumns.ts
index 5447c82..0784015 100644
--- a/src/lib/plugins/addResizedColumns.ts
+++ b/src/lib/plugins/addResizedColumns.ts
@@ -18,7 +18,7 @@ export type ResizedColumnsColumnOptions = {
 export type ResizedColumnsPropSet = NewTablePropSet<{
 	'thead.tr.th': {
 		(node: Element): void;
-		drag: (event: Event) => void;
+		drag: (node: Element) => void;
 		disabled: boolean;
 	};
 }>;
@@ -194,7 +194,16 @@ export const addResizedColumns =
 							},
 						};
 					};
-					action.drag = dragStart;
+					action.drag = (node: Element) => {
+						node.addEventListener('mousedown', dragStart);
+						node.addEventListener('touchstart', dragStart);
+						return {
+							destroy() {
+								node.removeEventListener('mousedown', dragStart);
+								node.removeEventListener('touchstart', dragStart);
+							},
+						};
+					};
 					action.disabled = isCellDisabled(cell, disabledResizeIds);
 					const props = derived([], () => {
 						return action;
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 74f8a03..1f259da 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -285,12 +285,7 @@
 									<Render of={props.filter.render} />
 								{/if}
 								{#if !props.resize.disabled}
-									<div
-										class="resizer"
-										on:click|stopPropagation
-										on:mousedown={props.resize.drag}
-										on:touchstart={props.resize.drag}
-									/>
+									<div class="resizer" on:click|stopPropagation use:props.resize.drag />
 								{/if}
 							</th>
 						</Subscribe>