feat(core): expose all Extensions in new getter prop & fix draggable (#…

…29)

* feat(core): expose all Extensions in new getter prop & fix draggable
- also renamed the SharedService.grid to SharedService.slickGrid to align with the vanilla bundle `slickGrid` property
- also fixed the Draggable Grouping example that was not working, apparently the option `enableColumnReorder` can be a callback function as well as a boolean

README.md

@@ -157,6 +157,7 @@ yarn run test:watch
 - [x] Copy cell text (context menu) doesn't work in SF
 - [x] Remove all Services init method 2nd argument (we can get DataView directly from the Grid object)
 - [x] The Pagination/Footer width is a little off sometime compare to the width of the grid container
-- [ ] Check why `DOM Purify` doesn't work in SF
+- [ ] See if we can get `DOM Purify` to work in SF, else keep the custom sanitizer
 - [ ] See if we can get all the vanilla-grid-bundle `instances` as `readonly` class members
-- [ ] Draggable Grouping pre-header (dragging) is not working as intended
+- [ ] See if we can add the number of chars typed in `Editors.longText`
+- [ ] Resizer Service doesn't seem to count the `bottomPadding` with Custom Footer in the calculation

examples/webpack-demo-vanilla-bundle/src/examples/example03.ts

@@ -297,7 +297,7 @@ export class Example3 {
       draggableGrouping: {
         dropPlaceHolderText: 'Drop a column header here to group by the column',
         // groupIconCssClass: 'fa fa-outdent',
-        deleteIconCssClass: 'fa fa-times mdi mdi-close',
+        deleteIconCssClass: 'fa fa-times mdi mdi-close text-danger',
         onGroupChanged: (e, args) => this.onGroupChanged(args),
         onExtensionRegistered: (extension) => this.draggableGroupingPlugin = extension,
       },

examples/webpack-demo-vanilla-bundle/src/examples/example11.ts

@@ -32,10 +32,7 @@ const customEditableInputFormatter = (row, cell, value, columnDef, dataContext,
   const gridOptions = grid && grid.getOptions && grid.getOptions();
   const isEditableLine = gridOptions.editable && columnDef.editor;
   value = (value === null || value === undefined) ? '' : value;
-  // const isUnsavedField = dataContext.__unsaved && dataContext.__unsaved[columnDef.field] || false;
-  const isUnsavedField = false;
-  const cssClass = isUnsavedField ? 'unsaved-editable-field' : 'editable-field';
-  return isEditableLine ? { text: value, addClasses: cssClass, toolTip: 'Click to Edit' } : value;
+  return isEditableLine ? { text: value, addClasses: 'editable-field', toolTip: 'Click to Edit' } : value;
 };
 
 export class Example3 {
@@ -46,7 +43,6 @@ export class Example3 {
   editQueue = [];
   editedItems = {};
   sgb: SlickVanillaGridBundle;
-  durationOrderByCount = false;
 
   get slickerGridInstance(): SlickerGridInstance {
     return this.sgb?.instances;
@@ -186,11 +182,9 @@ export class Example3 {
         hideInColumnTitleRow: true,
       },
       editCommandHandler: (item, column, editCommand) => {
-        // keep in an array only the ones that changed, also add an extra "__unsaved" property that we can use for styling these cells
         if (editCommand.prevSerializedValue !== editCommand.serializedValue) {
           this.editQueue.push({ item, column, editCommand });
           this.editedItems[editCommand.row] = item; // keep items by their row indexes, if the row got edited twice then we'll keep only the last change
-          // item.__unsaved = { ...item.__unsaved, [column.field]: true };
           this.sgb.slickGrid.invalidate();
           editCommand.execute();
 
@@ -217,11 +211,13 @@ export class Example3 {
   }
 
   toggleGridEditReadonly() {
-    // change a single grid options to make the grid non-editable (readonly)
+    // first need undo all edits
+    this.undoAllEdits();
+
+    // then change a single grid options to make the grid non-editable (readonly)
     this.isGridEditable = !this.isGridEditable;
     this.sgb.gridOptions = { editable: this.isGridEditable };
     this.gridOptions = this.sgb.gridOptions;
-    this.removeAllUnsavedStylingFromCell();
   }
 
   loadData(count: number) {
@@ -320,6 +316,7 @@ export class Example3 {
     // example: editedItems = { 0: { title: task 0, duration: 50, ... }}
     // ...means that row index 0 got changed and the final merged object is { title: task 0, duration: 50, ... }
     console.log(this.editedItems);
+    // console.log(`We changed ${Object.keys(this.editedItems).length} rows`);
 
     // since we saved, we can now remove all the unsaved color styling and reset our array/object
     this.removeAllUnsavedStylingFromCell();
@@ -329,11 +326,6 @@ export class Example3 {
 
   removeUnsavedStylingFromCell(item: any, column: Column, row: number) {
     // remove unsaved css class from that cell
-    const fieldId = column.field;
-    if (item.__unsaved) {
-      delete item.__unsaved[fieldId];
-    }
-
     this.sgb.slickGrid.removeCellCssStyles(`unsaved_highlight_${[column.field]}${row}`);
   }
 

package.json

@@ -8,13 +8,13 @@
     "build": "lerna run build --stream",
     "build:demo": "lerna run build:demo --stream",
     "rebuild": "run-s clean build",
-    "clean": "rimraf packages/*/dist dist",
+    "clean": "rimraf --maxBusyTries=10 packages/*/dist dist",
     "cypress": "cypress open --config-file test/cypress.json",
     "cypress:ci": "cypress run --config-file test/cypress.json --reporter mochawesome",
     "dev:watch": "lerna run dev:watch --parallel",
     "diff": "lerna diff",
     "updated": "lerna updated",
-    "clean:tsconfig-build-cache": "rimraf packages/*/dist/tsconfig.tsbuildinfo",
+    "clean:tsconfig-build-cache": "rimraf --maxBusyTries=10 packages/*/dist/tsconfig.tsbuildinfo",
     "new-version": "lerna version --conventional-commits",
     "serve:demo": "http-server ./docs -p 8888 -a localhost",
     "test": "npx jest --runInBand --coverage --config ./test/jest.config.js",
@@ -64,4 +64,4 @@
     "node": ">=12.13.1",
     "npm": ">=6.12.1"
   }
-}
+}

packages/common/package.json

@@ -29,7 +29,7 @@
     "bundle:commonjs": "tsc --project tsconfig.build.json --outDir dist/commonjs --module commonjs",
     "bundle:es2015": "cross-env tsc --project tsconfig.build.json --outDir dist/es2015 --module es2020 --target es2015",
     "bundle:es2020": "cross-env tsc --project tsconfig.build.json --outDir dist/es2020 --module es2020 --target es2020",
-    "delete:dist": "cross-env rimraf dist",
+    "delete:dist": "cross-env rimraf --maxBusyTries=10 dist",
     "sass-build-task:scss-compile:bootstrap": "node-sass src/styles/slickgrid-theme-bootstrap.scss -o dist/styles/css --output-style compressed",
     "postsass-build-task:scss-compile:bootstrap": "postcss --use autoprefixer --output dist/styles/css/slickgrid-theme-bootstrap.css dist/styles/css/slickgrid-theme-bootstrap.css --output-style compressed",
     "sass-build-task:scss-compile:material": "node-sass src/styles/slickgrid-theme-material.scss -o dist/styles/css --output-style compressed",

packages/common/src/enums/columnReorderFunction.type.ts

@@ -0,0 +1,3 @@
+import { Column, SlickGrid } from '../interfaces/index';
+
+export type ColumnReorderFunction = (grid: SlickGrid, headers: HTMLElement[], headerColumnWidthDiff: any, setColumns: (col: Column) => void, setupColumnResize: () => void, columns: Column[], getColumnIndex: number, uid: string, trigger: boolean) => void;

packages/common/src/enums/extensionList.type.ts

@@ -0,0 +1,4 @@
+import { ExtensionName, SlickControlList, SlickPluginList } from './index';
+import { Extension, ExtensionModel } from '../interfaces/index';
+
+export type ExtensionList<P extends (SlickControlList | SlickPluginList), E extends Extension> = Record<ExtensionName, ExtensionModel<P, E>>;

packages/common/src/enums/gridAutosizeColsMode.enum.ts

@@ -5,4 +5,4 @@ export enum GridAutosizeColsMode {
   ignoreViewport = 'IGV',
   fitColsToViewport = 'FCV',
   fitViewportToCols = 'FVC'
-};
+}

packages/common/src/enums/gridStateType.enum.ts

@@ -4,4 +4,4 @@ export enum GridStateType {
   pagination = 'pagination',
   rowSelection = 'rowSelection',
   sorter = 'sorter',
-};
+}

packages/common/src/enums/index.ts

@@ -1,20 +1,22 @@
 export * from './caseType.enum';
-export * from './delimiterType.enum';
-export * from './emitterType.enum';
-export * from './eventNamingStyle.enum';
-export * from './extensionName.enum';
 export * from './fieldType.enum';
+export * from './extensionList.type';
+export * from './eventNamingStyle.enum';
+export * from './emitterType.enum';
 export * from './fileType.enum';
+export * from './delimiterType.enum';
+export * from './columnReorderFunction.type';
+export * from './extensionName.enum';
 export * from './filterMultiplePassType.enum';
-export * from './filterMultiplePassTypeString.type';
-export * from './gridAutosizeColsMode.enum';
-export * from './gridStateType.enum';
-export * from './keyCode.enum';
-export * from './operatorString.type';
-export * from './operatorType.enum';
-export * from './slickControlList.enum';
-export * from './slickPluginList.enum';
-export * from './sortDirection.enum';
+export * from './sortDirectionString.type';
 export * from './sortDirectionNumber.enum';
+export * from './sortDirection.enum';
+export * from './slickPluginList.enum';
+export * from './slickControlList.enum';
 export * from './searchTerm.type';
-export * from './sortDirectionString.type';
+export * from './operatorType.enum';
+export * from './operatorString.type';
+export * from './keyCode.enum';
+export * from './gridStateType.enum';
+export * from './gridAutosizeColsMode.enum';
+export * from './filterMultiplePassTypeString.type';

packages/common/src/extensions/__tests__/autoTooltipExtension.spec.ts

@@ -40,12 +40,12 @@ describe('autoTooltipExtension', () => {
 
   describe('registered addon', () => {
     beforeEach(() => {
-      jest.spyOn(SharedService.prototype, 'grid', 'get').mockReturnValue(gridStub);
+      jest.spyOn(SharedService.prototype, 'slickGrid', 'get').mockReturnValue(gridStub);
       jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(gridOptionsMock);
     });
 
     it('should register the addon', () => {
-      const pluginSpy = jest.spyOn(SharedService.prototype.grid, 'registerPlugin');
+      const pluginSpy = jest.spyOn(SharedService.prototype.slickGrid, 'registerPlugin');
 
       const instance = extension.register();
       const addonInstance = extension.getAddonInstance();

packages/common/src/extensions/__tests__/cellExternalCopyManagerExtension.spec.ts

@@ -72,7 +72,7 @@ describe('cellExternalCopyManagerExtension', () => {
 
   describe('registered addon', () => {
     beforeEach(() => {
-      jest.spyOn(SharedService.prototype, 'grid', 'get').mockReturnValue(gridStub);
+      jest.spyOn(SharedService.prototype, 'slickGrid', 'get').mockReturnValue(gridStub);
       jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(gridOptionsMock);
       queueCallback = {
         execute: () => { },
@@ -86,7 +86,7 @@ describe('cellExternalCopyManagerExtension', () => {
     });
 
     it('should register the addon', () => {
-      const pluginSpy = jest.spyOn(SharedService.prototype.grid, 'registerPlugin');
+      const pluginSpy = jest.spyOn(SharedService.prototype.slickGrid, 'registerPlugin');
       const onRegisteredSpy = jest.spyOn(SharedService.prototype.gridOptions.excelCopyBufferOptions, 'onExtensionRegistered');
 
       const instance = extension.register();

packages/common/src/extensions/__tests__/cellMenuExtension.spec.ts

@@ -106,15 +106,15 @@ describe('CellMenuExtension', () => {
     describe('registered addon', () => {
       beforeEach(() => {
         jest.spyOn(SharedService.prototype, 'dataView', 'get').mockReturnValue(dataViewStub);
-        jest.spyOn(SharedService.prototype, 'grid', 'get').mockReturnValue(gridStub);
+        jest.spyOn(SharedService.prototype, 'slickGrid', 'get').mockReturnValue(gridStub);
         jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(gridOptionsMock);
         jest.spyOn(SharedService.prototype, 'allColumns', 'get').mockReturnValue(columnsMock);
         jest.spyOn(SharedService.prototype, 'visibleColumns', 'get').mockReturnValue(columnsMock);
         jest.spyOn(SharedService.prototype, 'columnDefinitions', 'get').mockReturnValue(columnsMock);
       });
 
       it('should register the addon', () => {
-        const pluginSpy = jest.spyOn(SharedService.prototype.grid, 'registerPlugin');
+        const pluginSpy = jest.spyOn(SharedService.prototype.slickGrid, 'registerPlugin');
         const onRegisteredSpy = jest.spyOn(SharedService.prototype.gridOptions.cellMenu, 'onExtensionRegistered');
 
         const instance = extension.register();

packages/common/src/extensions/__tests__/checkboxSelectorExtension.spec.ts

@@ -74,12 +74,12 @@ describe('checkboxSelectorExtension', () => {
         { id: 'field2', field: 'field2', width: 50 }
       ];
       columnSelectionMock = { id: '_checkbox_selector', field: 'sel' };
-      jest.spyOn(SharedService.prototype, 'grid', 'get').mockReturnValue(gridStub);
+      jest.spyOn(SharedService.prototype, 'slickGrid', 'get').mockReturnValue(gridStub);
       jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(gridOptionsMock);
     });
 
     it('should register the addon', () => {
-      const pluginSpy = jest.spyOn(SharedService.prototype.grid, 'registerPlugin');
+      const pluginSpy = jest.spyOn(SharedService.prototype.slickGrid, 'registerPlugin');
 
       const instance = extension.create(columnsMock, gridOptionsMock);
       const selectionModel = extension.register();
@@ -94,8 +94,8 @@ describe('checkboxSelectorExtension', () => {
     });
 
     it('should register the addon with the registered plugin provided as argument', () => {
-      const pluginSpy = jest.spyOn(SharedService.prototype.grid, 'registerPlugin');
-      const selectionSpy = jest.spyOn(SharedService.prototype.grid, 'getSelectionModel');
+      const pluginSpy = jest.spyOn(SharedService.prototype.slickGrid, 'registerPlugin');
+      const selectionSpy = jest.spyOn(SharedService.prototype.slickGrid, 'getSelectionModel');
 
       const instance = extension.create(columnsMock, gridOptionsMock);
       const selectionModel = extension.register();
@@ -170,9 +170,9 @@ describe('checkboxSelectorExtension', () => {
     it('should be able to pre-select rows', () => {
       const selectionModelOptions = { ...gridOptionsMock, preselectedRows: [0], rowSelectionOptions: { selectActiveRow: true } };
       jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(selectionModelOptions);
-      const pluginSpy = jest.spyOn(SharedService.prototype.grid, 'registerPlugin');
+      const pluginSpy = jest.spyOn(SharedService.prototype.slickGrid, 'registerPlugin');
       // @ts-ignore
-      const selectionSpy = jest.spyOn(SharedService.prototype.grid, 'getSelectionModel').mockReturnValue(mockSelectionModel);
+      const selectionSpy = jest.spyOn(SharedService.prototype.slickGrid, 'getSelectionModel').mockReturnValue(mockSelectionModel);
 
       const instance = extension.create(columnsMock, gridOptionsMock);
       const rowSpy = jest.spyOn(instance, 'selectRows');

packages/common/src/extensions/__tests__/columnPickerExtension.spec.ts

@@ -57,7 +57,7 @@ describe('columnPickerExtension', () => {
 
   describe('registered addon', () => {
     beforeEach(() => {
-      jest.spyOn(SharedService.prototype, 'grid', 'get').mockReturnValue(gridStub);
+      jest.spyOn(SharedService.prototype, 'slickGrid', 'get').mockReturnValue(gridStub);
       jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(gridOptionsMock);
       jest.spyOn(SharedService.prototype, 'allColumns', 'get').mockReturnValue(columnsMock);
       jest.spyOn(SharedService.prototype, 'visibleColumns', 'get').mockReturnValue(columnsMock.slice(0, 1));

packages/common/src/extensions/__tests__/contextMenuExtension.spec.ts

@@ -143,7 +143,7 @@ describe('contextMenuExtension', () => {
     describe('registered addon', () => {
       beforeEach(() => {
         jest.spyOn(SharedService.prototype, 'dataView', 'get').mockReturnValue(dataViewStub);
-        jest.spyOn(SharedService.prototype, 'grid', 'get').mockReturnValue(gridStub);
+        jest.spyOn(SharedService.prototype, 'slickGrid', 'get').mockReturnValue(gridStub);
         jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(gridOptionsMock);
         jest.spyOn(SharedService.prototype, 'allColumns', 'get').mockReturnValue(columnsMock);
         jest.spyOn(SharedService.prototype, 'visibleColumns', 'get').mockReturnValue(columnsMock.slice(0, 1));
@@ -515,7 +515,7 @@ describe('contextMenuExtension', () => {
         } as GridOption;
 
         jest.spyOn(SharedService.prototype, 'dataView', 'get').mockReturnValue(dataViewStub);
-        jest.spyOn(SharedService.prototype, 'grid', 'get').mockReturnValue(gridStub);
+        jest.spyOn(SharedService.prototype, 'slickGrid', 'get').mockReturnValue(gridStub);
         jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(gridOptionsMock);
         jest.spyOn(SharedService.prototype, 'allColumns', 'get').mockReturnValue(columnsMock);
         jest.spyOn(SharedService.prototype, 'visibleColumns', 'get').mockReturnValue(columnsMock);

packages/common/src/extensions/__tests__/draggableGroupingExtension.spec.ts

@@ -55,13 +55,13 @@ describe('draggableGroupingExtension', () => {
 
   describe('registered addon', () => {
     beforeEach(() => {
-      jest.spyOn(SharedService.prototype, 'grid', 'get').mockReturnValue(gridStub);
+      jest.spyOn(SharedService.prototype, 'slickGrid', 'get').mockReturnValue(gridStub);
       jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(gridOptionsMock);
     });
 
     it('should register the addon', () => {
       const onRegisteredSpy = jest.spyOn(SharedService.prototype.gridOptions.draggableGrouping, 'onExtensionRegistered');
-      const pluginSpy = jest.spyOn(SharedService.prototype.grid, 'registerPlugin');
+      const pluginSpy = jest.spyOn(SharedService.prototype.slickGrid, 'registerPlugin');
 
       const instance = extension.create(gridOptionsMock);
       const addon = extension.register();

packages/common/src/extensions/__tests__/gridMenuExtension.spec.ts

@@ -144,7 +144,7 @@ describe('gridMenuExtension', () => {
     describe('registered addon', () => {
       beforeEach(() => {
         jest.spyOn(SharedService.prototype, 'dataView', 'get').mockReturnValue(dataViewStub);
-        jest.spyOn(SharedService.prototype, 'grid', 'get').mockReturnValue(gridStub);
+        jest.spyOn(SharedService.prototype, 'slickGrid', 'get').mockReturnValue(gridStub);
         jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(gridOptionsMock);
         jest.spyOn(SharedService.prototype, 'allColumns', 'get').mockReturnValue(columnsMock);
         jest.spyOn(SharedService.prototype, 'visibleColumns', 'get').mockReturnValue(columnsMock.slice(0, 1));
@@ -499,7 +499,7 @@ describe('gridMenuExtension', () => {
         } as unknown as GridOption;
 
         jest.spyOn(SharedService.prototype, 'dataView', 'get').mockReturnValue(dataViewStub);
-        jest.spyOn(SharedService.prototype, 'grid', 'get').mockReturnValue(gridStub);
+        jest.spyOn(SharedService.prototype, 'slickGrid', 'get').mockReturnValue(gridStub);
         jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(gridOptionsMock);
         jest.spyOn(SharedService.prototype, 'allColumns', 'get').mockReturnValue(columnsMock);
         jest.spyOn(SharedService.prototype, 'visibleColumns', 'get').mockReturnValue(columnsMock);
@@ -718,7 +718,7 @@ describe('gridMenuExtension', () => {
 
       it('should call the grid "setTopPanelVisibility" method when the command triggered is "toggle-toppanel"', () => {
         gridOptionsMock.showTopPanel = false;
-        const gridSpy = jest.spyOn(SharedService.prototype.grid, 'setTopPanelVisibility');
+        const gridSpy = jest.spyOn(SharedService.prototype.slickGrid, 'setTopPanelVisibility');
         const onCommandSpy = jest.spyOn(SharedService.prototype.gridOptions.gridMenu, 'onCommand');
 
         const instance = extension.register();
@@ -736,7 +736,7 @@ describe('gridMenuExtension', () => {
 
       it('should call the grid "setPreHeaderPanelVisibility" method when the command triggered is "toggle-preheader"', () => {
         gridOptionsMock.showPreHeaderPanel = false;
-        const gridSpy = jest.spyOn(SharedService.prototype.grid, 'setPreHeaderPanelVisibility');
+        const gridSpy = jest.spyOn(SharedService.prototype.slickGrid, 'setPreHeaderPanelVisibility');
         const onCommandSpy = jest.spyOn(SharedService.prototype.gridOptions.gridMenu, 'onCommand');
 
         const instance = extension.register();

packages/common/src/extensions/__tests__/groupItemMetaProviderExtension.spec.ts

@@ -35,11 +35,11 @@ describe('groupItemMetaProviderExtension', () => {
 
   describe('registered addon', () => {
     beforeEach(() => {
-      jest.spyOn(SharedService.prototype, 'grid', 'get').mockReturnValue(gridStub);
+      jest.spyOn(SharedService.prototype, 'slickGrid', 'get').mockReturnValue(gridStub);
     });
 
     it('should register the addon', () => {
-      const pluginSpy = jest.spyOn(SharedService.prototype.grid, 'registerPlugin');
+      const pluginSpy = jest.spyOn(SharedService.prototype.slickGrid, 'registerPlugin');
 
       const instance = extension.register();
       const addonInstance = extension.getAddonInstance();