Overlay, Popup, Toast, Popover, LoadIndicator, LoadPanel: convert into ES6 class (DevExpress#29189)

Author: EugeniyKiyashko

packages/devextreme/js/__internal/core/widget/component.ts

@@ -200,7 +200,7 @@ export class Component<
 
   _logDeprecatedOptionWarning(
     option: string,
-    info: { since: string; message: string; alias: string },
+    info: { since: string; message: string; alias?: string },
   ): void {
     const message = info.message || `Use the '${info.alias}' option instead`;
     errors.log('W0001', this.NAME, option, info.since, message);
@@ -480,7 +480,7 @@ export class Component<
 
   // eslint-disable-next-line @stylistic/max-len
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any
-  _getOptionValue(name: string, context: any): any {
+  _getOptionValue(name: string, context?: any): any {
     const value = this.option(name);
 
     if (isFunction(value)) {

packages/devextreme/js/__internal/core/widget/widget.ts

@@ -60,9 +60,8 @@ class Widget<
 
   private _isReady?: boolean;
 
-  // eslint-disable-next-line @stylistic/max-len
-  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type
-  static getOptionsFromContainer({ name, fullName, value }) {
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+  static getOptionsFromContainer({ name, fullName, value }): Record<string, unknown> {
     let options = {};
 
     if (name === fullName) {
@@ -205,7 +204,7 @@ class Widget<
       .done(() => (!this._disposed ? this._fireContentReadyAction() : void 0));
   }
 
-  _renderContentImpl(): void {}
+  _renderContentImpl(): Promise<void> | void {}
 
   _fireContentReadyAction(): Promise<void> | DeferredObj<void> | void {
     return deferRender(() => this._contentReadyAction?.());
@@ -305,7 +304,6 @@ class Widget<
     return this._focusTarget();
   }
 
-  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   _focusInHandler(event: DxEvent): void {
     if (!event.isDefaultPrevented()) {
       this._createActionByOption('onFocusIn', {
@@ -315,7 +313,6 @@ class Widget<
     }
   }
 
-  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   _focusOutHandler(event: DxEvent): void {
     if (!event.isDefaultPrevented()) {
       this._createActionByOption('onFocusOut', {

packages/devextreme/js/__internal/grids/grid_core/validating/m_validating.ts

@@ -1144,6 +1144,7 @@ export const validatingEditorFactoryExtender = (Base: ModuleType<EditorFactory>)
       onPositioned: this.overlayPositionedHandler.bind(this),
     };
 
+    // @ts-expect-error ts-error
     this._revertTooltip = new Overlay($tooltipElement, tooltipOptions);
   }
 

packages/devextreme/js/__internal/ui/chat/messagelist.ts

@@ -114,6 +114,7 @@ class MessageList extends Widget<Properties> {
   }
 
   _renderContentImpl(): void {
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
     super._renderContentImpl();
 
     this._attachResizeObserverSubscription();

packages/devextreme/js/__internal/ui/drop_down_editor/m_drop_down_editor.ts

@@ -639,7 +639,7 @@ class DropDownEditor<
     // @ts-expect-error ts-error
     this._popup = this._createComponent(this._$popup, Popup, popupConfig);
 
-    this._popup.on({
+    this._popup!.on({
       showing: this._popupShowingHandler.bind(this),
       shown: this._popupShownHandler.bind(this),
       hiding: this._popupHidingHandler.bind(this),

packages/devextreme/js/__internal/ui/m_dialog.ts

@@ -83,7 +83,7 @@ export const custom = function (options) {
     .attr('id', messageId);
 
   const popupToolbarItems = [];
-
+  // @ts-expect-error ts-error
   const popupInstance = new Popup($element, extend({
     title: options.title ?? '',
     showTitle: ensureDefined(options.showTitle, true),

packages/devextreme/js/__internal/ui/m_load_indicator.ts

@@ -1,12 +1,15 @@
 import messageLocalization from '@js/common/core/localization/message';
 import registerComponent from '@js/core/component_registrator';
 import devices from '@js/core/devices';
+import type { DefaultOptionsRule } from '@js/core/options/utils';
+import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
-import { extend } from '@js/core/utils/extend';
 import { getHeight, getWidth } from '@js/core/utils/size';
 import { getNavigator } from '@js/core/utils/window';
+import type { Properties } from '@js/ui/load_indicator';
 import { current, isGeneric, isMaterialBased } from '@js/ui/themes';
-import Widget from '@js/ui/widget/ui.widget';
+import type { OptionChanged } from '@ts/core/widget/types';
+import Widget from '@ts/core/widget/widget';
 
 import supportUtils from '../core/utils/m_support';
 
@@ -20,23 +23,36 @@ const LOADINDICATOR_SEGMENT_CLASS = 'dx-loadindicator-segment';
 const LOADINDICATOR_SEGMENT_INNER_CLASS = 'dx-loadindicator-segment-inner';
 const LOADINDICATOR_IMAGE_CLASS = 'dx-loadindicator-image';
 
-// @ts-expect-error
-const LoadIndicator = Widget.inherit({
-  _getDefaultOptions() {
-    return extend(this.callBase(), {
+export interface LoadIndicatorProperties extends Properties {
+  viaImage?: boolean;
+
+  _animatingSegmentCount?: number;
+
+  _animatingSegmentInner?: boolean;
+}
+
+class LoadIndicator extends Widget<LoadIndicatorProperties> {
+  _$wrapper!: dxElementWrapper;
+
+  _$content!: dxElementWrapper;
+
+  _$indicator?: dxElementWrapper;
+
+  _getDefaultOptions(): LoadIndicatorProperties {
+    return {
+      ...super._getDefaultOptions(),
       indicatorSrc: '',
       activeStateEnabled: false,
       hoverStateEnabled: false,
       _animatingSegmentCount: 1,
       _animatingSegmentInner: false,
+    };
+  }
 
-    });
-  },
-
-  _defaultOptionsRules() {
+  _defaultOptionsRules(): DefaultOptionsRule<LoadIndicatorProperties>[] {
     const themeName = current();
 
-    return this.callBase().concat([
+    return super._defaultOptionsRules().concat([
       {
         device() {
           const realDevice = devices.real();
@@ -48,7 +64,7 @@ const LoadIndicator = Widget.inherit({
         },
       },
       {
-        device() {
+        device(): boolean {
           return isMaterialBased(themeName);
         },
         options: {
@@ -57,22 +73,23 @@ const LoadIndicator = Widget.inherit({
         },
       },
       {
-        device() {
+        device(): boolean {
           return isGeneric(themeName);
         },
         options: {
           _animatingSegmentCount: 7,
         },
       },
     ]);
-  },
+  }
 
-  _useTemplates() {
+  // eslint-disable-next-line class-methods-use-this
+  _useTemplates(): boolean {
     return false;
-  },
+  }
 
-  _init() {
-    this.callBase();
+  _init(): void {
+    super._init();
 
     this.$element().addClass(LOADINDICATOR_CLASS);
 
@@ -83,45 +100,47 @@ const LoadIndicator = Widget.inherit({
     };
 
     this.setAria(aria);
-  },
+  }
 
-  _initMarkup() {
-    this.callBase();
+  _initMarkup(): void {
+    super._initMarkup();
     this._renderWrapper();
     this._renderIndicatorContent();
     this._renderMarkup();
-  },
+  }
 
-  _renderWrapper() {
+  _renderWrapper(): void {
     this._$wrapper = $('<div>').addClass(LOADINDICATOR_WRAPPER_CLASS);
     this.$element().append(this._$wrapper);
-  },
+  }
 
-  _renderIndicatorContent() {
+  _renderIndicatorContent(): void {
     this._$content = $('<div>').addClass(LOADINDICATOR_CONTENT_CLASS);
     this._$wrapper.append(this._$content);
-  },
+  }
 
-  _renderMarkup() {
+  _renderMarkup(): void {
     const { viaImage, indicatorSrc } = this.option();
 
     if (supportUtils.animation() && !viaImage && !indicatorSrc) { // B236922
       this._renderMarkupForAnimation();
     } else {
       this._renderMarkupForImage();
     }
-  },
+  }
 
-  _renderMarkupForAnimation() {
+  _renderMarkupForAnimation(): void {
     const animatingSegmentInner = this.option('_animatingSegmentInner');
 
     this._$indicator = $('<div>').addClass(LOADINDICATOR_ICON_CLASS);
     this._$content.append(this._$indicator);
 
     // Indicator markup
+    // @ts-expect-error ts-error
     for (let i = this.option('_animatingSegmentCount'); i >= 0; --i) {
       const $segment = $('<div>')
         .addClass(LOADINDICATOR_SEGMENT_CLASS)
+        // eslint-disable-next-line @typescript-eslint/restrict-plus-operands, @typescript-eslint/no-base-to-string
         .addClass(LOADINDICATOR_SEGMENT_CLASS + i);
 
       if (animatingSegmentInner) {
@@ -130,9 +149,9 @@ const LoadIndicator = Widget.inherit({
 
       this._$indicator.append($segment);
     }
-  },
+  }
 
-  _renderMarkupForImage() {
+  _renderMarkupForImage(): void {
     const { indicatorSrc } = this.option();
 
     if (indicatorSrc) {
@@ -141,14 +160,14 @@ const LoadIndicator = Widget.inherit({
     } else if (supportUtils.animation()) {
       this._renderMarkupForAnimation();
     }
-  },
+  }
 
-  _renderDimensions() {
-    this.callBase();
+  _renderDimensions(): void {
+    super._renderDimensions();
     this._updateContentSizeForAnimation();
-  },
+  }
 
-  _updateContentSizeForAnimation() {
+  _updateContentSizeForAnimation(): void {
     if (!this._$indicator) {
       return;
     }
@@ -159,6 +178,7 @@ const LoadIndicator = Widget.inherit({
     if (width || height) {
       width = getWidth(this.$element());
       height = getHeight(this.$element());
+      // @ts-expect-error ts-error
       const minDimension = Math.min(height, width);
 
       this._$wrapper.css({
@@ -167,40 +187,40 @@ const LoadIndicator = Widget.inherit({
         fontSize: minDimension,
       });
     }
-  },
+  }
 
-  _clean() {
-    this.callBase();
+  _clean(): void {
+    super._clean();
 
     this._removeMarkupForAnimation();
     this._removeMarkupForImage();
-  },
+  }
 
-  _removeMarkupForAnimation() {
+  _removeMarkupForAnimation(): void {
     if (!this._$indicator) {
       return;
     }
 
     this._$indicator.remove();
     delete this._$indicator;
-  },
+  }
 
-  _removeMarkupForImage() {
+  _removeMarkupForImage(): void {
     this._$wrapper.css('backgroundImage', 'none');
-  },
+  }
 
-  _optionChanged(args) {
+  _optionChanged(args: OptionChanged<LoadIndicatorProperties>): void {
     switch (args.name) {
       case '_animatingSegmentCount':
       case '_animatingSegmentInner':
       case 'indicatorSrc':
         this._invalidate();
         break;
       default:
-        this.callBase(args);
+        super._optionChanged(args);
     }
-  },
-});
+  }
+}
 
 registerComponent('dxLoadIndicator', LoadIndicator);