feat(core): BREAKING CHANGE replace jQueryUI by SortableJS

ghiscoding · Nov 22, 2022 · e4052d6 · e4052d6
1 parent 649e8d1
commit e4052d6
Show file tree

Hide file tree

Showing 14 changed files with 228 additions and 191 deletions.
diff --git a/package.json b/package.json
@@ -81,11 +81,11 @@
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@slickgrid-universal/common": "^1.4.0",
-    "@slickgrid-universal/custom-footer-component": "^1.4.0",
-    "@slickgrid-universal/empty-warning-component": "^1.4.0",
-    "@slickgrid-universal/event-pub-sub": "^1.4.0",
-    "@slickgrid-universal/pagination-component": "^1.4.0",
+    "@slickgrid-universal/common": "^2.1.1",
+    "@slickgrid-universal/custom-footer-component": "^2.1.1",
+    "@slickgrid-universal/empty-warning-component": "^2.1.1",
+    "@slickgrid-universal/event-pub-sub": "^2.1.1",
+    "@slickgrid-universal/pagination-component": "^2.1.1",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^13.5.0",
@@ -101,18 +101,20 @@
     "react-router-dom": "^5.3.0",
     "react-scripts": "^1.1.5",
     "regenerator-runtime": "^0.13.9",
+    "sortablejs": "^1.15.0",
     "typescript": ">=4.3.5",
     "web-vitals": "^1.1.2"
   },
   "devDependencies": {
     "@popperjs/core": "^2.11.0",
     "@release-it/conventional-changelog": "^5.1.1",
-    "@slickgrid-universal/composite-editor-component": "^1.4.0",
-    "@slickgrid-universal/excel-export": "^1.4.0",
-    "@slickgrid-universal/graphql": "^1.4.0",
-    "@slickgrid-universal/odata": "^1.4.0",
-    "@slickgrid-universal/rxjs-observable": "^1.4.0",
-    "@slickgrid-universal/text-export": "^1.4.0",
+    "@slickgrid-universal/composite-editor-component": "^2.1.1",
+    "@slickgrid-universal/custom-tooltip-plugin": "^2.1.1",
+    "@slickgrid-universal/excel-export": "^2.1.1",
+    "@slickgrid-universal/graphql": "^2.1.1",
+    "@slickgrid-universal/odata": "^2.1.1",
+    "@slickgrid-universal/rxjs-observable": "^2.1.1",
+    "@slickgrid-universal/text-export": "^2.1.1",
     "@types/bluebird": "^3.5.36",
     "@types/dompurify": "^2.3.2",
     "@types/flatpickr": "^3.1.2",
@@ -123,6 +125,7 @@
     "@types/node": "^17.0.31",
     "@types/react": "^17.0.37",
     "@types/react-dom": "^17.0.11",
+    "@types/sortablejs": "^1.15.0",
     "@types/text-encoding-utf-8": "^1.0.2",
     "@types/webpack": "^5.28.0",
     "@typescript-eslint/eslint-plugin": "^5.44.0",
@@ -186,5 +189,8 @@
   "engines": {
     "node": ">=14.15.0",
     "npm": ">=6.14.8"
+  },
+  "resolutions": {
+    "caniuse-lite": "1.0.30001431"
   }
 }
diff --git a/src/assets/i18n/en/aurelia-slickgrid.json b/src/assets/i18n/en/aurelia-slickgrid.json
@@ -36,6 +36,7 @@
   "ITEMS": "items",
   "ITEMS_PER_PAGE": "items per page",
   "ITEMS_SELECTED": "items selected",
+  "NO_ELEMENTS_FOUND": "No elements found",
   "LAST_UPDATE": "Last Update",
   "LESS_THAN": "Less than",
   "LESS_THAN_OR_EQUAL_TO": "Less than or equal to",

diff --git a/src/assets/i18n/fr/aurelia-slickgrid.json b/src/assets/i18n/fr/aurelia-slickgrid.json
@@ -39,6 +39,7 @@
   "LAST_UPDATE": "Dernière mise à jour",
   "LESS_THAN": "Plus petit que",
   "LESS_THAN_OR_EQUAL_TO": "Plus petit ou égal à",
+  "NO_ELEMENTS_FOUND": "Aucun élément trouvé",
   "NOT_CONTAINS": "Ne contient pas",
   "NOT_EQUAL_TO": "Non égal à",
   "NOT_IN_COLLECTION_SEPERATED_BY_COMMA": "Recherche excluant certain éléments d'une collection, doit être séparé par une virgule (a,b)",

diff --git a/src/examples/slickgrid/example14.tsx b/src/examples/slickgrid/example14.tsx
@@ -18,7 +18,7 @@ export default class Example14 extends React.Component {
   </ul>
   `;
 
-  angularGrid2!: ReactGridInstance;
+  reactGrid2!: ReactGridInstance;
   gridObj2: any;
   columnDefinitions1: Column[] = [];
   columnDefinitions2: Column[] = [];
@@ -42,7 +42,7 @@ export default class Example14 extends React.Component {
   }
 
   reactGridReady2(reactGrid: ReactGridInstance) {
-    this.angularGrid2 = reactGrid;
+    this.reactGrid2 = reactGrid;
     this.gridObj2 = reactGrid.slickGrid;
   }
 
@@ -109,7 +109,7 @@ export default class Example14 extends React.Component {
 
   getData(count: number) {
     // Set up some test columns.
-    const mockDataset = [];
+    const mockDataset: any[] = [];
     for (let i = 0; i < count; i++) {
       mockDataset[i] = {
         id: i,

diff --git a/src/examples/slickgrid/example23.tsx b/src/examples/slickgrid/example23.tsx
@@ -1,5 +1,7 @@
 import i18next from 'i18next';
 import * as moment from 'moment-mini';
+import { SlickCustomTooltip } from '@slickgrid-universal/custom-tooltip-plugin';
+import { ExcelExportService } from '@slickgrid-universal/excel-export';
 
 import { CustomInputFilter } from './custom-inputFilter';
 import {
@@ -12,11 +14,11 @@ import {
   Formatters,
   GridOption,
   GridStateChange,
-  JQueryUiSliderOption,
   Metrics,
   MultipleSelectOption,
   OperatorType,
   SlickGrid,
+  SliderRangeOption,
   ReactSlickgridCustomElement
 } from '../../slickgrid-react';
 import React from 'react';
@@ -117,15 +119,18 @@ export default class Example23 extends React.Component {
       {
         id: 'percentComplete', name: '% Complete', field: 'percentComplete', nameKey: 'PERCENT_COMPLETE', minWidth: 120,
         sortable: true,
+        customTooltip: { position: 'center' },
         formatter: Formatters.progressBar,
         type: FieldType.number,
         filterable: true,
         filter: {
           model: Filters.sliderRange,
           maxValue: 100, // or you can use the filterOptions as well
-          operator: OperatorType.rangeInclusive, // defaults to exclusive
-          params: { hideSliderNumbers: false }, // you can hide/show the slider numbers on both side
-          filterOptions: { min: 0, step: 5 } as JQueryUiSliderOption // you can also optionally pass any option of the jQuery UI Slider
+          operator: OperatorType.rangeInclusive, // defaults to inclusive
+          filterOptions: {
+            hideSliderNumbers: false, // you can hide/show the slider numbers on both side
+            min: 0, step: 5
+          } as SliderRangeOption
         }
       },
       {
@@ -193,13 +198,14 @@ export default class Example23 extends React.Component {
           { columnId: 'percentComplete', direction: 'DESC' },
           { columnId: 'duration', direction: 'ASC' },
         ],
-      }
+      },
+      registerExternalResources: [new SlickCustomTooltip(), new ExcelExportService()],
     };
   }
 
   mockData(itemCount: number, startingIndex = 0): any[] {
     // mock a dataset
-    const tempDataset = [];
+    const tempDataset: any[] = [];
     for (let i = startingIndex; i < (startingIndex + itemCount); i++) {
       const randomDuration = randomBetween(0, 365);
       const randomYear = randomBetween(moment().year(), moment().year() + 1);

diff --git a/src/examples/slickgrid/example28.scss b/src/examples/slickgrid/example28.scss
@@ -30,7 +30,7 @@
 //   /** 1. use `filter` color */
 //   // filter: invert(62%) sepia(93%) saturate(5654%) hue-rotate(325deg) brightness(100%) contrast(90%);
 
-//   /** 2. or use the SASS @mixin (from Angular-Slickgrid "sass-utilities.scss") that will produce the `filter` color */
+//   /** 2. or use the SASS @mixin (from Slickgrid-React "sass-utilities.scss") that will produce the `filter` color */
 //   @include recolor(#f14668, 0.9);
 // }
 

diff --git a/src/examples/slickgrid/example3.tsx b/src/examples/slickgrid/example3.tsx
@@ -2,7 +2,7 @@
 import i18next from 'i18next';
 import {
   ReactGridInstance,
-  AutocompleteOption,
+  AutocompleterOption,
   Column,
   EditCommand,
   Editors,
@@ -333,7 +333,7 @@ export default class Example3 extends React.Component<Props, State> {
         sortable: true,
         minWidth: 100,
         editor: {
-          model: Editors.autoComplete,
+          model: Editors.autocompleter,
           placeholder: '🔎︎ search city',
 
           // We can use the autocomplete through 3 ways 'collection', 'collectionAsync' or with your own autocomplete options
@@ -342,9 +342,9 @@ export default class Example3 extends React.Component<Props, State> {
           editorOptions: {
             minLength: 3,
             forceUserInput: true,
-            source: (request, response) => {
+            fetch: (searchText: string, updateCallback: (items: false | any[]) => void) => {
               /** with FETCH, note this demo won't work because of CORS */
-              // this.httpFetch.fetch(`http://gd.geobytes.com/AutoCompleteCity?q=${request.term}`)
+              // this.httpFetch.fetch(`http://gd.geobytes.com/AutoCompleteCity?q=${searchText}`)
               //   .then(response => response.json())
               //   .then(data => response(data))
               //   .catch(error => console.log('fetch error:', error));
@@ -354,17 +354,18 @@ export default class Example3 extends React.Component<Props, State> {
                 url: 'http://gd.geobytes.com/AutoCompleteCity',
                 dataType: 'jsonp',
                 data: {
-                  q: request.term,
+                  q: searchText,
                 },
                 success: (data) => {
-                  response(data);
+                  const finalData = (data.length === 1 && data[0] === '') ? [] : data; // invalid result should be [] instead of [''] to show empty msg
+                  updateCallback(finalData);
                 },
               });
             },
-          } as AutocompleteOption,
+          } as AutocompleterOption,
         },
         filter: {
-          model: Filters.autoComplete,
+          model: Filters.autocompleter,
           // placeholder: '🔎︎ search city',
 
           // We can use the autocomplete through 3 ways 'collection', 'collectionAsync' or with your own autocomplete options
@@ -374,19 +375,20 @@ export default class Example3 extends React.Component<Props, State> {
           // here we use $.ajax just because I'm not sure how to configure React HttpClient with JSONP and CORS
           filterOptions: {
             minLength: 3,
-            source: (request, response) => {
+            fetch: (searchText: string, updateCallback: (items: false | any[]) => void) => {
               $.ajax({
                 url: 'http://gd.geobytes.com/AutoCompleteCity',
                 dataType: 'jsonp',
                 data: {
-                  q: request.term,
+                  q: searchText,
                 },
                 success: (data) => {
-                  response(data);
+                  const finalData = (data.length === 1 && data[0] === '') ? [] : data; // invalid result should be [] instead of [''] to show empty msg
+                  updateCallback(finalData);
                 },
               });
             },
-          } as AutocompleteOption,
+          } as AutocompleterOption,
         },
       },
       {
@@ -402,12 +404,12 @@ export default class Example3 extends React.Component<Props, State> {
         sortable: true,
         minWidth: 100,
         editor: {
-          model: Editors.autoComplete,
+          model: Editors.autocompleter,
           customStructure: { label: 'name', value: 'code' },
           collectionAsync: fetch(URL_COUNTRIES_COLLECTION),
         },
         filter: {
-          model: Filters.autoComplete,
+          model: Filters.autocompleter,
           customStructure: { label: 'name', value: 'code' },
           collectionAsync: fetch(URL_COUNTRIES_COLLECTION),
         },
@@ -420,11 +422,11 @@ export default class Example3 extends React.Component<Props, State> {
         sortable: true,
         minWidth: 100,
         editor: {
-          model: Editors.autoComplete,
+          model: Editors.autocompleter,
           collectionAsync: fetch(URL_COUNTRY_NAMES),
         },
         filter: {
-          model: Filters.autoComplete,
+          model: Filters.autocompleter,
           collectionAsync: fetch(URL_COUNTRY_NAMES),
         },
       },