From cf7516047cb938d047de27c729c890ad6124f2db Mon Sep 17 00:00:00 2001
From: Nikita Vakula <programmistov.programmist@gmail.com>
Date: Mon, 20 Nov 2023 18:35:58 +0100
Subject: [PATCH 1/2] Add click and mouseover handlers

Signed-off-by: Nikita Vakula <programmistov.programmist@gmail.com>
---
 src/VirtualTable.tsx  | 47 +++++++++++++++++++++++++++++++++++++++++--
 testApp/src/index.tsx |  9 ++++++++-
 2 files changed, 53 insertions(+), 3 deletions(-)

diff --git a/src/VirtualTable.tsx b/src/VirtualTable.tsx
index 5eee1c5..0d225b2 100644
--- a/src/VirtualTable.tsx
+++ b/src/VirtualTable.tsx
@@ -23,10 +23,12 @@ interface State<Type> {
     itemCount: number,
     items: Array<Type>,
     offset: number,
+    selected: number;
+    hovered: number;
 }
 
 interface Action<Type> {
-    type: 'scroll' | 'render' | 'loaded';
+    type: 'scroll' | 'render' | 'loaded' | 'click' | 'hover';
     data: Partial<State<Type>>
 }
 
@@ -53,6 +55,10 @@ function reducer<Type>(state: State<Type>, action: Action<Type>): State<Type> {
         return { ...state, ...action.data };
     case 'loaded':
         return { ...state, ...action.data };
+    case 'click':
+        return { ...state, ...action.data };
+    case 'hover':
+        return { ...state, ...action.data };
     default:
         return state;
     }
@@ -91,6 +97,8 @@ export default function VirtualTable<Type>({ height, renderer, fetcher }: Args<T
         itemCount: 0,
         items: [],
         offset: 0,
+        selected: -1,
+        hovered: -1,
     });
 
     const [currentOffset, setCurrentOffset] = useState(0);
@@ -151,8 +159,17 @@ export default function VirtualTable<Type>({ height, renderer, fetcher }: Args<T
 
     const generate = (offset: number, d: Array<Type>) => {
         const ret = [];
+
         for (let i = 0; i < d.length; i += 1) {
-            ret.push(<div key={i + offset}>{renderer(d[i])}</div>);
+            let backgroundColor = 'transparent';
+            if (i + offset === state.selected) {
+                backgroundColor = 'dimgrey';
+            } else if (i + offset === state.hovered) {
+                backgroundColor = 'silver';
+            }
+            ret.push(<div key={i + offset} style={{
+                backgroundColor,
+            }}>{renderer(d[i])}</div>);
         }
         return ret;
     };
@@ -195,6 +212,32 @@ export default function VirtualTable<Type>({ height, renderer, fetcher }: Args<T
                 style={{
                     height, overflow: 'scroll', position: 'absolute', width: '100%', top: 0,
                 }}
+                onMouseMove={(e) => {
+                    const childElement = ref.current.children[Math.floor((e.clientY + state.scrollTop) / state.itemHeight) - state.offset];
+                    if (childElement) {
+                        const event = new Event('mouseover', { bubbles: true, cancelable: false });
+                        childElement.dispatchEvent(event);
+                        dispatch({
+                            type: 'hover',
+                            data: {
+                                hovered: Math.floor((e.clientY + state.scrollTop) / state.itemHeight),
+                            },
+                        });
+                    }
+                }}
+                onClick={(e) => {
+                    const childElement = ref.current.children[Math.floor((e.clientY + state.scrollTop) / state.itemHeight) - state.offset];
+                    if (childElement) {
+                        const clickEvent = new Event('click', { bubbles: true, cancelable: false });
+                        childElement.children[0].dispatchEvent(clickEvent);
+                        dispatch({
+                            type: 'click',
+                            data: {
+                                selected: Math.floor((e.clientY + state.scrollTop) / state.itemHeight),
+                            },
+                        });
+                    }
+                }}
                 onScroll={(e) => {
                     dispatch({
                         type: 'scroll',
diff --git a/testApp/src/index.tsx b/testApp/src/index.tsx
index 1e34068..fd54c73 100644
--- a/testApp/src/index.tsx
+++ b/testApp/src/index.tsx
@@ -26,7 +26,14 @@ const fetchData = (index: number, count: number): Promise<Result<number>> => {
 function App() {
     return (
         <VirtualTable<number>
-            renderer={(i) => <div style={{ padding: 5 }}>{i !== undefined ? i : 'unknown'}</div>}
+            renderer={(i) => <div
+                style={{ padding: 5 }}
+                onClick={(e) => {
+                    console.log(`${i} clicked`);
+                }}
+            >
+                {i !== undefined ? i : 'unknown'}
+            </div>}
             height={400}
             fetcher={fetchData}
         />

From c5f6e0f3e9d70514e5d6fffc1e1ab8837603b816 Mon Sep 17 00:00:00 2001
From: Nikita Vakula <programmistov.programmist@gmail.com>
Date: Sun, 26 Nov 2023 22:15:53 +0100
Subject: [PATCH 2/2] Bumped version to 1.1.3

Signed-off-by: Nikita Vakula <programmistov.programmist@gmail.com>
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 82b33aa..f2e996e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@krjakbrjak/virtualtable",
-    "version": "1.1.2",
+    "version": "1.1.3",
     "description": "",
     "repository": {
         "type": "git",