feat(m_text_editor.mask.strategy.ts): Improve typing

Author: marker dao ®

packages/devextreme/js/__internal/ui/text_box/m_text_editor.mask.strategy.ts

@@ -1,7 +1,14 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import EventsEngine from '@js/common/core/events/core/events_engine';
 import { addNamespace } from '@js/common/core/events/utils/index';
+import type { dxElementWrapper } from '@js/core/renderer';
 import browser from '@js/core/utils/browser';
 import { clipboardText as getClipboardText } from '@js/core/utils/dom';
+import type { DxEvent } from '@js/events';
+import type { TextEditorBaseProperties } from '@ts/ui/text_box/m_text_editor.base';
+import type TextEditorMask from '@ts/ui/text_box/m_text_editor.mask';
+import type { HandlingArgs } from '@ts/ui/text_box/m_text_editor.mask.rule';
+import type { CaretRange } from '@ts/ui/text_box/utils.caret';
 
 const MASK_EVENT_NAMESPACE = 'dxMask';
 const BLUR_EVENT = 'blur beforedeactivate';
@@ -10,64 +17,75 @@ const DELETE_INPUT_TYPES = ['deleteContentBackward', 'deleteSoftLineBackward', '
 const HISTORY_INPUT_TYPES = ['historyUndo', 'historyRedo'];
 const EVENT_NAMES = ['focusIn', 'focusOut', 'input', 'paste', 'cut', 'drop', 'beforeInput'];
 
-function getEmptyString(length) {
-  return EMPTY_CHAR.repeat(length);
-}
+const getEmptyString = (length: number): string => EMPTY_CHAR.repeat(length);
 
 export default class MaskStrategy {
-  editor: any;
+  editor: TextEditorMask;
 
-  _dragTimer?: any;
+  _dragTimer?: ReturnType<typeof setTimeout>;
 
-  _inputHandlerTimer?: any;
+  _inputHandlerTimer?: ReturnType<typeof setTimeout>;
 
-  _caretTimeout?: any;
+  _caretTimeout?: ReturnType<typeof setTimeout>;
 
-  _prevCaret?: any;
+  _prevCaret?: CaretRange;
 
   _previousText?: string;
 
-  constructor(editor) {
+  constructor(editor: TextEditorMask) {
     this.editor = editor;
   }
 
-  _editorOption() {
+  _editorOption<K extends keyof TextEditorBaseProperties>(name: K): TextEditorBaseProperties[K];
+  _editorOption<K extends keyof TextEditorBaseProperties>(
+    name: K,
+    value: TextEditorBaseProperties[K],
+  ): void;
+  _editorOption<K extends keyof TextEditorBaseProperties>(
+    name: K,
+    value?: TextEditorBaseProperties[K],
+  ): TextEditorBaseProperties[K] | void {
+    // eslint-disable-next-line prefer-rest-params
     return this.editor.option(...arguments);
   }
 
-  _editorInput() {
+  _editorInput(): dxElementWrapper {
     return this.editor._input();
   }
 
-  _editorCaret(newCaret?: any) {
+  _editorCaret(): CaretRange;
+  _editorCaret(newCaret: CaretRange | undefined): void;
+  // eslint-disable-next-line consistent-return
+  _editorCaret(newCaret?: CaretRange | undefined): CaretRange | void {
     if (!newCaret) {
       return this.editor._caret();
     }
 
     this.editor._caret(newCaret);
   }
 
-  _attachChangeEventHandler() {
-    // @ts-expect-error
+  _attachChangeEventHandler(): void {
+    // @ts-expect-error ts-expect-error
     if (!this._editorOption('valueChangeEvent').split(' ').includes('change')) {
       return;
     }
 
     const $input = this._editorInput();
     const namespace = addNamespace(BLUR_EVENT, MASK_EVENT_NAMESPACE);
+
     EventsEngine.on($input, namespace, (e) => {
       this.editor._changeHandler(e);
     });
   }
 
-  _beforeInputHandler() {
-    // @ts-expect-error
+  _beforeInputHandler(): void {
     this._previousText = this._editorOption('text');
     this._prevCaret = this._editorCaret();
   }
 
-  _inputHandler(event) {
+  _inputHandler(event: DxEvent<InputEvent>): void {
     const { originalEvent } = event;
+
     if (!originalEvent) {
       return;
     }
@@ -81,7 +99,7 @@ export default class MaskStrategy {
     } else {
       const currentCaret = this._editorCaret();
 
-      if (!currentCaret.end) {
+      if (!currentCaret?.end) {
         return;
       }
 
@@ -90,63 +108,66 @@ export default class MaskStrategy {
       this._editorCaret(currentCaret);
       this._handleInsertTextInputEvent(originalEvent.data);
     }
-    // @ts-expect-error
+
     if (this._editorOption('text') === this._previousText) {
       event.stopImmediatePropagation();
     }
   }
 
-  _handleHistoryInputEvent() {
+  _handleHistoryInputEvent(): void {
     const caret = this._editorCaret();
 
     this._updateEditorMask({
-      start: caret.start,
-      length: caret.end - caret.start,
+      start: caret?.start,
+      length: (caret?.end ?? 0) - (caret?.start ?? 0),
       text: '',
     });
 
     this._editorCaret(this._prevCaret);
   }
 
-  _handleBackwardDeleteInputEvent() {
+  _handleBackwardDeleteInputEvent(): void {
     this._clearSelectedText(true);
 
     const caret = this._editorCaret();
+
     this.editor.setForwardDirection();
     this.editor._adjustCaret();
 
     const adjustedForwardCaret = this._editorCaret();
-    if (adjustedForwardCaret.start !== caret.start) {
+
+    if (adjustedForwardCaret?.start !== caret?.start) {
       this.editor.setBackwardDirection();
       this.editor._adjustCaret();
     }
   }
 
   _clearSelectedText(isDeleteInputEvent?: boolean): void {
     const selectionLength = this._prevCaret && (this._prevCaret.end - this._prevCaret.start);
-    const length = selectionLength || Number(isDeleteInputEvent);
+    const length = selectionLength ?? Number(isDeleteInputEvent);
 
     const caret = this._editorCaret();
 
     if (!this._isAutoFill()) {
       this.editor.setBackwardDirection();
+
       this._updateEditorMask({
-        start: caret.start,
+        start: caret?.start,
         length,
         text: getEmptyString(length),
       });
     }
   }
 
-  _handleInsertTextInputEvent(data) {
+  _handleInsertTextInputEvent(data: DxEvent<InputEvent>['data']): void {
     // NOTE: data has length > 1 when autosuggestion is applied.
     const text = data ?? '';
 
     this.editor.setForwardDirection();
 
     const hasValidChars = this._updateEditorMask({
       start: this._prevCaret?.start ?? 0,
-      length: text.length || 1,
+      length: text.length ?? 1,
       text,
     });
 
@@ -155,80 +176,91 @@ export default class MaskStrategy {
     }
   }
 
-  _updateEditorMask(args) {
-    const textLength = args.text.length;
-    const processedCharsCount = this.editor._handleChain(args);
+  _updateEditorMask(args: HandlingArgs): boolean {
+    const textLength = args.text?.length ?? 0;
+    const processedCharsCount = this.editor._handleChain(args) ?? 0;
 
     this.editor._displayMask();
 
     if (this.editor.isForwardDirection()) {
-      const { start, end } = this._editorCaret();
-      const correction = processedCharsCount - textLength;
+      const { start = 0, end = 0 } = this._editorCaret() ?? {};
 
+      const correction = processedCharsCount - textLength;
       const hasSkippedStub = processedCharsCount > 1;
+
       if (hasSkippedStub && textLength === 1) {
-        this._editorCaret({ start: start + correction, end: end + correction });
+        this._editorCaret({
+          start: start + correction,
+          end: end + correction,
+        });
       }
 
       this.editor._adjustCaret();
     }
 
-    return !!processedCharsCount;
+    return Boolean(processedCharsCount);
   }
 
-  _focusInHandler() {
+  _focusInHandler(): void {
     this.editor._showMaskPlaceholder();
     this.editor.setForwardDirection();
-    // @ts-expect-error
+
     if (!this.editor._isValueEmpty() && this._editorOption('isValid')) {
       this.editor._adjustCaret();
     } else {
       const caret = this.editor._maskRulesChain.first();
+
+      // eslint-disable-next-line no-restricted-globals
       this._caretTimeout = setTimeout(() => {
         this._editorCaret({ start: caret, end: caret });
       }, 0);
     }
   }
 
-  _focusOutHandler(event) {
+  _focusOutHandler(event: DxEvent<FocusEvent>): void {
     this.editor._changeHandler(event);
-    // @ts-expect-error
+
     if (this._editorOption('showMaskMode') === 'onFocus' && this.editor._isValueEmpty()) {
-      // @ts-expect-error
       this._editorOption('text', '');
       this.editor._renderDisplayText('');
     }
   }
 
-  _delHandler(event) {
+  _delHandler(event: DxEvent<KeyboardEvent>): void {
     const { editor } = this;
 
-    editor._maskKeyHandler(event, () => {
+    editor._maskKeyHandler(event, (): undefined => {
       if (!editor._hasSelection()) {
+        // @ts-expect-error bad editor type
         editor._handleKey(EMPTY_CHAR);
       }
     });
   }
 
-  _cutHandler(event) {
+  _cutHandler(event: DxEvent<ClipboardEvent>): void {
     const caret = this._editorCaret();
-    const selectedText = this._editorInput().val().substring(caret.start, caret.end);
+    const inputVal = this._editorInput().val();
+
+    // @ts-expect-error dxElementWrapper.val() should return string
+    const selectedText = inputVal.substring(caret?.start, caret?.end);
 
-    this.editor._maskKeyHandler(event, () => getClipboardText(event, selectedText));
+    this.editor._maskKeyHandler(event, () => (getClipboardText(event, selectedText)) as string);
   }
 
-  _dropHandler() {
+  _dropHandler(): void {
     this._clearDragTimer();
+
+    // eslint-disable-next-line no-restricted-globals
     this._dragTimer = setTimeout(() => {
       const value = this.editor._convertToValue(this._editorInput().val());
-      // @ts-expect-error
+
       this._editorOption('value', value);
     });
   }
 
-  _pasteHandler(event) {
+  _pasteHandler(event: DxEvent<ClipboardEvent>): void {
     const { editor } = this;
-    // @ts-expect-error
+
     if (this._editorOption('disabled')) {
       return;
     }
@@ -237,29 +269,36 @@ export default class MaskStrategy {
 
     editor._maskKeyHandler(event, () => {
       const pastedText = getClipboardText(event);
-      const restText = editor._maskRulesChain.text().substring(caret.end);
-      const accepted = editor._handleChain({ text: pastedText, start: caret.start, length: pastedText.length });
-      const newCaret = caret.start + accepted;
+      const restText = editor._maskRulesChain.text().substring(caret?.end);
+      const accepted = editor._handleChain({
+        text: pastedText,
+        start: caret?.start,
+        length: pastedText.length,
+      });
+      const newCaret = (caret?.start ?? 0) + accepted;
 
       editor._handleChain({ text: restText, start: newCaret, length: restText.length });
       editor._caret({ start: newCaret, end: newCaret });
     });
   }
 
-  _autoFillHandler(event) {
+  _autoFillHandler(event: InputEvent): void {
     const { editor } = this;
     const inputVal = this._editorInput().val();
+
+    // eslint-disable-next-line no-restricted-globals
     this._inputHandlerTimer = setTimeout(() => {
       if (this._isAutoFill()) {
         editor._maskKeyHandler(event, () => {
           editor._handleChain({ text: inputVal, start: 0, length: inputVal.length });
         });
+
         editor._validateMask();
       }
     });
   }
 
-  _isAutoFill() {
+  _isAutoFill(): boolean {
     const $input = this._editorInput();
 
     if (browser.webkit) {
@@ -270,23 +309,23 @@ export default class MaskStrategy {
     return false;
   }
 
-  _clearDragTimer() {
+  _clearDragTimer(): void {
     clearTimeout(this._dragTimer);
   }
 
-  _clearTimers() {
+  _clearTimers(): void {
     this._clearDragTimer();
     clearTimeout(this._caretTimeout);
     clearTimeout(this._inputHandlerTimer);
   }
 
-  getHandler(handlerName) {
+  getHandler(handlerName: string): (args: unknown) => void {
     return (args) => {
       this[`_${handlerName}Handler`]?.(args);
     };
   }
 
-  attachEvents() {
+  attachEvents(): void {
     const $input = this._editorInput();
 
     EVENT_NAMES.forEach((eventName) => {
@@ -297,12 +336,13 @@ export default class MaskStrategy {
     this._attachChangeEventHandler();
   }
 
-  detachEvents() {
+  detachEvents(): void {
     this._clearTimers();
+
     EventsEngine.off(this._editorInput(), `.${MASK_EVENT_NAMESPACE}`);
   }
 
-  clean() {
+  clean(): void {
     this._clearTimers();
   }
 }