Skip to content

Commit 1db4aa1

Browse files
author
marker dao ®
committed
refactor(texteditor.base)
1 parent 9f9466c commit 1db4aa1

11 files changed

Lines changed: 83 additions & 48 deletions

File tree

‎packages/devextreme/js/__internal/ui/chat/message_box/chat_text_area.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -432,6 +432,10 @@ class ChatTextArea extends TextArea<Properties> {
432432
}
433433

434434
_renderFileUploader(): void {
435+
if (!this._$textEditorContainer) {
436+
return;
437+
}
438+
435439
this._$fileUploader = $('<div>')
436440
.addClass(CHAT_TEXT_AREA_ATTACHMENTS)
437441
.insertBefore(this._$textEditorContainer);

‎packages/devextreme/js/__internal/ui/color_box/m_color_box.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -317,6 +317,10 @@ class ColorBox extends DropDownEditor<ColorBoxProperties> {
317317
this.$element().wrapInner($('<div>').addClass(COLOR_BOX_INPUT_CONTAINER_CLASS));
318318
this._$colorBoxInputContainer = this.$element().children().eq(0);
319319

320+
if (!this._$textEditorInputContainer) {
321+
return;
322+
}
323+
320324
this._$colorResultPreview = $('<div>')
321325
.addClass(COLOR_BOX_COLOR_RESULT_PREVIEW_CLASS)
322326
.appendTo(this._$textEditorInputContainer);

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { extend } from '@js/core/utils/extend';
1212
import { inputType } from '@js/core/utils/support';
1313
import { isDate as isDateType, isNumeric, isString } from '@js/core/utils/type';
1414
import { getWindow, hasWindow } from '@js/core/utils/window';
15-
import type { InteractionEvent } from '@js/events';
15+
import type { DxEvent, InteractionEvent } from '@js/events';
1616
import type {
1717
DateLike,
1818
DatePickerType,
@@ -467,7 +467,7 @@ class DateBox extends DropDownEditor<DateBoxBaseProperties> {
467467
}
468468
}
469469

470-
_clearValueHandler(e: ValueChangedEvent & { stopPropagation: () => void }): void {
470+
_clearValueHandler(e: ValueChangedEvent & DxEvent): void {
471471
this.option('text', '');
472472
super._clearValueHandler(e);
473473
}

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

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -445,21 +445,28 @@ class DropDownEditor<
445445
return promise.always(this._renderField.bind(this));
446446
}
447447

448-
_getButtonsContainer(): dxElementWrapper {
448+
_getButtonsContainer(): dxElementWrapper | null | undefined {
449449
const fieldTemplate = this._getFieldTemplate();
450+
450451
return fieldTemplate ? this._$container : this._$textEditorContainer;
451452
}
452453

453454
_renderBeforeFieldAddon(): void {
454-
if (!this._$beforeFieldAddon) {
455+
if (
456+
!this._$beforeFieldAddon
457+
&& this._$textEditorContainer
458+
) {
455459
this._$beforeFieldAddon = $('<div>')
456460
.addClass(DROP_DOWN_EDITOR_BEFORE_FIELD_ADDON)
457461
.insertBefore(this._$textEditorContainer);
458462
}
459463
}
460464

461465
_renderAfterFieldAddon(): void {
462-
if (!this._$afterFieldAddon) {
466+
if (
467+
!this._$afterFieldAddon
468+
&& this._$textEditorContainer
469+
) {
463470
this._$afterFieldAddon = $('<div>')
464471
.addClass(DROP_DOWN_EDITOR_AFTER_FIELD_ADDON)
465472
.insertAfter(this._$textEditorContainer);
@@ -479,6 +486,7 @@ class DropDownEditor<
479486

480487
_renderTemplateWrapper(): void {
481488
const fieldTemplate = this._getFieldTemplate();
489+
482490
if (!fieldTemplate) {
483491
return;
484492
}
@@ -495,10 +503,10 @@ class DropDownEditor<
495503
this._detachKeyboardEvents();
496504
this._detachFocusEvents();
497505

498-
this._$textEditorContainer.remove();
506+
this._$textEditorContainer?.remove();
499507

500508
const $newTemplateWrapper = createTemplateWrapperElement();
501-
this._$templateWrapper!.replaceWith($newTemplateWrapper);
509+
this._$templateWrapper?.replaceWith($newTemplateWrapper);
502510
this._$templateWrapper = $newTemplateWrapper;
503511

504512
const currentRenderContext = Symbol('renderContext');

‎packages/devextreme/js/__internal/ui/m_select_box.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -716,7 +716,7 @@ class SelectBox<
716716
return super._isFocused() && $(activeElement).closest(this._input()).length > 0;
717717
}
718718

719-
_getValueChangeEventOptionName(): string {
719+
_getValueChangeEventOptionName(): keyof TProperties {
720720
return 'customItemCreateEvent';
721721
}
722722

‎packages/devextreme/js/__internal/ui/m_tag_box.ts‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -217,9 +217,12 @@ class TagBox<
217217
return this._getValue().length === 0;
218218
}
219219

220-
_updateTagsContainer($element): void {
221-
this._$tagsContainer = $element
222-
.addClass(TAGBOX_TAG_CONTAINER_CLASS);
220+
_updateTagsContainer($element: dxElementWrapper | null | undefined): void {
221+
if (!$element) {
222+
return;
223+
}
224+
225+
this._$tagsContainer = $element.addClass(TAGBOX_TAG_CONTAINER_CLASS);
223226
}
224227

225228
// eslint-disable-next-line class-methods-use-this

‎packages/devextreme/js/__internal/ui/m_text_area.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -160,11 +160,11 @@ class TextArea<
160160
_getHeightDifference($input: dxElementWrapper): number {
161161
const verticalElementOffset = getVerticalOffsets(this.$element().get(0), false);
162162
const verticalEditorContainerOffset = getVerticalOffsets(
163-
this._$textEditorContainer.get(0),
163+
this._$textEditorContainer?.get(0),
164164
false,
165165
);
166166
const verticalInputContainerOffsets = getVerticalOffsets(
167-
this._$textEditorInputContainer.get(0),
167+
this._$textEditorInputContainer?.get(0),
168168
true,
169169
);
170170
const inputMargin = getElementBoxParams('height', getWindow().getComputedStyle($input.get(0))).margin;

‎packages/devextreme/js/__internal/ui/text_box/m_text_editor.base.ts‎

Lines changed: 42 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -103,9 +103,9 @@ class TextEditorBase<
103103
> extends Editor<TProperties> {
104104
_showValidMark?: boolean;
105105

106-
_$textEditorContainer!: dxElementWrapper;
106+
_$textEditorContainer?: dxElementWrapper | null;
107107

108-
_$textEditorInputContainer!: dxElementWrapper;
108+
_$textEditorInputContainer?: dxElementWrapper | null;
109109

110110
_pendingIndicator?: LoadIndicator | null;
111111

@@ -172,8 +172,8 @@ class TextEditorBase<
172172
labelMode: 'static',
173173
labelMark: '',
174174
// eslint-disable-next-line @typescript-eslint/no-explicit-any
175-
displayValueFormatter(value: string | any[]): string | any[] {
176-
// @ts-expect-error Comparison of boolean and any[]
175+
displayValueFormatter(value: string | any[]): string {
176+
// @ts-expect-error Comparison of boolean and any[], any is not string
177177
return isDefined(value) && value !== false ? value : '';
178178
},
179179
};
@@ -263,7 +263,6 @@ class TextEditorBase<
263263

264264
super._initMarkup();
265265

266-
// eslint-disable-next-line @typescript-eslint/no-floating-promises
267266
this._renderValue();
268267
this._renderLabel();
269268
}
@@ -286,19 +285,27 @@ class TextEditorBase<
286285
this._$textEditorInputContainer = $('<div>')
287286
.addClass(TEXTEDITOR_INPUT_CONTAINER_CLASS)
288287
.appendTo(this._$textEditorContainer);
288+
289289
this._$textEditorInputContainer.append(this._createInput());
290290
}
291291

292-
_getInputContainer(): dxElementWrapper {
292+
_getInputContainer(): dxElementWrapper | null | undefined {
293293
return this._$textEditorInputContainer;
294294
}
295295

296296
_renderPendingIndicator(): void {
297297
this.$element().addClass(TEXTEDITOR_VALIDATION_PENDING_CLASS);
298+
298299
const $inputContainer = this._getInputContainer();
300+
301+
if (!$inputContainer) {
302+
return;
303+
}
304+
299305
const $indicatorElement = $('<div>')
300306
.addClass(TEXTEDITOR_PENDING_INDICATOR_CLASS)
301307
.appendTo($inputContainer);
308+
302309
this._pendingIndicator = this._createComponent($indicatorElement, LoadIndicator, {});
303310
}
304311

@@ -340,7 +347,7 @@ class TextEditorBase<
340347
this._toggleValidMark();
341348
}
342349

343-
_getButtonsContainer(): dxElementWrapper {
350+
_getButtonsContainer(): dxElementWrapper | null | undefined {
344351
return this._$textEditorContainer;
345352
}
346353

@@ -349,6 +356,10 @@ class TextEditorBase<
349356

350357
const $buttonsContainer = this._getButtonsContainer();
351358

359+
if (!$buttonsContainer) {
360+
return;
361+
}
362+
352363
this._$beforeButtonsContainer = this._buttonCollection.renderBeforeButtons(
353364
buttons,
354365
$buttonsContainer,
@@ -375,10 +386,7 @@ class TextEditorBase<
375386

376387
this._$beforeButtonsContainer = null;
377388
this._$afterButtonsContainer = null;
378-
// TODO
379-
// @ts-expect-error _$textEditorContainer can be null and undefined
380389
this._$textEditorContainer = null;
381-
// @ts-expect-error _$textEditorInputContainer can be null and undefined
382390
this._$textEditorInputContainer = null;
383391
this._$placeholder = null;
384392
}
@@ -457,10 +465,13 @@ class TextEditorBase<
457465
});
458466
}
459467

460-
_renderValue(): Promise<unknown> {
461-
const renderInputPromise = this._renderInputValue();
468+
_renderValue(): DeferredObj<unknown> {
469+
const renderInputDeferred = this._renderInputValue();
470+
471+
// @ts-expect-error DeferredObj typification
472+
const renderInputPromise = renderInputDeferred.promise() as DeferredObj<unknown>;
462473

463-
return renderInputPromise.promise();
474+
return renderInputPromise;
464475
}
465476

466477
_renderInputValue(value?: TProperties['value']): DeferredObj<unknown> {
@@ -696,7 +707,7 @@ class TextEditorBase<
696707
return this._$placeholder ?? $();
697708
}
698709

699-
_clearValueHandler(e: ValueChangedEvent & { stopPropagation: () => void }): void {
710+
_clearValueHandler(e: ValueChangedEvent & DxEvent): void {
700711
const $input = this._input();
701712

702713
e.stopPropagation();
@@ -772,7 +783,7 @@ class TextEditorBase<
772783
}
773784

774785
// eslint-disable-next-line class-methods-use-this
775-
_getValueChangeEventOptionName(): keyof TextEditorBaseProperties {
786+
_getValueChangeEventOptionName(): keyof TProperties {
776787
return 'valueChangeEvent';
777788
}
778789

@@ -781,7 +792,7 @@ class TextEditorBase<
781792
const { [valueChangeEventOptionName]: actionName } = this.option();
782793

783794
const keyPressEvent = addNamespace(this._renderValueEventName(), `${this.NAME}TextChange`);
784-
const valueChangeEvent = addNamespace(actionName, `${this.NAME}ValueChange`);
795+
const valueChangeEvent = addNamespace(actionName as string, `${this.NAME}ValueChange`);
785796
const keyDownEvent = addNamespace('keydown', `${this.NAME}TextChange`);
786797

787798
const $input = this._input();
@@ -821,14 +832,14 @@ class TextEditorBase<
821832
return element === this._input().get(0);
822833
}
823834

824-
_preventNestedFocusEvent(event: DxEvent & {
825-
relatedTarget: Element | dxElementWrapper;
826-
}): boolean {
835+
_preventNestedFocusEvent(event: DxEvent): boolean {
827836
if (event.isDefaultPrevented()) {
828837
return true;
829838
}
830839

831-
let shouldPrevent = this._isNestedTarget(event.relatedTarget);
840+
let shouldPrevent = this._isNestedTarget(
841+
(event as DxEvent & { relatedTarget: Element | dxElementWrapper; }).relatedTarget,
842+
);
832843

833844
if (event.type === 'focusin') {
834845
shouldPrevent = shouldPrevent
@@ -862,9 +873,7 @@ class TextEditorBase<
862873
super._focusInHandler(event);
863874
}
864875

865-
_focusOutHandler(event: DxEvent & {
866-
relatedTarget: Element | dxElementWrapper;
867-
}): void {
876+
_focusOutHandler(event: DxEvent): void {
868877
this._preventNestedFocusEvent(event);
869878

870879
super._focusOutHandler(event);
@@ -923,7 +932,7 @@ class TextEditorBase<
923932

924933
_updateValue(): void {
925934
this._options.silent('text', null);
926-
// eslint-disable-next-line @typescript-eslint/no-floating-promises
935+
927936
this._renderValue();
928937
}
929938

@@ -1093,9 +1102,10 @@ class TextEditorBase<
10931102
}
10941103

10951104
const defaultOptions = this._getDefaultOptions();
1105+
10961106
if (this.option('value') === defaultOptions.value) {
10971107
this._options.silent('text', '');
1098-
// eslint-disable-next-line @typescript-eslint/no-floating-promises
1108+
10991109
this._renderValue();
11001110
} else {
11011111
this.option('value', defaultOptions.value);
@@ -1104,7 +1114,7 @@ class TextEditorBase<
11041114

11051115
_resetInputText(): void {
11061116
this._options.silent('text', this._initialValue);
1107-
// eslint-disable-next-line @typescript-eslint/no-floating-promises
1117+
11081118
this._renderValue();
11091119
}
11101120

@@ -1147,10 +1157,13 @@ class TextEditorBase<
11471157
eventHandler?: any | undefined,
11481158
): this {
11491159
const result = super.on(eventName, eventHandler);
1150-
const event = eventName.charAt(0).toUpperCase() + eventName.substr(1);
11511160

1152-
if (EVENTS_LIST.includes(event)) {
1153-
this._refreshEvents();
1161+
if (typeof eventName === 'string') {
1162+
const event = eventName.charAt(0).toUpperCase() + eventName.substr(1);
1163+
1164+
if (EVENTS_LIST.includes(event)) {
1165+
this._refreshEvents();
1166+
}
11541167
}
11551168

11561169
return result;

‎packages/devextreme/js/__internal/ui/text_box/text_editor.clear.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,6 @@ export default class ClearButton extends TextEditorButton {
6262
}
6363

6464
// TODO: get rid of it
65-
6665
_legacyRender($editor: dxElementWrapper, isVisible: boolean): void {
6766
$editor.toggleClass(TEXTEDITOR_SHOW_CLEAR_BUTTON_CLASS, isVisible);
6867
}

‎packages/devextreme/js/__internal/ui/text_box/text_editor.mask.ts‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
import messageLocalization from '@js/common/core/localization/message';
77
import type { dxElementWrapper } from '@js/core/renderer';
88
import $ from '@js/core/renderer';
9+
import type { DeferredObj } from '@js/core/utils/deferred';
910
import { extend } from '@js/core/utils/extend';
1011
import { isEmpty } from '@js/core/utils/string';
1112
import { isDefined } from '@js/core/utils/type';
@@ -367,7 +368,6 @@ class TextEditorMask<
367368
end: currentCaret?.end ?? 0,
368369
};
369370

370-
// eslint-disable-next-line @typescript-eslint/no-floating-promises
371371
this._renderValue();
372372
this._caret(finalCaret);
373373
}
@@ -400,7 +400,7 @@ class TextEditorMask<
400400
}
401401
}
402402

403-
_renderValue(): Promise<unknown> {
403+
_renderValue(): DeferredObj<unknown> {
404404
if (this._maskRulesChain) {
405405
this._showMaskPlaceholder();
406406

@@ -701,7 +701,6 @@ class TextEditorMask<
701701
editor: this,
702702
});
703703

704-
// eslint-disable-next-line @typescript-eslint/no-floating-promises
705704
this._renderValue();
706705
}
707706

@@ -729,7 +728,7 @@ class TextEditorMask<
729728
break;
730729
case 'showMaskMode':
731730
this.option({ text: '' });
732-
// eslint-disable-next-line @typescript-eslint/no-floating-promises
731+
733732
this._renderValue();
734733
break;
735734
default:

0 commit comments

Comments
 (0)