Skip to content

Commit 4480ae7

Browse files
EugeniyKiyashkoEugeniyKiyashko
committed
improve typing and fix errors
1 parent 0b69b62 commit 4480ae7

File tree

7 files changed

+75
-66
lines changed

7 files changed

+75
-66
lines changed

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -323,8 +323,7 @@ class Accordion extends CollectionWidgetLiveUpdate<AccordionProperties, Item, Co
323323
skipAnimation: boolean,
324324
): DeferredObj<unknown> {
325325
const $title = $item.children(`.${ACCORDION_ITEM_TITLE_CLASS}`);
326-
// @ts-expect-error ts-error
327-
if (fx.isAnimating($item)) {
326+
if (fx.isAnimating($item.get(0))) {
328327
fx.stop($item.get(0), false);
329328
}
330329

‎packages/devextreme/js/__internal/ui/calendar/m_calendar.ts‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -629,10 +629,8 @@ class Calendar<
629629
}
630630

631631
_updateCurrentDate(date: Date): void {
632-
// @ts-expect-error ts-error
633-
if (fx.isAnimating(this._$viewsWrapper)) {
634-
// @ts-expect-error ts-error
635-
fx.stop(this._$viewsWrapper, true);
632+
if (fx.isAnimating(this._$viewsWrapper.get(0))) {
633+
fx.stop(this._$viewsWrapper.get(0), true);
636634
}
637635

638636
const min = this._getMinDate();

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -943,13 +943,14 @@ export class ListBase extends CollectionWidget<ListBaseProperties, Item> {
943943

944944
$group.toggleClass(LIST_GROUP_COLLAPSED_CLASS, toggle);
945945

946-
// @ts-expect-error ts-error
947-
if (fx.isAnimating($groupBody)) {
948-
fx.stop($groupBody.get(0), false);
946+
const groupBodyElement = $groupBody.get(0);
947+
948+
if (fx.isAnimating(groupBodyElement)) {
949+
fx.stop(groupBodyElement, false);
949950
}
950951

951952
// eslint-disable-next-line @typescript-eslint/no-floating-promises
952-
fx.animate($groupBody.get(0), {
953+
fx.animate(groupBodyElement, {
953954
// @ts-expect-error fx.animate does not have proper typing
954955
type: 'custom',
955956
// @ts-expect-error fx.animate does not have proper typing

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

Lines changed: 54 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,15 @@ import { isDefined, isPlainObject } from '@js/core/utils/type';
2727
import { hasWindow } from '@js/core/utils/window';
2828
import type { DxEvent } from '@js/events';
2929
import type { ClickEvent } from '@js/ui/button';
30-
import CollectionWidget from '@js/ui/collection/ui.collection_widget.edit';
3130
import type { Item, Properties } from '@js/ui/gallery';
3231
import type { OptionChanged } from '@ts/core/widget/types';
3332
import type { SupportedKeys, WidgetProperties } from '@ts/core/widget/widget';
3433
import Widget from '@ts/core/widget/widget';
3534
import type { SwipeEndEvent, SwipeStartEvent, SwipeUpdateEvent } from '@ts/events/m_swipe';
3635
import type { CollectionWidgetEditProperties } from '@ts/ui/collection/collection_widget.edit';
36+
import CollectionWidget from '@ts/ui/collection/collection_widget.edit';
37+
38+
import type { CollectionItemKey } from './collection/collection_widget.base';
3739

3840
const GALLERY_CLASS = 'dx-gallery';
3941
const GALLERY_INDICATOR_VISIBLE_CLASS = 'dx-gallery-indicator-visible';
@@ -60,9 +62,8 @@ const GALLERY_ITEM_DATA_KEY = 'dxGalleryItemData';
6062

6163
const MAX_CALC_ERROR = 1;
6264

63-
export interface GalleryNavButtonProperties extends WidgetProperties {
65+
export interface GalleryNavButtonProperties extends WidgetProperties<GalleryNavButton> {
6466
direction?: string;
65-
6667
onClick?: ((e: ClickEvent) => void) | null;
6768
}
6869

@@ -121,7 +122,9 @@ export interface GalleryProperties extends Properties<Item>, Omit<
121122
selectionMode?: SingleOrMultiple;
122123
}
123124

124-
class Gallery extends CollectionWidget<GalleryProperties> {
125+
class Gallery extends CollectionWidget<GalleryProperties, Item, CollectionItemKey> {
126+
private static _wasAnyItemTemplateRendered?: boolean | null = false;
127+
125128
_deferredAnimate?: DeferredObj<unknown>;
126129

127130
_needLongMove?: boolean;
@@ -141,8 +144,6 @@ class Gallery extends CollectionWidget<GalleryProperties> {
141144

142145
_cacheElementWidth?: number;
143146

144-
_wasAnyItemTemplateRendered?: boolean | null;
145-
146147
_prevNavButton?: dxElementWrapper;
147148

148149
_nextNavButton?: dxElementWrapper;
@@ -164,15 +165,15 @@ class Gallery extends CollectionWidget<GalleryProperties> {
164165
showNavButtons: false,
165166
wrapAround: false,
166167
stretchImages: false,
167-
_itemAttributes: {
168-
role: 'option',
169-
'aria-label': messageLocalization.format('dxGallery-itemName'),
170-
},
171168
loopItemFocus: false,
172169
selectOnFocus: true,
173170
selectionMode: 'single',
174171
selectionRequired: true,
175172
selectByClick: false,
173+
_itemAttributes: {
174+
role: 'option',
175+
'aria-label': messageLocalization.format('dxGallery-itemName'),
176+
},
176177
};
177178
}
178179

@@ -190,12 +191,6 @@ class Gallery extends CollectionWidget<GalleryProperties> {
190191
];
191192
}
192193

193-
ctor(element: Element, options: Properties): void {
194-
this._wasAnyItemTemplateRendered = false;
195-
196-
super.ctor(element, options);
197-
}
198-
199194
_init(): void {
200195
super._init();
201196

@@ -385,8 +380,8 @@ class Gallery extends CollectionWidget<GalleryProperties> {
385380

386381
_onItemTemplateRendered() {
387382
return (): void => {
388-
if (!this._wasAnyItemTemplateRendered) {
389-
this._wasAnyItemTemplateRendered = true;
383+
if (!Gallery._wasAnyItemTemplateRendered) {
384+
Gallery._wasAnyItemTemplateRendered = true;
390385
triggerResizeEvent(this.$element()); // NOTE: T1132935
391386
}
392387
};
@@ -460,9 +455,10 @@ class Gallery extends CollectionWidget<GalleryProperties> {
460455
if (startIndex !== undefined) {
461456
$items = $items.slice(startIndex);
462457
}
463-
// @ts-expect-error ts-error
464-
$items.each((index: number) => {
465-
setOuterWidth($($items[index]), `${itemWidth * 100}%`);
458+
459+
$items.each((_index: number, element: Element): boolean => {
460+
setOuterWidth($(element), `${itemWidth * 100}%`);
461+
return true;
466462
});
467463
}
468464

@@ -477,8 +473,8 @@ class Gallery extends CollectionWidget<GalleryProperties> {
477473
const freeSpace = this._itemFreeSpace();
478474
const isGapBetweenImages = !!freeSpace;
479475
const side = rtlEnabled ? 'Right' : 'Left';
480-
// @ts-expect-error ts-error
481-
this._itemElements().each((index: number, item: Element): void => {
476+
477+
this._itemElements().each((index: number, item: Element): boolean => {
482478
let realIndex = index;
483479
const isLoopItem = $(item).hasClass(GALLERY_LOOP_ITEM_CLASS);
484480

@@ -490,14 +486,15 @@ class Gallery extends CollectionWidget<GalleryProperties> {
490486
if (isGapBetweenImages) {
491487
$(item).css(`margin${side}`, `${freeSpace * 100}%`);
492488
}
493-
return;
489+
return true;
494490
}
495491

496492
const itemPosition = itemWidth * (realIndex + offsetRatio)
497493
+ freeSpace * (realIndex + 1 - offsetRatio);
498494
const property = isLoopItem ? side.toLowerCase() : `margin${side}`;
499495

500496
$(item).css(property, `${itemPosition * 100}%`);
497+
return true;
501498
});
502499

503500
this._relocateItems(selectedIndex, selectedIndex, true);
@@ -679,13 +676,13 @@ class Gallery extends CollectionWidget<GalleryProperties> {
679676
const $indicatorItems = this._$indicator?.find(GALLERY_INDICATOR_ITEM_SELECTOR) ?? $();
680677

681678
if ($indicatorItems.length) {
682-
// @ts-expect-error ts-error
683-
$indicatorItems.each((index: number, element: Element): void => {
679+
$indicatorItems.each((index: number, element: Element): boolean => {
684680
if (clickEnabled) {
685681
this._attachIndicatorClickHandler($(element), index);
686682
} else {
687683
this._detachIndicatorClickHandler($(element));
688684
}
685+
return true;
689686
});
690687
}
691688
}
@@ -716,11 +713,11 @@ class Gallery extends CollectionWidget<GalleryProperties> {
716713
return;
717714
}
718715

719-
// @ts-expect-error ts-error
720-
this._itemElements().each((index: number, item: Element): void => {
716+
this._itemElements().each((index: number, item: Element): boolean => {
721717
if (selectedIndex !== index) {
722718
$(item).find(ITEM_CONTENT_SELECTOR).addClass(GALLERY_INVISIBLE_ITEM_CLASS);
723719
}
720+
return true;
724721
});
725722
}
726723

@@ -755,9 +752,18 @@ class Gallery extends CollectionWidget<GalleryProperties> {
755752

756753
this._createComponent(rootElement, Swipeable, {
757754
disabled: !!disabled || !swipeEnabled,
758-
onStart: this._swipeStartHandler.bind(this),
759-
onUpdated: this._swipeUpdateHandler.bind(this),
760-
onEnd: this._swipeEndHandler.bind(this),
755+
onStart: (e) => {
756+
const { event } = e;
757+
this._swipeStartHandler(event);
758+
},
759+
onUpdated: (e) => {
760+
const { event } = e;
761+
this._swipeUpdateHandler(event);
762+
},
763+
onEnd: (e) => {
764+
const { event } = e;
765+
this._swipeEndHandler(event);
766+
},
761767
// @ts-expect-error ts-error
762768
itemSizeFunc: this._elementWidth.bind(this),
763769
});
@@ -987,7 +993,7 @@ class Gallery extends CollectionWidget<GalleryProperties> {
987993
delete this._cacheElementWidth;
988994
}
989995

990-
_swipeStartHandler(e: SwipeStartEvent): void {
996+
_swipeStartHandler(event: SwipeStartEvent): void {
991997
this._releaseInvisibleItems();
992998

993999
this._clearCacheWidth();
@@ -996,7 +1002,7 @@ class Gallery extends CollectionWidget<GalleryProperties> {
9961002
const itemsCount = this._itemsCount();
9971003

9981004
if (!itemsCount) {
999-
e.event.cancel = true;
1005+
event.cancel = true;
10001006
return;
10011007
}
10021008

@@ -1009,21 +1015,21 @@ class Gallery extends CollectionWidget<GalleryProperties> {
10091015
const startOffset = itemsCount - selectedIndex - this._itemsPerPage();
10101016
const endOffset = selectedIndex;
10111017

1012-
e.event.maxLeftOffset = rtlEnabled ? endOffset : startOffset;
1013-
e.event.maxRightOffset = rtlEnabled ? startOffset : endOffset;
1018+
event.maxLeftOffset = rtlEnabled ? endOffset : startOffset;
1019+
event.maxRightOffset = rtlEnabled ? startOffset : endOffset;
10141020
}
10151021
}
10161022

10171023
_stopItemAnimations(): void {
10181024
fx.stop(this._$container.get(0), true);
10191025
}
10201026

1021-
_swipeUpdateHandler(e: SwipeUpdateEvent): void {
1027+
_swipeUpdateHandler(event: SwipeUpdateEvent): void {
10221028
const { selectedIndex = 0, wrapAround } = this.option();
10231029

10241030
const wrapAroundRatio = wrapAround ? 1 : 0;
10251031
const itemsPerPage = this._itemsPerPage() + wrapAroundRatio;
1026-
const offset = this._offsetDirection() * e.event.offset * itemsPerPage - selectedIndex;
1032+
const offset = this._offsetDirection() * event.offset * itemsPerPage - selectedIndex;
10271033

10281034
if (offset < 0) {
10291035
this._loadNextPageIfNeeded(Math.ceil(Math.abs(offset)));
@@ -1033,8 +1039,8 @@ class Gallery extends CollectionWidget<GalleryProperties> {
10331039
this._renderContainerPosition(offset);
10341040
}
10351041

1036-
_swipeEndHandler(e: SwipeEndEvent): void {
1037-
const targetOffset = e.event.targetOffset * this._offsetDirection() * this._itemsPerPage();
1042+
_swipeEndHandler(event: SwipeEndEvent): void {
1043+
const targetOffset = event.targetOffset * this._offsetDirection() * this._itemsPerPage();
10381044
const { selectedIndex = 0 } = this.option();
10391045
const newIndex = this._fitIndex(selectedIndex - targetOffset);
10401046
const paginatedIndex = this._fitPaginatedIndex(newIndex);
@@ -1099,7 +1105,7 @@ class Gallery extends CollectionWidget<GalleryProperties> {
10991105
}
11001106

11011107
_dispose(): void {
1102-
this._wasAnyItemTemplateRendered = null;
1108+
Gallery._wasAnyItemTemplateRendered = null;
11031109
clearTimeout(this._slideshowTimer);
11041110
super._dispose();
11051111
}
@@ -1133,17 +1139,15 @@ class Gallery extends CollectionWidget<GalleryProperties> {
11331139
}
11341140

11351141
_focusInHandler(e: DxEvent): void {
1136-
// @ts-expect-error ts-error
1137-
if (fx.isAnimating(this._$container) || this._userInteraction) {
1142+
if (fx.isAnimating(this._$container.get(0)) || this._userInteraction) {
11381143
return;
11391144
}
11401145

11411146
super._focusInHandler(e);
11421147
}
11431148

11441149
_focusOutHandler(e: DxEvent): void {
1145-
// @ts-expect-error ts-error
1146-
if (fx.isAnimating(this._$container) || this._userInteraction) {
1150+
if (fx.isAnimating(this._$container.get(0)) || this._userInteraction) {
11471151
return;
11481152
}
11491153

@@ -1199,7 +1203,9 @@ class Gallery extends CollectionWidget<GalleryProperties> {
11991203
}
12001204

12011205
_optionChanged(args: OptionChanged<Properties>): void {
1202-
switch (args.name) {
1206+
const { name, value } = args;
1207+
1208+
switch (name) {
12031209
case 'width':
12041210
case 'initialItemWidth':
12051211
super._optionChanged(args);
@@ -1211,8 +1217,8 @@ class Gallery extends CollectionWidget<GalleryProperties> {
12111217
case 'animationEnabled':
12121218
break;
12131219
case 'loop':
1214-
this.$element().toggleClass(GALLERY_LOOP_CLASS, args.value);
1215-
this.option('loopItemFocus', args.value);
1220+
this.$element().toggleClass(GALLERY_LOOP_CLASS, value);
1221+
this.option('loopItemFocus', value);
12161222

12171223
if (hasWindow()) {
12181224
this._cloneDuplicateItems();
@@ -1241,7 +1247,7 @@ class Gallery extends CollectionWidget<GalleryProperties> {
12411247
this._renderUserInteraction();
12421248
break;
12431249
case 'indicatorEnabled':
1244-
this._toggleIndicatorInteraction(args.value);
1250+
this._toggleIndicatorInteraction(value);
12451251
break;
12461252
default:
12471253
super._optionChanged(args);

‎packages/devextreme/js/__internal/ui/toolbar/internal/toolbar.menu.ts‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import '@js/ui/popup/ui.popup';
2-
31
import devices from '@js/core/devices';
42
import type { DefaultOptionsRule } from '@js/core/options/utils';
53
import type { dxElementWrapper } from '@js/core/renderer';
@@ -12,14 +10,14 @@ import type { DxEvent } from '@js/events';
1210
import type { ClickEvent, Properties as ButtonProperties } from '@js/ui/button';
1311
import type { Item as ListItem, ItemClickEvent } from '@js/ui/list';
1412
import type { dxPopupAnimation } from '@js/ui/popup';
15-
import type Popup from '@js/ui/popup';
1613
import { current, isFluent, isMaterialBased } from '@js/ui/themes';
1714
import type { Item } from '@js/ui/toolbar';
1815
import type { OptionChanged } from '@ts/core/widget/types';
1916
import type { WidgetProperties } from '@ts/core/widget/widget';
2017
import Widget from '@ts/core/widget/widget';
2118
import Button from '@ts/ui/button/wrapper';
2219
import type { ListBase } from '@ts/ui/list/list.base';
20+
import Popup from '@ts/ui/popup/m_popup';
2321
import ToolbarMenuList from '@ts/ui/toolbar/internal/toolbar.menu.list';
2422
import { toggleItemFocusableElementTabIndex } from '@ts/ui/toolbar/toolbar.utils';
2523

@@ -236,8 +234,10 @@ export default class DropDownMenu extends Widget<DropDownMenuProperties> {
236234
this._$popup = $('<div>').appendTo(this.$element());
237235
const { rtlEnabled, container, animation } = this.option();
238236

239-
this._popup = this._createComponent(this._$popup, 'dxPopup', {
240-
onInitialized({ component }) {
237+
this._popup = this._createComponent(this._$popup, Popup, {
238+
onInitialized(e) {
239+
const { component } = e;
240+
// @ts-expect-error
241241
component.$wrapper()
242242
.addClass(DROP_DOWN_MENU_POPUP_WRAPPER_CLASS)
243243
.addClass(DROP_DOWN_MENU_POPUP_CLASS);
@@ -246,12 +246,17 @@ export default class DropDownMenu extends Widget<DropDownMenuProperties> {
246246
preventScrollEvents: false,
247247
contentTemplate: (contentElement) => this._renderList(contentElement),
248248
_ignoreFunctionValueDeprecation: true,
249+
// @ts-expect-error
249250
maxHeight: () => this._getMaxHeight(),
250251
position: {
252+
// @ts-expect-error
251253
my: `top ${rtlEnabled ? 'left' : 'right'}`,
254+
// @ts-expect-error
252255
at: `bottom ${rtlEnabled ? 'left' : 'right'}`,
253256
collision: 'fit flip',
257+
// @ts-expect-error
254258
offset: { v: POPUP_VERTICAL_OFFSET },
259+
// @ts-expect-error
255260
of: this.$element(),
256261
},
257262
animation,

0 commit comments

Comments
 (0)