From bf9436125e766594d310775e57f5b2b3325b3242 Mon Sep 17 00:00:00 2001
From: Meghea Iulian <iulian.meghea@gmail.com>
Date: Fri, 5 Jul 2024 10:18:25 +0300
Subject: [PATCH] feat(resize-hub): add event when column changes

Add the pointer event when column changes.
---
 lib/cosmoz-omnitable-resize-nub.js | 57 ++++++++++++++++--------------
 1 file changed, 30 insertions(+), 27 deletions(-)

diff --git a/lib/cosmoz-omnitable-resize-nub.js b/lib/cosmoz-omnitable-resize-nub.js
index e1ba01f9..2ec88c67 100644
--- a/lib/cosmoz-omnitable-resize-nub.js
+++ b/lib/cosmoz-omnitable-resize-nub.js
@@ -1,38 +1,41 @@
 import { useEffect, component } from '@pionjs/pion';
 import { nothing } from 'lit-html';
 
-const
-	ResizeNub = host => {
-		useEffect(() => {
-			let initial = 0,
-				initialWidth = 0;
-			const
-				move = ev => {
-					host.dispatchEvent(new CustomEvent('column-resize', {
+const ResizeNub = (host) => {
+	const { column } = host;
+
+	useEffect(() => {
+		let initial = 0;
+		let initialWidth = 0;
+		const move = (ev) => {
+				host.dispatchEvent(
+					new CustomEvent('column-resize', {
 						bubbles: true,
 						composed: true,
 						detail: {
 							newWidth: Math.ceil(initialWidth + ev.pageX - initial),
-							column: host.column
-						}
-					}));
-				},
-				stop = () => {
-					document.removeEventListener('pointermove', move);
-					document.removeEventListener('pointerup', stop);
-				},
-				start = ev => {
-					initial = ev.pageX;
-					initialWidth = host.previousElementSibling.getBoundingClientRect().width;
-					document.addEventListener('pointermove', move);
-					document.addEventListener('pointerup', stop);
-				};
-			host.addEventListener('pointerdown', start);
+							column,
+						},
+					}),
+				);
+			},
+			stop = () => {
+				document.removeEventListener('pointermove', move);
+				document.removeEventListener('pointerup', stop);
+			},
+			start = (ev) => {
+				initial = ev.pageX;
+				initialWidth =
+					host.previousElementSibling.getBoundingClientRect().width;
+				document.addEventListener('pointermove', move);
+				document.addEventListener('pointerup', stop);
+			};
+		host.addEventListener('pointerdown', start);
 
-			return () => host.removeEventListener('pointerdown', start);
-		}, [host.nextElementSibling]);
+		return () => host.removeEventListener('pointerdown', start);
+	}, [column]);
 
-		return nothing;
-	};
+	return nothing;
+};
 
 customElements.define('cosmoz-omnitable-resize-nub', component(ResizeNub));