feat(common): use editorOptions/filterOptions instead of params (#798)

* feat(common): use editorOptions/filterOptions instead of params
- instead of using editor/filter `params` which aren't typed, we'll move most of these options into existing or new interfaces and warn user of deprecations of editorOptions/filterOptions instead of params.

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

@@ -141,7 +141,7 @@ export class Example3 {
           model: Editors.slider,
           minValue: 0,
           maxValue: 100,
-          // params: { hideSliderNumber: true },
+          // editorOptions: { hideSliderNumber: true } as SliderOption,
         },
         sortable: true, filterable: true,
         filter: { model: Filters.slider, operator: '>=' },

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

@@ -20,6 +20,7 @@ import {
   // utilities
   deepCopy,
   formatNumber,
+  SliderOption,
 } from '@slickgrid-universal/common';
 import { ExcelExportService } from '@slickgrid-universal/excel-export';
 import { Slicker, SlickerGridInstance, SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
@@ -156,7 +157,7 @@ export class Example11 {
       },
       {
         id: 'percentComplete', name: '% Complete', field: 'percentComplete', type: FieldType.number, minWidth: 80,
-        editor: { model: Editors.slider, massUpdate: true, minValue: 0, maxValue: 100, params: { hideSliderNumber: true } },
+        editor: { model: Editors.slider, massUpdate: true, minValue: 0, maxValue: 100, editorOptions: { hideSliderNumber: true } as SliderOption },
         sortable: true, filterable: true,
         filter: { model: Filters.slider, operator: '>=' },
       },

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

@@ -15,6 +15,7 @@ import {
   LongTextEditorOption,
   OnCompositeEditorChangeEventArgs,
   SlickNamespace,
+  SliderOption,
   SortComparers,
 
   // utilities
@@ -235,7 +236,7 @@ export class Example12 {
         exportCustomFormatter: Formatters.dateUs,
         type: FieldType.date, outputType: FieldType.dateUs, saveOutputType: FieldType.dateUtc,
         filterable: true, filter: { model: Filters.compoundDate },
-        editor: { model: Editors.date, massUpdate: true, params: { hideClearButton: false } },
+        editor: { model: Editors.date, massUpdate: true, editorOptions: { hideClearButton: false } as SliderOption },
       },
       {
         id: 'completed', name: 'Completed', field: 'completed', width: 80, minWidth: 75, maxWidth: 100,

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

@@ -7,6 +7,7 @@ import {
   EventNamingStyle,
   FieldType,
   Filters,
+  FlatpickrOption,
   Formatter,
   Formatters,
   GridOption,
@@ -211,7 +212,7 @@ export class Example14 {
         exportCustomFormatter: Formatters.dateUs,
         type: FieldType.date, outputType: FieldType.dateUs, saveOutputType: FieldType.dateUtc,
         filterable: true, filter: { model: Filters.compoundDate },
-        editor: { model: Editors.date, params: { hideClearButton: false } },
+        editor: { model: Editors.date, editorOptions: { hideClearButton: false } as FlatpickrOption },
       },
       {
         id: 'completed', name: 'Completed', field: 'completed', width: 80, minWidth: 75, maxWidth: 100,

packages/common/src/commonEditorFilter/commonEditorFilterUtils.ts

@@ -1,6 +1,6 @@
 import { AutocompleteItem } from 'autocompleter';
 
-import { AutocompleterOption } from '../interfaces';
+import { AutocompleterOption } from '../interfaces/index';
 
 /**
  * add loading class ".slick-autocomplete-loading" to the Kraaden Autocomplete input element

packages/common/src/editors/__tests__/sliderEditor.spec.ts

@@ -473,7 +473,7 @@ describe('SliderEditor', () => {
       const editorElm = divContainer.querySelector('.slider-editor input.editor-price') as HTMLInputElement;
       editorElm.dispatchEvent(new Event('change'));
 
-      expect(consoleSpy).toHaveBeenCalledWith('[Slickgrid-Universal] All editor.params were moved, and deprecated, to "editorOptions" as SliderOption for better typing support.');
+      expect(consoleSpy).toHaveBeenCalledWith('[Slickgrid-Universal] All editor.params are moving to "editorOptions" for better typing support and "params" will be deprecated in future release.');
     });
 
     it('should enableSliderTrackColoring and trigger a change event and expect slider track to have background color', () => {

packages/common/src/editors/autocompleterEditor.ts

@@ -25,6 +25,7 @@ import {
 } from '../interfaces/index';
 import { textValidator } from '../editorValidators/textValidator';
 import { addAutocompleteLoadingByOverridingFetch } from '../commonEditorFilter';
+import { getEditorOptionByName } from './editorUtilities';
 import { createDomElement, sanitizeTextByAvailableSanitizer, } from '../services/domUtilities';
 import { findOrDefault, getDescendantProperty, } from '../services/utilities';
 import { BindingEventService } from '../services/bindingEvent.service';
@@ -551,7 +552,7 @@ export class AutocompleterEditor<T extends AutocompleteItem = any> implements Ed
     this._editorInputGroupElm.appendChild(createDomElement('span'));
 
     // show clear date button (unless user specifically doesn't want it)
-    if (!this.columnEditor?.params?.hideClearButton) {
+    if (!getEditorOptionByName<AutocompleterOption, 'hideClearButton'>(this.columnEditor, 'hideClearButton')) {
       closeButtonGroupElm.appendChild(this._clearButtonElm);
       this._editorInputGroupElm.appendChild(closeButtonGroupElm);
       this._bindEventService.bind(this._clearButtonElm, 'click', () => this.clear());

packages/common/src/editors/dateEditor.ts

@@ -21,16 +21,9 @@ import {
   SlickGrid,
   SlickNamespace,
 } from './../interfaces/index';
-import {
-  createDomElement,
-  destroyObjectDomElementProps,
-  emptyElement,
-} from '../services/domUtilities';
-import {
-  getDescendantProperty,
-  mapFlatpickrDateFormatWithFieldType,
-  mapMomentDateFormatWithFieldType,
-} from './../services/utilities';
+import { getEditorOptionByName } from './editorUtilities';
+import { createDomElement, destroyObjectDomElementProps, emptyElement, } from '../services/domUtilities';
+import { getDescendantProperty, mapFlatpickrDateFormatWithFieldType, mapMomentDateFormatWithFieldType, } from './../services/utilities';
 import { BindingEventService } from '../services/bindingEvent.service';
 import { TranslaterService } from '../services/translater.service';
 
@@ -170,7 +163,7 @@ export class DateEditor implements Editor {
       this._editorInputGroupElm.appendChild(this._inputElm);
 
       // show clear date button (unless user specifically doesn't want it)
-      if (!this.columnEditor?.params?.hideClearButton) {
+      if (!getEditorOptionByName<FlatpickrOption, 'hideClearButton'>(this.columnEditor, 'hideClearButton')) {
         closeButtonGroupElm.appendChild(this._clearButtonElm);
         this._editorInputGroupElm.appendChild(closeButtonGroupElm);
         this._bindEventService.bind(this._clearButtonElm, 'click', () => this._lastTriggeredByClearDate = true);
@@ -237,7 +230,7 @@ export class DateEditor implements Editor {
    * @param {string} optionName - Flatpickr option name
    * @param {newValue} newValue - Flatpickr new option value
    */
-  changeEditorOption(optionName: keyof FlatpickrOption, newValue: any) {
+  changeEditorOption(optionName: keyof FlatpickrBaseOptions, newValue: any) {
     if (!this.columnEditor.editorOptions) {
       this.columnEditor.editorOptions = {};
     }

packages/common/src/editors/editorUtilities.ts

@@ -0,0 +1,18 @@
+// import { InferObjectPropTypeByName } from '../enums/inferObjectPropTypeByName.type';
+import { ColumnEditor } from '../interfaces/index';
+
+/**
+ * Get option from editor.params PR editor.editorOptions
+ * @deprecated this should be removed when slider editorParams are replaced by editorOptions
+ */
+export function getEditorOptionByName<T, K extends keyof T>(columnEditor: ColumnEditor, optionName: K, defaultValue?: any): T[K] | undefined {
+  let outValue;
+
+  if (columnEditor.editorOptions?.[optionName] !== undefined) {
+    outValue = (columnEditor.editorOptions as T)[optionName];
+  } else if (columnEditor?.params?.[optionName] !== undefined) {
+    console.warn(`[Slickgrid-Universal] All editor.params are moving to "editorOptions" for better typing support and "params" will be deprecated in future release.`);
+    outValue = columnEditor?.params?.[optionName];
+  }
+  return outValue ?? defaultValue;
+}

packages/common/src/editors/sliderEditor.ts

@@ -1,7 +1,21 @@
 import { setDeepValue, toSentenceCase } from '@slickgrid-universal/utils';
 
 import { Constants } from '../constants';
-import { Column, ColumnEditor, CompositeEditorOption, Editor, EditorArguments, EditorValidator, EditorValidationResult, GridOption, SlickGrid, SlickNamespace, SliderOption, CurrentSliderOption } from '../interfaces/index';
+import {
+  Column,
+  ColumnEditor,
+  CompositeEditorOption,
+  Editor,
+  EditorArguments,
+  EditorValidator,
+  EditorValidationResult,
+  GridOption,
+  SlickGrid,
+  SlickNamespace,
+  SliderOption,
+  CurrentSliderOption
+} from '../interfaces/index';
+import { getEditorOptionByName } from './editorUtilities';
 import { getDescendantProperty } from '../services/utilities';
 import { sliderValidator } from '../editorValidators/sliderValidator';
 import { BindingEventService } from '../services/bindingEvent.service';
@@ -73,11 +87,6 @@ export class SliderEditor implements Editor {
     return this.gridOptions.autoCommitEdit ?? false;
   }
 
-  /** @deprecated Getter for the Editor Generic Params */
-  protected get editorParams(): any {
-    return this.columnEditor.params || {};
-  }
-
   /** Getter for the current Slider Options */
   get sliderOptions(): CurrentSliderOption | undefined {
     return this._sliderOptions;
@@ -308,7 +317,7 @@ export class SliderEditor implements Editor {
     const minValue = +(this.columnEditor?.minValue ?? Constants.SLIDER_DEFAULT_MIN_VALUE);
     const maxValue = +(this.columnEditor?.maxValue ?? Constants.SLIDER_DEFAULT_MAX_VALUE);
     const step = +(this.columnEditor?.valueStep ?? Constants.SLIDER_DEFAULT_STEP);
-    const defaultValue = this.getEditorOptionByName('sliderStartValue') ?? minValue;
+    const defaultValue = getEditorOptionByName<SliderOption, 'sliderStartValue'>(this.columnEditor, 'sliderStartValue') ?? minValue;
     this._defaultValue = +defaultValue;
 
     this._sliderTrackElm = createDomElement('div', { className: 'slider-track' });
@@ -326,7 +335,7 @@ export class SliderEditor implements Editor {
     sliderInputContainerElm.appendChild(inputElm);
     divContainerElm.appendChild(sliderInputContainerElm);
 
-    if (!this.getEditorOptionByName('hideSliderNumber')) {
+    if (!getEditorOptionByName<SliderOption, 'hideSliderNumber'>(this.columnEditor, 'hideSliderNumber')) {
       divContainerElm.classList.add('input-group');
 
       const divGroupAddonElm = createDomElement('div', { className: 'input-group-addon input-group-append slider-value' });
@@ -350,21 +359,6 @@ export class SliderEditor implements Editor {
     this.disable(isCellEditable === false);
   }
 
-  /**
-   * Get option from editor.params PR editor.editorOptions
-   * @deprecated this should be removed when slider editorParams are replaced by editorOptions
-   */
-  protected getEditorOptionByName<T extends string | number | boolean>(optionName: string, defaultValue?: string | number | boolean): T {
-    let outValue: string | number | boolean | undefined;
-    if (this.columnEditor.editorOptions?.[optionName as keyof SliderOption] !== undefined) {
-      outValue = this.columnEditor.editorOptions[optionName as keyof SliderOption];
-    } else if (this.editorParams?.[optionName] !== undefined) {
-      console.warn('[Slickgrid-Universal] All editor.params were moved, and deprecated, to "editorOptions" as SliderOption for better typing support.');
-      outValue = this.editorParams?.[optionName];
-    }
-    return outValue as T ?? defaultValue ?? undefined;
-  }
-
   protected handleChangeEvent(event: MouseEvent) {
     this._isValueTouched = true;
     const compositeEditorOptions = this.args.compositeEditorOptions;
@@ -379,7 +373,7 @@ export class SliderEditor implements Editor {
   protected handleChangeSliderNumber(event: Event) {
     const value = (<HTMLInputElement>event.target)?.value ?? '';
     if (value !== '') {
-      if (!this.getEditorOptionByName('hideSliderNumber') && this._sliderNumberElm) {
+      if (!getEditorOptionByName<SliderOption, 'hideSliderNumber'>(this.columnEditor, 'hideSliderNumber') && this._sliderNumberElm) {
         this._sliderNumberElm.textContent = value;
       }
       this._inputElm.title = value;
@@ -426,12 +420,12 @@ export class SliderEditor implements Editor {
   }
 
   protected updateTrackFilledColorWhenEnabled() {
-    if (this.getEditorOptionByName('enableSliderTrackColoring') && this._inputElm) {
+    if (getEditorOptionByName<SliderOption, 'enableSliderTrackColoring'>(this.columnEditor, 'enableSliderTrackColoring') && this._inputElm) {
       const percent1 = 0;
       const percent2 = ((+this.getValue() - +this._inputElm.min) / (this.sliderOptions?.maxValue ?? 0 - +this._inputElm.min)) * 100;
       const bg = 'linear-gradient(to right, %b %p1, %c %p1, %c %p2, %b %p2)'
         .replace(/%b/g, '#eee')
-        .replace(/%c/g, (this.getEditorOptionByName('sliderTrackFilledColor') ?? 'var(--slick-slider-filter-thumb-color, #86bff8)') as string)
+        .replace(/%c/g, (getEditorOptionByName<SliderOption, 'sliderTrackFilledColor'>(this.columnEditor, 'sliderTrackFilledColor') ?? 'var(--slick-slider-filter-thumb-color, #86bff8)') as string)
         .replace(/%p1/g, `${percent1}%`)
         .replace(/%p2/g, `${percent2}%`);
 

packages/common/src/filters/__tests__/sliderRangeFilter.spec.ts

@@ -246,7 +246,7 @@ describe('SliderRangeFilter', () => {
     const filterLowestElm = divContainer.querySelector('.lowest-range-duration') as HTMLInputElement;
     const filterHighestElm = divContainer.querySelector('.highest-range-duration') as HTMLInputElement;
 
-    expect(consoleSpy).toHaveBeenCalledWith('[Slickgrid-Universal] All filter.params were moved, and deprecated, to "filterOptions" as SliderOption for better typing support.');
+    expect(consoleSpy).toHaveBeenCalledWith('[Slickgrid-Universal] All filter.params are moving to "filterOptions" for better typing support and "params" will be deprecated in future release.');
     expect(filterLowestElm.textContent).toBe('4');
     expect(filterHighestElm.textContent).toBe('69');
     expect(filter.currentValues).toEqual([4, 69]);

packages/common/src/filters/filterUtilities.ts

@@ -1,6 +1,6 @@
 import { Constants } from '../constants';
-import { OperatorString } from '../enums/operatorString.type';
-import { Column, GridOption, Locale } from '../interfaces/index';
+import { OperatorString } from '../enums/index';
+import { Column, ColumnFilter, GridOption, Locale } from '../interfaces/index';
 import { Observable, RxJsFacade, Subject, Subscription } from '../services/rxjsFacade';
 import { createDomElement, htmlEncodedStringWithPadding, sanitizeTextByAvailableSanitizer, } from '../services/domUtilities';
 import { castObservableToPromise, getDescendantProperty, getTranslationPrefix, } from '../services/utilities';
@@ -26,6 +26,22 @@ export function buildSelectOperator(optionValues: Array<{ operator: OperatorStri
   return selectElm;
 }
 
+/**
+ * Get option from filter.params PR filter.filterOptions
+ * @deprecated this should be removed when slider filterParams are replaced by filterOptions
+ */
+export function getFilterOptionByName<T, K extends keyof T>(columnFilter: ColumnFilter, optionName: K, defaultValue?: any): T[K] | undefined {
+  let outValue;
+
+  if (columnFilter.filterOptions?.[optionName] !== undefined) {
+    outValue = (columnFilter.filterOptions as T)[optionName];
+  } else if (columnFilter?.params?.[optionName] !== undefined) {
+    console.warn(`[Slickgrid-Universal] All filter.params are moving to "filterOptions" for better typing support and "params" will be deprecated in future release.`);
+    outValue = columnFilter?.params?.[optionName];
+  }
+  return outValue ?? defaultValue;
+}
+
 /**
  * When user use a CollectionAsync we will use the returned collection to render the filter DOM element
  * and reinitialize filter collection with this new collection