Forward Ref and selection/scrollto

src/Gridler/components/Computer.tsx

@@ -10,32 +10,36 @@ export const Computer = React.memo(() => {
   const {
     _glideref,
     _gridSelectionRows,
-    askAPIRowNumber,
     colFilters,
     colOrder,
     colSize,
     colSort,
     columns,
+    getRowIndexByKey,
     getState,
     loadPage,
     ready,
 
+    scrollToRowKey,
+    selectedRowKey,
     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,
+    getRowIndexByKey: s.getRowIndexByKey,
     getState: s.getState,
     loadPage: s.loadPage,
     ready: s.ready,
 
+    scrollToRowKey: s.scrollToRowKey,
+    selectedRowKey: s.selectedRowKey,
     setState: s.setState,
     setStateFN: s.setStateFN,
     uniqueid: s.uniqueid,
@@ -72,8 +76,8 @@ export const Computer = React.memo(() => {
             break;
           }
         }
-        if (!(rowIndex >= 0) && typeof askAPIRowNumber === 'function') {
-          const idx = await askAPIRowNumber(key);
+        if (!(rowIndex >= 0)) {
+          const idx = await getRowIndexByKey(key);
           if (idx) {
             rowIndexes.push(idx);
           }
@@ -180,12 +184,14 @@ export const Computer = React.memo(() => {
             : (c.defaultIcon ?? 'sort'),
       }));
     }).then(() => {
-      loadPage(0, 'all');
-      getState('_events')?.dispatchEvent?.(
-        new CustomEvent('onColumnSorted', {
-          detail: { cols: colSort },
-        })
-      );
+      loadPage(0, 'all').then(() => {
+        getState('refreshCells')?.();
+        getState('_events')?.dispatchEvent?.(
+          new CustomEvent('onColumnSorted', {
+            detail: { cols: colSort },
+          })
+        );
+      });
     });
   }, [colSort]);
 
@@ -195,13 +201,15 @@ export const Computer = React.memo(() => {
     }
 
     if (JSON.stringify(refLastFilters.current) !== JSON.stringify(colFilters)) {
-      loadPage(0, 'all');
+      loadPage(0, 'all').then(() => {
+        getState('refreshCells')?.();
+        getState('_events')?.dispatchEvent?.(
+          new CustomEvent('onColumnFiltered', {
+            detail: { filters: colFilters },
+          })
+        );
+      });
       refLastFilters.current = colFilters;
-      getState('_events')?.dispatchEvent?.(
-        new CustomEvent('onColumnFiltered', {
-          detail: { filters: colFilters },
-        })
-      );
     }
   }, [colFilters]);
 
@@ -214,6 +222,8 @@ export const Computer = React.memo(() => {
         ...c,
         width: c.id && colSize?.[c.id] ? colSize?.[c.id] : c.width,
       }));
+    }).then(() => {
+      getState('refreshCells')?.();
     });
   }, [colSize]);
 
@@ -231,6 +241,8 @@ export const Computer = React.memo(() => {
       });
 
       return result;
+    }).then(() => {
+      getState('refreshCells')?.();
     });
   }, [colOrder]);
 
@@ -242,7 +254,9 @@ export const Computer = React.memo(() => {
       return;
     }
     refFirstRun.current = 1;
-    loadPage(0);
+    loadPage(0).then(() => {
+      getState('refreshCells')?.();
+    });
   }, [ready, loadPage]);
 
   useEffect(() => {
@@ -250,30 +264,29 @@ export const Computer = React.memo(() => {
     const loadPage = () => {
       const selectFirstRowOnMount = getState('selectFirstRowOnMount');
       if (selectFirstRowOnMount) {
-        const selectedRow = getState('selectedRow');
-        if (selectedRow && selectedRow >= 0) {
+        const scrollToRowKey = getState('scrollToRowKey');
+        if (scrollToRowKey && scrollToRowKey >= 0) {
           return;
         }
         const keyField = getState('keyField') ?? 'id';
         const page_data = getState('_page_data');
+
         const firstBuffer = page_data?.[0]?.[0];
         const firstRow = firstBuffer?.[keyField];
+        const currentValues = getState('values') ?? [];
 
-        if (firstRow && firstRow > 0) {
-          const values = [
-            firstBuffer,
-            ...((getState('values') ?? []) as Array<Record<string, unknown>>),
-          ];
+        if (firstRow && firstRow > 0 && (currentValues.length ?? 0) === 0) {
+          const values = [firstBuffer, ...(currentValues as Array<Record<string, unknown>>)];
 
           const onChange = getState('onChange');
-          console.log('Selecting first row:', firstRow, firstBuffer, values);
+          //console.log('Selecting first row:', firstRow, firstBuffer, values);
           if (onChange) {
             onChange(values);
           } else {
             setState('values', values);
           }
 
-          setState('selectedRow', firstRow);
+          setState('scrollToRowKey', firstRow);
         }
       }
     };
@@ -284,6 +297,64 @@ export const Computer = React.memo(() => {
       _events?.removeEventListener('loadPage', loadPage);
     };
   }, []);
+
+  /// logic to apply the selected row.
+  useEffect(() => {
+    const ready = getState('ready');
+    const ref = getState('_glideref');
+    const getRowIndexByKey = getState('getRowIndexByKey');
+
+    if (scrollToRowKey && ref && ready) {
+      getRowIndexByKey?.(scrollToRowKey).then((r) => {
+        if (r !== undefined) {
+          console.log('Scrolling to selected row:', scrollToRowKey, r);
+          ref.scrollTo(0, r);
+          getState('_events').dispatchEvent(
+            new CustomEvent('scrollToRowKeyFound', {
+              detail: { rowNumber: r, scrollToRowKey: scrollToRowKey },
+            })
+          );
+        }
+      });
+    }
+  }, [scrollToRowKey]);
+
+  useEffect(() => {
+    const ready = getState('ready');
+    const ref = getState('_glideref');
+    const getRowIndexByKey = getState('getRowIndexByKey');
+    const key = selectedRowKey ?? scrollToRowKey;
+
+    if (key && ref && ready) {
+      getRowIndexByKey?.(key).then((r) => {
+        if (r !== undefined) {
+          console.log('Scrolling to selected row:', r, selectedRowKey, scrollToRowKey);
+
+          if (selectedRowKey) {
+            const onChange = getState('onChange');
+            const selected = [{ [getState('keyField') ?? 'id']: selectedRowKey }];
+            if (onChange) {
+              onChange(selected);
+            } else {
+              setState('values', selected);
+            }
+          }
+
+          ref.scrollTo(0, r);
+          getState('_events').dispatchEvent(
+            new CustomEvent('scrollToRowKeyFound', {
+              detail: {
+                rowNumber: r,
+                scrollToRowKey: scrollToRowKey,
+                selectedRowKey: selectedRowKey,
+              },
+            })
+          );
+        }
+      });
+    }
+  }, [scrollToRowKey, selectedRowKey]);
+
   // console.log('Gridler:Debug:Computer', {
   //   colFilters,
   //   colOrder,