chore(deps): update Slickgrid-React to v5.1.0

ghiscoding · Jun 8, 2024 · 87c467c · 87c467c
1 parent 74e74f1
commit 87c467c
Show file tree

Hide file tree

Showing 18 changed files with 963 additions and 339 deletions.
diff --git a/bootstrap5-i18n-demo/package.json b/bootstrap5-i18n-demo/package.json
@@ -38,29 +38,29 @@
     ]
   },
   "dependencies": {
-    "@slickgrid-universal/composite-editor-component": "^5.0.1",
-    "@slickgrid-universal/custom-tooltip-plugin": "^5.0.1",
-    "@slickgrid-universal/excel-export": "^5.0.1",
-    "@slickgrid-universal/graphql": "^5.0.1",
-    "@slickgrid-universal/odata": "^5.0.1",
-    "@slickgrid-universal/rxjs-observable": "^5.0.1",
-    "@slickgrid-universal/text-export": "^5.0.1",
-    "dompurify": "^3.1.3",
+    "@slickgrid-universal/composite-editor-component": "^5.1.0",
+    "@slickgrid-universal/custom-tooltip-plugin": "^5.1.0",
+    "@slickgrid-universal/excel-export": "^5.1.0",
+    "@slickgrid-universal/graphql": "^5.1.0",
+    "@slickgrid-universal/odata": "^5.1.0",
+    "@slickgrid-universal/rxjs-observable": "^5.1.0",
+    "@slickgrid-universal/text-export": "^5.1.0",
+    "dompurify": "^3.1.5",
     "fetch-jsonp": "^1.3.0",
-    "i18next": "^23.11.4",
+    "i18next": "^23.11.5",
     "moment-mini": "^2.29.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-i18next": "^14.1.1",
+    "react-i18next": "^14.1.2",
     "regenerator-runtime": "^0.14.1",
-    "slickgrid-react": "^5.0.2"
+    "slickgrid-react": "^5.1.0"
   },
   "devDependencies": {
     "@faker-js/faker": "^8.4.1",
     "@fnando/sparkline": "^0.3.10",
     "@popperjs/core": "^2.11.8",
     "@testing-library/jest-dom": "^6.4.5",
-    "@testing-library/react": "^15.0.7",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/bluebird": "^3.5.42",
     "@types/dompurify": "^3.0.5",
@@ -69,21 +69,21 @@
     "@types/i18next-xhr-backend": "^1.4.2",
     "@types/jest": "^29.5.12",
     "@types/moment": "^2.13.0",
-    "@types/node": "^20.12.11",
-    "@types/react": "^18.3.2",
+    "@types/node": "^20.14.2",
+    "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/sortablejs": "^1.15.8",
     "@types/text-encoding-utf-8": "^1.0.5",
     "@types/webpack": "^5.28.5",
-    "@typescript-eslint/eslint-plugin": "^7.8.0",
-    "@typescript-eslint/parser": "^7.8.0",
+    "@typescript-eslint/eslint-plugin": "^7.12.0",
+    "@typescript-eslint/parser": "^7.12.0",
     "@webpack-cli/serve": "^2.0.5",
     "bootstrap": "^5.3.3",
     "clean-webpack-plugin": "^4.0.0",
     "copy-webpack-plugin": "^12.0.2",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
-    "css-loader": "^7.1.1",
+    "css-loader": "^7.1.2",
     "custom-event-polyfill": "^1.0.7",
     "esbuild-loader": "^4.1.0",
     "eslint": "^8.57.0",
@@ -92,7 +92,7 @@
     "file-loader": "6.2.0",
     "html-loader": "5.0.0",
     "html-webpack-plugin": "5.6.0",
-    "i18next-http-backend": "^2.5.1",
+    "i18next-http-backend": "^2.5.2",
     "isomorphic-fetch": "^3.0.0",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
@@ -105,10 +105,10 @@
     "promise-polyfill": "^8.3.0",
     "react-router-dom": "^6.23.1",
     "rxjs": "^7.8.1",
-    "sass": "^1.77.1",
+    "sass": "^1.77.4",
     "sass-loader": "^14.2.1",
     "style-loader": "4.0.0",
-    "ts-jest": "^29.1.2",
+    "ts-jest": "^29.1.4",
     "ts-loader": "^9.5.1",
     "typescript": "^5.4.5",
     "webpack": "^5.91.0",

diff --git a/bootstrap5-i18n-demo/src/examples/slickgrid/App.tsx b/bootstrap5-i18n-demo/src/examples/slickgrid/App.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { Link, Navigate, Route, Routes as BaseRoutes, useLocation } from 'react-router-dom';
+import { Link, Navigate, Route, Routes as BaseRoutes, useLocation, useNavigate } from 'react-router-dom';
 
 import { NavBar } from '../../NavBar';
 import Example1 from './Example1';
@@ -35,6 +35,7 @@ import Example32 from './Example32';
 import Example33 from './Example33';
 import Example34 from './Example34';
 import Example35 from './Example35';
+import Example36 from './Example36';
 
 const routes: Array<{ path: string; route: string; component: any; title: string; }> = [
   { path: 'example1', route: '/example1', component: <Example1 />, title: '1- Basic Grid / 2 Grids' },
@@ -70,6 +71,7 @@ const routes: Array<{ path: string; route: string; component: any; title: string
   { path: 'example33', route: '/example33', component: <Example33 />, title: '33- Regular & Custom Tooltip' },
   { path: 'example34', route: '/example34', component: <Example34 />, title: '34- Real-Time Trading Platform' },
   { path: 'example35', route: '/example35', component: <Example35 />, title: '35- Row Based Editing' },
+  { path: 'example36', route: '/example36', component: <Example36 />, title: '36- Excel Export Formulas' },
 ];
 
 export default function Routes() {

diff --git a/bootstrap5-i18n-demo/src/examples/slickgrid/Example13.tsx b/bootstrap5-i18n-demo/src/examples/slickgrid/Example13.tsx
@@ -84,7 +84,7 @@ export default class Example13 extends React.Component<Props, State> {
   defineGrid() {
     const columnDefinitions: Column[] = [
       {
-        id: 'sel', name: '#', field: 'num', width: 40,
+        id: 'sel', name: '#', field: 'num', width: 40, type: FieldType.number,
         excludeFromExport: true,
         maxWidth: 70,
         resizable: true,
@@ -203,6 +203,13 @@ export default class Example13 extends React.Component<Props, State> {
       excelExportOptions: { sanitizeDataExport: true },
       textExportOptions: { sanitizeDataExport: true },
       externalResources: [this.excelExportService, this.textExportService],
+      showCustomFooter: true,
+      customFooterOptions: {
+        // optionally display some text on the left footer container
+        hideMetrics: false,
+        hideTotalItemCount: false,
+        hideLastUpdateTimestamp: false
+      },
     };
 
     this.setState((state: State) => ({

diff --git a/bootstrap5-i18n-demo/src/examples/slickgrid/Example18.tsx b/bootstrap5-i18n-demo/src/examples/slickgrid/Example18.tsx
@@ -85,7 +85,7 @@ export default class Example18 extends React.Component<Props, State> {
   defineGrid() {
     const columnDefinitions: Column[] = [
       {
-        id: 'title', name: 'Title', field: 'title',
+        id: 'title', name: 'Title', field: 'title', columnGroup: 'Common Factor',
         width: 70, minWidth: 50,
         cssClass: 'cell-title',
         filterable: true,
@@ -101,7 +101,7 @@ export default class Example18 extends React.Component<Props, State> {
         }
       },
       {
-        id: 'duration', name: 'Duration', field: 'duration',
+        id: 'duration', name: 'Duration', field: 'duration', columnGroup: 'Common Factor',
         width: 70,
         sortable: true,
         filterable: true,
@@ -122,27 +122,8 @@ export default class Example18 extends React.Component<Props, State> {
         }
       },
       {
-        id: 'percentComplete', name: '% Complete', field: 'percentComplete',
-        minWidth: 70, width: 90,
-        formatter: Formatters.percentCompleteBar,
-        type: FieldType.number,
-        filterable: true,
-        filter: { model: Filters.compoundSlider },
-        sortable: true,
-        groupTotalsFormatter: GroupTotalFormatters.avgTotalsPercentage,
-        grouping: {
-          getter: 'percentComplete',
-          formatter: (g) => `% Complete: ${g.value}  <span class="text-primary">(${g.count} items)</span>`,
-          aggregators: [
-            new Aggregators.Sum('cost')
-          ],
-          aggregateCollapsed: false,
-          collapsed: false
-        },
-        params: { groupFormatterPrefix: '<i>Avg</i>: ' }
-      },
-      {
-        id: 'start', name: 'Start', field: 'start', minWidth: 60,
+        id: 'start', name: 'Start', field: 'start', columnGroup: 'Period',
+        minWidth: 60,
         sortable: true,
         filterable: true,
         filter: { model: Filters.compoundDate },
@@ -161,7 +142,7 @@ export default class Example18 extends React.Component<Props, State> {
         }
       },
       {
-        id: 'finish', name: 'Finish', field: 'finish',
+        id: 'finish', name: 'Finish', field: 'finish', columnGroup: 'Period',
         minWidth: 60,
         sortable: true,
         filterable: true,
@@ -181,7 +162,7 @@ export default class Example18 extends React.Component<Props, State> {
         }
       },
       {
-        id: 'cost', name: 'Cost', field: 'cost',
+        id: 'cost', name: 'Cost', field: 'cost', columnGroup: 'Analysis',
         width: 90,
         sortable: true,
         filterable: true,
@@ -201,7 +182,27 @@ export default class Example18 extends React.Component<Props, State> {
         }
       },
       {
-        id: 'effortDriven', name: 'Effort-Driven', field: 'effortDriven',
+        id: 'percentComplete', name: '% Complete', field: 'percentComplete', columnGroup: 'Analysis',
+        minWidth: 70, width: 90,
+        formatter: Formatters.percentCompleteBar,
+        type: FieldType.number,
+        filterable: true,
+        filter: { model: Filters.compoundSlider },
+        sortable: true,
+        groupTotalsFormatter: GroupTotalFormatters.avgTotalsPercentage,
+        grouping: {
+          getter: 'percentComplete',
+          formatter: (g) => `% Complete: ${g.value}  <span class="text-primary">(${g.count} items)</span>`,
+          aggregators: [
+            new Aggregators.Sum('cost')
+          ],
+          aggregateCollapsed: false,
+          collapsed: false
+        },
+        params: { groupFormatterPrefix: '<i>Avg</i>: ' }
+      },
+      {
+        id: 'effortDriven', name: 'Effort-Driven', field: 'effortDriven', columnGroup: 'Analysis',
         width: 80, minWidth: 20, maxWidth: 100,
         cssClass: 'cell-effort-driven',
         sortable: true,
@@ -228,9 +229,18 @@ export default class Example18 extends React.Component<Props, State> {
         rightPadding: 10
       },
       enableDraggableGrouping: true,
+
+      // pre-header will include our Header Grouping (i.e. "Common Factor")
+      // Draggable Grouping could be located in either the Pre-Header OR the new Top-Header
       createPreHeaderPanel: true,
       showPreHeaderPanel: true,
-      preHeaderPanelHeight: 40,
+      preHeaderPanelHeight: 30,
+
+      // when Top-Header is created, it will be used by the Draggable Grouping (otherwise the Pre-Header will be used)
+      createTopHeaderPanel: true,
+      showTopHeaderPanel: true,
+      topHeaderPanelHeight: 35,
+
       showCustomFooter: true,
       enableFiltering: true,
       // you could debounce/throttle the input text filter if you have lots of data
@@ -248,7 +258,9 @@ export default class Example18 extends React.Component<Props, State> {
       draggableGrouping: {
         dropPlaceHolderText: 'Drop a column header here to group by the column',
         // groupIconCssClass: 'mdi mdi-drag-vertical',
-        deleteIconCssClass: 'mdi mdi-close',
+        deleteIconCssClass: 'mdi mdi-close text-color-danger',
+        sortAscIconCssClass: 'mdi mdi-arrow-up',
+        sortDescIconCssClass: 'mdi mdi-arrow-down',
         onGroupChanged: (_e, args) => this.onGroupChanged(args),
         onExtensionRegistered: (extension) => this.draggableGroupingPlugin = extension,
       },

diff --git a/bootstrap5-i18n-demo/src/examples/slickgrid/Example27.tsx b/bootstrap5-i18n-demo/src/examples/slickgrid/Example27.tsx
@@ -158,19 +158,15 @@ export default class Example27 extends React.Component<Props, State> {
   }
 
   /**
-   * A simple method to add a new item inside the first group that we find (it's random and is only for demo purposes).
-   * After adding the item, it will sort by parent/child recursively
+   * A simple method to add a new item inside the first group that has children which is "Task 1"
+   * After adding the item, it will resort by parent/child recursively but keep current sort column
    */
   addNewRow() {
     const newId = this.reactGrid.dataView.getItemCount();
-    const parentPropName = 'parentId';
-    const treeLevelPropName = 'treeLevel'; // if undefined in your options, the default prop name is "__treeLevel"
-    const newTreeLevel = 1;
-    // find first parent object and add the new item as a child
-    const childItemFound = this.state.dataset?.find((item) => item[treeLevelPropName] === newTreeLevel);
-    const parentItemFound = this.reactGrid.dataView.getItemByIdx(childItemFound[parentPropName]);
+    // find "Task 1" which has `id = 1`
+    const parentItemFound = this.reactGrid.dataView?.getItemById(1);
 
-    if (childItemFound && parentItemFound) {
+    if (parentItemFound?.__hasChildren) {
       const newItem = {
         id: newId,
         parentId: parentItemFound.id,
@@ -405,9 +401,9 @@ export default class Example27 extends React.Component<Props, State> {
 
         <div className="row">
           <div className="col-md-12">
-            <button onClick={() => this.addNewRow()} data-test="add-item-btn" className="btn btn-primary btn-sm">
-              <span className="mdi mdi-shape-square-plus color-white me-1"></span>
-              <span>Add New Item (in 1st group)</span>
+            <button onClick={() => this.addNewRow()} data-test="add-item-btn" className="btn btn-primary btn-xs btn-icon mx-1">
+              <span className="mdi mdi-plus color-white me-1"></span>
+              <span>Add New Item to "Task 1" group</span>
             </button>
             <button onClick={() => this.updateFirstRow()} data-test="update-item-btn" className="btn btn-outline-secondary btn-xs btn-icon mx-1">
               <span className="icon mdi mdi-pencil me-1"></span>

diff --git a/bootstrap5-i18n-demo/src/examples/slickgrid/Example31.tsx b/bootstrap5-i18n-demo/src/examples/slickgrid/Example31.tsx
@@ -455,6 +455,7 @@ export default class Example31 extends React.Component<Props, State> {
   // ---
 
   changeCountEnableFlag() {
+    this.displaySpinner(true);
     const isCountEnabled = !this.state.isCountEnabled;
     this.setState((state: State) => ({ ...state, isCountEnabled }));
     this.resetOptions({ enableCount: isCountEnabled });
@@ -476,12 +477,14 @@ export default class Example31 extends React.Component<Props, State> {
   }
 
   setOdataVersion(version: number) {
+    this.displaySpinner(true);
     this.setState((state: State) => ({ ...state, odataVersion: version }));
     this.resetOptions({ version });
     return true;
   }
 
   private resetOptions(options: Partial<OdataOption>) {
+    this.displaySpinner(true);
     const odataService = this.state.gridOptions?.backendServiceApi?.service as GridOdataService;
     odataService.updateOptions(options);
     odataService.clearFilters();