RELEASING: Releasing 1 package(s)

Releases:
  @warkypublic/oranguru@0.0.13

[skip ci]

CHANGELOG.md

@@ -1,5 +1,11 @@
 # @warkypublic/zustandsyncstore
 
+## 0.0.13
+
+### Patch Changes
+
+- b4058f1: Fixed search and allow row selection for only rows with keys
+
 ## 0.0.12
 
 ### Patch Changes

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@warkypublic/oranguru",
   "author": "Warky Devs",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/Gridler/GridlerDataGrid.tsx

@@ -197,7 +197,13 @@ export const GridlerDataGrid = () => {
             onGridSelectionChange={(selection) => {
               let rows = CompactSelection.empty();
               const currentSelection = getState('_gridSelection');
+              const keyField = getState('keyField') ?? 'id';
+              const getRowBuffer = getState('getRowBuffer');
               for (const r of selection.rows) {
+                const validRowID = getRowBuffer ? getRowBuffer(r)?.[keyField] : null;
+                if (!validRowID) {
+                  continue;
+                }
                 rows = rows.hasIndex(r) ? rows : rows.add(r);
               }
               if (selectMode === 'row' && selection.current?.range) {
@@ -206,6 +212,10 @@ export const GridlerDataGrid = () => {
                   y < selection.current.range.y + selection.current.range.height;
                   y++
                 ) {
+                  const validRowID = getRowBuffer ? getRowBuffer(y)?.[keyField] : null;
+                  if (!validRowID) {
+                    continue;
+                  }
                   rows = rows.hasIndex(y) ? rows : rows.add(y);
                 }
               }

src/Gridler/components/Computer.tsx

@@ -1,4 +1,5 @@
 import { CompactSelection } from '@glideapps/glide-data-grid';
+import { useDebouncedCallback } from '@mantine/hooks';
 import React, { useEffect, useRef } from 'react';
 
 import { useGridlerStore } from './GridlerStore';
@@ -6,6 +7,7 @@ import { useGridlerStore } from './GridlerStore';
 //The computer component does not need to be recalculated on every render, so we use React.memo to prevent unnecessary re-renders.
 export const Computer = React.memo(() => {
   const refFirstRun = useRef(0);
+  const refLastSearch = useRef('');
   const refLastFilters = useRef<unknown>(null);
   const {
     _glideref,
@@ -21,6 +23,7 @@ export const Computer = React.memo(() => {
     ready,
 
     scrollToRowKey,
+    searchStr,
     selectedRowKey,
     setState,
     setStateFN,
@@ -39,6 +42,7 @@ export const Computer = React.memo(() => {
     ready: s.ready,
 
     scrollToRowKey: s.scrollToRowKey,
+    searchStr: s.searchStr,
     selectedRowKey: s.selectedRowKey,
     setState: s.setState,
     setStateFN: s.setStateFN,
@@ -46,6 +50,23 @@ export const Computer = React.memo(() => {
     values: s.values,
   }));
 
+  const debouncedDoSearch = useDebouncedCallback(
+    (searchStr: string) => {
+      loadPage(0, 'all').then(() => {
+        getState('refreshCells')?.();
+        getState('_events')?.dispatchEvent?.(
+          new CustomEvent('onSearched', {
+            detail: { search: searchStr },
+          })
+        );
+      });
+    },
+    {
+      delay: 300,
+      leading: false,
+    }
+  );
+
   useEffect(() => {
     const searchSelection = async () => {
       const page_data = getState('_page_data');
@@ -161,6 +182,17 @@ export const Computer = React.memo(() => {
     );
   }, [columns]);
 
+  useEffect(() => {
+    if (searchStr === undefined || searchStr === null) {
+      refLastSearch.current = '';
+      return;
+    }
+    if (refLastSearch.current !== searchStr) {
+      debouncedDoSearch(searchStr);
+      refLastSearch.current = searchStr;
+    }
+  }, [searchStr]);
+
   useEffect(() => {
     if (!colSort) {
       return;

src/Gridler/components/GridlerStore.tsx

@@ -916,7 +916,7 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
       hideMenu: props.hideMenu ?? menus.hide,
       scrollToRowKey: props.scrollToRowKey ?? props.selectedRowKey ?? getState('scrollToRowKey'),
       showMenu: props.showMenu ?? menus.show,
-      total_rows: props.total_rows ?? getState('total_rows') ?? 0,
+      total_rows: getState('total_rows') ?? props.total_rows,
     };
   }
 );

src/Gridler/components/adaptors/GlidlerAPIAdaptorForGoLangv2.tsx

@@ -76,7 +76,7 @@ function _GlidlerAPIAdaptorForGoLangv2<T = unknown>(props: GlidlerAPIAdaptorForG
               ?.forEach((filter: any) => {
                 ops.push({
                   name: `${filter.id}`,
-                  op: filter.operator,
+                  op: 'contains',
                   type: 'searchor',
                   value: searchStr,
                 });

src/Gridler/index.ts

@@ -2,7 +2,7 @@ export {GlidlerAPIAdaptorForGoLangv2 } from './components/adaptors/GlidlerAPIAda
 export {GlidlerFormAdaptor } from './components/adaptors/GlidlerFormAdaptor'
 export {GlidlerLocalDataAdaptor } from './components/adaptors/GlidlerLocalDataAdaptor'
 export * from './components/Column'
-export {type GridlerProps,type GridlerState, useGridlerStore } from './components/GridlerStore'
+export {type GridlerProps,type GridlerRef,type GridlerState, useGridlerStore } from './components/GridlerStore'
 export { GridlerRightMenuIcon } from './components/RightMenuIcon'
 export {Gridler} from './Gridler'
 export  * from './utils'

src/Gridler/stories/Examples.goapi.tsx

@@ -17,6 +17,7 @@ export const GridlerGoAPIExampleEventlog = () => {
   const [apiKey, setApiKey] = useLocalStorage({ defaultValue: '', key: 'apikey' });
   const [selectRow, setSelectRow] = useState<string | undefined>('');
   const [values, setValues] = useState<Array<Record<string, any>>>([]);
+  const [search, setSearch] = useState<string>('');
   const [sections, setSections] = useState<Record<string, unknown> | undefined>(undefined);
   const columns: GridlerColumns = [
     {
@@ -110,6 +111,7 @@ export const GridlerGoAPIExampleEventlog = () => {
         }}
         ref={ref}
         scrollToRowKey={selectRow ? parseInt(selectRow, 10) : undefined}
+        searchStr={search}
         sections={{ ...sections, rightElementDisabled: false }}
         selectFirstRowOnMount={true}
         selectMode="row"
@@ -131,6 +133,13 @@ export const GridlerGoAPIExampleEventlog = () => {
       </Gridler>
       <Divider />
       <Group>
+        <TextInput
+          leftSection={<>S</>}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="Search"
+          value={search}
+          w="190px"
+        />
         <TextInput
           onChange={(e) => setSelectRow(e.target.value)}
           placeholder="row"