@archbase/components 3.0.0

package/src/datagrid/hooks/index.tsx

@@ -0,0 +1,18 @@
+// Exportação dos hooks relacionados ao painel de detalhes
+export {
+    useDetailPanels,
+    useDetailPanelAutoClose,
+    useDetailPanelPositions,
+    useAvailableSpace
+  } from './use-grid-details-panel';
+  
+  // Exportação dos hooks de gerenciamento de dados
+  export {
+    useGridData,
+    type ArchbaseGridState
+  } from './use-grid-data';
+  
+  // Exportação do hook de renderização estável
+  export {
+    useArchbaseDataGridStableRendering
+  } from './use-grid-data-stable-rendering';

package/src/datagrid/hooks/use-grid-data-stable-rendering.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-grid-data-stable-rendering.d.ts","sourceRoot":"","sources":["use-grid-data-stable-rendering.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAA4D,MAAM,gBAAgB,CAAC;AAE9G;;;GAGG;AACH,wBAAgB,kCAAkC,CAAC,CAAC,SAAS,MAAM,EAAE,EAAE,EAAE,EACvE,UAAU,EACV,YAAkB,EACnB,EAAE;IACD,UAAU,EAAE,kBAAkB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;;;;;EAwJA"}

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

@@ -0,0 +1,168 @@
+import { useState, useEffect, useRef } from 'react';
+import debounce from 'lodash/debounce';
+import { ArchbaseDataSource, DataSourceEvent, DataSourceEventNames, DataSourceOptions, IArchbaseDataSourceBase } from '@archbase/data';
+
+/**
+ * Hook para estabilizar o comportamento da Grid e evitar chamadas duplicadas à busca,
+ * além de preservar o foco em inputs durante interações.
+ * Suporta tanto ArchbaseDataSource (V1) quanto ArchbaseRemoteDataSourceV2 (V2)
+ */
+export function useArchbaseDataGridStableRendering<T extends object, ID>({
+  dataSource,
+  debounceTime = 300
+}: {
+  dataSource: IArchbaseDataSourceBase<T>;
+  debounceTime?: number;
+}) {
+  // Estados para controle da grid
+  const [rows, setRows] = useState<T[]>(() => dataSource.browseRecords());
+  const [totalRecords, setTotalRecords] = useState<number>(() => dataSource.getGrandTotalRecords());
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  // 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(
+    debounce(() => {
+      if (blockUpdates.current) {
+        pendingUpdate.current = true;
+        return;
+      }
+
+      // Verificar se uma atualização já foi feita recentemente
+      const now = Date.now();
+      if (now - refreshTimestampRef.current < debounceTime) {
+        return;
+      }
+
+      try {
+        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 as any).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>) => {
+      // Lista de eventos que causam atualização de dados
+      const dataUpdateEvents = [
+        DataSourceEventNames.refreshData,
+        DataSourceEventNames.dataChanged,
+        DataSourceEventNames.afterRemove,
+        DataSourceEventNames.afterSave,
+        DataSourceEventNames.afterAppend,
+        DataSourceEventNames.afterCancel
+      ];
+
+      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)) {
+          pendingUpdate.current = true;
+          return;
+        }
+
+        // Atualizar com debounce para coalescer múltiplos eventos
+        debouncedUpdateData();
+      }
+    };
+
+    // Adicionar listener ao dataSource
+    dataSource.addListener(handleDataSourceEvent);
+
+    // Gerenciamento de foco para preservar experiência de usuário
+    const handleFocusIn = () => {
+      const activeElement = document.activeElement;
+      if (activeElement && ['INPUT', 'TEXTAREA', 'SELECT'].includes(activeElement.tagName)) {
+        blockUpdates.current = true;
+      }
+    };
+
+    const handleFocusOut = () => {
+      blockUpdates.current = false;
+
+      // Aplicar atualizações pendentes após perder o foco
+      if (pendingUpdate.current) {
+        pendingUpdate.current = false;
+        debouncedUpdateData();
+      }
+    };
+
+    document.addEventListener('focusin', handleFocusIn);
+    document.addEventListener('focusout', handleFocusOut);
+
+    // Limpar quando o componente for desmontado
+    return () => {
+      dataSource.removeListener(handleDataSourceEvent);
+      debouncedUpdateData.cancel();
+      document.removeEventListener('focusin', handleFocusIn);
+      document.removeEventListener('focusout', handleFocusOut);
+    };
+  }, [dataSource, debouncedUpdateData, debounceTime]);
+
+  return {
+    rows,
+    totalRecords,
+    isLoading,
+    refreshData
+  };
+}

package/src/datagrid/hooks/use-grid-data.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-grid-data.d.ts","sourceRoot":"","sources":["use-grid-data.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,eAAe,EACf,qBAAqB,EACrB,aAAa,EACb,mBAAmB,EAGnB,iBAAiB,EAClB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAyC,MAAM,gBAAgB,CAAC;AAG3F;;GAEG;AACH,MAAM,WAAW,iBAAiB,CAAC,CAAC;IAElC,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,eAAe,EAAE,mBAAmB,CAAC;IACrC,SAAS,EAAE,aAAa,CAAC;IACzB,WAAW,EAAE,eAAe,CAAC;IAC7B,cAAc,EAAE,qBAAqB,CAAC;IACtC,gBAAgB,EAAE,CAAC,EAAE,CAAC;IAGtB,kBAAkB,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACzD,YAAY,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C,cAAc,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IACjD,iBAAiB,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAC1D,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,iBAAiB,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAC;CACrD;AA+ID;;GAEG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,EAAE,EAAE,EAChD,UAAU,EACV,QAAa,EACb,SAAa,EACb,QAAQ,EACR,OAAO,EACR,EAAE;IACD,UAAU,EAAE,kBAAkB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,GAAG,CAAC;IAC1B,OAAO,EAAE,GAAG,EAAE,CAAC;CAChB,GAAG,iBAAiB,CAAC,CAAC,CAAC,CA6YvB"}