slickgrid-react 4.2.0 → 4.3.1

package/src/slickgrid-react/components/slickgrid-react.tsx

@@ -109,6 +109,7 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
   protected _eventHandler!: SlickEventHandler;
   protected _eventPubSubService!: EventPubSubService;
   protected _hideHeaderRowAfterPageLoad = false;
+  protected _isAutosizeColsCalled = false;
   protected _isGridInitialized = false;
   protected _isDatasetInitialized = false;
   protected _isDatasetHierarchicalInitialized = false;
@@ -215,8 +216,9 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
 
     // expand/autofit columns on first page load
     // we can assume that if the prevDataset was empty then we are on first load
-    if (this.grid && this.gridOptions.autoFitColumnsOnFirstLoad && prevDatasetLn === 0) {
+    if (this.grid && this.gridOptions.autoFitColumnsOnFirstLoad && prevDatasetLn === 0 && !this._isAutosizeColsCalled) {
       this.grid.autosizeColumns();
+      this._isAutosizeColsCalled = true;
     }
   }
 
@@ -288,6 +290,7 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
       this.sortService,
       this.treeDataService,
       this.props.translaterService,
+      () => this.gridService
     );
 
     this.gridStateService = this.props.externalServices?.gridStateService ?? new GridStateService(this.extensionService, this.filterService, this._eventPubSubService, this.sharedService, this.sortService, this.treeDataService);
@@ -400,6 +403,7 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
 
     this._gridOptions.translater = this.props.translaterService;
     this._eventHandler = eventHandler;
+    this._isAutosizeColsCalled = false;
 
     // when detecting a frozen grid, we'll automatically enable the mousewheel scroll handler so that we can scroll from both left/right frozen containers
     if (this._gridOptions && ((this._gridOptions.frozenRow !== undefined && this._gridOptions.frozenRow >= 0) || this._gridOptions.frozenColumn !== undefined && this._gridOptions.frozenColumn >= 0) && this._gridOptions.enableMouseWheelScrollHandler === undefined) {
@@ -756,19 +760,15 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
     // translate some of them on first load, then on each language change
     if (gridOptions.enableTranslate) {
       this.extensionService.translateAllExtensions();
-      this.translateColumnHeaderTitleKeys();
-      this.translateColumnGroupKeys();
     }
 
     // on locale change, we have to manually translate the Headers, GridMenu
-    i18next.on('languageChanged', () => {
+    i18next.on('languageChanged', (lang) => {
       // publish event of the same name that Slickgrid-Universal uses on a language change event
       this._eventPubSubService.publish('onLanguageChange');
 
       if (gridOptions.enableTranslate) {
-        this.extensionService.translateAllExtensions();
-        this.translateColumnHeaderTitleKeys();
-        this.translateColumnGroupKeys();
+        this.extensionService.translateAllExtensions(lang);
         if (gridOptions.createPreHeaderPanel && !gridOptions.enableDraggableGrouping) {
           this.groupingService.translateGroupingAndColSpan();
         }
@@ -966,11 +966,6 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
       throw new Error(`[Slickgrid-React] You cannot enable both autosize/fit viewport & resize by content, you must choose which resize technique to use. You can enable these 2 options ("autoFitColumnsOnFirstLoad" and "enableAutoSizeColumns") OR these other 2 options ("autosizeColumnsByCellContentOnFirstLoad" and "enableAutoResizeColumnsByCellContent").`);
     }
 
-    // expand/autofit columns on first page load
-    if (grid && options.autoFitColumnsOnFirstLoad && options.enableAutoSizeColumns && typeof grid.autosizeColumns === 'function') {
-      this.grid.autosizeColumns();
-    }
-
     // auto-resize grid on browser resize
     if (options.gridHeight || options.gridWidth) {
       this.resizerService.resizeGrid(0, { height: options.gridHeight, width: options.gridWidth });
@@ -978,10 +973,10 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
       this.resizerService.resizeGrid();
     }
 
-    if (grid && options?.enableAutoResize) {
-      if (options.autoFitColumnsOnFirstLoad && options.enableAutoSizeColumns && typeof grid.autosizeColumns === 'function') {
-        grid.autosizeColumns();
-      }
+    // expand/autofit columns on first page load
+    if (grid && options?.enableAutoResize && options.autoFitColumnsOnFirstLoad && options.enableAutoSizeColumns && !this._isAutosizeColsCalled) {
+      grid.autosizeColumns();
+      this._isAutosizeColsCalled = true;
     }
   }
 
@@ -1065,10 +1060,6 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
           this._isDatasetInitialized = true;
         }
 
-        if (dataset) {
-          this.grid.invalidate();
-        }
-
         // display the Pagination component only after calling this refresh data first, we call it here so that if we preset pagination page number it will be shown correctly
         this.showPagination = (this._gridOptions && (this._gridOptions.enablePagination || (this._gridOptions.backendServiceApi && this._gridOptions.enablePagination === undefined))) ? true : false;
         if (this._paginationOptions && this._gridOptions?.pagination && this._gridOptions?.backendServiceApi) {
@@ -1138,7 +1129,7 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
       }
 
       if (this._gridOptions.enableTranslate) {
-        this.extensionService.translateColumnHeaders(false, newColumnDefinitions);
+        this.extensionService.translateColumnHeaders(undefined, newColumnDefinitions);
       } else {
         this.extensionService.renderColumnHeaders(newColumnDefinitions, true);
       }
@@ -1547,16 +1538,6 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
     });
   }
 
-  /** translate all columns (including hidden columns) */
-  protected translateColumnHeaderTitleKeys() {
-    this.extensionUtility.translateItems(this.sharedService.allColumns, 'nameKey', 'name');
-  }
-
-  /** translate all column groups (including hidden columns) */
-  protected translateColumnGroupKeys() {
-    this.extensionUtility.translateItems(this.sharedService.allColumns, 'columnGroupKey', 'columnGroup');
-  }
-
   /**
    * Update the "internalColumnEditor.collection" property.
    * Since this is called after the async call resolves, the pointer will not be the same as the "column" argument passed.

package/src/slickgrid-react/components/slickgridReactProps.ts

@@ -23,7 +23,6 @@ import {
   SortService,
   TranslaterService,
   TreeDataService,
-  SlickGridEventData,
   OnActiveCellChangedEventArgs,
   DragRowMove,
   OnAddNewRowEventArgs,
@@ -67,6 +66,7 @@ import {
   OnRowsOrCountChangedEventArgs,
   OnSetItemsCalledEventArgs,
   PagingInfo,
+  SlickGrid,
 } from '@slickgrid-universal/common';
 import { EventPubSubService } from '@slickgrid-universal/event-pub-sub';
 import { SlickgridReactInstance } from '../models';
@@ -111,14 +111,14 @@ export interface SlickgridReactProps {
 
   // Slick Grid events
   onActiveCellChanged?: (e: CustomEvent<{ eventData: any; args: OnActiveCellChangedEventArgs; }>) => void;
-  onActiveCellPositionChanged?: (e: CustomEvent<{ eventData: any; args: SlickGridEventData; }>) => void;
+  onActiveCellPositionChanged?: (e: CustomEvent<{ eventData: any; args: { grid: SlickGrid; }; }>) => void;
   onAddNewRow?: (e: CustomEvent<{ eventData: any; args: OnAddNewRowEventArgs; }>) => void;
   onAutosizeColumns?: (e: CustomEvent<{ eventData: any; args: OnAutosizeColumnsEventArgs; }>) => void;
   onBeforeAppendCell?: (e: CustomEvent<{ eventData: any; args: OnBeforeAppendCellEventArgs; }>) => void;
   onBeforeSearchChange?: (e: CustomEvent<{ eventData: any; args: OnCellChangeEventArgs; }>) => void;
   onBeforeCellEditorDestroy?: (e: CustomEvent<{ eventData: any; args: OnBeforeCellEditorDestroyEventArgs; }>) => void;
   onBeforeColumnsResize?: (e: CustomEvent<{ eventData: any; args: OnBeforeColumnsResizeEventArgs; }>) => void;
-  onBeforeDestroy?: (e: CustomEvent<{ eventData: any; args: SlickGridEventData; }>) => void;
+  onBeforeDestroy?: (e: CustomEvent<{ eventData: any; args: { grid: SlickGrid; }; }>) => void;
   onBeforeEditCell?: (e: CustomEvent<{ eventData: any; args: OnBeforeEditCellEventArgs; }>) => void;
   onBeforeHeaderCellDestroy?: (e: CustomEvent<{ eventData: any; args: OnBeforeHeaderCellDestroyEventArgs; }>) => void;
   onBeforeHeaderRowCellDestroy?: (e: CustomEvent<{ eventData: any; args: OnBeforeHeaderRowCellDestroyEventArgs; }>) => void;
@@ -133,7 +133,7 @@ export interface SlickgridReactProps {
   onColumnsResized?: (e: CustomEvent<{ eventData: any; args: OnColumnsResizedEventArgs; }>) => void;
   onColumnsResizeDblClick?: (e: CustomEvent<{ eventData: any; args: OnColumnsResizeDblClickEventArgs; }>) => void;
   onCompositeEditorChange?: (e: CustomEvent<{ eventData: any; args: OnCompositeEditorChangeEventArgs; }>) => void;
-  onContextMenu?: (e: CustomEvent<{ eventData: any; args: SlickGridEventData; }>) => void;
+  onContextMenu?: (e: CustomEvent<{ eventData: any; args: { grid: SlickGrid; }; }>) => void;
   onDrag?: (e: CustomEvent<{ eventData: any; args: DragRowMove; }>) => void;
   onDragEnd?: (e: CustomEvent<{ eventData: any; args: DragRowMove; }>) => void;
   onDragInit?: (e: CustomEvent<{ eventData: any; args: DragRowMove; }>) => void;
@@ -151,10 +151,10 @@ export interface SlickgridReactProps {
   onHeaderRowMouseEnter?: (e: CustomEvent<{ eventData: any; args: OnHeaderMouseEventArgs; }>) => void;
   onHeaderRowMouseLeave?: (e: CustomEvent<{ eventData: any; args: OnHeaderMouseEventArgs; }>) => void;
   onKeyDown?: (e: CustomEvent<{ eventData: any; args: OnKeyDownEventArgs; }>) => void;
-  onMouseEnter?: (e: CustomEvent<{ eventData: any; args: SlickGridEventData; }>) => void;
-  onMouseLeave?: (e: CustomEvent<{ eventData: any; args: SlickGridEventData; }>) => void;
+  onMouseEnter?: (e: CustomEvent<{ eventData: any; args: { grid: SlickGrid; }; }>) => void;
+  onMouseLeave?: (e: CustomEvent<{ eventData: any; args: { grid: SlickGrid; }; }>) => void;
   onValidationError?: (e: CustomEvent<{ eventData: any; args: OnValidationErrorEventArgs; }>) => void;
-  onViewportChanged?: (e: CustomEvent<{ eventData: any; args: SlickGridEventData; }>) => void;
+  onViewportChanged?: (e: CustomEvent<{ eventData: any; args: { grid: SlickGrid; }; }>) => void;
   onRendered?: (e: CustomEvent<{ eventData: any; args: OnRenderedEventArgs; }>) => void;
   onSelectedRowsChanged?: (e: CustomEvent<{ eventData: any; args: OnSelectedRowsChangedEventArgs; }>) => void;
   onSetOptions?: (e: CustomEvent<{ eventData: any; args: OnSetOptionsEventArgs; }>) => void;