Interesting delemma

src/Gridler/components/Computer.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { CompactSelection } from '@glideapps/glide-data-grid';
 import React, { useEffect, useRef } from 'react';
 
 import { useGridlerStore } from './Store';
@@ -8,28 +10,157 @@ export const Computer = React.memo(() => {
   const refLastFilters = useRef<any>(null);
   const {
     _glideref,
+    _gridSelectionRows,
+    askAPIRowNumber,
     colFilters,
     colOrder,
     colSize,
     colSort,
     columns,
+    getState,
     loadPage,
+
     setState,
     setStateFN,
+    values,
   } = useGridlerStore((s) => ({
     _glideref: s._glideref,
+    _gridSelectionRows: s._gridSelectionRows,
+    askAPIRowNumber: s.askAPIRowNumber,
     colFilters: s.colFilters,
     colOrder: s.colOrder,
     colSize: s.colSize,
     colSort: s.colSort,
     columns: s.columns,
+    getState: s.getState,
     loadPage: s.loadPage,
+
     setState: s.setState,
     setStateFN: s.setStateFN,
-
     uniqueid: s.uniqueid,
+    values: s.values,
   }));
 
+  useEffect(() => {
+    const searchSelection = async () => {
+      const page_data = getState('_page_data');
+      const pageSize = getState('pageSize');
+      const keyField = getState('keyField') ?? 'id';
+      const rowIndexes = [];
+      for (const vi in values as Array<any>) {
+        let rowIndex = -1;
+        const key = String(
+          typeof values?.[vi] === 'object'
+            ? values?.[vi]?.[keyField]
+            : typeof values?.[vi] === 'string'
+              ? values?.[vi]
+              : undefined
+        );
+        for (const p in page_data) {
+          for (const r in page_data[p]) {
+            const idx = Number(p) * pageSize + Number(r);
+
+            if (String(page_data[p][r]?.[keyField]) === key) {
+              //console.log('Found row S', idx, page_data[p][r], page_data[p][r]?.[keyField], key);
+              rowIndex = idx;
+              break;
+            }
+          }
+          if (rowIndex >= 0) {
+            rowIndexes.push(rowIndex);
+            break;
+          }
+        }
+        if (!(rowIndex >= 0) && typeof askAPIRowNumber === 'function') {
+          const idx = await askAPIRowNumber(key);
+          if (idx) {
+            rowIndexes.push(idx);
+          }
+        }
+        //console.log('Setting SSS', { key, rowIndex });
+      }
+      //console.log('Setting selection', { rowIndexes, values });
+      return rowIndexes;
+    };
+
+    if (values) {
+      searchSelection().then((rowIndexes) => {
+        // const newObj : GridSelection = {
+        //   ...cur,
+
+        //   rows: {
+        //     items: rowIndexes.map((r) => [r - 1, r]) ?? [],
+        //   },
+        // };
+        // console.log('Setting selection', {
+        //   rowIndexes,
+        //   values,
+        //   newObj,
+        // });
+        setStateFN('_gridSelectionRows', () => {
+          let rows = CompactSelection.empty();
+          rowIndexes.forEach((r) => {
+            rows = rows.add(r);
+          });
+          // for (const r of cur ?? CompactSelection.empty()) {
+          //   rows = rows.add(r);
+          // }
+          setStateFN('_gridSelection', (c) => ({
+            columns: c?.columns ?? CompactSelection.empty(),
+            ...c,
+            rows,
+          }));
+
+          return rows;
+        });
+      });
+    }
+  }, [values]);
+
+  useEffect(() => {
+    //console.log('Gridler:Computer: Selection changed', _gridSelectionRows?.toArray());
+    const onChange = getState('onChange');
+    if (onChange && typeof onChange === 'function') {
+      const page_data = getState('_page_data');
+      const pageSize = getState('pageSize');
+
+      const buffers = [];
+      if (_gridSelectionRows) {
+        for (const range of _gridSelectionRows) {
+          let buffer = undefined;
+
+          for (const p in page_data) {
+            for (const r in page_data[p]) {
+              const idx = Number(p) * pageSize + Number(r);
+              if (isNaN(idx)) {
+                continue;
+              }
+
+              if (Number(page_data[p][r]?._rownumber) === range + 1) {
+                buffer = page_data[p][r];
+                //console.log('Found row', range, idx, page_data[p][r]?._rownumber);
+                break;
+              } else if (idx === range + 1) {
+                buffer = page_data[p][r];
+                //console.log('Found row 2', range, idx, page_data[p][r]?._rownumber);
+                break;
+              }
+            }
+          }
+          if (buffer !== undefined) {
+            buffers.push(buffer);
+          }
+        }
+      }
+      //console.log('Calling onChange with buffers', buffers, _gridSelectionRows?.toArray());
+      const _values = getState('values');
+
+      if (JSON.stringify(_values) !== JSON.stringify(buffers)) {
+        onChange(buffers);
+      }
+    }
+  }, [JSON.stringify(_gridSelectionRows), getState]);
+
   useEffect(() => {
     setState(
       'renderColumns',
@@ -45,6 +176,14 @@ export const Computer = React.memo(() => {
     if (!colSort) {
       return;
     }
+
+    setState('_gridSelection', {
+      columns: CompactSelection.empty(),
+      current: undefined,
+      rows: CompactSelection.empty(),
+    });
+
+    setState('_gridSelectionRows', CompactSelection.empty());
     setStateFN('renderColumns', (cols) => {
       return cols?.map((c) => ({
         ...c,
@@ -64,7 +203,7 @@ export const Computer = React.memo(() => {
     if (!colFilters) {
       return;
     }
-    
+
     if (JSON.stringify(refLastFilters.current) !== JSON.stringify(colFilters)) {
       loadPage(0, 'all');
       refLastFilters.current = colFilters;
@@ -87,6 +226,7 @@ export const Computer = React.memo(() => {
     if (!colOrder) {
       return;
     }
+
     setStateFN('renderColumns', (cols) => {
       const result = cols?.sort((a, b) => {
         if (colOrder[a.id] > colOrder[b.id]) {