DateBox (Base + Mask + Strategies), HTMLEditor: convert into ES6 class (DevExpress#29250) (DevExpress#29282)

Author: EugeniyKiyashko

packages/devextreme/js/__internal/ui/date_box/m_date_box.base.ts

@@ -11,17 +11,24 @@ import DateBoxStrategy from './m_date_box.strategy';
 
 const TODAY_BUTTON_CLASS = 'dx-button-today';
 
-const CalendarStrategy = DateBoxStrategy.inherit({
+class CalendarStrategy extends DateBoxStrategy {
+  _lastActionElement?: string;
 
-  NAME: 'Calendar',
+  ctor(dateBox): void {
+    super.ctor(dateBox);
+
+    this.NAME = 'Calendar';
+  }
 
   getDefaultOptions() {
-    return extend(this.callBase(), {
+    return {
+      ...super.getDefaultOptions(),
       todayButtonText: messageLocalization.format('dxCalendar-todayButtonText'),
-    });
-  },
+    };
+  }
 
-  supportedKeys() {
+  // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+  supportedKeys(): Record<string, (e: KeyboardEvent) => boolean | void> {
     const homeEndHandler = function (e) {
       if (this.option('opened')) {
         e.preventDefault();
@@ -69,25 +76,27 @@ const CalendarStrategy = DateBoxStrategy.inherit({
       home: homeEndHandler,
       end: homeEndHandler,
     };
-  },
+  }
 
   getDisplayFormat(displayFormat) {
     return displayFormat || 'shortdate';
-  },
+  }
 
-  _closeDropDownByEnter: () => true,
+  _closeDropDownByEnter() {
+    return true;
+  }
 
   _getWidgetName() {
     return Calendar;
-  },
+  }
 
   _getContouredValue() {
     return this._widget._view.option('contouredDate');
-  },
+  }
 
   getKeyboardListener() {
     return this._widget;
-  },
+  }
 
   _getWidgetOptions() {
     const disabledDates = this.dateBox.option('disabledDates');
@@ -104,20 +113,20 @@ const CalendarStrategy = DateBoxStrategy.inherit({
       onContouredChanged: this._refreshActiveDescendant.bind(this),
       skipFocusCheck: true,
     });
-  },
+  }
 
   _injectComponent(func) {
     const that = this;
     return function (params) {
       extend(params, { component: that.dateBox });
       return func(params);
     };
-  },
+  }
 
   _refreshActiveDescendant(e) {
     this._lastActionElement = 'calendar';
     this.dateBox.setAria('activedescendant', e.actionValue);
-  },
+  }
 
   _getTodayButtonConfig() {
     const buttonsLocation = this.dateBox.option('buttonsLocation');
@@ -137,13 +146,13 @@ const CalendarStrategy = DateBoxStrategy.inherit({
         stylingMode,
       },
     };
-  },
+  }
 
   _isCalendarVisible() {
     const { calendarOptions } = this.dateBox.option();
 
     return isEmptyObject(calendarOptions) || calendarOptions.visible !== false;
-  },
+  }
 
   _getPopupToolbarItems(toolbarItems) {
     const useButtons = this.dateBox.option('applyValueMode') === 'useButtons';
@@ -159,14 +168,14 @@ const CalendarStrategy = DateBoxStrategy.inherit({
     }
 
     return toolbarItems;
-  },
+  }
 
   popupConfig(popupConfig) {
     return extend(true, popupConfig, {
       position: { collision: 'flipfit flip' },
       width: 'auto',
     });
-  },
+  }
 
   _valueChangedHandler(e) {
     const { value } = e;
@@ -179,23 +188,24 @@ const CalendarStrategy = DateBoxStrategy.inherit({
     if (this.dateBox.option('applyValueMode') === 'instantly') {
       this.dateBoxValue(this.getValue(), e.event);
     }
-  },
+  }
 
-  _updateValue() {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  _updateValue(preventDefaultValue?: boolean) {
     if (!this._widget) {
       return;
     }
 
     this._widget.option('value', this.dateBoxValue());
-  },
+  }
 
   textChangedHandler() {
     this._lastActionElement = 'input';
 
     if (this.dateBox.option('opened') && this._widget) {
       this._updateValue(true);
     }
-  },
+  }
 
   _cellClickHandler(e) {
     const { dateBox } = this;
@@ -204,7 +214,7 @@ const CalendarStrategy = DateBoxStrategy.inherit({
       dateBox.option('opened', false);
       this.dateBoxValue(this.getValue(), e.event);
     }
-  },
-});
+  }
+}
 
 export default CalendarStrategy;

packages/devextreme/js/__internal/ui/date_box/m_date_box.mask.ts

@@ -4,50 +4,64 @@ import dateUtils from '@js/core/utils/date';
 import { extend } from '@js/core/utils/extend';
 import { getWidth } from '@js/core/utils/size';
 import { getWindow } from '@js/core/utils/window';
-import Box from '@js/ui/box';
+import TimeView from '@ts/ui/date_box/m_time_view';
+import Box from '@ts/ui/m_box';
 
 import CalendarStrategy from './m_date_box.strategy.calendar';
 import uiDateUtils from './m_date_utils';
-import TimeView from './m_time_view';
 
 const window = getWindow();
 
 const SHRINK_VIEW_SCREEN_WIDTH = 573;
 const DATEBOX_ADAPTIVITY_MODE_CLASS = 'dx-datebox-adaptivity-mode';
 const DATEBOX_TIMEVIEW_SIDE_CLASS = 'dx-datebox-datetime-time-side';
 
-const CalendarWithTimeStrategy = CalendarStrategy.inherit({
+class CalendarWithTimeStrategy extends CalendarStrategy {
+  _timeView!: TimeView;
 
-  NAME: 'CalendarWithTime',
+  _repaintTimer?: ReturnType<typeof setTimeout>;
+
+  _removeMinWidthTimer?: ReturnType<typeof setTimeout>;
+
+  _currentAdaptiveMode?: boolean;
+
+  _box?: Box;
+
+  ctor(dateBox): void {
+    super.ctor(dateBox);
+
+    this.NAME = 'CalendarWithTime';
+  }
 
   getDefaultOptions() {
-    return extend(this.callBase(), {
+    return {
+      ...super.getDefaultOptions(),
       applyValueMode: 'useButtons',
       buttonsLocation: 'bottom after',
       'dropDownOptions.showTitle': false,
-    });
-  },
+    };
+  }
 
   _closeDropDownByEnter() {
     return dateUtils.sameDate(this._getContouredValue(), this.widgetOption('value'));
-  },
+  }
 
   getDisplayFormat(displayFormat) {
     return displayFormat || 'shortdateshorttime';
-  },
+  }
 
   _is24HourFormat() {
     // @ts-expect-error
     return dateLocalization.is24HourFormat(this.getDisplayFormat(this.dateBox.option('displayFormat')));
-  },
+  }
 
   _getContouredValue() {
-    const viewDate = this.callBase();
+    const viewDate = super._getContouredValue();
     return this._updateDateTime(viewDate);
-  },
+  }
 
-  _renderWidget() {
-    this.callBase();
+  _renderWidget(): void {
+    super._renderWidget();
 
     this._timeView = this.dateBox._createComponent($('<div>'), TimeView, {
       value: this.dateBoxValue(),
@@ -56,10 +70,10 @@ const CalendarWithTimeStrategy = CalendarStrategy.inherit({
       onValueChanged: this._valueChangedHandler.bind(this),
       stylingMode: this.dateBox.option('stylingMode'),
     });
-  },
+  }
 
-  renderOpenedState() {
-    this.callBase();
+  renderOpenedState(): void {
+    super.renderOpenedState();
     const popup = this._getPopup();
 
     if (popup) {
@@ -69,9 +83,9 @@ const CalendarWithTimeStrategy = CalendarStrategy.inherit({
     clearTimeout(this._repaintTimer);
 
     this._repaintTimer = setTimeout(() => {
-      this._getPopup() && this._getPopup().repaint();
+      this._getPopup()?.repaint();
     }, 0);
-  },
+  }
 
   isAdaptivityChanged() {
     const isAdaptiveMode = this._isShrinkView();
@@ -82,8 +96,8 @@ const CalendarWithTimeStrategy = CalendarStrategy.inherit({
       return currentAdaptiveMode !== undefined;
     }
 
-    return this.callBase();
-  },
+    return super.isAdaptivityChanged();
+  }
 
   _updateValue(preventDefaultValue) {
     let date = this.dateBoxValue();
@@ -93,21 +107,21 @@ const CalendarWithTimeStrategy = CalendarStrategy.inherit({
       uiDateUtils.normalizeTime(date);
     }
 
-    this.callBase();
+    super._updateValue();
 
     if (this._timeView) {
       date && this._timeView.option('value', date);
       this._timeView.option('use24HourFormat', this._is24HourFormat());
     }
-  },
+  }
 
   _isSmallScreen() {
     return getWidth(window) <= SHRINK_VIEW_SCREEN_WIDTH;
-  },
+  }
 
-  _isShrinkView() {
+  _isShrinkView(): boolean {
     return !this.dateBox.option('showAnalogClock') || (this.dateBox.option('adaptivityEnabled') && this._isSmallScreen());
-  },
+  }
 
   _getBoxItems() {
     const items = [{
@@ -121,10 +135,10 @@ const CalendarWithTimeStrategy = CalendarStrategy.inherit({
     }
 
     return items;
-  },
+  }
 
   renderPopupContent() {
-    this.callBase();
+    super.renderPopupContent();
     this._currentAdaptiveMode = this._isShrinkView();
 
     const $popupContent = this._getPopup().$content();
@@ -154,41 +168,42 @@ const CalendarWithTimeStrategy = CalendarStrategy.inherit({
         return $container;
       }.bind(this),
     });
-  },
+  }
 
   popupConfig(popupConfig) {
-    const calendarPopupConfig = this.callBase(popupConfig);
+    const calendarPopupConfig = super.popupConfig(popupConfig);
     return extend(calendarPopupConfig, { width: 'auto' });
-  },
+  }
 
-  _preventFocusOnPopup(e) {
+  _preventFocusOnPopup(e): void {
     if (!$(e.target).hasClass('dx-texteditor-input')) {
-      this.callBase.apply(this, arguments);
+      // @ts-expect-error ts-error
+      super._preventFocusOnPopup.apply(this, arguments);
       if (!this.dateBox._hasFocusClass()) {
         this.dateBox.focus();
       }
     }
-  },
+  }
 
-  _updateDateTime(date) {
-    const time = this._timeView.option('value');
+  _updateDateTime(date): void {
+    const { value: time } = this._timeView.option();
     date.setHours(time.getHours(), time.getMinutes(), time.getSeconds(), time.getMilliseconds());
 
     return date;
-  },
+  }
 
   getValue() {
     let date = this._widget.option('value') ?? this._widget.getContouredDate();
     date = date ? new Date(date) : new Date();
 
     return this._updateDateTime(date);
-  },
+  }
 
-  dispose() {
+  dispose(): void {
     clearTimeout(this._removeMinWidthTimer);
     clearTimeout(this._repaintTimer);
-    this.callBase();
-  },
-});
+    super.dispose();
+  }
+}
 
 export default CalendarWithTimeStrategy;