release:doc

Author: edsonmartins

package.json

@@ -1,6 +1,6 @@
 {
   "name": "archbase-react",
-  "version": "2.0.95",
+  "version": "2.0.96",
   "description": "Biblioteca de compontentes React TypeScript focada em produtividade no desenvolvimento web.",
   "author": "Edson Martins <[email protected]>",
   "license": "MIT",

pnpm-lock.yaml

@@ -1,10 +1,10 @@
 import { useState, useEffect, useRef } from 'react';
 import { debounce } from 'lodash';
-import { ArchbaseDataSource, DataSourceEvent, DataSourceEventNames } from 'components/datasource';
+import { ArchbaseDataSource, DataSourceEvent, DataSourceEventNames, DataSourceOptions } from 'components/datasource';
 
 /**
- * Hook para estabilizar o comportamento da Grid e evitar perda de foco em inputs
- * ao interagir com a Grid.
+ * Hook para estabilizar o comportamento da Grid e evitar chamadas duplicadas à busca,
+ * além de preservar o foco em inputs durante interações.
  */
 export function useArchbaseDataGridStableRendering<T extends object, ID>({
   dataSource,
@@ -18,9 +18,16 @@ export function useArchbaseDataGridStableRendering<T extends object, ID>({
   const [totalRecords, setTotalRecords] = useState<number>(() => dataSource.getGrandTotalRecords());
   const [isLoading, setIsLoading] = useState<boolean>(false);
 
-  // Ref para controlar operações em andamento e evitar loops
+  // Refs para controle de estado
   const blockUpdates = useRef<boolean>(false);
   const pendingUpdate = useRef<boolean>(false);
+  const refreshInProgress = useRef<boolean>(false);
+  const refreshTimestampRef = useRef<number>(0);
+  const lastRefreshRequestRef = useRef<number>(0);
+
+  // Um Map para rastrear quais eventos foram processados recentemente
+  // Chave: tipo de evento, Valor: timestamp
+  const processedEvents = useRef<Map<DataSourceEventNames, number>>(new Map());
 
   // Função debounce para atualizar os dados de forma eficiente
   const debouncedUpdateData = useRef(
@@ -30,49 +37,98 @@ export function useArchbaseDataGridStableRendering<T extends object, ID>({
         return;
       }
 
+      // Verificar se uma atualização já foi feita recentemente
+      const now = Date.now();
+      if (now - refreshTimestampRef.current < debounceTime) {
+        return;
+      }
+
       try {
-        // Atualizar os dados
         setRows(dataSource.browseRecords());
         setTotalRecords(dataSource.getGrandTotalRecords());
         setIsLoading(false);
+        refreshTimestampRef.current = now;
+        refreshInProgress.current = false;
       } catch (error) {
         console.error('Erro ao atualizar dados:', error);
         setIsLoading(false);
+        refreshInProgress.current = false;
       }
     }, debounceTime)
   ).current;
 
+  // Função para forçar atualização dos dados com proteção contra chamadas duplicadas
+  const refreshData = () => {
+    const now = Date.now();
+
+    // Verificar se uma requisição de refresh já foi feita recentemente
+    if (now - lastRefreshRequestRef.current < debounceTime || refreshInProgress.current) {
+      console.log('Ignorando refresh duplicado');
+      return;
+    }
+
+    lastRefreshRequestRef.current = now;
+    refreshInProgress.current = true;
+    setIsLoading(true);
+
+    // Usar uma referência para rastrear este refresh especificamente
+    const refreshId = now;
+    const eventKey = Symbol('refreshEvent');
+
+    // Armazenar o ID do refresh para verificação posterior
+    (window as any)[eventKey] = refreshId;
+
+    // Chamar refresh com um ID que podemos verificar
+    dataSource.refreshData();
+
+    // Limpar a referência após um tempo
+    setTimeout(() => {
+      delete (window as any)[eventKey];
+    }, debounceTime * 2);
+  };
+
   // Efeito para gerenciar eventos do DataSource
   useEffect(() => {
     const handleDataSourceEvent = (event: DataSourceEvent<T>) => {
-      // Eventos que causam atualização de dados
-      if ([
+      // Lista de eventos que causam atualização de dados
+      const dataUpdateEvents = [
         DataSourceEventNames.refreshData,
         DataSourceEventNames.dataChanged,
         DataSourceEventNames.afterRemove,
         DataSourceEventNames.afterSave,
         DataSourceEventNames.afterAppend,
         DataSourceEventNames.afterCancel
-      ].includes(event.type)) {
+      ];
+
+      if (dataUpdateEvents.includes(event.type)) {
+        const now = Date.now();
+        const lastProcessed = processedEvents.current.get(event.type) || 0;
+
+        // Verificar se processamos este tipo de evento recentemente
+        if (now - lastProcessed < debounceTime) {
+          console.log(`Ignorando evento ${DataSourceEventNames[event.type]} próximo demais ao anterior`);
+          return;
+        }
+
+        // Marcar este evento como processado
+        processedEvents.current.set(event.type, now);
+
         // Se um componente de input estiver com foco, adiar a atualização
         if (document.activeElement &&
             ['INPUT', 'TEXTAREA', 'SELECT'].includes(document.activeElement.tagName)) {
-          // Marcar que há uma atualização pendente
           pendingUpdate.current = true;
-
-          // Não atualizar imediatamente para evitar perda de foco
           return;
         }
 
-        // Caso contrário, atualizar normalmente com debounce
+        // Atualizar com debounce para coalescer múltiplos eventos
         debouncedUpdateData();
       }
     };
 
     // Adicionar listener ao dataSource
     dataSource.addListener(handleDataSourceEvent);
 
-    // Verificar se há foco em um input e aplicar eventos de monitoramento
+    // Gerenciamento de foco para preservar experiência de usuário
     const handleFocusIn = () => {
       const activeElement = document.activeElement;
       if (activeElement && ['INPUT', 'TEXTAREA', 'SELECT'].includes(activeElement.tagName)) {
@@ -83,14 +139,13 @@ export function useArchbaseDataGridStableRendering<T extends object, ID>({
     const handleFocusOut = () => {
       blockUpdates.current = false;
 
-      // Se houve uma atualização pendente enquanto o input estava em foco, aplicá-la agora
+      // Aplicar atualizações pendentes após perder o foco
       if (pendingUpdate.current) {
         pendingUpdate.current = false;
         debouncedUpdateData();
       }
     };
 
-    // Tratamento para evitar perda de foco durante digitação
     document.addEventListener('focusin', handleFocusIn);
     document.addEventListener('focusout', handleFocusOut);
 
@@ -101,13 +156,7 @@ export function useArchbaseDataGridStableRendering<T extends object, ID>({
       document.removeEventListener('focusin', handleFocusIn);
       document.removeEventListener('focusout', handleFocusOut);
     };
-  }, [dataSource, debouncedUpdateData]);
-
-  // Função para forçar atualização dos dados
-  const refreshData = () => {
-    setIsLoading(true);
-    dataSource.refreshData();
-  };
+  }, [dataSource, debouncedUpdateData, debounceTime]);
 
   return {
     rows,

src/components/datagrid/hooks/use-grid-data-stable-rendering.ts

@@ -386,6 +386,7 @@ function ArchbaseDataGrid<T extends object = any, ID = any>(props: ArchbaseDataG
   }
 
   const handlePaginationChange = (newPaginationModel: { page: number; pageSize: number }) => {
+		console.log('[PAGINATION] Mudou pagination model ',newPaginationModel.page, newPaginationModel.pageSize)
     // Garantir que o pageSize não exceda o limite
     const safePageSize = Math.min(newPaginationModel.pageSize, MAX_PAGE_SIZE_MIT)
 

src/components/datagrid/main/archbase-data-grid.tsx

@@ -27,7 +27,7 @@ export function ArchbaseGridRowActions<T extends Object>({
   const theme = useArchbaseTheme();
 
   return (
-    <Group gap="0" justify='center' align='center'>
+    <Group gap="2" justify='center' align='center'>
       {onViewRow ? (
         <Tooltip withinPortal withArrow position="top" label={t('View')}>
           <ActionIcon