@bit.rhplus/ui.grid 0.0.38 → 0.0.40

package/index.jsx

@@ -1,339 +1,339 @@
-/* eslint-disable */
-import React, { useCallback, useEffect, useState, useMemo, useImperativeHandle, forwardRef } from 'react';
-import AgGrid from '@bit.rhplus/ag-grid';
-// import { AgGridReact } from 'ag-grid-react';
-import classnames from 'classnames';
-import { OperationType, useSharedGrid } from '@bit.rhplus/shared-grid-form';
-import { AgGridColumns } from './AgGridColumns';
-import { useGridLayout, ColumnEditorModal } from '@bit.rhplus/ui.grid-layout';
-import { useOidcAccessToken } from "@axa-fr/react-oidc";
-
-const Grid = React.forwardRef((props, ref) => {
-  const gridRef = React.useRef(null);
-  const {
-    appearance = 'ag-theme-alpine',
-    columnDefs,
-    height = '100%',
-    defaultColDef,
-    gridOptions,
-    rowClassRules,
-    editableDefault = true,
-    onRowDoubleClicked,
-    // Grid Layout props
-    gridName,
-    applicationName = 'Portal.App',
-    userKey,
-    filterName,
-    layoutEnabled = true,
-    autoSave = true,
-    autoSaveDelay = 2000,
-    accessToken,
-    waitForSavedFields = false, // Nový prop pro odložené zobrazení columnDefs
-    onLayoutLoaded,
-    onLayoutSaved,
-    onLayoutError,
-  } = props;
-
-  
-  const {
-    items,
-    onGridReady,
-    addItem,
-    updateItem,
-    deleteItem,
-    pendingChanges = [],
-    isCellEditable,
-  } = useSharedGrid();
-
-  const [gridApi, setGridApi] = useState(null);
-  const [gridLayoutActivated, setGridLayoutActivated] = useState(false);
-
-  // Konverze columnDefs na array pro Grid Layout - memoizace pro prevenci nekonečné smyčky
-  const columnDefsArray = useMemo(() => {
-    if (Array.isArray(columnDefs)) {
-      return columnDefs;
-    }
-    // Pokud má build() metodu, je to pravděpodobně ColumnBuilder
-    if (columnDefs && typeof columnDefs.build === 'function') {
-      return columnDefs.build();
-    }
-    return [];
-  }, [columnDefs]);
-
-  // Grid Layout Management
-  const gridLayout = useGridLayout({
-    userKey,
-    applicationName,
-    gridName,
-    filterName,
-    enabled: layoutEnabled && !!userKey && !!gridName,
-    autoSave,
-    autoSaveDelay,
-    columnDefs: columnDefsArray,
-    accessToken,
-    waitForSavedFields, // Nový parametr pro odložené zobrazení
-    onLayoutLoaded,
-    onLayoutSaved,
-    onError: onLayoutError
-  });
-
-  // Handler pro připravení gridu
-  const handleGridReady = useCallback(
-    (event, options) => {
-      setGridApi(event.api);
-      
-      // Modern AG-Grid (33+) fix: columnApi was moved to main api object
-      const normalizedEvent = {
-        ...event,
-        api: event.api,
-        columnApi: event.columnApi || event.api // fallback for modern AG-Grid versions
-      };
-      
-      // Grid Layout initialization
-      if (layoutEnabled && gridLayout.onGridReady && !gridLayoutActivated) {
-        gridLayout.onGridReady(normalizedEvent);
-        setGridLayoutActivated(true);
-      }
-      
-      if (onGridReady) {
-        onGridReady(event);
-      }
-    },
-    [onGridReady, layoutEnabled, gridLayout, userKey, gridName]
-  );
-
-  // Effect pro delayed grid layout activation když se layoutEnabled změní na true
-  useEffect(() => {
-    // Pokud se layoutEnabled změnilo na true a máme již gridApi, aktivujeme grid layout
-    if (layoutEnabled && gridApi && gridLayout.onGridReady && !gridLayoutActivated) {
-      // Simulujeme onGridReady event pro grid layout
-      // Modern AG-Grid (33+) fix: columnApi functionality is in main api
-      const mockGridReadyParams = {
-        api: gridApi,
-        columnApi: gridApi.columnApi || gridApi // fallback for modern AG-Grid versions
-      };
-      
-      try {
-        gridLayout.onGridReady(mockGridReadyParams);
-        setGridLayoutActivated(true);
-      } catch (error) {
-        console.error('❌ UI/Grid: Error in delayed grid layout activation:', error);
-      }
-    }
-  }, [layoutEnabled, gridApi, gridLayout, userKey, gridName, gridLayoutActivated]);
-
-  // Handler pro změnu hodnoty buňky
-  const handleCellValueChanged = useCallback(
-    (params) => {
-      const { data, colDef, newValue } = params;
-      // Extrahujeme pouze změněné pole
-      const changes = { [colDef.field]: newValue };
-      updateItem(data.id, changes);
-    },
-    [updateItem]
-  );
-
-  // Handler pro dvojklik na buňku
-  // const handleCellDoubleClicked = useCallback((params) => {
-  //   const { colDef } = params;
-
-  //   // Pokud je buňka needitovatelná, vyvoláme událost onRowDoubleClicked
-  //   let isEditable = true;
-  //   if (typeof colDef.editable === 'function') {
-  //     isEditable = colDef.editable(params);
-  //   } else if (typeof colDef.editable === 'boolean') {
-  //     isEditable = colDef.editable;
-  //   } else {
-  //     isEditable = editableDefault;
-  //   }
-
-  //   // Pokud buňka není editovatelná a máme definován callback pro dvojklik na řádek
-  //   if (!isEditable && onRowDoubleClicked) {
-  //     // Simulujeme událost dvojkliku na řádek
-  //     onRowDoubleClicked({
-  //       ...params,
-  //       // Přidáme data, která by normálně obsahovala událost onRowDoubleClicked
-  //       api: params.api,
-  //       node: params.node,
-  //       rowIndex: params.rowIndex,
-  //       data: params.data,
-  //       event: params.event
-  //     });
-
-  //     // Zastavíme výchozí zpracování událostí, aby se nezobrazil editor buňky
-  //     if (params.event) {
-  //       params.event.preventDefault();
-  //     }
-  //   }
-  // }, [onRowDoubleClicked, editableDefault]);
-
-  // Handler pro přidání nového řádku
-  const handleAddRow = useCallback(
-    (rowData = {}) => {
-      const newItemId = addItem(rowData);
-
-      // Může být potřeba aktualizovat grid pro zobrazení nového řádku
-      if (gridApi) {
-        gridApi.setRowData(items);
-
-        // Volitelně: přejít na nově přidanou položku
-        setTimeout(() => {
-          const rowNode = gridApi.getRowNode(newItemId);
-          if (rowNode) {
-            gridApi.ensureNodeVisible(rowNode);
-          }
-        }, 100);
-      }
-
-      return newItemId;
-    },
-    [addItem, gridApi, items]
-  );
-
-  // Handler pro odstranění řádku
-  const handleDeleteRow = useCallback(
-    (id) => {
-      deleteItem(id);
-
-      // Může být potřeba aktualizovat grid
-      if (gridApi) {
-        gridApi.setRowData(items);
-      }
-    },
-    [deleteItem, gridApi, items]
-  );
-
-  // Vlastní CSS třídy pro řádky s čekajícími změnami
-  const defaultRowClassRules = {
-    'row-pending-add': (params) => {
-      return (
-        pendingChanges[params.data.id] &&
-        pendingChanges[params.data.id].operation === OperationType.ADD
-      );
-    },
-    'row-pending-update': (params) => {
-      return (
-        pendingChanges[params.data.id] &&
-        pendingChanges[params.data.id].operation === OperationType.UPDATE
-      );
-    },
-    'row-pending-delete': (params) => {
-      return (
-        pendingChanges[params.data.id] &&
-        pendingChanges[params.data.id].operation === OperationType.DELETE
-      );
-    },
-  };
-
-  // Kombinované rowClassRules
-  const combinedRowClassRules = { ...defaultRowClassRules, ...rowClassRules };
-
-  // Exportovat metody pro přidání/odstranění řádků
-  useEffect(() => {
-    if (gridApi) {
-      // Metody můžeme přidat přímo do gridApi pro použití z vnějšku
-      gridApi.addRow = handleAddRow;
-      gridApi.deleteRow = handleDeleteRow;
-    }
-  }, [gridApi, handleAddRow, handleDeleteRow]);
-
-  const allGridProps = {
-    rowData: items,
-    defaultColDef: {
-      enableCellChangeFlash: true,
-      editable: editableDefault,
-      resizable: true,
-      ...defaultColDef,
-    },
-    isRowSelectable: (params) => {
-      return (
-        !pendingChanges[params.data.id] ||
-        pendingChanges[params.data.id].operation !== OperationType.DELETE
-      );
-    },
-    isEditable: isCellEditable,
-    onGridReady: handleGridReady,
-    onCellValueChanged: handleCellValueChanged,
-    // Grid Layout event handlers - always attached, but with internal enabled check
-    onColumnMoved: gridLayout.onColumnMoved,
-    onDragStopped: gridLayout.onDragStopped, // Handler pro konec drag operace
-    onColumnResized: gridLayout.onColumnResized,
-    onColumnVisible: gridLayout.onColumnVisible,
-    onColumnPinned: gridLayout.onColumnPinned,
-    getRowId: (params) => params.data.id,
-    // Grid Layout: maintain column order for proper column reordering
-    maintainColumnOrder: true,
-    ...gridOptions,
-    context: {
-      componentParent: this,
-      // Grid Layout context
-      ...(layoutEnabled && {
-        gridLayout: {
-          isLoading: gridLayout.isLoading,
-          isSaving: gridLayout.isSaving,
-          hasUnsavedChanges: gridLayout.hasUnsavedChanges,
-          saveLayout: gridLayout.saveLayout,
-          resetToDefault: gridLayout.resetToDefault,
-          reloadLayout: gridLayout.reloadLayout,
-          openColumnEditor: gridLayout.openColumnEditor // Pro přístup z AG-Grid kontextu
-        }
-      })
-    },
-    ...props,
-    ref: gridRef,
-    // Použijeme pre-transformované columnDefs pro waitForSavedFields mode
-    columnDefs: AgGridColumns(gridLayout.preTransformedColumnDefs || columnDefs, props),
-  };
-
-  useImperativeHandle(ref, () => ({
-    showColumnEditor: () => {
-      gridLayout.openColumnEditor();
-    }
-  }));
-
-  console.log('gridLayout.isColumnEditorOpen', gridLayout.isColumnEditorOpen);
-  return (
-    <>
-      <div className={classnames(appearance)} style={{ height }}>
-        {gridLayout.shouldShowColumns ? (
-          <AgGrid 
-            {...allGridProps}
-            onGridReady={handleGridReady}
-          />
-        ) : (
-          <div style={{ 
-            display: 'flex', 
-            justifyContent: 'center', 
-            alignItems: 'center', 
-            height: '100%',
-            background: '#f5f5f5'
-          }}>
-            <div>Načítání sloupců...</div>
-          </div>
-        )}
-      </div>
-      
-      {/* Column Editor Modal */}
-      {gridLayout.isColumnEditorOpen && (
-        <ColumnEditorModal
-          open={gridLayout.isColumnEditorOpen}
-          onCancel={gridLayout.closeColumnEditor}
-          onSave={gridLayout.saveColumnEditorChanges}
-          columns={gridLayout.getCurrentColumnsForEditor()}
-          getContainer={() => document.getElementById('root') || document.body}
-          zIndex={10000}
-        />
-      )}
-    </>
-  );
-});
-
-export default Grid;
-export * from './enums';
-export { default as ColumnBuilder } from './ColumnBuilder';
-export { default as ContextBuilder } from './ContextBuilder';
-export * as utils from './utils';
-export * from './tooltips';
-// Grid Layout exports
-
-/* eslint-enable */
+/* eslint-disable */
+import React, { useCallback, useEffect, useState, useMemo, useImperativeHandle, forwardRef } from 'react';
+import AgGrid from '@bit.rhplus/ag-grid';
+// import { AgGridReact } from 'ag-grid-react';
+import classnames from 'classnames';
+import { OperationType, useSharedGrid } from '@bit.rhplus/shared-grid-form';
+import { useGridLayout, ColumnEditorModal } from '@bit.rhplus/ui.grid-layout';
+import { useOidcAccessToken } from "@axa-fr/react-oidc";
+
+const Grid = React.forwardRef((props, ref) => {
+  const gridRef = React.useRef(null);
+  const {
+    appearance = 'ag-theme-alpine',
+    columnDefs,
+    height = '100%',
+    defaultColDef,
+    gridOptions,
+    rowClassRules,
+    editableDefault = true,
+    onRowDoubleClicked,
+    // Grid Layout props
+    gridName,
+    applicationName = 'Portal.App',
+    userKey,
+    filterName,
+    layoutEnabled = true,
+    autoSave = true,
+    autoSaveDelay = 2000,
+    accessToken,
+    waitForSavedFields = false, // Nový prop pro odložené zobrazení columnDefs
+    onLayoutLoaded,
+    onLayoutSaved,
+    onLayoutError,
+  } = props;
+
+  
+  const {
+    items,
+    onGridReady,
+    addItem,
+    updateItem,
+    deleteItem,
+    pendingChanges = [],
+    isCellEditable,
+  } = useSharedGrid();
+
+  const [gridApi, setGridApi] = useState(null);
+  const [gridLayoutActivated, setGridLayoutActivated] = useState(false);
+
+  // Konverze columnDefs na array pro Grid Layout - memoizace pro prevenci nekonečné smyčky
+  const columnDefsArray = useMemo(() => {
+    if (Array.isArray(columnDefs)) {
+      return columnDefs;
+    }
+    // Pokud má build() metodu, je to pravděpodobně ColumnBuilder
+    if (columnDefs && typeof columnDefs.build === 'function') {
+      return columnDefs.build();
+    }
+    return [];
+  }, [columnDefs]);
+
+  // Grid Layout Management
+  const gridLayout = useGridLayout({
+    userKey,
+    applicationName,
+    gridName,
+    filterName,
+    enabled: layoutEnabled && !!userKey && !!gridName,
+    autoSave,
+    autoSaveDelay,
+    columnDefs: columnDefsArray,
+    accessToken,
+    waitForSavedFields, // Nový parametr pro odložené zobrazení
+    onLayoutLoaded,
+    onLayoutSaved,
+    onError: onLayoutError
+  });
+
+  // Handler pro připravení gridu
+  const handleGridReady = useCallback(
+    (event, options) => {
+      setGridApi(event.api);
+      
+      // Modern AG-Grid (33+) fix: columnApi was moved to main api object
+      const normalizedEvent = {
+        ...event,
+        api: event.api,
+        columnApi: event.columnApi || event.api // fallback for modern AG-Grid versions
+      };
+      
+      // Grid Layout initialization
+      if (layoutEnabled && gridLayout.onGridReady && !gridLayoutActivated) {
+        gridLayout.onGridReady(normalizedEvent);
+        setGridLayoutActivated(true);
+      }
+      
+      if (onGridReady) {
+        onGridReady(event);
+      }
+    },
+    [onGridReady, layoutEnabled, gridLayout, userKey, gridName]
+  );
+
+  // Effect pro delayed grid layout activation když se layoutEnabled změní na true
+  useEffect(() => {
+    // Pokud se layoutEnabled změnilo na true a máme již gridApi, aktivujeme grid layout
+    if (layoutEnabled && gridApi && gridLayout.onGridReady && !gridLayoutActivated) {
+      // Simulujeme onGridReady event pro grid layout
+      // Modern AG-Grid (33+) fix: columnApi functionality is in main api
+      const mockGridReadyParams = {
+        api: gridApi,
+        columnApi: gridApi.columnApi || gridApi // fallback for modern AG-Grid versions
+      };
+      
+      try {
+        gridLayout.onGridReady(mockGridReadyParams);
+        setGridLayoutActivated(true);
+      } catch (error) {
+        // Removed console.error for production
+      }
+    }
+  }, [layoutEnabled, gridApi, gridLayout, userKey, gridName, gridLayoutActivated]);
+
+  // Handler pro změnu hodnoty buňky
+  const handleCellValueChanged = useCallback(
+    (params) => {
+      const { data, colDef, newValue } = params;
+      // Extrahujeme pouze změněné pole
+      const changes = { [colDef.field]: newValue };
+      updateItem(data.id, changes);
+    },
+    [updateItem]
+  );
+
+  // Handler pro dvojklik na buňku
+  // const handleCellDoubleClicked = useCallback((params) => {
+  //   const { colDef } = params;
+
+  //   // Pokud je buňka needitovatelná, vyvoláme událost onRowDoubleClicked
+  //   let isEditable = true;
+  //   if (typeof colDef.editable === 'function') {
+  //     isEditable = colDef.editable(params);
+  //   } else if (typeof colDef.editable === 'boolean') {
+  //     isEditable = colDef.editable;
+  //   } else {
+  //     isEditable = editableDefault;
+  //   }
+
+  //   // Pokud buňka není editovatelná a máme definován callback pro dvojklik na řádek
+  //   if (!isEditable && onRowDoubleClicked) {
+  //     // Simulujeme událost dvojkliku na řádek
+  //     onRowDoubleClicked({
+  //       ...params,
+  //       // Přidáme data, která by normálně obsahovala událost onRowDoubleClicked
+  //       api: params.api,
+  //       node: params.node,
+  //       rowIndex: params.rowIndex,
+  //       data: params.data,
+  //       event: params.event
+  //     });
+
+  //     // Zastavíme výchozí zpracování událostí, aby se nezobrazil editor buňky
+  //     if (params.event) {
+  //       params.event.preventDefault();
+  //     }
+  //   }
+  // }, [onRowDoubleClicked, editableDefault]);
+
+  // Handler pro přidání nového řádku
+  const handleAddRow = useCallback(
+    (rowData = {}) => {
+      const newItemId = addItem(rowData);
+
+      // Může být potřeba aktualizovat grid pro zobrazení nového řádku
+      if (gridApi) {
+        gridApi.setRowData(items);
+
+        // Volitelně: přejít na nově přidanou položku
+        setTimeout(() => {
+          const rowNode = gridApi.getRowNode(newItemId);
+          if (rowNode) {
+            gridApi.ensureNodeVisible(rowNode);
+          }
+        }, 100);
+      }
+
+      return newItemId;
+    },
+    [addItem, gridApi, items]
+  );
+
+  // Handler pro odstranění řádku
+  const handleDeleteRow = useCallback(
+    (id) => {
+      deleteItem(id);
+
+      // Může být potřeba aktualizovat grid
+      if (gridApi) {
+        gridApi.setRowData(items);
+      }
+    },
+    [deleteItem, gridApi, items]
+  );
+
+  // Vlastní CSS třídy pro řádky s čekajícími změnami
+  const defaultRowClassRules = {
+    'row-pending-add': (params) => {
+      return (
+        pendingChanges[params.data.id] &&
+        pendingChanges[params.data.id].operation === OperationType.ADD
+      );
+    },
+    'row-pending-update': (params) => {
+      return (
+        pendingChanges[params.data.id] &&
+        pendingChanges[params.data.id].operation === OperationType.UPDATE
+      );
+    },
+    'row-pending-delete': (params) => {
+      return (
+        pendingChanges[params.data.id] &&
+        pendingChanges[params.data.id].operation === OperationType.DELETE
+      );
+    },
+  };
+
+  // Kombinované rowClassRules
+  const combinedRowClassRules = { ...defaultRowClassRules, ...rowClassRules };
+
+  // Exportovat metody pro přidání/odstranění řádků
+  useEffect(() => {
+    if (gridApi) {
+      // Metody můžeme přidat přímo do gridApi pro použití z vnějšku
+      gridApi.addRow = handleAddRow;
+      gridApi.deleteRow = handleDeleteRow;
+    }
+  }, [gridApi, handleAddRow, handleDeleteRow]);
+
+  const allGridProps = {
+    rowData: items,
+    defaultColDef: {
+      enableCellChangeFlash: true,
+      editable: editableDefault,
+      resizable: true,
+      ...defaultColDef,
+    },
+    isRowSelectable: (params) => {
+      return (
+        !pendingChanges[params.data.id] ||
+        pendingChanges[params.data.id].operation !== OperationType.DELETE
+      );
+    },
+    isEditable: isCellEditable,
+    onGridReady: handleGridReady,
+    onCellValueChanged: handleCellValueChanged,
+    // Grid Layout event handlers - always attached, but with internal enabled check
+    onColumnMoved: gridLayout.onColumnMoved,
+    onDragStopped: gridLayout.onDragStopped, // Handler pro konec drag operace
+    onColumnResized: gridLayout.onColumnResized,
+    onColumnVisible: gridLayout.onColumnVisible,
+    onColumnPinned: gridLayout.onColumnPinned,
+    getRowId: (params) => params.data.id,
+    // Grid Layout: maintain column order for proper column reordering
+    maintainColumnOrder: true,
+    ...gridOptions,
+    context: {
+      componentParent: this,
+      // Grid Layout context
+      ...(layoutEnabled && {
+        gridLayout: {
+          isLoading: gridLayout.isLoading,
+          isSaving: gridLayout.isSaving,
+          hasUnsavedChanges: gridLayout.hasUnsavedChanges,
+          saveLayout: gridLayout.saveLayout,
+          resetToDefault: gridLayout.resetToDefault,
+          reloadLayout: gridLayout.reloadLayout,
+          openColumnEditor: gridLayout.openColumnEditor // Pro přístup z AG-Grid kontextu
+        }
+      })
+    },
+    ...props,
+    ref: gridRef,
+    // Použijeme pre-transformované columnDefs které už obsahují AgGridColumns transformaci
+    // Tím eliminujeme circular dependency - AgGridColumns už je aplikováno v useGridLayout
+    columnDefs: gridLayout.preTransformedColumnDefs || columnDefs,
+  };
+
+  useImperativeHandle(ref, () => ({
+    showColumnEditor: () => {
+      gridLayout.openColumnEditor();
+    }
+  }));
+
+  // Removed console.log for production
+  return (
+    <>
+      <div className={classnames(appearance)} style={{ height }}>
+        {gridLayout.shouldShowColumns ? (
+          <AgGrid 
+            {...allGridProps}
+            onGridReady={handleGridReady}
+          />
+        ) : (
+          <div style={{ 
+            display: 'flex', 
+            justifyContent: 'center', 
+            alignItems: 'center', 
+            height: '100%',
+            background: '#f5f5f5'
+          }}>
+            <div>Načítání sloupců...</div>
+          </div>
+        )}
+      </div>
+      
+      {/* Column Editor Modal */}
+      {gridLayout.isColumnEditorOpen && (
+        <ColumnEditorModal
+          open={gridLayout.isColumnEditorOpen}
+          onCancel={gridLayout.closeColumnEditor}
+          onSave={gridLayout.saveColumnEditorChanges}
+          columns={gridLayout.getCurrentColumnsForEditor()}
+          getContainer={() => document.getElementById('root') || document.body}
+          zIndex={10000}
+        />
+      )}
+    </>
+  );
+});
+
+export default Grid;
+export * from './enums';
+export { default as ColumnBuilder } from './ColumnBuilder';
+export { default as ContextBuilder } from './ContextBuilder';
+export * as utils from './utils';
+export * from './tooltips';
+// Grid Layout exports
+
+/* eslint-enable */