type optionChanged

DevExpress · Sep 3, 2024 · 75bc7d5 · 75bc7d5
1 parent 71548e6
commit 75bc7d5
Show file tree

Hide file tree

Showing 14 changed files with 120 additions and 95 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -5,5 +5,5 @@
     "editor.codeActionsOnSave": {
         "source.fixAll.eslint": "explicit"
     },
-    "typescript.tsdk": "node_modules/typescript/lib"
+    "typescript.tsdk": "packages/devextreme/node_modules/typescript/lib"
 }
diff --git a/packages/devextreme/js/__internal/core/widget/component.ts b/packages/devextreme/js/__internal/core/widget/component.ts
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import Action from '@js/core/action';
 import Class from '@js/core/class';
 import type {
@@ -37,6 +36,7 @@ OptionChangedEventInfo<TComponent>
 > {
   onInitializing?: ((e: Record<string, unknown>) => void) | undefined;
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   defaultOptionsRules?: DefaultOptionsRule<any>[];
 }
 
@@ -48,33 +48,36 @@ export class Component<
 > extends (Class.inherit({}) as new() => {}) {
   _deprecatedOptions: Partial<TProperties> = {};
 
-  _options: any;
+  _options!: Options;
 
   _optionsByReference: Partial<TProperties> = {};
 
-  NAME: any;
+  NAME?: string;
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   _eventsStrategy: any;
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   _optionChangedCallbacks: any;
 
-  _updateLockCount: any;
+  _updateLockCount!: number;
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   _disposingCallbacks: any;
 
-  postponedOperations: any;
+  postponedOperations!: PostponedOperations;
 
-  _initialized: any;
+  _initialized!: boolean;
 
-  _optionChangedAction: any;
+  _optionChangedAction?: (event?: Record<string, unknown>) => void;
 
-  _disposingAction: any;
+  _disposingAction?: (event?: Record<string, unknown>) => void;
 
-  _disposed: any;
+  _disposed?: boolean;
 
-  _initializing: any;
+  _initializing?: boolean;
 
-  _cancelOptionChange: any;
+  _cancelOptionChange?: string | boolean;
 
   _setDeprecatedOptions(): void {
     this._deprecatedOptions = {};
@@ -120,6 +123,7 @@ export class Component<
     return this._optionsByReference;
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   ctor(element: UserDefinedElement, options: any = {}): void {
     // eslint-disable-next-line @typescript-eslint/naming-convention
     const { _optionChangedCallbacks, _disposingCallbacks } = options;
@@ -229,7 +233,7 @@ export class Component<
   _dispose(): void {
     this._optionChangedCallbacks.empty();
     this._createDisposingAction();
-    this._disposingAction();
+    this._disposingAction?.();
     this._eventsStrategy.dispose();
     this._options.dispose();
     this._disposed = true;
@@ -294,7 +298,7 @@ export class Component<
   }
 
   // eslint-disable-next-line max-len
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/explicit-function-return-type, @typescript-eslint/explicit-module-boundary-types
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/explicit-function-return-type, @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any
   _optionChanging(...args: any[]) {
 
   }
@@ -314,7 +318,7 @@ export class Component<
 
         if (!isInnerOption(name)) {
           this._optionChangedCallbacks.fireWith(this, [extend(this._defaultActionArgs(), args)]);
-          this._optionChangedAction(extend({}, args));
+          this._optionChangedAction?.(extend({}, args));
         }
 
         if (!this._disposed && this._cancelOptionChange !== name) {
@@ -324,7 +328,7 @@ export class Component<
     }
   }
 
-  initialOption(name: TProperties): TProperties {
+  initialOption(name: string): TProperties {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return this._options.initial(name);
   }
@@ -470,7 +474,8 @@ export class Component<
     this._cancelOptionChange = false;
   }
 
-  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+  // eslint-disable-next-line max-len
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any
   _getOptionValue(name: string, context: any): any {
     const value = this.option(name);
 

diff --git a/packages/devextreme/js/__internal/core/widget/dom_component.ts b/packages/devextreme/js/__internal/core/widget/dom_component.ts
@@ -1,6 +1,3 @@
-/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-unsafe-return */
 import config from '@js/core/config';
 import type { DOMComponentOptions } from '@js/core/dom_component';
 import { getPublicElement } from '@js/core/element';
@@ -24,6 +21,7 @@ import license, { peekValidationPerformed } from '@ts/core/license/license_valid
 import { Component } from './component';
 import type { OptionChanged } from './types';
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export interface Properties<TComponent = any> extends DOMComponentOptions<TComponent> {
   _ignoreFunctionValueDeprecation?: boolean;
 
@@ -38,31 +36,39 @@ class DOMComponent<
   TComponent extends Component<TComponent, TProperties>,
   TProperties extends Properties = Properties,
 > extends Component<TComponent, TProperties> {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   static _classCustomRules: any[];
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   private _customClass: any;
 
-  private _$element: any;
+  private _$element!: dxElementWrapper;
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   private _windowResizeCallBack: any;
 
-  private _isHidden: any;
+  private _isHidden?: boolean;
 
-  private _requireRefresh: any;
+  private _requireRefresh?: boolean;
 
-  private _templateManager: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  private _templateManager?: any;
 
-  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+  // eslint-disable-next-line max-len
+  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type, @typescript-eslint/explicit-module-boundary-types
   static getInstance(element) {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return getInstanceByElement($(element), this);
   }
 
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   static defaultOptions(rule): void {
     this._classCustomRules = Object.hasOwnProperty.bind(this)('_classCustomRules') && this._classCustomRules ? this._classCustomRules : [];
     this._classCustomRules.push(rule);
   }
 
   _getDefaultOptions(): TProperties {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return extend(super._getDefaultOptions(), {
 
       width: undefined,
@@ -80,7 +86,7 @@ class DOMComponent<
     }, this._useTemplates() ? TemplateManager.createDefaultOptions() : {});
   }
 
-  ctor(element, options): void {
+  ctor(element: Element, options: TProperties): void {
     this._customClass = null;
 
     this._createElement(element);
@@ -95,7 +101,7 @@ class DOMComponent<
     }
   }
 
-  _createElement(element): void {
+  _createElement(element: Element): void {
     this._$element = $(element);
   }
 
@@ -104,6 +110,7 @@ class DOMComponent<
     return ['rtlEnabled', 'disabled', 'templatesRenderAsynchronously'];
   }
 
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   _checkFunctionValueDeprecation(optionNames): void {
     if (!this.option('_ignoreFunctionValueDeprecation')) {
       optionNames.forEach((optionName) => {
@@ -131,13 +138,14 @@ class DOMComponent<
     this._initTemplateManager();
   }
 
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   _setOptionsByDevice(instanceCustomRules): void {
     // @ts-expect-error
     // eslint-disable-next-line max-len
     super._setOptionsByDevice([].concat(this.constructor._classCustomRules || [], instanceCustomRules || []));
   }
 
-  _isInitialOptionValue(name): boolean {
+  _isInitialOptionValue(name: string): boolean {
     // @ts-expect-error
     const isCustomOption = this.constructor._classCustomRules
             // @ts-expect-error
@@ -225,6 +233,7 @@ class DOMComponent<
     }
   }
 
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   _isCssUpdateRequired(element, height, width): boolean {
     return !!(isDefined(width) || isDefined(height) || element.style.width || element.style.height);
   }
@@ -259,7 +268,7 @@ class DOMComponent<
     return $element.is(':visible');
   }
 
-  _checkVisibilityChanged(action): void {
+  _checkVisibilityChanged(action: 'shown' | 'hiding'): void {
     const isVisible = this._isVisible();
 
     if (isVisible) {
@@ -280,7 +289,7 @@ class DOMComponent<
   _clean(): void {}
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  _modelByElement(element): unknown | undefined {
+  _modelByElement(element: dxElementWrapper): unknown | undefined {
     const { modelByElement } = this.option();
     const $element = this.$element();
 
@@ -315,7 +324,7 @@ class DOMComponent<
     }
   }
 
-  _toggleRTLDirection(rtl): void {
+  _toggleRTLDirection(rtl: boolean | undefined): void {
     const $element = this.$element();
 
     $element.toggleClass('dx-rtl', rtl);
@@ -324,6 +333,7 @@ class DOMComponent<
   _createComponent<TTComponent>(
     element: string | HTMLElement | dxElementWrapper,
     component: string | (new (...args) => TTComponent),
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     configuration: TTComponent extends Component<any, infer TTProperties>
       ? TTProperties
       : Record<string, unknown>,
@@ -388,6 +398,7 @@ class DOMComponent<
     return instance;
   }
 
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   _extendConfig(configuration, extendConfig): void {
     each(extendConfig, (key, value) => {
       // eslint-disable-next-line @typescript-eslint/no-unused-expressions
@@ -399,6 +410,7 @@ class DOMComponent<
     const $element = this.$element();
     const context = this._modelByElement($element);
 
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return extend(super._defaultActionConfig(), { context });
   }
 
@@ -407,6 +419,7 @@ class DOMComponent<
     const model = this._modelByElement($element);
     const element = this.element();
 
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return extend(super._defaultActionArgs(), { element, model });
   }
 
@@ -433,7 +446,7 @@ class DOMComponent<
     }
   }
 
-  _removeAttributes(element): void {
+  _removeAttributes(element: Element): void {
     const attrs = element.attributes;
 
     // eslint-disable-next-line no-plusplus
@@ -443,6 +456,7 @@ class DOMComponent<
       if (attr) {
         const { name } = attr;
 
+        // eslint-disable-next-line @typescript-eslint/prefer-includes
         if (!name.indexOf('aria-') || name.indexOf('dx-') !== -1
                     || name === 'role' || name === 'style' || name === 'tabindex') {
           element.removeAttribute(name);
@@ -451,14 +465,14 @@ class DOMComponent<
     }
   }
 
-  _removeClasses(element): void {
+  _removeClasses(element: Element): void {
     element.className = element.className
       .split(' ')
       .filter((cssClass) => cssClass.lastIndexOf('dx-', 0) !== 0)
       .join(' ');
   }
 
-  _updateDOMComponent(renderRequired): void {
+  _updateDOMComponent(renderRequired: boolean): void {
     if (renderRequired) {
       this._renderComponent();
     } else if (this._requireRefresh) {
@@ -494,7 +508,7 @@ class DOMComponent<
     this._removeClasses(element);
   }
 
-  resetOption(optionName): void {
+  resetOption(optionName: string): void {
     super.resetOption(optionName);
 
     if (optionName === 'width' || optionName === 'height') {
@@ -544,17 +558,21 @@ class DOMComponent<
     }
   }
 
-  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+  // eslint-disable-next-line max-len
+  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type, @typescript-eslint/explicit-module-boundary-types
   _getTemplateByOption(optionName) {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return this._getTemplate(this.option(optionName));
   }
 
-  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+  // eslint-disable-next-line max-len
+  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type, @typescript-eslint/explicit-module-boundary-types
   _getTemplate(templateSource) {
     const templates = this.option('integrationOptions.templates');
     const isAsyncTemplate = this.option('templatesRenderAsynchronously');
     const skipTemplates = this.option('integrationOptions.skipTemplates');
 
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return this._templateManager.getTemplate(
       templateSource,
       templates,
@@ -566,6 +584,7 @@ class DOMComponent<
     );
   }
 
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   _saveTemplate(name, template): void {
     this._setOptionWithoutOptionChange(
       `integrationOptions.templates.${name}`,