slickgrid-react 4.5.0 → 4.6.0

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

@@ -8,7 +8,6 @@ import {
   BackendServiceApi,
   BackendServiceOption,
   Column,
-  ColumnEditor,
   DataViewOption,
   EventSubscription,
   ExtensionList,
@@ -1246,34 +1245,36 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
 
   /** Load the Editor Collection asynchronously and replace the "collection" property when Promise resolves */
   protected loadEditorCollectionAsync(column: Column) {
-    const collectionAsync = (column?.editor as ColumnEditor).collectionAsync;
-    (column?.editor as ColumnEditor).disabled = true; // disable the Editor DOM element, we'll re-enable it after receiving the collection with "updateEditorCollection()"
-
-    if (collectionAsync instanceof Promise) {
-      // wait for the "collectionAsync", once resolved we will save it into the "collection"
-      // the collectionAsync can be of 3 types HttpClient, HttpFetch or a Promise
-      collectionAsync.then((response: any | any[]) => {
-        if (Array.isArray(response)) {
-          this.updateEditorCollection(column, response); // from Promise
-        } else if (response instanceof Response && typeof response.json === 'function') {
-          if (response.bodyUsed) {
-            console.warn(`[SlickGrid-React] The response body passed to collectionAsync was already read.`
-              + `Either pass the dataset from the Response or clone the response first using response.clone()`);
-          } else {
-            // from Fetch
-            (response as Response).json().then(data => this.updateEditorCollection(column, data));
+    if (column?.editor) {
+      const collectionAsync = column.editor.collectionAsync;
+      column.editor.disabled = true; // disable the Editor DOM element, we'll re-enable it after receiving the collection with "updateEditorCollection()"
+
+      if (collectionAsync instanceof Promise) {
+        // wait for the "collectionAsync", once resolved we will save it into the "collection"
+        // the collectionAsync can be of 3 types HttpClient, HttpFetch or a Promise
+        collectionAsync.then((response: any | any[]) => {
+          if (Array.isArray(response)) {
+            this.updateEditorCollection(column, response); // from Promise
+          } else if (response instanceof Response && typeof response.json === 'function') {
+            if (response.bodyUsed) {
+              console.warn(`[SlickGrid-React] The response body passed to collectionAsync was already read.`
+                + `Either pass the dataset from the Response or clone the response first using response.clone()`);
+            } else {
+              // from Fetch
+              (response as Response).json().then(data => this.updateEditorCollection(column, data));
+            }
+          } else if (response?.content) {
+            this.updateEditorCollection(column, response.content); // from http-client
           }
-        } else if (response?.content) {
-          this.updateEditorCollection(column, response.content); // from http-client
-        }
-      });
-    } else if (this.rxjs?.isObservable(collectionAsync)) {
-      // wrap this inside a setTimeout to avoid timing issue since updateEditorCollection requires to call SlickGrid getColumns() method
-      setTimeout(() => {
-        this.subscriptions.push(
-          (collectionAsync as Observable<any>).subscribe((resolvedCollection) => this.updateEditorCollection(column, resolvedCollection))
-        );
-      });
+        });
+      } else if (this.rxjs?.isObservable(collectionAsync)) {
+        // wrap this inside a setTimeout to avoid timing issue since updateEditorCollection requires to call SlickGrid getColumns() method
+        setTimeout(() => {
+          this.subscriptions.push(
+            (collectionAsync as Observable<any>).subscribe((resolvedCollection) => this.updateEditorCollection(column, resolvedCollection))
+          );
+        });
+      }
     }
   }
 
@@ -1553,7 +1554,7 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
 
         return {
           ...column,
-          editor: column.editor?.model,
+          editorClass: column.editor?.model,
           internalColumnEditor: { ...column.editor }
         };
       }
@@ -1566,23 +1567,25 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
    * Once we found the new pointer, we will reassign the "editor" and "collection" to the "internalColumnEditor" so it has newest collection
    */
   protected updateEditorCollection<U extends TData = any>(column: Column<U>, newCollection: U[]) {
-    (column.editor as ColumnEditor).collection = newCollection;
-    (column.editor as ColumnEditor).disabled = false;
-
-    // find the new column reference pointer & re-assign the new editor to the internalColumnEditor
-    if (Array.isArray(this._columnDefinitions)) {
-      const columnRef = this._columnDefinitions.find((col: Column) => col.id === column.id);
-      if (columnRef) {
-        columnRef.internalColumnEditor = column.editor as ColumnEditor;
+    if (this.grid && column.editor) {
+      column.editor.collection = newCollection;
+      column.editor.disabled = false;
+
+      // find the new column reference pointer & re-assign the new editor to the internalColumnEditor
+      if (Array.isArray(this._columnDefinitions)) {
+        const columnRef = this._columnDefinitions.find((col: Column) => col.id === column.id);
+        if (columnRef) {
+          columnRef.internalColumnEditor = column.editor;
+        }
       }
-    }
 
-    // get current Editor, remove it from the DOM then re-enable it and re-render it with the new collection.
-    const currentEditor = this.grid.getCellEditor() as AutocompleterEditor | SelectEditor;
-    if (currentEditor?.disable && currentEditor?.renderDomElement) {
-      currentEditor.destroy();
-      currentEditor.disable(false);
-      currentEditor.renderDomElement(newCollection);
+      // get current Editor, remove it from the DOM then re-enable it and re-render it with the new collection.
+      const currentEditor = this.grid.getCellEditor() as AutocompleterEditor | SelectEditor;
+      if (currentEditor?.disable && currentEditor?.renderDomElement) {
+        currentEditor.destroy();
+        currentEditor.disable(false);
+        currentEditor.renderDomElement(newCollection);
+      }
     }
   }
 

package/src/slickgrid-react/constants.ts

@@ -61,6 +61,7 @@ export class Constants {
     TEXT_SORT_ASCENDING: 'Sort Ascending',
     TEXT_SORT_DESCENDING: 'Sort Descending',
     TEXT_STARTS_WITH: 'Starts With',
+    TEXT_TOGGLE_DARK_MODE: 'Toggle Dark Mode',
     TEXT_TOGGLE_FILTER_ROW: 'Toggle Filter Row',
     TEXT_TOGGLE_PRE_HEADER_ROW: 'Toggle Pre-Header Row',
     TEXT_X_OF_Y_SELECTED: '# of % selected',

package/src/slickgrid-react/global-grid-options.ts

@@ -169,6 +169,7 @@ export const GlobalGridOptions: Partial<GridOption> = {
       exportExcelCommandKey: 'EXPORT_TO_EXCEL',
       exportTextDelimitedCommandKey: 'EXPORT_TO_TAB_DELIMITED',
       refreshDatasetCommandKey: 'REFRESH_DATASET',
+      toggleDarkModeCommandKey: 'TOGGLE_DARK_MODE',
       toggleFilterCommandKey: 'TOGGLE_FILTER_ROW',
       togglePreHeaderCommandKey: 'TOGGLE_PRE_HEADER_ROW',
     },
@@ -181,6 +182,7 @@ export const GlobalGridOptions: Partial<GridOption> = {
     hideForceFitButton: false,
     hideRefreshDatasetCommand: false,
     hideSyncResizeButton: true,
+    hideToggleDarkModeCommand: true,
     hideToggleFilterCommand: false,
     hideTogglePreHeaderCommand: false,
     iconCssClass: 'fa fa-bars',
@@ -191,6 +193,7 @@ export const GlobalGridOptions: Partial<GridOption> = {
     iconExportExcelCommand: 'fa fa-file-excel-o',
     iconExportTextDelimitedCommand: 'fa fa-download',
     iconRefreshDatasetCommand: 'fa fa-refresh',
+    iconToggleDarkModeCommand: 'fa fa-moon-o mdi mdi-brightness-4',
     iconToggleFilterCommand: 'fa fa-random',
     iconTogglePreHeaderCommand: 'fa fa-random',
     menuWidth: 16,